@sazito/checkout 0.1.1 → 0.2.0

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-CKFla5or.cjs');
-var labels = require('../chunks/labels-CWfNSAYm.cjs');
+var useCheckout = require('../chunks/use-checkout-CQBSONj1.cjs');
+var labels = require('../chunks/labels-DJ_RnkCQ.cjs');
 require('@sazito/client-sdk');
 
 /**
@@ -140,6 +140,7 @@ function ClipboardIcon() {
 
 function OrderSummary() {
     const { state, summary, money, t } = useCheckout.useCheckout();
+    const updating = state.flags.updatingCart;
     const percentSign = state.locale === 'fa' ? '٪' : '%';
     const lineLabels = {
         subtotal: t.subtotal,
@@ -148,14 +149,14 @@ function OrderSummary() {
         credit: t.credit,
         vat: t.vat
     };
-    return (jsxRuntime.jsxs("aside", { className: "szc-summary", children: [jsxRuntime.jsxs("div", { className: "szc-summary__total-head", children: [jsxRuntime.jsx("span", { className: "szc-summary__total-label", children: t.totalAmount }), jsxRuntime.jsx("span", { className: "szc-summary__total-value", children: money(summary.total) })] }), jsxRuntime.jsx("dl", { className: "szc-summary__lines", children: summary.lines.map((line) => (jsxRuntime.jsxs("div", { className: `szc-summary__line${line.key === 'discount' ? ' szc-summary__line--discount' : ''}`, children: [jsxRuntime.jsxs("dt", { children: [lineLabels[line.key], (line.percent ?? 0) > 0
+    return (jsxRuntime.jsxs("aside", { className: `szc-summary${updating ? ' szc-summary--loading' : ''}`, "aria-busy": updating, children: [jsxRuntime.jsxs("div", { className: "szc-summary__total-head", children: [jsxRuntime.jsx("span", { className: "szc-summary__total-label", children: t.totalAmount }), jsxRuntime.jsx("span", { className: "szc-summary__total-value", children: money(summary.total) })] }), jsxRuntime.jsx("dl", { className: "szc-summary__lines", children: summary.lines.map((line) => (jsxRuntime.jsxs("div", { className: `szc-summary__line${line.key === 'discount' ? ' szc-summary__line--discount' : ''}`, children: [jsxRuntime.jsxs("dt", { children: [lineLabels[line.key], (line.percent ?? 0) > 0
                                     ? ` (${labels.formatPercent(line.percent, state.locale)}${percentSign})`
-                                    : ''] }), jsxRuntime.jsx("dd", { className: line.negative ? 'szc-summary__line--neg' : undefined, children: line.free ? (jsxRuntime.jsx("span", { className: "szc-summary__free", children: t.free })) : (`${line.negative ? '−' : ''}${money(line.amount)}`) })] }, line.key))) }), jsxRuntime.jsxs("div", { className: "szc-summary__grand", children: [jsxRuntime.jsx("span", { children: t.total }), jsxRuntime.jsx("span", { children: money(summary.total) })] })] }));
+                                    : ''] }), jsxRuntime.jsx("dd", { className: line.negative ? 'szc-summary__line--neg' : undefined, children: line.free ? (jsxRuntime.jsx("span", { className: "szc-summary__free", children: t.free })) : (`${line.negative ? '−' : ''}${money(line.amount)}`) })] }, line.key))) }), jsxRuntime.jsxs("div", { className: "szc-summary__grand", children: [jsxRuntime.jsx("span", { children: t.total }), jsxRuntime.jsx("span", { children: money(summary.total) })] }), updating ? (jsxRuntime.jsxs("div", { className: "szc-summary__loading", role: "status", "aria-live": "polite", children: [jsxRuntime.jsx(Spinner, { className: "szc-summary__spinner" }), jsxRuntime.jsx("span", { className: "szc-visually-hidden", children: t.loading })] })) : null] }));
 }
 
 const PERSIAN_DIGITS = '۰۱۲۳۴۵۶۷۸۹';
 const ARABIC_DIGITS = '٠١٢٣٤٥٦٧٨٩';
-const QUANTITY_DEBOUNCE_MS = 600;
+const QUANTITY_DEBOUNCE_MS = 500;
 function toLatinDigits(value) {
     return value
         .replace(/[۰-۹]/g, (digit) => String(PERSIAN_DIGITS.indexOf(digit)))
@@ -189,6 +190,7 @@ function CartStep({ continueShoppingUrl, renderEmpty, }) {
     const { state, actions, money, t } = useCheckout.useCheckout();
     const cart = state.cart;
     const busy = state.flags.updatingCart;
+    const newestCartItems = react.useMemo(() => labels.sortCartItemsNewestFirst(cart?.items ?? []), [cart?.items]);
     const invoiceItemsByVariant = new Map((state.invoice?.items ?? []).map((item) => [item.productVariantId, item]));
     if (!cart || cart.items.length === 0) {
         if (renderEmpty) {
@@ -196,7 +198,7 @@ function CartStep({ continueShoppingUrl, renderEmpty, }) {
         }
         return (jsxRuntime.jsx("section", { className: "szc-empty", role: "status", "aria-live": "polite", children: jsxRuntime.jsxs("div", { className: "szc-empty__card", children: [jsxRuntime.jsx("span", { className: "szc-empty__badge", children: jsxRuntime.jsx(CartIcon, {}) }), jsxRuntime.jsxs("div", { className: "szc-empty__copy", children: [jsxRuntime.jsx("h3", { className: "szc-empty__title", children: t.cartEmpty }), jsxRuntime.jsx("p", { className: "szc-empty__hint", children: t.cartEmptyHint })] }), continueShoppingUrl ? (jsxRuntime.jsx(Button, { className: "szc-empty__cta", variant: "primary", onClick: () => { window.location.href = continueShoppingUrl; }, children: t.continueShopping })) : null] }) }));
     }
-    return (jsxRuntime.jsx("section", { className: "szc-step-panel", children: jsxRuntime.jsx("ul", { className: "szc-cart-list", children: cart.items.map((item) => {
+    return (jsxRuntime.jsx("section", { className: "szc-step-panel", children: jsxRuntime.jsx("ul", { className: "szc-cart-list", children: newestCartItems.map((item) => {
                 const max = item.product.maxOrderQuantity;
                 const min = item.product.minOrderQuantity ?? 1;
                 const invoiceItem = invoiceItemsByVariant.get(item.product.variantId);
@@ -215,6 +217,7 @@ function CartStep({ continueShoppingUrl, renderEmpty, }) {
 function QuantityControl({ value, min, max, label, onChange }) {
     const [draft, setDraft] = react.useState(() => labels.toPersianDigits(String(value)));
     const [pending, setPending] = react.useState(false);
+    const [updating, setUpdating] = react.useState(false);
     const draftRef = react.useRef(draft);
     const pendingValueRef = react.useRef(null);
     const timerRef = react.useRef(null);
@@ -249,11 +252,13 @@ function QuantityControl({ value, min, max, label, onChange }) {
             return;
         }
         inFlightRef.current = true;
+        setUpdating(true);
         try {
             await onChangeRef.current(target);
         }
         finally {
             inFlightRef.current = false;
+            setUpdating(false);
             if (pendingValueRef.current === target) {
                 pendingValueRef.current = null;
                 setPending(false);
@@ -288,7 +293,7 @@ function QuantityControl({ value, min, max, label, onChange }) {
     };
     const parsedDraft = Number(toLatinDigits(draft));
     const displayedValue = Number.isFinite(parsedDraft) ? normalize(parsedDraft) : value;
-    return (jsxRuntime.jsxs("div", { className: `szc-qty${pending ? ' szc-qty--pending' : ''}`, "aria-busy": pending, children: [jsxRuntime.jsx("button", { type: "button", className: "szc-qty__btn", "aria-label": `${label} −`, disabled: displayedValue <= min, onMouseDown: (event) => event.preventDefault(), onClick: () => step(-1), children: jsxRuntime.jsx(MinusIcon, {}) }), jsxRuntime.jsx("input", { className: "szc-qty__input", type: "text", inputMode: "numeric", pattern: "[\u06F0-\u06F9\u0660-\u06690-9]*", role: "spinbutton", value: draft, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": displayedValue, onChange: (event) => {
+    return (jsxRuntime.jsxs("div", { className: `szc-qty${pending ? ' szc-qty--pending' : ''}`, "aria-busy": updating, children: [jsxRuntime.jsx("button", { type: "button", className: "szc-qty__btn", "aria-label": `${label} −`, disabled: updating || displayedValue <= min, onMouseDown: (event) => event.preventDefault(), onClick: () => step(-1), children: jsxRuntime.jsx(MinusIcon, {}) }), jsxRuntime.jsx("input", { className: "szc-qty__input", type: "text", inputMode: "numeric", pattern: "[\u06F0-\u06F9\u0660-\u06690-9]*", role: "spinbutton", value: draft, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": displayedValue, disabled: updating, onChange: (event) => {
                     const digits = toLatinDigits(event.target.value).replace(/\D/g, '');
                     if (!digits) {
                         if (timerRef.current)
@@ -319,7 +324,7 @@ function QuantityControl({ value, min, max, label, onChange }) {
                         event.preventDefault();
                         step(-1);
                     }
-                } }), jsxRuntime.jsx("button", { type: "button", className: "szc-qty__btn", "aria-label": `${label} +`, disabled: max != null && displayedValue >= max, onMouseDown: (event) => event.preventDefault(), onClick: () => step(1), children: jsxRuntime.jsx(PlusIcon, {}) })] }));
+                } }), jsxRuntime.jsx("button", { type: "button", className: "szc-qty__btn", "aria-label": `${label} +`, disabled: updating || (max != null && displayedValue >= max), onMouseDown: (event) => event.preventDefault(), onClick: () => step(1), children: jsxRuntime.jsx(PlusIcon, {}) })] }));
 }
 function MinusIcon() {
     return (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -366,6 +371,8 @@ function ShippingStep() {
     const { addressForm, regions, shippingGroups } = state;
     const [touched, setTouched] = react.useState({});
     const needsShipping = state.invoice?.needsShipping ?? true;
+    const physicalShippingGroups = shippingGroups.filter((group) => !labels.isDigitalServiceGroup(group));
+    const physicalItemCount = Math.max(0, (state.invoice?.items.length ?? 0) - digitalItems.length);
     const touch = react.useCallback((key) => {
         setTouched((prev) => ({ ...prev, [key]: true }));
     }, []);
@@ -388,7 +395,7 @@ function ShippingStep() {
                                         }, placeholder: t.selectRegion, options: regions.map((r) => ({ value: r.id, label: r.name })) }), jsxRuntime.jsx(EnhancedSelect, { id: "szc-city", label: t.city, required: true, optionalLabel: t.optional, value: addressForm.cityId ?? '', disabled: !selectedRegion, error: errors.cityId, onChange: (v) => {
                                             actions.setAddressField('cityId', v ? Number(v) : null);
                                             touch('cityId');
-                                        }, placeholder: t.selectCity, options: selectedRegion?.cities.map((c) => ({ value: c.id, label: c.name })) ?? [] }), jsxRuntime.jsx(Field, { id: "szc-postal", label: t.postalCode, required: state.postalCodeMandatory, optionalLabel: t.optional, className: "szc-input--ltr", dir: "ltr", inputMode: "numeric", value: addressForm.postalCode, error: errors.postalCode, onChange: (e) => actions.setAddressField('postalCode', e.target.value), onBlur: () => touch('postalCode') }), jsxRuntime.jsx(Field, { id: "szc-phone", label: t.phoneNumber, optionalLabel: t.optional, className: "szc-input--ltr", dir: "ltr", inputMode: "tel", value: addressForm.phoneNumber, onChange: (e) => actions.setAddressField('phoneNumber', e.target.value), onBlur: () => handleBlurPhone('phoneNumber') })] }), jsxRuntime.jsx(Field, { id: "szc-address", label: t.addressLine, required: true, optionalLabel: t.optional, value: addressForm.address, error: errors.address, onChange: (e) => actions.setAddressField('address', e.target.value), onBlur: () => touch('address') }), jsxRuntime.jsx(Field, { id: "szc-description", label: t.description, optionalLabel: t.optional, value: addressForm.description, onChange: (e) => actions.setAddressField('description', e.target.value), onBlur: () => touch('description') })] })) : null] }), shippingGroups.length > 0 ? (jsxRuntime.jsxs("section", { className: "szc-shipping-methods", "aria-labelledby": "szc-methods-title", children: [jsxRuntime.jsx(ShippingSectionHeader, { id: "szc-methods-title", title: t.shippingMethods, icon: "shipping" }), jsxRuntime.jsx("div", { className: "szc-ship-groups", children: shippingGroups.map((group) => (jsxRuntime.jsx(ShippingGroupCard, { group: group }, group.key))) })] })) : needsShipping ? (jsxRuntime.jsxs("div", { className: "szc-shipping-pending", role: "note", children: [jsxRuntime.jsx("span", { className: "szc-shipping-pending__icon", "aria-hidden": "true", children: jsxRuntime.jsx(TruckIcon, {}) }), jsxRuntime.jsxs("div", { className: "szc-shipping-pending__copy", children: [jsxRuntime.jsx("strong", { children: t.shippingMethods }), jsxRuntime.jsx("span", { children: t.shippingMethodsHint })] })] })) : null, digitalItems.length > 0 ? (jsxRuntime.jsxs("div", { className: "szc-digital-note", children: [jsxRuntime.jsx("span", { className: "szc-digital-note__icon", children: "\u2B07\uFE0E" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: t.digitalNoShipping }), jsxRuntime.jsx("ul", { children: digitalItems.map((item) => (jsxRuntime.jsx("li", { children: item.name }, item.id))) })] })] })) : null] }));
+                                        }, placeholder: t.selectCity, options: selectedRegion?.cities.map((c) => ({ value: c.id, label: c.name })) ?? [] }), jsxRuntime.jsx(Field, { id: "szc-postal", label: t.postalCode, required: state.postalCodeMandatory, optionalLabel: t.optional, className: "szc-input--ltr", dir: "ltr", inputMode: "numeric", value: addressForm.postalCode, error: errors.postalCode, onChange: (e) => actions.setAddressField('postalCode', e.target.value), onBlur: () => touch('postalCode') }), jsxRuntime.jsx(Field, { id: "szc-phone", label: t.phoneNumber, optionalLabel: t.optional, className: "szc-input--ltr", dir: "ltr", inputMode: "tel", value: addressForm.phoneNumber, onChange: (e) => actions.setAddressField('phoneNumber', e.target.value), onBlur: () => handleBlurPhone('phoneNumber') })] }), jsxRuntime.jsx(Field, { id: "szc-address", label: t.addressLine, required: true, optionalLabel: t.optional, value: addressForm.address, error: errors.address, onChange: (e) => actions.setAddressField('address', e.target.value), onBlur: () => touch('address') }), jsxRuntime.jsx(Field, { id: "szc-description", label: t.description, optionalLabel: t.optional, value: addressForm.description, onChange: (e) => actions.setAddressField('description', e.target.value), onBlur: () => touch('description') })] })) : null] }), digitalItems.length > 0 ? (jsxRuntime.jsxs("section", { className: "szc-digital-products", "aria-labelledby": "szc-digital-title", children: [jsxRuntime.jsxs("header", { className: "szc-digital-products__head", children: [jsxRuntime.jsx("span", { className: "szc-digital-products__icon", "aria-hidden": "true", children: jsxRuntime.jsx(DigitalIcon, {}) }), jsxRuntime.jsxs("div", { className: "szc-digital-products__heading", children: [jsxRuntime.jsxs("div", { className: "szc-digital-products__title-row", children: [jsxRuntime.jsx("h2", { id: "szc-digital-title", className: "szc-digital-products__title", children: t.digitalNoShipping }), jsxRuntime.jsx("span", { className: "szc-digital-products__count", children: t.productCount(labels.toPersianDigits(String(digitalItems.length))) })] }), jsxRuntime.jsx("p", { children: t.digitalNoShippingHint })] })] }), jsxRuntime.jsx("div", { className: "szc-digital-products__list", children: digitalItems.map((item) => (jsxRuntime.jsxs("article", { className: "szc-digital-product", children: [jsxRuntime.jsxs("div", { className: "szc-digital-product__media", children: [item.image?.url ? (jsxRuntime.jsx("img", { src: item.image.url, alt: item.image.alt || item.name })) : (jsxRuntime.jsx(ProductPlaceholder, {})), jsxRuntime.jsx("span", { className: "szc-ship-product__quantity", children: labels.toPersianDigits(String(item.quantity)) })] }), jsxRuntime.jsx("strong", { className: "szc-digital-product__name", children: item.name })] }, item.id))) })] })) : null, physicalShippingGroups.length > 0 ? (jsxRuntime.jsxs("section", { className: "szc-shipping-methods", "aria-labelledby": "szc-methods-title", children: [jsxRuntime.jsx(ShippingSectionHeader, { id: "szc-methods-title", title: t.shippingMethods, icon: "shipping" }), jsxRuntime.jsx("div", { className: "szc-ship-groups", children: physicalShippingGroups.map((group) => (jsxRuntime.jsx(ShippingGroupCard, { group: group }, group.key))) })] })) : needsShipping && physicalItemCount > 0 ? (jsxRuntime.jsxs("div", { className: "szc-shipping-pending", role: "note", children: [jsxRuntime.jsx("span", { className: "szc-shipping-pending__icon", "aria-hidden": "true", children: jsxRuntime.jsx(TruckIcon, {}) }), jsxRuntime.jsxs("div", { className: "szc-shipping-pending__copy", children: [jsxRuntime.jsx("strong", { children: t.shippingMethods }), jsxRuntime.jsx("span", { children: t.shippingMethodsHint })] })] })) : null] }));
 }
 function ShippingSectionHeader({ id, title, icon }) {
     return (jsxRuntime.jsxs("header", { className: "szc-shipping-section__head", children: [jsxRuntime.jsx("span", { className: "szc-shipping-section__icon", "aria-hidden": "true", children: icon === 'contact' ? jsxRuntime.jsx(ContactIcon, {}) : icon === 'address' ? jsxRuntime.jsx(AddressIcon, {}) : jsxRuntime.jsx(TruckIcon, {}) }), jsxRuntime.jsx("h2", { id: id, className: "szc-shipping-section__title", children: title })] }));
@@ -399,6 +406,9 @@ function ContactIcon() {
 function AddressIcon() {
     return (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("path", { d: "M19 10c0 4.7-7 10-7 10S5 14.7 5 10a7 7 0 1 1 14 0Z", stroke: "currentColor", strokeWidth: "1.7", strokeLinejoin: "round" }), jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "2.25", stroke: "currentColor", strokeWidth: "1.7" })] }));
 }
+function DigitalIcon() {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "22", height: "22", fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("path", { d: "M12 3v11m0 0 4-4m-4 4-4-4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M5 16.5v1.75A1.75 1.75 0 0 0 6.75 20h10.5A1.75 1.75 0 0 0 19 18.25V16.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })] }));
+}
 function EnhancedSelect({ id, label, value, placeholder, options, required, optionalLabel, disabled, error, onChange }) {
     return (jsxRuntime.jsxs("label", { className: "szc-field", htmlFor: id, children: [jsxRuntime.jsx(FieldLabel, { label: label, required: required, optionalLabel: optionalLabel }), jsxRuntime.jsxs("div", { className: "szc-select-wrap", children: [jsxRuntime.jsxs("select", { id: id, className: `szc-input szc-select-enhanced${error ? ' szc-input--error' : ''}`, value: value, required: required, disabled: disabled, onChange: (e) => onChange(e.target.value), children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }), jsxRuntime.jsx("span", { className: "szc-select-chevron", "aria-hidden": "true", children: jsxRuntime.jsx(ChevronIcon, {}) })] }), error ? jsxRuntime.jsx("span", { className: "szc-field__error", children: error }) : null] }));
 }
@@ -565,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
@@ -732,6 +742,14 @@ 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)