feat: Add addressLine2 and reorder address fields #729
Conversation
- Adds an optional `addressLine2` field to both sender and receiver address forms. - Updates Zod schemas, TypeScript types (implicitly via schema inference), and default form values to include `addressLine2`. - Modifies the UI in `BillFromSection.tsx` and `BillToSection.tsx` to include the new `addressLine2` input field. - Reorders the `zipCode` field to appear below the `city` field in both sender and receiver address forms for improved layout.
|
@google-labs-jules[bot] is attempting to deploy a commit to the al1abb-team Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes introduce a new optional "addressLine2" field to both sender and receiver address sections in the invoice form. The schemas and default values are updated to support this field, and the form layout is adjusted to include the new input for apartment or suite information, moving the zip code input further down. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InvoiceForm
participant Schema
participant Variables
User->>InvoiceForm: Fills in address fields (including addressLine2)
InvoiceForm->>Schema: Validates addressLine2 (optional)
InvoiceForm->>Variables: Uses default value for addressLine2 if not provided
InvoiceForm-->>User: Displays form with addressLine2 input and validation feedback
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
app/components/invoice/form/sections/BillFromSection.tsx (1)
57-60: Consistent implementation with receiver form.The addressLine2 field is properly implemented and maintains consistency with the BillToSection component. Please ensure the translation key
form.steps.fromAndTo.addressLine2exists across all locales (same verification needed as in BillToSection).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/components/invoice/form/sections/BillFromSection.tsx(1 hunks)app/components/invoice/form/sections/BillToSection.tsx(1 hunks)lib/schemas.ts(2 hunks)lib/variables.ts(2 hunks)
🔇 Additional comments (4)
lib/variables.ts (1)
123-123: LGTM! Clean addition of addressLine2 default values.The new
addressLine2field is properly added to both sender and receiver objects with appropriate empty string defaults, maintaining consistency across the form structure.Also applies to: 134-134
lib/schemas.ts (1)
92-92: LGTM! Proper schema extension using existing validators.The
addressLine2field is correctly added to both schemas using the existingstringOptionalvalidator, ensuring consistent validation behavior and proper TypeScript type inference.Also applies to: 104-104
app/components/invoice/form/sections/BillToSection.tsx (1)
67-71: Excellent reordering improvement.Moving the zipCode field after the city field follows standard address form conventions and improves the user experience by creating a more logical flow.
app/components/invoice/form/sections/BillFromSection.tsx (1)
66-70: Perfect consistency with receiver form.The zipCode field repositioning maintains symmetry between sender and receiver forms while following standard address form conventions.
| name="receiver.addressLine2" | ||
| label={_t("form.steps.fromAndTo.addressLine2")} | ||
| placeholder="Apartment, suite, etc. (Optional)" | ||
| /> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify translation key exists for addressLine2.
The new addressLine2 input field is well-implemented, but please ensure the translation key form.steps.fromAndTo.addressLine2 exists in all supported locales.
🏁 Script executed:
#!/bin/bash
# Description: Check if the addressLine2 translation key exists in translation files
# Expected: Find the addressLine2 key in locale files
# Search for addressLine2 in translation/locale files
fd -e json -e js -e ts | xargs rg -l "addressLine2|address.*line.*2" || echo "No translation files found with addressLine2"
# Also check for translation file patterns
fd "translation|locale|i18n" -t dLength of output: 172
🏁 Script executed:
#!/bin/bash
# Description: Verify existence of the addressLine2 translation key in locale JSON files
# Search in i18n/locales directory
rg -Rn '"addressLine2"' -g '*.json' i18n/locales || echo "❌ No translation for addressLine2 found in i18n/locales"
# Search in any locale folders under app/
rg -Rn '"addressLine2"' -g '*.json' app || echo "❌ No translation for addressLine2 found in app locale files"Length of output: 1152
🏁 Script executed:
#!/bin/bash
# Description: Correctly search for the full translation key in JSON, JS, and TS locale files
# Look for the exact key in all JSON, JS, and TS files under i18n/locales and app locale dirs
rg -F -n 'form.steps.fromAndTo.addressLine2' -g '*.{json,js,ts}' i18n/locales app || \
echo "❌ Translation key 'form.steps.fromAndTo.addressLine2' not found in locale files"Length of output: 256
Add missing translation key for addressLine2
The key form.steps.fromAndTo.addressLine2 isn’t defined in any locale files, so the placeholder won’t be translated. Please add it in all supported languages.
• Locale files under i18n/locales/**/*.json
• Locale folders in app/[locale]/**/*.json
Example entry to add in each JSON:
{
"form": {
"steps": {
"fromAndTo": {
"addressLine2": "Apartment, suite, etc. (Optional)"
}
}
}
}🤖 Prompt for AI Agents
In app/components/invoice/form/sections/BillToSection.tsx around lines 58 to 61,
the translation key form.steps.fromAndTo.addressLine2 used for the addressLine2
input label is missing in the locale JSON files. To fix this, add the key
form.steps.fromAndTo.addressLine2 with the value "Apartment, suite, etc.
(Optional)" to all supported locale JSON files under i18n/locales/**/*.json and
app/[locale]/**/*.json, ensuring consistent translations across languages.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
The PR causes UI problems with addressLine2 input. This is because of the fact that the translations for addressLine2 are missing 
|
2 participants
addressLine2field to both sender and receiver address forms.addressLine2.BillFromSection.tsxandBillToSection.tsxto include the newaddressLine2input field.zipCodefield to appear below thecityfield in both sender and receiver address forms for improved layout.Summary by CodeRabbit
New Features
Style