Skip to content

Commit fb333b9

Browse files
kevinxhkevinxh
committed
1CC UX fixes (W-21240479)
- Update "Edit" labels to "Change" on contact info, payment, and shipping options toggle cards - Fix billing address display logic in payment summary - Update translations (en-US, en-GB, en-XA)
1 parent 4401444 commit fb333b9

File tree

10 files changed

+91
-40
lines changed

10 files changed

+91
-40
lines changed

‎packages/template-retail-react-app/app/pages/checkout-one-click/index.test.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -751,11 +751,6 @@ describe('Checkout One Click', () => {
751751
})
752752
).toBeInTheDocument()
753753

754-
// Billing address should default to the shipping address
755-
756-
// Should display billing address that matches shipping address
757-
expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
758-
759754
// Edit billing address
760755
// Toggle to edit billing address (not via same-as-shipping label in this flow)
761756
// Click the checkbox by role if present; otherwise skip
@@ -1208,10 +1203,6 @@ describe('Checkout One Click', () => {
12081203
})
12091204
).toBeInTheDocument()
12101205

1211-
// Verify billing address is displayed (it shows John Smith from the mock)
1212-
expect(step3Content.getByText('John Smith')).toBeInTheDocument()
1213-
expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
1214-
12151206
// Verify UserRegistration component is hidden for registered customers
12161207
expect(screen.queryByTestId('sf-user-registration-content')).not.toBeInTheDocument()
12171208

@@ -2650,7 +2641,7 @@ describe('Checkout One Click', () => {
26502641

26512642
// Click "Edit Payment Info" button
26522643
const editPaymentButton = screen.getByRole('button', {
2653-
name: /toggle_card.action.editPaymentInfo|Edit Payment Info/i
2644+
name: /toggle_card.action.changePaymentInfo|Change/i
26542645
})
26552646
await user.click(editPaymentButton)
26562647

‎packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.jsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,9 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
512512
}
513513
}
514514

515+
const customerEmail = customer?.email || form.getValues('email')
516+
const customerPhone = customer?.phoneHome || form.getValues('phone')
517+
515518
return (
516519
<>
517520
<ToggleCard
@@ -535,8 +538,8 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
535538
id: 'checkout_contact_info.action.sign_out'
536539
})
537540
: formatMessage({
538-
defaultMessage: 'Edit',
539-
id: 'checkout_contact_info.action.edit'
541+
defaultMessage: 'Change',
542+
id: 'checkout_contact_info.action.change'
540543
})
541544
}
542545
>
@@ -666,18 +669,14 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
666669
</Container>
667670
</ToggleCardEdit>
668671

669-
{(customer?.email || form.getValues('email')) && (
672+
{customerEmail ? (
670673
<ToggleCardSummary>
671674
<Stack spacing={1}>
672-
<Text>{customer?.email || form.getValues('email')}</Text>
673-
{(customer?.phoneHome || form.getValues('phone')) && (
674-
<Text fontSize="sm" color="gray.600">
675-
{customer?.phoneHome || form.getValues('phone')}
676-
</Text>
677-
)}
675+
<Text>{customerEmail}</Text>
676+
{customerPhone && <Text>{customerPhone}</Text>}
678677
</Stack>
679678
</ToggleCardSummary>
680-
)}
679+
) : null}
681680
</ToggleCard>
682681

683682
{/* Sign Out Confirmation Dialog */}

‎packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.jsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -441,8 +441,8 @@ const Payment = ({
441441
disabled={appliedPayment == null}
442442
onEdit={handleEditPayment}
443443
editLabel={formatMessage({
444-
defaultMessage: 'Edit Payment Info',
445-
id: 'toggle_card.action.editPaymentInfo'
444+
defaultMessage: 'Change',
445+
id: 'toggle_card.action.changePaymentInfo'
446446
})}
447447
>
448448
<ToggleCardEdit>
@@ -580,18 +580,15 @@ const Payment = ({
580580

581581
<Divider borderColor="gray.100" />
582582

583-
{(selectedBillingAddress ||
584-
(effectiveBillingSameAsShipping && selectedShippingAddress)) && (
583+
{selectedBillingAddress && !effectiveBillingSameAsShipping && (
585584
<Stack spacing={2}>
586585
<Heading as="h3" fontSize="md">
587586
<FormattedMessage
588587
defaultMessage="Billing Address"
589588
id="checkout_payment.heading.billing_address"
590589
/>
591590
</Heading>
592-
<AddressDisplay
593-
address={selectedBillingAddress || selectedShippingAddress}
594-
/>
591+
<AddressDisplay address={selectedBillingAddress} />
595592
</Stack>
596593
)}
597594

‎packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1310,7 +1310,7 @@ describe('Payment Component', () => {
13101310
// Click Edit Payment Info to enter edit mode
13111311
const summary = screen.getAllByTestId('toggle-card-summary').pop()
13121312
const editButton = within(summary).getByRole('button', {
1313-
name: /toggle_card.action.editPaymentInfo|Edit Payment Info/i
1313+
name: /toggle_card.action.changePaymentInfo|Change/i
13141314
})
13151315
await user.click(editButton)
13161316

‎packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-shipping-options.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -266,8 +266,8 @@ export default function ShippingOptions() {
266266
}
267267
onEdit={() => goToStep(STEPS.SHIPPING_OPTIONS)}
268268
editLabel={formatMessage({
269-
defaultMessage: 'Edit Shipping Options',
270-
id: 'toggle_card.action.editShippingOptions'
269+
defaultMessage: 'Change',
270+
id: 'toggle_card.action.changeShippingOptions'
271271
})}
272272
>
273273
<ToggleCardEdit>

‎packages/template-retail-react-app/app/static/translations/compiled/en-GB.json‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1249,10 +1249,10 @@
12491249
"value": " with your confirmation number and receipt shortly."
12501250
}
12511251
],
1252-
"checkout_contact_info.action.edit": [
1252+
"checkout_contact_info.action.change": [
12531253
{
12541254
"type": 0,
1255-
"value": "Edit"
1255+
"value": "Change"
12561256
}
12571257
],
12581258
"checkout_contact_info.action.sign_out": [
@@ -4681,6 +4681,18 @@
46814681
"value": "Change"
46824682
}
46834683
],
4684+
"toggle_card.action.changePaymentInfo": [
4685+
{
4686+
"type": 0,
4687+
"value": "Change"
4688+
}
4689+
],
4690+
"toggle_card.action.changeShippingOptions": [
4691+
{
4692+
"type": 0,
4693+
"value": "Change"
4694+
}
4695+
],
46844696
"toggle_card.action.edit": [
46854697
{
46864698
"type": 0,

‎packages/template-retail-react-app/app/static/translations/compiled/en-US.json‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1249,10 +1249,10 @@
12491249
"value": " with your confirmation number and receipt shortly."
12501250
}
12511251
],
1252-
"checkout_contact_info.action.edit": [
1252+
"checkout_contact_info.action.change": [
12531253
{
12541254
"type": 0,
1255-
"value": "Edit"
1255+
"value": "Change"
12561256
}
12571257
],
12581258
"checkout_contact_info.action.sign_out": [
@@ -4681,6 +4681,18 @@
46814681
"value": "Change"
46824682
}
46834683
],
4684+
"toggle_card.action.changePaymentInfo": [
4685+
{
4686+
"type": 0,
4687+
"value": "Change"
4688+
}
4689+
],
4690+
"toggle_card.action.changeShippingOptions": [
4691+
{
4692+
"type": 0,
4693+
"value": "Change"
4694+
}
4695+
],
46844696
"toggle_card.action.edit": [
46854697
{
46864698
"type": 0,

‎packages/template-retail-react-app/app/static/translations/compiled/en-XA.json‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2473,14 +2473,14 @@
24732473
"value": "]"
24742474
}
24752475
],
2476-
"checkout_contact_info.action.edit": [
2476+
"checkout_contact_info.action.change": [
24772477
{
24782478
"type": 0,
24792479
"value": "["
24802480
},
24812481
{
24822482
"type": 0,
2483-
"value": "Ḗḓīŧ"
2483+
"value": "Ƈħȧȧƞɠḗḗ"
24842484
},
24852485
{
24862486
"type": 0,
@@ -9841,6 +9841,34 @@
98419841
"value": "]"
98429842
}
98439843
],
9844+
"toggle_card.action.changePaymentInfo": [
9845+
{
9846+
"type": 0,
9847+
"value": "["
9848+
},
9849+
{
9850+
"type": 0,
9851+
"value": "Ƈħȧȧƞɠḗḗ"
9852+
},
9853+
{
9854+
"type": 0,
9855+
"value": "]"
9856+
}
9857+
],
9858+
"toggle_card.action.changeShippingOptions": [
9859+
{
9860+
"type": 0,
9861+
"value": "["
9862+
},
9863+
{
9864+
"type": 0,
9865+
"value": "Ƈħȧȧƞɠḗḗ"
9866+
},
9867+
{
9868+
"type": 0,
9869+
"value": "]"
9870+
}
9871+
],
98449872
"toggle_card.action.edit": [
98459873
{
98469874
"type": 0,

‎packages/template-retail-react-app/translations/en-GB.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -460,8 +460,8 @@
460460
"checkout_confirmation.message.will_email_shortly": {
461461
"defaultMessage": "We will send an email to <b>{email}</b> with your confirmation number and receipt shortly."
462462
},
463-
"checkout_contact_info.action.edit": {
464-
"defaultMessage": "Edit"
463+
"checkout_contact_info.action.change": {
464+
"defaultMessage": "Change"
465465
},
466466
"checkout_contact_info.action.sign_out": {
467467
"defaultMessage": "Sign Out"
@@ -1949,6 +1949,12 @@
19491949
"toggle_card.action.change": {
19501950
"defaultMessage": "Change"
19511951
},
1952+
"toggle_card.action.changePaymentInfo": {
1953+
"defaultMessage": "Change"
1954+
},
1955+
"toggle_card.action.changeShippingOptions": {
1956+
"defaultMessage": "Change"
1957+
},
19521958
"toggle_card.action.edit": {
19531959
"defaultMessage": "Edit"
19541960
},

‎packages/template-retail-react-app/translations/en-US.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -460,8 +460,8 @@
460460
"checkout_confirmation.message.will_email_shortly": {
461461
"defaultMessage": "We will send an email to <b>{email}</b> with your confirmation number and receipt shortly."
462462
},
463-
"checkout_contact_info.action.edit": {
464-
"defaultMessage": "Edit"
463+
"checkout_contact_info.action.change": {
464+
"defaultMessage": "Change"
465465
},
466466
"checkout_contact_info.action.sign_out": {
467467
"defaultMessage": "Sign Out"
@@ -1949,6 +1949,12 @@
19491949
"toggle_card.action.change": {
19501950
"defaultMessage": "Change"
19511951
},
1952+
"toggle_card.action.changePaymentInfo": {
1953+
"defaultMessage": "Change"
1954+
},
1955+
"toggle_card.action.changeShippingOptions": {
1956+
"defaultMessage": "Change"
1957+
},
19521958
"toggle_card.action.edit": {
19531959
"defaultMessage": "Edit"
19541960
},

0 commit comments

Comments
 (0)