@sazito/checkout 0.4.1 → 0.4.2

package/dist/next/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
-import { Cart, Invoice, ApplicableShippingMethods, InvoiceItem, ShippingRate, PaymentMethod, Order } from '@sazito/client-sdk';
+import { Order, Cart, Invoice, ApplicableShippingMethods, InvoiceItem, ShippingRate, PaymentMethod } from '@sazito/client-sdk';
 
 /**
  * Checkout domain types.
@@ -317,6 +317,12 @@ interface Strings {
     paymentPending: string;
     paymentPendingHint: string;
     orderNumber: string;
+    orderId: string;
+    orderConfirmedHint: string;
+    orderDetails: string;
+    orderItems: string;
+    product: string;
+    lineTotal: string;
     tryAgain: string;
     loading: string;
     processing: string;
@@ -360,6 +366,19 @@ interface RenderEmptyCartProps {
     actionLabel: ReactNode;
     icon: ReactNode;
 }
+/** Props passed to a custom checkout result renderer. */
+interface RenderResultProps {
+    /** Complete post-payment result, including any backend message and order. */
+    result: CheckoutResult | null;
+    /** Normalized result status. Falls back to `pending` while resolving. */
+    status: CheckoutResultStatus;
+    /** Finalized order returned by Sazito on a successful payment. */
+    order?: Order;
+    /** Configured destination for the continue-shopping action. */
+    continueShoppingUrl?: string;
+    /** Return to the payment step after a failed or stock-violated result. */
+    onRetry: () => void;
+}
 /** Content-level customisation for the built-in empty-cart screen. */
 interface EmptyCartOptions {
     /** Empty-state heading. Defaults to the active locale. */
@@ -382,9 +401,11 @@ interface SazitoCheckoutProps {
     renderNextButton?: (props: RenderButtonProps) => ReactNode;
     renderBackButton?: (props: RenderButtonProps) => ReactNode;
     renderEmptyCart?: (props: RenderEmptyCartProps) => ReactNode;
+    /** Completely replace the built-in post-payment result screen. */
+    renderResult?: (props: RenderResultProps) => ReactNode;
     emptyCart?: EmptyCartOptions;
 }
-declare function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButton, renderBackButton, renderEmptyCart, emptyCart, }: SazitoCheckoutProps): react_jsx_runtime.JSX.Element;
+declare function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButton, renderBackButton, renderEmptyCart, renderResult, emptyCart, }: SazitoCheckoutProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'outline' | 'ghost';
@@ -437,9 +458,10 @@ interface SazitoCheckoutPageProps {
     renderNextButton?: (props: RenderButtonProps) => React.ReactNode;
     renderBackButton?: (props: RenderButtonProps) => React.ReactNode;
     renderEmptyCart?: (props: RenderEmptyCartProps) => React.ReactNode;
+    renderResult?: (props: RenderResultProps) => React.ReactNode;
     emptyCart?: EmptyCartOptions;
 }
-declare function SazitoCheckoutPage({ credentials, config, paymentReturn, paymentReturnParams, className, renderNextButton, renderBackButton, renderEmptyCart, emptyCart, }: SazitoCheckoutPageProps): react_jsx_runtime.JSX.Element;
+declare function SazitoCheckoutPage({ credentials, config, paymentReturn, paymentReturnParams, className, renderNextButton, renderBackButton, renderEmptyCart, renderResult, emptyCart, }: SazitoCheckoutPageProps): react_jsx_runtime.JSX.Element;
 
 interface CheckoutProviderProps {
     /** Override the SazitoProvider client for this checkout instance only. */
@@ -472,4 +494,4 @@ interface SazitoProviderProps {
 declare function SazitoProvider({ client, children }: SazitoProviderProps): react_jsx_runtime.JSX.Element;
 
 export { Button, CheckoutProvider, ErrorBanner, Field, ProductPlaceholder, SazitoCheckout, SazitoCheckoutPage, SazitoProvider, SectionTitle, Spinner, useCheckout };
-export type { ButtonProps, CheckoutPaymentReturn, CheckoutProviderProps, EmptyCartOptions, ErrorBannerProps, FieldProps, PaymentReturnSearchParams, ProductPlaceholderProps, RenderButtonProps, RenderEmptyCartProps as RenderEmptyCartPageProps, RenderEmptyCartProps, SazitoCheckoutPageProps, SazitoCheckoutProps, SazitoProviderProps, SectionTitleProps, SpinnerProps };
+export type { ButtonProps, CheckoutPaymentReturn, CheckoutProviderProps, EmptyCartOptions, ErrorBannerProps, FieldProps, PaymentReturnSearchParams, ProductPlaceholderProps, RenderButtonProps, RenderEmptyCartProps as RenderEmptyCartPageProps, RenderEmptyCartProps, RenderResultProps, SazitoCheckoutPageProps, SazitoCheckoutProps, SazitoProviderProps, SectionTitleProps, SpinnerProps };

package/dist/next/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
-import { Cart, Invoice, ApplicableShippingMethods, InvoiceItem, ShippingRate, PaymentMethod, Order } from '@sazito/client-sdk';
+import { Order, Cart, Invoice, ApplicableShippingMethods, InvoiceItem, ShippingRate, PaymentMethod } from '@sazito/client-sdk';
 
 /**
  * Checkout domain types.
@@ -317,6 +317,12 @@ interface Strings {
     paymentPending: string;
     paymentPendingHint: string;
     orderNumber: string;
+    orderId: string;
+    orderConfirmedHint: string;
+    orderDetails: string;
+    orderItems: string;
+    product: string;
+    lineTotal: string;
     tryAgain: string;
     loading: string;
     processing: string;
@@ -360,6 +366,19 @@ interface RenderEmptyCartProps {
     actionLabel: ReactNode;
     icon: ReactNode;
 }
+/** Props passed to a custom checkout result renderer. */
+interface RenderResultProps {
+    /** Complete post-payment result, including any backend message and order. */
+    result: CheckoutResult | null;
+    /** Normalized result status. Falls back to `pending` while resolving. */
+    status: CheckoutResultStatus;
+    /** Finalized order returned by Sazito on a successful payment. */
+    order?: Order;
+    /** Configured destination for the continue-shopping action. */
+    continueShoppingUrl?: string;
+    /** Return to the payment step after a failed or stock-violated result. */
+    onRetry: () => void;
+}
 /** Content-level customisation for the built-in empty-cart screen. */
 interface EmptyCartOptions {
     /** Empty-state heading. Defaults to the active locale. */
@@ -382,9 +401,11 @@ interface SazitoCheckoutProps {
     renderNextButton?: (props: RenderButtonProps) => ReactNode;
     renderBackButton?: (props: RenderButtonProps) => ReactNode;
     renderEmptyCart?: (props: RenderEmptyCartProps) => ReactNode;
+    /** Completely replace the built-in post-payment result screen. */
+    renderResult?: (props: RenderResultProps) => ReactNode;
     emptyCart?: EmptyCartOptions;
 }
-declare function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButton, renderBackButton, renderEmptyCart, emptyCart, }: SazitoCheckoutProps): react_jsx_runtime.JSX.Element;
+declare function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButton, renderBackButton, renderEmptyCart, renderResult, emptyCart, }: SazitoCheckoutProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'outline' | 'ghost';
@@ -437,9 +458,10 @@ interface SazitoCheckoutPageProps {
     renderNextButton?: (props: RenderButtonProps) => React.ReactNode;
     renderBackButton?: (props: RenderButtonProps) => React.ReactNode;
     renderEmptyCart?: (props: RenderEmptyCartProps) => React.ReactNode;
+    renderResult?: (props: RenderResultProps) => React.ReactNode;
     emptyCart?: EmptyCartOptions;
 }
-declare function SazitoCheckoutPage({ credentials, config, paymentReturn, paymentReturnParams, className, renderNextButton, renderBackButton, renderEmptyCart, emptyCart, }: SazitoCheckoutPageProps): react_jsx_runtime.JSX.Element;
+declare function SazitoCheckoutPage({ credentials, config, paymentReturn, paymentReturnParams, className, renderNextButton, renderBackButton, renderEmptyCart, renderResult, emptyCart, }: SazitoCheckoutPageProps): react_jsx_runtime.JSX.Element;
 
 interface CheckoutProviderProps {
     /** Override the SazitoProvider client for this checkout instance only. */
@@ -472,4 +494,4 @@ interface SazitoProviderProps {
 declare function SazitoProvider({ client, children }: SazitoProviderProps): react_jsx_runtime.JSX.Element;
 
 export { Button, CheckoutProvider, ErrorBanner, Field, ProductPlaceholder, SazitoCheckout, SazitoCheckoutPage, SazitoProvider, SectionTitle, Spinner, useCheckout };
-export type { ButtonProps, CheckoutPaymentReturn, CheckoutProviderProps, EmptyCartOptions, ErrorBannerProps, FieldProps, PaymentReturnSearchParams, ProductPlaceholderProps, RenderButtonProps, RenderEmptyCartProps as RenderEmptyCartPageProps, RenderEmptyCartProps, SazitoCheckoutPageProps, SazitoCheckoutProps, SazitoProviderProps, SectionTitleProps, SpinnerProps };
+export type { ButtonProps, CheckoutPaymentReturn, CheckoutProviderProps, EmptyCartOptions, ErrorBannerProps, FieldProps, PaymentReturnSearchParams, ProductPlaceholderProps, RenderButtonProps, RenderEmptyCartProps as RenderEmptyCartPageProps, RenderEmptyCartProps, RenderResultProps, SazitoCheckoutPageProps, SazitoCheckoutProps, SazitoProviderProps, SectionTitleProps, SpinnerProps };

package/dist/next/index.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { isValidElement, cloneElement, useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import { u as useCheckout, b as useSazitoClient, C as CheckoutProvider } from '../chunks/use-checkout-BM810__v.js';
-export { S as SazitoProvider } from '../chunks/use-checkout-BM810__v.js';
-import { m as formatPercent, E as sortCartItemsNewestFirst, H as toPersianDigits, r as isDigitalServiceGroup, t as isValidIranianMobile, z as normalizeIranianPhone, A as paymentMethodInfo, l as formatNumber } from '../chunks/labels-e8w4zRbg.js';
+import { u as useCheckout, b as useSazitoClient, C as CheckoutProvider } from '../chunks/use-checkout-tQfM_-7X.js';
+export { S as SazitoProvider } from '../chunks/use-checkout-tQfM_-7X.js';
+import { m as formatPercent, E as sortCartItemsNewestFirst, H as toPersianDigits, r as isDigitalServiceGroup, t as isValidIranianMobile, z as normalizeIranianPhone, A as paymentMethodInfo, l as formatNumber } from '../chunks/labels-DxIkDijU.js';
 import { parsePaymentReturnUrl } from './payment-return.js';
 import '@sazito/client-sdk';
 
@@ -710,16 +710,29 @@ function PaymentIcon({ kind }) {
 }
 
 function ResultStep({ continueShoppingUrl }) {
-    const { state, actions, t } = useCheckout();
+    const { state, actions, money, price, t } = useCheckout();
     const result = state.result;
     const status = result?.status ?? 'pending';
+    const order = result?.order;
+    const invoice = order?.invoice;
+    const showDetails = Boolean(order && (status === 'success' || status === 'pending'));
     const titleMap = {
         success: t.paymentSuccess,
         failed: t.paymentFailed,
         pending: t.paymentPending,
         stock_violated: t.paymentFailed
     };
-    return (jsxs("section", { className: `szc-result szc-result--${status}`, children: [jsx("div", { className: "szc-result__icon", children: status === 'success' ? (jsx(CheckCircle, {})) : status === 'pending' ? (jsx(Spinner, {})) : (jsx(CrossCircle, {})) }), jsx("h2", { className: "szc-result__title", children: titleMap[status] }), status === 'pending' ? jsx("p", { className: "szc-muted", children: t.paymentPendingHint }) : null, result?.message ? jsx("p", { className: "szc-muted", children: result.message }) : null, result?.order ? (jsxs("p", { className: "szc-result__order", children: [t.orderNumber, ": ", jsx("strong", { children: result.order.orderNumber })] })) : null, jsxs("div", { className: "szc-result__actions", children: [status === 'failed' || status === 'stock_violated' ? (jsx(Button, { onClick: () => actions.goToStep('payment'), children: t.tryAgain })) : null, continueShoppingUrl ? (jsx(Button, { variant: "outline", onClick: () => (window.location.href = continueShoppingUrl), children: t.continueShopping })) : null] })] }));
+    return (jsxs("section", { className: `szc-result szc-result--${status}`, children: [jsxs("div", { className: "szc-result__hero", role: "status", "aria-live": "polite", children: [jsx("div", { className: "szc-result__icon", children: status === 'success' ? (jsx(CheckCircle, {})) : status === 'pending' ? (jsx(Spinner, {})) : (jsx(CrossCircle, {})) }), jsx("h2", { className: "szc-result__title", children: titleMap[status] }), status === 'pending' ? jsx("p", { className: "szc-muted", children: t.paymentPendingHint }) : null, result?.message ? jsx("p", { className: "szc-muted", children: result.message }) : null, status === 'success' && order ? (jsx("p", { className: "szc-result__hint", children: t.orderConfirmedHint })) : null, order ? (jsxs("dl", { className: "szc-result__reference", children: [jsxs("div", { className: "szc-result__reference-primary", children: [jsx("dt", { children: t.orderNumber }), jsx("dd", { children: formatPublicId(order.orderNumber, state.locale) })] }), jsxs("div", { children: [jsx("dt", { children: t.orderId }), jsx("dd", { children: formatPublicId(order.id, state.locale) })] })] })) : null, jsxs("div", { className: "szc-result__actions", children: [status === 'failed' || status === 'stock_violated' ? (jsx(Button, { onClick: () => actions.goToStep('payment'), children: t.tryAgain })) : null, continueShoppingUrl ? (jsx(Button, { variant: status === 'success' ? 'primary' : 'outline', asChild: true, children: jsx("a", { href: continueShoppingUrl, children: t.continueShopping }) })) : null] })] }), showDetails && order && invoice ? (jsxs("div", { className: "szc-result__details", children: [jsx("h3", { className: "szc-result__details-title", children: t.orderDetails }), invoice.shippingItems.length > 0 ? (jsxs("section", { className: "szc-result__section", "aria-labelledby": "szc-result-shipping-title", children: [jsx("h4", { id: "szc-result-shipping-title", className: "szc-result__section-title", children: t.shippingMethods }), jsx("div", { className: "szc-result-shipping-list", children: invoice.shippingItems.map((shipping) => (jsx("article", { className: "szc-result-group", children: jsxs("header", { className: "szc-result-group__head", children: [jsx("span", { className: "szc-result-group__mark", "aria-hidden": "true", children: shipping.rate.icon ? jsx("img", { src: shipping.rate.icon, alt: "" }) : jsx(DeliveryIcon, {}) }), jsx("span", { className: "szc-result-group__title", children: shipping.rate.name }), jsx("span", { className: "szc-result-group__price", children: price(shipping.rate.price) })] }) }, String(shipping.id)))) })] })) : null, invoice.invoiceItems.length > 0 ? (jsxs("section", { className: "szc-result-group", "aria-labelledby": "szc-result-items-title", children: [jsxs("header", { className: "szc-result-group__head", children: [jsx("span", { className: "szc-result-group__mark", "aria-hidden": "true", children: jsx(OrderItemsIcon, {}) }), jsx("h4", { id: "szc-result-items-title", className: "szc-result-group__title", children: t.orderItems })] }), jsxs("div", { className: "szc-result-items__head", "aria-hidden": "true", children: [jsx("span", { children: t.product }), jsx("span", { children: t.quantity }), jsx("span", { children: t.lineTotal })] }), jsx("ul", { className: "szc-result-items", children: invoice.invoiceItems.map((item, index) => (jsxs("li", { className: "szc-result-item", children: [jsxs("span", { className: "szc-result-item__product", children: [item.image?.url ? (jsx("img", { className: "szc-result-item__thumb", src: item.image.url, alt: "" })) : (jsx(ProductPlaceholder, { className: "szc-result-item__thumb" })), jsxs("span", { children: [jsx("strong", { children: item.name }), item.variantAttributes.length ? (jsx("small", { children: item.variantAttributes.map(formatAttribute).join(' · ') })) : null] })] }), jsxs("span", { className: "szc-result-item__quantity", children: [jsx("span", { className: "szc-result-item__mobile-label", children: t.quantity }), formatNumber(item.noOfItems, state.locale)] }), jsxs("span", { className: "szc-result-item__total", children: [jsx("span", { className: "szc-result-item__mobile-label", children: t.lineTotal }), money(item.totalItemsPrice)] })] }, `${String(item.productVariantId)}-${index}`))) })] })) : null, jsxs("dl", { className: "szc-result-summary", children: [jsx(SummaryRow, { label: t.subtotal, value: money(invoice.netTotal) }), invoice.shippingTotal != null ? (jsx(SummaryRow, { label: t.shipping, value: money(invoice.shippingTotal) })) : null, invoice.discountTotal != null && invoice.discountTotal > 0 ? (jsx(SummaryRow, { label: t.discount, value: `−${money(invoice.discountTotal)}` })) : null, invoice.creditTotal != null && invoice.creditTotal > 0 ? (jsx(SummaryRow, { label: t.credit, value: `−${money(invoice.creditTotal)}` })) : null, invoice.vat != null && invoice.vat > 0 ? (jsx(SummaryRow, { label: t.vat, value: money(invoice.vat) })) : null, invoice.customerProfit != null && invoice.customerProfit > 0 ? (jsx(SummaryRow, { label: t.yourSavings, value: money(invoice.customerProfit), savings: true })) : null, jsx(SummaryRow, { label: t.total, value: money(invoice.finalTotal), total: true })] })] })) : null] }));
+}
+function formatPublicId(value, locale) {
+    const text = String(value);
+    return locale === 'fa' ? toPersianDigits(text) : text;
+}
+function formatAttribute(attribute) {
+    return `${attribute.name}: ${attribute.value}`;
+}
+function SummaryRow({ label, value, savings = false, total = false }) {
+    return (jsxs("div", { className: `${total ? 'szc-result-summary__total' : ''} ${savings ? 'szc-result-summary__savings' : ''}`.trim(), children: [jsx("dt", { children: label }), jsx("dd", { children: value })] }));
 }
 function CheckCircle() {
     return (jsxs("svg", { viewBox: "0 0 48 48", width: "48", height: "48", fill: "none", "aria-hidden": "true", children: [jsx("circle", { cx: "24", cy: "24", r: "22", stroke: "currentColor", strokeWidth: "2.5" }), jsx("path", { d: "M15 24.5l6 6 12-13", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
@@ -727,6 +740,12 @@ function CheckCircle() {
 function CrossCircle() {
     return (jsxs("svg", { viewBox: "0 0 48 48", width: "48", height: "48", fill: "none", "aria-hidden": "true", children: [jsx("circle", { cx: "24", cy: "24", r: "22", stroke: "currentColor", strokeWidth: "2.5" }), jsx("path", { d: "M17 17l14 14M31 17L17 31", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })] }));
 }
+function DeliveryIcon() {
+    return (jsxs("svg", { viewBox: "0 0 24 24", width: "22", height: "22", fill: "none", "aria-hidden": "true", children: [jsx("path", { d: "M3 6.5h11v10H3zM14 10h3.5l3 3v3.5H14z", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round" }), jsx("circle", { cx: "7", cy: "18", r: "1.75", stroke: "currentColor", strokeWidth: "1.6" }), jsx("circle", { cx: "17.5", cy: "18", r: "1.75", stroke: "currentColor", strokeWidth: "1.6" })] }));
+}
+function OrderItemsIcon() {
+    return (jsxs("svg", { viewBox: "0 0 24 24", width: "22", height: "22", fill: "none", "aria-hidden": "true", children: [jsx("path", { d: "M5 7.5h14v11H5zM8 7.5V5h8v2.5", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round" }), jsx("path", { d: "M8.5 12h7M8.5 15h5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" })] }));
+}
 
 function themeVars(theme) {
     const vars = {};
@@ -771,10 +790,11 @@ function themeVars(theme) {
 function CheckoutLoading({ label }) {
     return (jsxs("div", { className: "szc-checkout-loading", role: "status", "aria-live": "polite", children: [jsx(Spinner, { className: "szc-checkout-loading__spinner" }), jsx("span", { children: label })] }));
 }
-function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButton, renderBackButton, renderEmptyCart, emptyCart, }) {
+function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButton, renderBackButton, renderEmptyCart, renderResult, emptyCart, }) {
     const { state, actions, t, summary, money } = useCheckout();
     const { step, direction, flags, error } = state;
     const isResult = step === 'result';
+    const resultStatus = state.result?.status ?? 'pending';
     const bootstrapping = step === 'cart' && !error && (!state.cart || !state.invoice || flags.bootstrapping);
     const emptyCartError = error?.code === 'no_cart';
     const fatal = error && !state.cart && step === 'cart' && !emptyCartError;
@@ -845,10 +865,16 @@ function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButto
                 ? CardIcon
                 : ClipboardIcon;
     const mobileHead = (jsxs("div", { className: "szc-mobile-head", children: [footerVisible && backVisible ? (jsx("button", { type: "button", className: "szc-mobile-head__back", "aria-label": t.back, onClick: backOnClick, children: jsx("svg", { className: "szc-back-arrow", viewBox: "0 0 16 16", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M9.5 3.5 5 8l4.5 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : (jsx("span", {})), jsxs("span", { className: "szc-mobile-head__title", children: [jsx("span", { className: "szc-mobile-head__dot", children: jsx(HeadIcon, {}) }), headTitle] }), flowIndex >= 0 ? (jsx("span", { className: "szc-mobile-head__count", children: t.stepOf(formatNumber(flowIndex + 1, state.locale), formatNumber(flowSteps.length, state.locale)) })) : (jsx("span", {}))] }));
-    return (jsxs("div", { className: `szc-root${className ? ` ${className}` : ''}`, dir: direction, style: themeVars(theme), children: [mobileHead, jsx(Stepper, {}), bootstrapping ? (jsx(CheckoutLoading, { label: t.loading })) : fatal ? (jsx(ErrorBanner, { message: error.message })) : isResult ? (jsx("div", { className: "szc-result-wrap", children: jsx(ResultStep, { continueShoppingUrl: continueShoppingUrl }) })) : (jsx(Fragment, { children: jsxs("div", { className: `szc-layout${cartEmpty ? ' szc-layout--full' : ''}`, children: [jsxs("main", { className: "szc-main", children: [error && !emptyCartError ? jsx(ErrorBanner, { message: error.message }) : null, step === 'cart' ? (jsx(CartStep, { continueShoppingUrl: continueShoppingUrl, emptyCart: emptyCart, renderEmpty: renderEmptyCart })) : null, step === 'shipping' ? jsx(ShippingStep, {}) : null, step === 'payment' ? jsx(PaymentStep, {}) : null, actionsVisible && backButtonNode ? (jsx("div", { className: "szc-back-row", children: backButtonNode })) : null] }), !cartEmpty ? (jsxs("div", { className: "szc-side", children: [jsx(OrderSummary, {}), actionsVisible ? jsx("div", { className: "szc-side__cta", children: nextButtonNode }) : null] })) : null] }) })), actionsVisible ? (jsx("div", { className: "szc-footer-bar", children: jsxs("div", { className: "szc-footer", children: [jsxs("div", { className: "szc-footer__total", children: [jsx("span", { className: "szc-footer__total-label", children: t.total }), jsx("span", { className: "szc-footer__total-value", children: money(summary.total) })] }), jsx("div", { className: "szc-footer__actions", children: nextButtonNode })] }) })) : null] }));
+    return (jsxs("div", { className: `szc-root${className ? ` ${className}` : ''}`, dir: direction, style: themeVars(theme), children: [mobileHead, jsx(Stepper, {}), bootstrapping ? (jsx(CheckoutLoading, { label: t.loading })) : fatal ? (jsx(ErrorBanner, { message: error.message })) : isResult ? (jsx("div", { className: "szc-result-wrap", children: renderResult ? (renderResult({
+                    result: state.result,
+                    status: resultStatus,
+                    order: state.result?.order,
+                    continueShoppingUrl,
+                    onRetry: () => actions.goToStep('payment')
+                })) : (jsx(ResultStep, { continueShoppingUrl: continueShoppingUrl })) })) : (jsx(Fragment, { children: jsxs("div", { className: `szc-layout${cartEmpty ? ' szc-layout--full' : ''}`, children: [jsxs("main", { className: "szc-main", children: [error && !emptyCartError ? jsx(ErrorBanner, { message: error.message }) : null, step === 'cart' ? (jsx(CartStep, { continueShoppingUrl: continueShoppingUrl, emptyCart: emptyCart, renderEmpty: renderEmptyCart })) : null, step === 'shipping' ? jsx(ShippingStep, {}) : null, step === 'payment' ? jsx(PaymentStep, {}) : null, actionsVisible && backButtonNode ? (jsx("div", { className: "szc-back-row", children: backButtonNode })) : null] }), !cartEmpty ? (jsxs("div", { className: "szc-side", children: [jsx(OrderSummary, {}), actionsVisible ? jsx("div", { className: "szc-side__cta", children: nextButtonNode }) : null] })) : null] }) })), actionsVisible ? (jsx("div", { className: "szc-footer-bar", children: jsxs("div", { className: "szc-footer", children: [jsxs("div", { className: "szc-footer__total", children: [jsx("span", { className: "szc-footer__total-label", children: t.total }), jsx("span", { className: "szc-footer__total-value", children: money(summary.total) })] }), jsx("div", { className: "szc-footer__actions", children: nextButtonNode })] }) })) : null] }));
 }
 
-function SazitoCheckoutPage({ credentials, config, paymentReturn, paymentReturnParams, className, renderNextButton, renderBackButton, renderEmptyCart, emptyCart, }) {
+function SazitoCheckoutPage({ credentials, config, paymentReturn, paymentReturnParams, className, renderNextButton, renderBackButton, renderEmptyCart, renderResult, emptyCart, }) {
     // The explicit server-parsed value remains authoritative. As a fallback,
     // detect Sazito's well-known nested callback in the browser. This prevents a
     // caught callback route from silently booting a fresh checkout when the host
@@ -865,7 +891,7 @@ function SazitoCheckoutPage({ credentials, config, paymentReturn, paymentReturnP
         ? { ...credentials, payment: resolvedPaymentReturn.payment }
         : credentials;
     const client = useSazitoClient();
-    return (jsxs(CheckoutProvider, { client: client, credentials: checkoutCredentials, config: config, autoStart: !isReturn, children: [returnParams ? jsx(ResolveReturn, { params: returnParams }) : null, jsx(SazitoCheckout, { theme: config?.theme, continueShoppingUrl: config?.continueShoppingUrl, className: className, renderNextButton: renderNextButton, renderBackButton: renderBackButton, renderEmptyCart: renderEmptyCart, emptyCart: emptyCart })] }));
+    return (jsxs(CheckoutProvider, { client: client, credentials: checkoutCredentials, config: config, autoStart: !isReturn, children: [returnParams ? jsx(ResolveReturn, { params: returnParams }) : null, jsx(SazitoCheckout, { theme: config?.theme, continueShoppingUrl: config?.continueShoppingUrl, className: className, renderNextButton: renderNextButton, renderBackButton: renderBackButton, renderEmptyCart: renderEmptyCart, renderResult: renderResult, emptyCart: emptyCart })] }));
 }
 function ResolveReturn({ params }) {
     const { actions } = useCheckout();