fix(checkout-widgets): Ensure error view is shown when sale processing fails

[JCSanPedro]

Hi👋, please ensure the PR title follows the below standards:

• PR is titled with conventional commit style naming: type(scope): message. For example: feat(passport): my new feature
• If you have introduced modification that necessitates immediate adjustments by this SDK's users to their applications, clients, or integrations to avert disruptions to existing features or functionalities, add a ! after the type(scope), for example feat(passport)!: my new breaking feature

Summary

Prevent the sale widget from hanging on the "Crunching numbers" screen by clearing loading state reliably, surfacing funding-balance and quote validation errors, and logging errors to the console for debugging.

Identified cases where the flow could hang on "Crunching numbers"

1. loadingBalances never cleared
   When fetchFundingBalances completed (success or failure), loadingBalances was only cleared in the onComplete callback or in the catch block. We make sure to clear the loadingBalances state even if an error occurred.

2. fetchFundingBalances throws (e.g. RPC / smartCheckout failure)
   If smartCheckout or the funding balance fetch threw (e.g. token not on chain, RPC error, etc), the error was not stored in hook state. The UI had no signal to leave the loading view and no path to the error view, so it remained on "Crunching numbers". To fix this, we add an error state, and transition to the error view if the funding balance error becomes filled.

3. Quote returns empty or invalid data
   If the order quote API returned empty currencies, empty products, or products that did not match the requested sale items, the widget never got a valid fundingBalancesResult. The flow stayed on the initial/loading state with no transition to Order Review, Top Up, or an error screen. To fix this, we validate the response from the quote API, and if validation fails, we throw an error to ensure we transition to the error view.

We additionally add a console.error log on the error view to allow developers to debug these errors.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 66c91ca

Command	Status	Duration	Result
nx run-many -p @imtbl/sdk,@imtbl/checkout-widge...	✅ Succeeded	1m 4s	View ↗
nx affected -t build,lint,test	✅ Succeeded	2m 8s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-19 03:45:15 UTC

[rodrigo-fournier-immutable]

Do we really want to send this to prod?

[JCSanPedro]

Yes. We don't show the error message in the UI, but the console logs will at least help developers debug the reason.

[rodrigo-fournier-immutable]

Adding items to the useEffect dependency array will re-fetch the quote whenever items changes. Was that intentional?

[JCSanPedro]

Yes. The quote is based on the items, so it should be refetched if those change.