@sazito/checkout 0.1.2 → 0.2.1

package/dist/core/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var labels = require('../chunks/labels-DJ_RnkCQ.cjs');
+var labels = require('../chunks/labels-BlZiVd3n.cjs');
 require('@sazito/client-sdk');
 
 

package/dist/core/index.d.cts

@@ -70,6 +70,14 @@ interface CheckoutTheme {
     danger?: string;
     /** Success and completed-state color. */
     success?: string;
+    /** Foreground used on top of solid success surfaces. */
+    successForeground?: string;
+    /** Background plate behind carrier and shipping-method logos. */
+    logoBackground?: string;
+    /** Neutral surface used when a shipping color is white or near-white. */
+    shippingNeutral?: string;
+    /** Foreground used on the neutral shipping surface. */
+    shippingNeutralForeground?: string;
     /** Base corner radius in px. */
     radius?: number;
     /** Font family. Defaults to `inherit` so the host font flows through. */
@@ -250,6 +258,7 @@ interface Store<T> {
     getState(): T;
     setState(partial: Partial<T> | ((prev: T) => Partial<T>)): void;
     subscribe(listener: () => void): () => void;
+    batch<R>(callback: () => R): R;
 }
 declare function createStore<T extends object>(initialState: T): Store<T>;
 

package/dist/core/index.d.ts

@@ -70,6 +70,14 @@ interface CheckoutTheme {
     danger?: string;
     /** Success and completed-state color. */
     success?: string;
+    /** Foreground used on top of solid success surfaces. */
+    successForeground?: string;
+    /** Background plate behind carrier and shipping-method logos. */
+    logoBackground?: string;
+    /** Neutral surface used when a shipping color is white or near-white. */
+    shippingNeutral?: string;
+    /** Foreground used on the neutral shipping surface. */
+    shippingNeutralForeground?: string;
     /** Base corner radius in px. */
     radius?: number;
     /** Font family. Defaults to `inherit` so the host font flows through. */
@@ -250,6 +258,7 @@ interface Store<T> {
     getState(): T;
     setState(partial: Partial<T> | ((prev: T) => Partial<T>)): void;
     subscribe(listener: () => void): () => void;
+    batch<R>(callback: () => R): R;
 }
 declare function createStore<T extends object>(initialState: T): Store<T>;
 

package/dist/core/index.js

@@ -1,3 +1,3 @@
-export { a as addressFormFromInvoice, b as buildShippingAssignments, c as classifyAppliedDiscount, d as createBrowserEffectExecutor, e as createCheckoutEngine, f as createSdkBinding, g as createStore, h as defaultCurrencyLabel, i as deriveShippingGroups, j as emptyAddressForm, k as formatMoney, l as formatNumber, m as formatPercent, n as formatPrice, o as fromSdkError, p as isAddressComplete, q as isAddressDirty, r as isDigitalServiceGroup, s as isShippingComplete, t as isValidIranianMobile, u as isValidIranianPhone, v as makeError, w as makeEvent, x as messageForCode, y as noopEffectExecutor, z as normalizeIranianPhone, A as paymentMethodInfo, B as paymentMethodLabel, C as selectDigitalItems, D as selectSummary, E as sortCartItemsNewestFirst, F as strings, G as toEnglishDigits, H as toPersianDigits } from '../chunks/labels-ByA_yGKl.js';
+export { a as addressFormFromInvoice, b as buildShippingAssignments, c as classifyAppliedDiscount, d as createBrowserEffectExecutor, e as createCheckoutEngine, f as createSdkBinding, g as createStore, h as defaultCurrencyLabel, i as deriveShippingGroups, j as emptyAddressForm, k as formatMoney, l as formatNumber, m as formatPercent, n as formatPrice, o as fromSdkError, p as isAddressComplete, q as isAddressDirty, r as isDigitalServiceGroup, s as isShippingComplete, t as isValidIranianMobile, u as isValidIranianPhone, v as makeError, w as makeEvent, x as messageForCode, y as noopEffectExecutor, z as normalizeIranianPhone, A as paymentMethodInfo, B as paymentMethodLabel, C as selectDigitalItems, D as selectSummary, E as sortCartItemsNewestFirst, F as strings, G as toEnglishDigits, H as toPersianDigits } from '../chunks/labels-CTR6b-KZ.js';
 import '@sazito/client-sdk';
 //# sourceMappingURL=index.js.map

package/dist/next/index.cjs

@@ -3,8 +3,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var useCheckout = require('../chunks/use-checkout-CQBSONj1.cjs');
-var labels = require('../chunks/labels-DJ_RnkCQ.cjs');
+var useCheckout = require('../chunks/use-checkout-BEaLKgNa.cjs');
+var labels = require('../chunks/labels-BlZiVd3n.cjs');
 require('@sazito/client-sdk');
 
 /**
@@ -575,8 +575,8 @@ function shippingRateIconStyle(color) {
     // the card. Render a neutral chip with a slate glyph instead.
     if (luminance > 0.9) {
         return {
-            '--szc-rate-color': '#eef0f5',
-            '--szc-rate-foreground': '#475569'
+            '--szc-rate-color': 'var(--szc-shipping-neutral)',
+            '--szc-rate-foreground': 'var(--szc-shipping-neutral-foreground)'
         };
     }
     const foreground = luminance > 0.62
@@ -742,14 +742,22 @@ function themeVars(theme) {
         vars['--szc-danger'] = theme.danger;
     if (theme?.success)
         vars['--szc-success'] = theme.success;
+    if (theme?.successForeground)
+        vars['--szc-success-foreground'] = theme.successForeground;
+    if (theme?.logoBackground)
+        vars['--szc-logo-bg'] = theme.logoBackground;
+    if (theme?.shippingNeutral)
+        vars['--szc-shipping-neutral'] = theme.shippingNeutral;
+    if (theme?.shippingNeutralForeground)
+        vars['--szc-shipping-neutral-foreground'] = theme.shippingNeutralForeground;
     if (theme?.radius != null)
         vars['--szc-radius'] = `${theme.radius}px`;
     if (theme?.fontFamily)
         vars['--szc-font'] = theme.fontFamily;
     return vars;
 }
-function CheckoutSkeleton({ label }) {
-    return (jsxRuntime.jsxs("div", { className: "szc-layout szc-skeleton-layout", role: "status", "aria-label": label, children: [jsxRuntime.jsxs("main", { className: "szc-main", "aria-hidden": "true", children: [jsxRuntime.jsxs("div", { className: "szc-skeleton-cart-row", children: [jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--thumb" }), jsxRuntime.jsxs("div", { className: "szc-skeleton-copy", children: [jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--title" }), jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--text" }), jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--price" })] }), jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--counter" })] }), jsxRuntime.jsxs("div", { className: "szc-skeleton-cart-row", children: [jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--thumb" }), jsxRuntime.jsxs("div", { className: "szc-skeleton-copy", children: [jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--title" }), jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--text" }), jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--price" })] }), jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--counter" })] })] }), jsxRuntime.jsxs("div", { className: "szc-side", "aria-hidden": "true", children: [jsxRuntime.jsxs("aside", { className: "szc-summary szc-summary--skeleton", children: [jsxRuntime.jsxs("div", { className: "szc-summary__total-head", children: [jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--summary-label" }), jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--summary-total" })] }), jsxRuntime.jsxs("div", { className: "szc-skeleton-summary-lines", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "szc-skeleton" }), jsxRuntime.jsx("span", { className: "szc-skeleton" })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "szc-skeleton" }), jsxRuntime.jsx("span", { className: "szc-skeleton" })] })] }), jsxRuntime.jsxs("div", { className: "szc-skeleton-summary-grand", children: [jsxRuntime.jsx("span", { className: "szc-skeleton" }), jsxRuntime.jsx("span", { className: "szc-skeleton" })] })] }), jsxRuntime.jsx("div", { className: "szc-side__cta", children: jsxRuntime.jsx("span", { className: "szc-skeleton szc-skeleton--button" }) })] })] }));
+function CheckoutLoading({ label }) {
+    return (jsxRuntime.jsxs("div", { className: "szc-checkout-loading", role: "status", "aria-live": "polite", children: [jsxRuntime.jsx(Spinner, { className: "szc-checkout-loading__spinner" }), jsxRuntime.jsx("span", { children: label })] }));
 }
 function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButton, renderBackButton, renderEmptyCart, }) {
     const { state, actions, t, summary, money } = useCheckout.useCheckout();
@@ -824,7 +832,7 @@ function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButto
                 ? CardIcon
                 : ClipboardIcon;
     const mobileHead = (jsxRuntime.jsxs("div", { className: "szc-mobile-head", children: [footerVisible && backVisible ? (jsxRuntime.jsx("button", { type: "button", className: "szc-mobile-head__back", "aria-label": t.back, onClick: backOnClick, children: jsxRuntime.jsx("svg", { className: "szc-back-arrow", viewBox: "0 0 16 16", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M9.5 3.5 5 8l4.5 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : (jsxRuntime.jsx("span", {})), jsxRuntime.jsxs("span", { className: "szc-mobile-head__title", children: [jsxRuntime.jsx("span", { className: "szc-mobile-head__dot", children: jsxRuntime.jsx(HeadIcon, {}) }), headTitle] }), flowIndex >= 0 ? (jsxRuntime.jsx("span", { className: "szc-mobile-head__count", children: t.stepOf(labels.formatNumber(flowIndex + 1, state.locale), labels.formatNumber(flowSteps.length, state.locale)) })) : (jsxRuntime.jsx("span", {}))] }));
-    return (jsxRuntime.jsxs("div", { className: `szc-root${className ? ` ${className}` : ''}`, dir: direction, style: themeVars(theme), children: [mobileHead, jsxRuntime.jsx(Stepper, {}), bootstrapping ? (jsxRuntime.jsx(CheckoutSkeleton, { label: t.loading })) : fatal ? (jsxRuntime.jsx(ErrorBanner, { message: error.message })) : isResult ? (jsxRuntime.jsx("div", { className: "szc-result-wrap", children: jsxRuntime.jsx(ResultStep, { continueShoppingUrl: continueShoppingUrl }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: `szc-layout${cartEmpty ? ' szc-layout--full' : ''}`, children: [jsxRuntime.jsxs("main", { className: "szc-main", children: [error ? jsxRuntime.jsx(ErrorBanner, { message: error.message }) : null, step === 'cart' ? jsxRuntime.jsx(CartStep, { continueShoppingUrl: continueShoppingUrl, renderEmpty: renderEmptyCart }) : null, step === 'shipping' ? jsxRuntime.jsx(ShippingStep, {}) : null, step === 'payment' ? jsxRuntime.jsx(PaymentStep, {}) : null, actionsVisible && backButtonNode ? (jsxRuntime.jsx("div", { className: "szc-back-row", children: backButtonNode })) : null] }), !cartEmpty ? (jsxRuntime.jsxs("div", { className: "szc-side", children: [jsxRuntime.jsx(OrderSummary, {}), actionsVisible ? jsxRuntime.jsx("div", { className: "szc-side__cta", children: nextButtonNode }) : null] })) : null] }) })), actionsVisible ? (jsxRuntime.jsx("div", { className: "szc-footer-bar", children: jsxRuntime.jsxs("div", { className: "szc-footer", children: [jsxRuntime.jsxs("div", { className: "szc-footer__total", children: [jsxRuntime.jsx("span", { className: "szc-footer__total-label", children: t.total }), jsxRuntime.jsx("span", { className: "szc-footer__total-value", children: money(summary.total) })] }), jsxRuntime.jsx("div", { className: "szc-footer__actions", children: nextButtonNode })] }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: `szc-root${className ? ` ${className}` : ''}`, dir: direction, style: themeVars(theme), children: [mobileHead, jsxRuntime.jsx(Stepper, {}), bootstrapping ? (jsxRuntime.jsx(CheckoutLoading, { label: t.loading })) : fatal ? (jsxRuntime.jsx(ErrorBanner, { message: error.message })) : isResult ? (jsxRuntime.jsx("div", { className: "szc-result-wrap", children: jsxRuntime.jsx(ResultStep, { continueShoppingUrl: continueShoppingUrl }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: `szc-layout${cartEmpty ? ' szc-layout--full' : ''}`, children: [jsxRuntime.jsxs("main", { className: "szc-main", children: [error ? jsxRuntime.jsx(ErrorBanner, { message: error.message }) : null, step === 'cart' ? jsxRuntime.jsx(CartStep, { continueShoppingUrl: continueShoppingUrl, renderEmpty: renderEmptyCart }) : null, step === 'shipping' ? jsxRuntime.jsx(ShippingStep, {}) : null, step === 'payment' ? jsxRuntime.jsx(PaymentStep, {}) : null, actionsVisible && backButtonNode ? (jsxRuntime.jsx("div", { className: "szc-back-row", children: backButtonNode })) : null] }), !cartEmpty ? (jsxRuntime.jsxs("div", { className: "szc-side", children: [jsxRuntime.jsx(OrderSummary, {}), actionsVisible ? jsxRuntime.jsx("div", { className: "szc-side__cta", children: nextButtonNode }) : null] })) : null] }) })), actionsVisible ? (jsxRuntime.jsx("div", { className: "szc-footer-bar", children: jsxRuntime.jsxs("div", { className: "szc-footer", children: [jsxRuntime.jsxs("div", { className: "szc-footer__total", children: [jsxRuntime.jsx("span", { className: "szc-footer__total-label", children: t.total }), jsxRuntime.jsx("span", { className: "szc-footer__total-value", children: money(summary.total) })] }), jsxRuntime.jsx("div", { className: "szc-footer__actions", children: nextButtonNode })] }) })) : null] }));
 }
 
 function SazitoCheckoutPage({ credentials, config, paymentReturnParams, className, renderNextButton, renderBackButton, renderEmptyCart, }) {