Swap Do Later and Connect button positions in payments onboarding (#1714)

## Summary

Swaps the positions of "Do Later" and "Connect" buttons in the payments
setup onboarding step for US users. "Connect" is now `primaryAction`
(filled, left) and "Do Later" is `secondaryAction` (outline, right).

For non-US users (where "Connect" isn't shown), "Do Later" remains the
filled `primaryAction` — preserving the original visual hierarchy.

Link to Devin session:
https://app.devin.ai/sessions/a5ff1d4533b54cbc9e1ed06b08334604
Requested by: @Developing-Gamer

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved the payment setup step’s action button behavior for a more
consistent experience.
* For US-based setup, **Connect** is now the main action (with matching
loading state).
  * For non-US countries, the main action is omitted.
* **Do Later** is available as the secondary action (with matching
loading state).
* Action buttons are disabled during saving or when a payment setup
action is in progress.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: armaan <armaan@stack-auth.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Armaan Jain 2026-07-02 11:44:55 -07:00 committed by GitHub
parent 976aaffd56
commit 9b0361a1d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -899,7 +899,16 @@ export function ProjectOnboardingWizard(props: {
onBack={handleBack}
disabled={saving}
actionsLayout="inline"
primaryAction={
primaryAction={selectedPaymentsCountry === "US" ? (
<DesignButton
className="rounded-full px-6"
disabled={saving || paymentsSetupAction != null}
loading={paymentsSetupAction === "connect"}
onClick={() => runAsynchronouslyWithAlert(connectPaymentsSetup)}
>
Connect
</DesignButton>
) : (
<DesignButton
className="rounded-full px-6"
disabled={saving || paymentsSetupAction != null}
@ -908,16 +917,16 @@ export function ProjectOnboardingWizard(props: {
>
Do Later
</DesignButton>
}
)}
secondaryAction={selectedPaymentsCountry === "US" ? (
<DesignButton
className="rounded-full px-6"
variant="outline"
disabled={saving || paymentsSetupAction != null}
loading={paymentsSetupAction === "connect"}
onClick={() => runAsynchronouslyWithAlert(connectPaymentsSetup)}
loading={paymentsSetupAction === "defer"}
onClick={() => runAsynchronouslyWithAlert(deferPaymentsSetup)}
>
Connect
Do Later
</DesignButton>
) : undefined}
>