@W-21094171: Fix Resend Code for OTP modal

[dannyphan2000]

Try to register or login in Checkout with OTP by entering the email. An OTP code will be sent to the inbox. The user has the option to Resend Code.
Result: No OTP code is sent to the inbox. No additional call was made.
Expected: Another OTP code will be sent to the inbox.

Also fixed the OTP modal UI. And introduced a reset cooldown timer property on the component (default to 30 seconds)

Description

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• (change1)

How to Test-Drive This PR

• (step1)

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[cc-prodsec]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[vmarta]

Aside: could you update the isomorphic sdk version in commerce-sdk-react to v5.0.0?

pwa-kit/packages/commerce-sdk-react/package.json

Line 43 in 3533930

"commerce-sdk-isomorphic": "5.0.0-preview.1",

The v5 was released earlier today. Thanks.

@vmarta this shows as 5.0.0-dev on develop. I was expecting to see 5.0.0. Is that a correct expectation?

[vmarta]

The PR looks good overall. I think the biggest concern is what the UI looks like after all the changes, in particular with the code verification. Let me know if there's a link where we can see the UI in action.

https://ecom-1cc-poc-feb-2026.sfdc-8tgtt5-ecom1.exp-delivery.com/

[vmarta]

If we're no longer showing this verification message, what kind of UI feedback does the users see during this time?

[syadupathi-sf]

Please see https://ecom-1cc-poc-feb-2026.sfdc-8tgtt5-ecom1.exp-delivery.com/ - there is a cooldown timer once the OTP is sent out.

[vmarta]

@syadupathi-sf the cooldown timer is not a good substitute for the code verification. That timer is meant to limit the use of the Resend Code button (which needs to be disabled too if the timer is still on).

The UI we had previously is clear that some verification is happening after I enter the OTP. So this time around I was expecting to see something similar:

1. Entering the OTP
2. After I enter the last digit, the app automatically submits the OTP for me (without my clicking a button)
3. Because of the auto-submit, it is crucial to show some UI feedback to indicate what's going on, which is the app verifying the submitted OTP

However, what we see is the Checkout as a Guest button highlighted in blue instead. And there is no verification message.

Try the OTP flow again with slower internet access to simulate spotty network, and the effect is more clearly seen:

Arc.2026-02-04.at.10.06.10.mp4

[syadupathi-sf]

Resend Code button (which needs to be disabled too if the timer is still on).

UX (Simran Bansal) recommended to not disable the Resend code button and instead add a cool down timer. The Resend Code button doesn't function until the timer expires which is UX's desired behavior.

[syadupathi-sf]

@vmarta here's the list of UX recommendation for the OTP modal. The implementation is based on the suggested UX.

• Action buttons should be enabled/visible at all time
• The countdown appears with 30 seconds cooldown by default. Resend button should still be enabled/visible, but clicking it during cooldown will not trigger/send OTP email. After cooldown is complete, then hitting Resend Button will send OTP email.
• Entering invalid code will also result in red OTP boxes (with red error message underneath)
• No more “verifying code” message. During verification, buttons are visible/enabled but does not do any actions.

[vmarta]

@syadupathi-sf thanks for sharing the list of UX recommendations. All right to the action buttons being enabled all the time.

No more “verifying code” message. During verification, buttons are visible/enabled but does not do any actions.

But I still think that no verification message is a regression. Have we considered what happens if the verification step got stuck (spotty network did not receive a response)? Then there is no feedback at all (no loading spinner or text message) that indicate what the app is trying to do at that time.

Yes, our UX designer gave a list of things for us engineers to implement. But we can think of this as a design feedback. Something is missing that's perhaps not considered in the initial design phase.

[syadupathi-sf]

@vmarta I have reached out to our UX designer with these concerns. Thanks for the feedback.

[syadupathi-sf]

Ux prefers a spinner/loader instead of the "Verifying code" text since it would be easier to visually digest. We have created W-21190081 to address it.

[vmarta]

Meanwhile, I'll +1 this PR.