@sazito/checkout 0.1.0

package/dist/next/index.js

@@ -0,0 +1,834 @@
+'use client';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { isValidElement, cloneElement, useState, useRef, useEffect, useCallback } from 'react';
+import { u as useCheckout, b as useSazitoClient, C as CheckoutProvider } from '../chunks/use-checkout-E0O8HsSs.js';
+export { S as SazitoProvider } from '../chunks/use-checkout-E0O8HsSs.js';
+import { m as formatPercent, F as toPersianDigits, s as isValidIranianMobile, y as normalizeIranianPhone, z as paymentMethodInfo, l as formatNumber } from '../chunks/labels-ChywPk2i.js';
+import '@sazito/client-sdk';
+
+/**
+ * When `asChild` is true, merges the parent's props onto the single React child
+ * element instead of rendering a wrapper element — the same pattern Radix UI /
+ * shadcn/ui uses. Class names and event handlers are merged; all other props
+ * from the parent win (child props act as defaults).
+ */
+function Slot({ children, ...slotProps }) {
+    if (!isValidElement(children)) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('[Slot] Must receive exactly one valid React element as child.');
+        }
+        return jsx(Fragment, { children: children });
+    }
+    const child = children;
+    const childProps = child.props;
+    const mergedClassName = [slotProps.className, childProps.className].filter(Boolean).join(' ') || undefined;
+    // Merge event handlers: call both if both exist.
+    const merged = { ...childProps, ...slotProps };
+    if (mergedClassName)
+        merged.className = mergedClassName;
+    for (const key of Object.keys(childProps)) {
+        if (key.startsWith('on') && typeof childProps[key] === 'function' && typeof slotProps[key] === 'function') {
+            const slotHandler = slotProps[key];
+            const childHandler = childProps[key];
+            merged[key] = (...args) => {
+                slotHandler(...args);
+                childHandler(...args);
+            };
+        }
+    }
+    return cloneElement(child, merged);
+}
+
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function Button({ variant = 'primary', block, loading, asChild, className, children, disabled, ...rest }) {
+    const props = {
+        className: cx('szc-btn', `szc-btn--${variant}`, block && 'szc-btn--block', className),
+        disabled: disabled || loading,
+        'aria-busy': loading || undefined,
+        ...rest,
+    };
+    if (asChild) {
+        return jsx(Slot, { ...props, children: children });
+    }
+    return (jsxs("button", { type: "button", ...props, children: [loading ? jsx(Spinner, {}) : null, jsx("span", { children: children })] }));
+}
+function Spinner({ asChild, className, children } = {}) {
+    if (asChild && children) {
+        return jsx(Slot, { className: cx('szc-spinner', className), children: children });
+    }
+    return jsx("span", { className: cx('szc-spinner', className), "aria-hidden": "true", children: children });
+}
+function ProductPlaceholder({ asChild, className, children } = {}) {
+    const props = { className: cx('szc-product-placeholder', className) };
+    if (asChild && children) {
+        return jsx(Slot, { ...props, children: children });
+    }
+    return (jsx("span", { ...props, children: children ?? (jsxs("svg", { viewBox: "0 0 64 64", width: "30", height: "30", fill: "none", "aria-hidden": "true", children: [jsx("path", { d: "M32 12 49 21.5v21L32 52 15 42.5v-21L32 12Z", stroke: "currentColor", strokeWidth: "2.25", strokeLinejoin: "round" }), jsx("path", { d: "m15 21.5 17 9.5 17-9.5M32 31v21", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" })] })) }));
+}
+function FieldLabel({ label, required, optionalLabel }) {
+    return (jsxs("span", { className: "szc-field__label", children: [label, !required && optionalLabel ? (jsxs("span", { className: "szc-field__optional", children: ["(", optionalLabel, ")"] })) : null] }));
+}
+function Field({ label, id, className, error, required, optionalLabel, asChild, children, ...rest }) {
+    const inputProps = {
+        id,
+        required,
+        className: cx('szc-input', error && 'szc-input--error', className),
+        ...rest,
+    };
+    return (jsxs("label", { className: "szc-field", htmlFor: id, children: [jsx(FieldLabel, { label: label, required: required, optionalLabel: optionalLabel }), asChild && children
+                ? jsx(Slot, { ...inputProps, children: children })
+                : jsx("input", { ...inputProps }), error ? jsx("span", { className: "szc-field__error", children: error }) : null] }));
+}
+function SectionTitle({ children, asChild, className }) {
+    const props = { className: cx('szc-section-title', className) };
+    if (asChild && children) {
+        return jsx(Slot, { ...props, children: children });
+    }
+    return jsx("h3", { ...props, children: children });
+}
+function ErrorBanner({ message, asChild, children, className }) {
+    const props = {
+        className: cx('szc-error', className),
+        role: 'alert',
+    };
+    if (asChild && children) {
+        return jsx(Slot, { ...props, children: children });
+    }
+    return jsx("div", { ...props, children: message });
+}
+
+const STEPS = ['cart', 'shipping', 'payment', 'result'];
+const STEP_ICONS = {
+    cart: CartIcon,
+    shipping: TruckIcon$1,
+    payment: CardIcon,
+    result: ClipboardIcon
+};
+function Stepper() {
+    const { state, t } = useCheckout();
+    const labels = {
+        cart: t.stepCart,
+        shipping: t.stepShipping,
+        payment: t.stepPayment,
+        result: t.stepResult
+    };
+    const currentIndex = STEPS.indexOf(state.step);
+    return (jsx("ol", { className: "szc-stepper", children: STEPS.map((step, index) => {
+            const status = index < currentIndex ? 'done' : index === currentIndex ? 'active' : 'todo';
+            const Icon = STEP_ICONS[step];
+            return (jsxs("li", { className: `szc-step szc-step--${status}`, children: [jsx("span", { className: "szc-step__dot", children: status === 'done' ? jsx(CheckIcon$2, {}) : jsx(Icon, {}) }), jsx("span", { className: "szc-step__label", children: labels[step] }), index < STEPS.length - 1 ? jsx("span", { className: "szc-step__line" }) : null] }, step));
+        }) }));
+}
+function CheckIcon$2() {
+    return (jsx("svg", { viewBox: "0 0 16 16", width: "15", height: "15", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M3.5 8.5l3 3 6-6.5", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function CartIcon() {
+    return (jsxs("svg", { viewBox: "0 0 16 16", width: "15", height: "15", fill: "none", "aria-hidden": "true", children: [jsx("path", { d: "M1.5 2h1.8l1.9 7.5h6.3l1.5-5H4.8", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "6.5", cy: "13", r: "1", fill: "currentColor" }), jsx("circle", { cx: "11", cy: "13", r: "1", fill: "currentColor" })] }));
+}
+function TruckIcon$1() {
+    return (jsxs("svg", { viewBox: "0 0 16 16", width: "15", height: "15", fill: "none", "aria-hidden": "true", children: [jsx("rect", { x: "1", y: "4", width: "9", height: "7", rx: "1", stroke: "currentColor", strokeWidth: "1.6" }), jsx("path", { d: "M10 6.5h2.5l2 2.5V11h-4.5V6.5z", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round" }), jsx("circle", { cx: "4", cy: "12.5", r: "1.2", stroke: "currentColor", strokeWidth: "1.3" }), jsx("circle", { cx: "12", cy: "12.5", r: "1.2", stroke: "currentColor", strokeWidth: "1.3" })] }));
+}
+function CardIcon() {
+    return (jsxs("svg", { viewBox: "0 0 16 16", width: "15", height: "15", fill: "none", "aria-hidden": "true", children: [jsx("rect", { x: "1.5", y: "3.5", width: "13", height: "9", rx: "1.5", stroke: "currentColor", strokeWidth: "1.6" }), jsx("path", { d: "M1.5 6.5h13", stroke: "currentColor", strokeWidth: "1.6" }), jsx("rect", { x: "3", y: "8.5", width: "3", height: "1.5", rx: ".5", fill: "currentColor" })] }));
+}
+function ClipboardIcon() {
+    return (jsxs("svg", { viewBox: "0 0 16 16", width: "15", height: "15", fill: "none", "aria-hidden": "true", children: [jsx("rect", { x: "2.5", y: "2.5", width: "11", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.6" }), jsx("path", { d: "M5.5 2.5A1.5 1.5 0 0 1 7 1h2a1.5 1.5 0 0 1 1.5 1.5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }), jsx("path", { d: "M5 7h6M5 9.5h4", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })] }));
+}
+
+function OrderSummary() {
+    const { state, summary, money, t } = useCheckout();
+    const percentSign = state.locale === 'fa' ? '٪' : '%';
+    const lineLabels = {
+        subtotal: t.subtotal,
+        discount: t.yourSavings,
+        shipping: t.shipping,
+        credit: t.credit,
+        vat: t.vat
+    };
+    return (jsxs("aside", { className: "szc-summary", children: [jsxs("div", { className: "szc-summary__total-head", children: [jsx("span", { className: "szc-summary__total-label", children: t.totalAmount }), jsx("span", { className: "szc-summary__total-value", children: money(summary.total) })] }), jsx("dl", { className: "szc-summary__lines", children: summary.lines.map((line) => (jsxs("div", { className: `szc-summary__line${line.key === 'discount' ? ' szc-summary__line--discount' : ''}`, children: [jsxs("dt", { children: [lineLabels[line.key], (line.percent ?? 0) > 0
+                                    ? ` (${formatPercent(line.percent, state.locale)}${percentSign})`
+                                    : ''] }), jsx("dd", { className: line.negative ? 'szc-summary__line--neg' : undefined, children: line.free ? (jsx("span", { className: "szc-summary__free", children: t.free })) : (`${line.negative ? '−' : ''}${money(line.amount)}`) })] }, line.key))) }), jsxs("div", { className: "szc-summary__grand", children: [jsx("span", { children: t.total }), jsx("span", { children: money(summary.total) })] })] }));
+}
+
+const PERSIAN_DIGITS = '۰۱۲۳۴۵۶۷۸۹';
+const ARABIC_DIGITS = '٠١٢٣٤٥٦٧٨٩';
+const QUANTITY_DEBOUNCE_MS = 600;
+function toLatinDigits(value) {
+    return value
+        .replace(/[۰-۹]/g, (digit) => String(PERSIAN_DIGITS.indexOf(digit)))
+        .replace(/[٠-٩]/g, (digit) => String(ARABIC_DIGITS.indexOf(digit)));
+}
+const HEX_COLOR_RE = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function attrValueToString(value) {
+    if (value == null)
+        return '';
+    if (typeof value === 'object') {
+        const v = value.value;
+        return v == null ? '' : String(v);
+    }
+    return String(value);
+}
+function toHexColor(value) {
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    return HEX_COLOR_RE.test(trimmed) ? (trimmed.startsWith('#') ? trimmed : `#${trimmed}`) : null;
+}
+// Hex can arrive as the raw value, or nested in `extra`/`value` of an object attribute.
+function attrHexColor(value) {
+    if (value && typeof value === 'object') {
+        const obj = value;
+        return toHexColor(obj.extra) ?? toHexColor(obj.value);
+    }
+    return toHexColor(value);
+}
+function CartStep({ continueShoppingUrl, renderEmpty, }) {
+    const { state, actions, money, t } = useCheckout();
+    const cart = state.cart;
+    const busy = state.flags.updatingCart;
+    const invoiceItemsByVariant = new Map((state.invoice?.items ?? []).map((item) => [item.productVariantId, item]));
+    if (!cart || cart.items.length === 0) {
+        if (renderEmpty) {
+            return renderEmpty({ continueShoppingUrl });
+        }
+        return (jsx("section", { className: "szc-empty", role: "status", "aria-live": "polite", children: jsxs("div", { className: "szc-empty__card", children: [jsx("span", { className: "szc-empty__badge", children: jsx(CartIcon, {}) }), jsxs("div", { className: "szc-empty__copy", children: [jsx("h3", { className: "szc-empty__title", children: t.cartEmpty }), jsx("p", { className: "szc-empty__hint", children: t.cartEmptyHint })] }), continueShoppingUrl ? (jsx(Button, { className: "szc-empty__cta", variant: "primary", onClick: () => { window.location.href = continueShoppingUrl; }, children: t.continueShopping })) : null] }) }));
+    }
+    return (jsx("section", { className: "szc-step-panel", children: jsx("ul", { className: "szc-cart-list", children: cart.items.map((item) => {
+                const max = item.product.maxOrderQuantity;
+                const min = item.product.minOrderQuantity ?? 1;
+                const invoiceItem = invoiceItemsByVariant.get(item.product.variantId);
+                const rawLineTotal = (invoiceItem?.rawPrice ?? item.unitPrice) * item.quantity;
+                const itemDiscount = invoiceItem?.customerProfit
+                    || Math.max(0, rawLineTotal - item.lineTotal);
+                return (jsxs("li", { className: "szc-cart-row", children: [item.product.image?.url ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        jsx("img", { className: "szc-cart-row__thumb", src: item.product.image.url, alt: "" })) : (jsx(ProductPlaceholder, {})), jsxs("div", { className: "szc-cart-row__main", children: [jsx("span", { className: "szc-cart-row__name", children: item.product.name }), item.product.attributes?.length ? (jsx("span", { className: "szc-cart-row__attrs", children: item.product.attributes.map((a, i) => {
+                                        const value = attrValueToString(a.value);
+                                        const hex = attrHexColor(a.value);
+                                        return (jsxs("span", { className: "szc-cart-row__attr", children: [i > 0 ? jsx("span", { className: "szc-cart-row__attr-sep", children: "\u00B7" }) : null, jsxs("span", { children: [a.name, ":"] }), hex ? (jsx("span", { className: "szc-cart-row__swatch", style: { backgroundColor: hex }, title: hex, "aria-hidden": "true" })) : null, value ? jsx("span", { children: value }) : null] }, `${a.name}-${i}`));
+                                    }) })) : null, jsx("span", { className: "szc-cart-row__price", children: money(item.unitPrice) })] }), jsxs("div", { className: "szc-cart-row__side", children: [jsx(QuantityControl, { value: item.quantity, min: min, max: max, label: t.quantity, onChange: (quantity) => actions.updateItemQuantity(item.id, item.product.variantId, quantity) }), itemDiscount > 0 ? (jsx("span", { className: "szc-cart-row__discount", children: t.itemDiscount(money(itemDiscount)) })) : null, jsx("span", { className: "szc-cart-row__line-total", children: money(item.lineTotal) }), jsx("button", { type: "button", className: "szc-cart-row__remove", "aria-label": t.remove, disabled: busy, onClick: () => actions.removeItem(item.id, item.product.variantId), children: jsx(TrashIcon, {}) })] })] }, item.id));
+            }) }) }));
+}
+function QuantityControl({ value, min, max, label, onChange }) {
+    const [draft, setDraft] = useState(() => toPersianDigits(String(value)));
+    const [pending, setPending] = useState(false);
+    const draftRef = useRef(draft);
+    const pendingValueRef = useRef(null);
+    const timerRef = useRef(null);
+    const inFlightRef = useRef(false);
+    const serverValueRef = useRef(value);
+    const onChangeRef = useRef(onChange);
+    serverValueRef.current = value;
+    onChangeRef.current = onChange;
+    const updateDraft = (next) => {
+        draftRef.current = next;
+        setDraft(next);
+    };
+    useEffect(() => {
+        if (!pending || pendingValueRef.current === value) {
+            updateDraft(toPersianDigits(String(value)));
+        }
+    }, [value, pending]);
+    useEffect(() => () => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+    }, []);
+    const normalize = (next) => Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min, Math.trunc(next)));
+    async function flushPendingUpdate() {
+        if (inFlightRef.current)
+            return;
+        const target = pendingValueRef.current;
+        if (target == null)
+            return;
+        if (target === serverValueRef.current) {
+            pendingValueRef.current = null;
+            setPending(false);
+            return;
+        }
+        inFlightRef.current = true;
+        try {
+            await onChangeRef.current(target);
+        }
+        finally {
+            inFlightRef.current = false;
+            if (pendingValueRef.current === target) {
+                pendingValueRef.current = null;
+                setPending(false);
+            }
+            else if (timerRef.current == null) {
+                timerRef.current = setTimeout(() => {
+                    timerRef.current = null;
+                    void flushPendingUpdate();
+                }, QUANTITY_DEBOUNCE_MS);
+            }
+        }
+    }
+    const scheduleUpdate = (rawValue) => {
+        const parsed = typeof rawValue === 'number' ? rawValue : Number(toLatinDigits(rawValue));
+        const next = normalize(Number.isFinite(parsed) ? parsed : value);
+        updateDraft(toPersianDigits(String(next)));
+        if (next === serverValueRef.current && !pending && !inFlightRef.current)
+            return;
+        pendingValueRef.current = next;
+        setPending(true);
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            void flushPendingUpdate();
+        }, QUANTITY_DEBOUNCE_MS);
+    };
+    const step = (amount) => {
+        const parsedDraft = Number(toLatinDigits(draftRef.current));
+        const base = Number.isFinite(parsedDraft) ? parsedDraft : value;
+        scheduleUpdate(base + amount);
+    };
+    const parsedDraft = Number(toLatinDigits(draft));
+    const displayedValue = Number.isFinite(parsedDraft) ? normalize(parsedDraft) : value;
+    return (jsxs("div", { className: `szc-qty${pending ? ' szc-qty--pending' : ''}`, "aria-busy": pending, children: [jsx("button", { type: "button", className: "szc-qty__btn", "aria-label": `${label} −`, disabled: displayedValue <= min, onMouseDown: (event) => event.preventDefault(), onClick: () => step(-1), children: jsx(MinusIcon, {}) }), 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) => {
+                    const digits = toLatinDigits(event.target.value).replace(/\D/g, '');
+                    if (!digits) {
+                        if (timerRef.current)
+                            clearTimeout(timerRef.current);
+                        timerRef.current = null;
+                        updateDraft('');
+                        return;
+                    }
+                    scheduleUpdate(Number(digits));
+                }, onBlur: () => scheduleUpdate(draftRef.current), onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        event.currentTarget.blur();
+                    }
+                    else if (event.key === 'Escape') {
+                        event.preventDefault();
+                        if (timerRef.current)
+                            clearTimeout(timerRef.current);
+                        timerRef.current = null;
+                        pendingValueRef.current = null;
+                        setPending(false);
+                        updateDraft(toPersianDigits(String(value)));
+                    }
+                    else if (event.key === 'ArrowUp') {
+                        event.preventDefault();
+                        step(1);
+                    }
+                    else if (event.key === 'ArrowDown') {
+                        event.preventDefault();
+                        step(-1);
+                    }
+                } }), jsx("button", { type: "button", className: "szc-qty__btn", "aria-label": `${label} +`, disabled: max != null && displayedValue >= max, onMouseDown: (event) => event.preventDefault(), onClick: () => step(1), children: jsx(PlusIcon, {}) })] }));
+}
+function MinusIcon() {
+    return (jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+function PlusIcon() {
+    return (jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M8 3.5v9M3.5 8h9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+function TrashIcon() {
+    return (jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [jsx("path", { d: "M3 6h18" }), jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }), jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }), jsx("path", { d: "M10 11v6M14 11v6" })] }));
+}
+
+function validate(form, needsShipping, postalCodeMandatory, emailMandatory, t) {
+    const e = {};
+    if (!form.firstName.trim())
+        e.firstName = t.errorRequired;
+    if (!form.lastName.trim())
+        e.lastName = t.errorRequired;
+    if (!form.mobilePhone.trim()) {
+        e.mobilePhone = t.errorRequired;
+    }
+    else if (!isValidIranianMobile(form.mobilePhone)) {
+        e.mobilePhone = t.errorMobilePhone;
+    }
+    if (emailMandatory && !form.email.trim()) {
+        e.email = t.errorRequired;
+    }
+    else if (form.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) {
+        e.email = t.errorEmail;
+    }
+    if (needsShipping) {
+        if (!form.regionId)
+            e.regionId = t.errorRequired;
+        if (!form.cityId)
+            e.cityId = t.errorRequired;
+        if (postalCodeMandatory && !form.postalCode.trim())
+            e.postalCode = t.errorRequired;
+        if (!form.address.trim())
+            e.address = t.errorRequired;
+    }
+    return e;
+}
+function ShippingStep() {
+    const { state, actions, t, digitalItems } = useCheckout();
+    const { addressForm, regions, shippingGroups } = state;
+    const [touched, setTouched] = useState({});
+    const needsShipping = state.invoice?.needsShipping ?? true;
+    const touch = useCallback((key) => {
+        setTouched((prev) => ({ ...prev, [key]: true }));
+    }, []);
+    const allErrors = validate(addressForm, needsShipping, state.postalCodeMandatory, state.emailMandatory, t);
+    const errors = Object.fromEntries(Object.entries(allErrors).filter(([k]) => touched[k]));
+    const selectedRegion = regions.find((r) => r.id === addressForm.regionId);
+    const handleBlurPhone = (key) => {
+        const raw = addressForm[key];
+        if (raw) {
+            const normalized = normalizeIranianPhone(raw);
+            if (normalized !== raw)
+                actions.setAddressField(key, normalized);
+        }
+        touch(key);
+    };
+    const busy = state.flags.savingAddress || state.flags.loadingShipping;
+    return (jsxs("section", { className: `szc-step-panel${busy ? ' szc-step-panel--loading' : ''}`, children: [jsxs("div", { className: "szc-shipping-form-card", children: [jsxs("section", { className: "szc-shipping-section", "aria-labelledby": "szc-contact-title", children: [jsx(ShippingSectionHeader, { id: "szc-contact-title", title: t.contactInfo, icon: "contact" }), jsxs("div", { className: "szc-form-grid", children: [jsx(Field, { id: "szc-first-name", label: t.firstName, required: true, optionalLabel: t.optional, value: addressForm.firstName, error: errors.firstName, onChange: (e) => actions.setAddressField('firstName', e.target.value), onBlur: () => touch('firstName') }), jsx(Field, { id: "szc-last-name", label: t.lastName, required: true, optionalLabel: t.optional, value: addressForm.lastName, error: errors.lastName, onChange: (e) => actions.setAddressField('lastName', e.target.value), onBlur: () => touch('lastName') }), jsx(Field, { id: "szc-mobile", label: t.mobilePhone, required: true, optionalLabel: t.optional, className: "szc-input--ltr", dir: "ltr", inputMode: "tel", value: addressForm.mobilePhone, error: errors.mobilePhone, onChange: (e) => actions.setAddressField('mobilePhone', e.target.value), onBlur: () => handleBlurPhone('mobilePhone') }), jsx(Field, { id: "szc-email", label: t.email, required: state.emailMandatory, optionalLabel: t.optional, className: "szc-input--ltr", dir: "ltr", inputMode: "email", value: addressForm.email, error: errors.email, onChange: (e) => actions.setAddressField('email', e.target.value), onBlur: () => touch('email') })] })] }), needsShipping ? (jsxs("section", { className: "szc-shipping-section", "aria-labelledby": "szc-address-title", children: [jsx(ShippingSectionHeader, { id: "szc-address-title", title: t.reviewAddress, icon: "address" }), jsxs("div", { className: "szc-form-grid", children: [jsx(EnhancedSelect, { id: "szc-region", label: t.region, required: true, optionalLabel: t.optional, value: addressForm.regionId ?? '', error: errors.regionId, onChange: (v) => {
+                                            actions.setAddressField('regionId', v ? Number(v) : null);
+                                            touch('regionId');
+                                        }, placeholder: t.selectRegion, options: regions.map((r) => ({ value: r.id, label: r.name })) }), 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 })) ?? [] }), 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') }), 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') })] }), 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') }), 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 ? (jsxs("section", { className: "szc-shipping-methods", "aria-labelledby": "szc-methods-title", children: [jsx(ShippingSectionHeader, { id: "szc-methods-title", title: t.shippingMethods, icon: "shipping" }), jsx("div", { className: "szc-ship-groups", children: shippingGroups.map((group) => (jsx(ShippingGroupCard, { group: group }, group.key))) })] })) : needsShipping ? (jsxs("div", { className: "szc-shipping-pending", role: "note", children: [jsx("span", { className: "szc-shipping-pending__icon", "aria-hidden": "true", children: jsx(TruckIcon, {}) }), jsxs("div", { className: "szc-shipping-pending__copy", children: [jsx("strong", { children: t.shippingMethods }), jsx("span", { children: t.shippingMethodsHint })] })] })) : null, digitalItems.length > 0 ? (jsxs("div", { className: "szc-digital-note", children: [jsx("span", { className: "szc-digital-note__icon", children: "\u2B07\uFE0E" }), jsxs("div", { children: [jsx("strong", { children: t.digitalNoShipping }), jsx("ul", { children: digitalItems.map((item) => (jsx("li", { children: item.name }, item.id))) })] })] })) : null] }));
+}
+function ShippingSectionHeader({ id, title, icon }) {
+    return (jsxs("header", { className: "szc-shipping-section__head", children: [jsx("span", { className: "szc-shipping-section__icon", "aria-hidden": "true", children: icon === 'contact' ? jsx(ContactIcon, {}) : icon === 'address' ? jsx(AddressIcon, {}) : jsx(TruckIcon, {}) }), jsx("h2", { id: id, className: "szc-shipping-section__title", children: title })] }));
+}
+function ContactIcon() {
+    return (jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [jsx("circle", { cx: "12", cy: "8", r: "3.25", stroke: "currentColor", strokeWidth: "1.7" }), jsx("path", { d: "M5.5 19c.65-3.35 3-5.25 6.5-5.25s5.85 1.9 6.5 5.25", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round" })] }));
+}
+function AddressIcon() {
+    return (jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [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" }), jsx("circle", { cx: "12", cy: "10", r: "2.25", stroke: "currentColor", strokeWidth: "1.7" })] }));
+}
+function EnhancedSelect({ id, label, value, placeholder, options, required, optionalLabel, disabled, error, onChange }) {
+    return (jsxs("label", { className: "szc-field", htmlFor: id, children: [jsx(FieldLabel, { label: label, required: required, optionalLabel: optionalLabel }), jsxs("div", { className: "szc-select-wrap", children: [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: [jsx("option", { value: "", children: placeholder }), options.map((opt) => (jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }), jsx("span", { className: "szc-select-chevron", "aria-hidden": "true", children: jsx(ChevronIcon, {}) })] }), error ? jsx("span", { className: "szc-field__error", children: error }) : null] }));
+}
+function ChevronIcon() {
+    return (jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * Click-and-drag horizontal scrolling for a container with a hidden scrollbar.
+ * Also maps vertical mouse-wheel deltas to horizontal scroll so a plain mouse
+ * (no horizontal wheel) can still pan the list.
+ */
+function useDragScroll() {
+    const ref = useRef(null);
+    const drag = useRef({ down: false, startX: 0, startLeft: 0 });
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            if (el.scrollWidth <= el.clientWidth)
+                return; // nothing to pan
+            if (Math.abs(e.deltaY) <= Math.abs(e.deltaX))
+                return; // already horizontal
+            e.preventDefault();
+            el.scrollLeft += e.deltaY;
+        };
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, []);
+    const onPointerDown = (e) => {
+        const el = ref.current;
+        if (!el)
+            return;
+        drag.current = { down: true, startX: e.clientX, startLeft: el.scrollLeft };
+        el.setPointerCapture(e.pointerId);
+        el.classList.add('szc-dragging');
+    };
+    const onPointerMove = (e) => {
+        const el = ref.current;
+        if (!el || !drag.current.down)
+            return;
+        el.scrollLeft = drag.current.startLeft - (e.clientX - drag.current.startX);
+    };
+    const onPointerUp = (e) => {
+        const el = ref.current;
+        if (!el || !drag.current.down)
+            return;
+        drag.current.down = false;
+        el.classList.remove('szc-dragging');
+        try {
+            el.releasePointerCapture(e.pointerId);
+        }
+        catch {
+            /* pointer already released */
+        }
+    };
+    return { ref, onPointerDown, onPointerMove, onPointerUp };
+}
+function ShippingGroupCard({ group }) {
+    const { actions, price, state, t } = useCheckout();
+    const busy = state.flags.selectingRate;
+    const selectedRate = group.rates.find((rate) => rate.id === group.selectedRateId);
+    const showRateSelector = group.items.length !== 1 || group.rates.length !== 1;
+    const itemsScroll = useDragScroll();
+    return (jsxs("div", { className: "szc-ship-group", children: [jsxs("header", { className: "szc-ship-group__head", children: [jsx("span", { className: "szc-ship-group__mark", style: shippingRateIconStyle(selectedRate?.color), "aria-hidden": "true", children: selectedRate ? jsx(ShippingRateIcon, { rate: selectedRate }) : jsx(TruckIcon, {}) }), jsxs("div", { className: "szc-ship-group__heading", children: [jsxs("div", { className: "szc-ship-group__title-row", children: [jsx("strong", { className: "szc-ship-group__title", children: group.title || selectedRate?.name || t.shippingMethod }), jsx("span", { className: "szc-ship-group__count", children: t.productCount(toPersianDigits(String(group.items.length))) })] }), selectedRate ? (jsxs("span", { className: "szc-ship-group__hint", children: [selectedRate.description ? (jsx("span", { className: "szc-ship-group__desc", children: selectedRate.description })) : null, jsx("span", { className: "szc-ship-group__rate-price", children: selectedRate.price > 0 ? price(selectedRate.price) : t.free })] })) : (jsx("span", { className: "szc-ship-group__hint", children: t.shippingMethods }))] })] }), jsx("div", { className: "szc-ship-group__items", ref: itemsScroll.ref, onPointerDown: itemsScroll.onPointerDown, onPointerMove: itemsScroll.onPointerMove, onPointerUp: itemsScroll.onPointerUp, onPointerCancel: itemsScroll.onPointerUp, children: group.items.map((item) => (jsxs("article", { className: "szc-ship-product", children: [jsxs("div", { className: "szc-ship-product__media", children: [item.image?.url ? (jsx("img", { src: item.image.url, alt: item.image.alt || item.name })) : (jsx(ProductPlaceholder, {})), jsx("span", { className: "szc-ship-product__quantity", children: toPersianDigits(String(item.quantity)) })] }), jsxs("div", { className: "szc-ship-product__copy", children: [jsx("strong", { className: "szc-ship-product__name", children: item.name }), item.attributes.length > 0 ? (jsx("span", { className: "szc-ship-product__attrs", children: item.attributes.map((attribute) => `${attribute.name}: ${attribute.value}`).join(' · ') })) : null] })] }, item.id))) }), !showRateSelector && selectedRate?.description?.trim() ? (jsx("div", { className: "szc-ship-group__description", children: selectedRate.description.trim() })) : null, showRateSelector ? (jsx("div", { className: "szc-rate-list", role: "radiogroup", children: group.rates.map((rate) => {
+                    const selected = group.selectedRateId === rate.id;
+                    const description = rate.description?.trim();
+                    return (jsxs("button", { type: "button", role: "radio", "aria-checked": selected, "aria-label": description ? `${rate.name} — ${description}` : rate.name, disabled: busy, className: `szc-rate${selected ? ' szc-rate--selected' : ''}`, onClick: () => actions.selectShippingRate(group.key, rate.id), children: [jsx("span", { className: "szc-rate__icon", style: shippingRateIconStyle(rate.color), "aria-hidden": "true", children: jsx(ShippingRateIcon, { rate: rate }) }), jsxs("span", { className: "szc-rate__copy", children: [jsx("span", { className: "szc-rate__name", children: rate.name }), rate.price > 0 ? (jsx("span", { className: "szc-rate__price", children: price(rate.price) })) : null] }), jsx("span", { className: "szc-rate__radio", "aria-hidden": "true", children: selected ? jsx(CheckIcon$1, {}) : null }), description ? (jsx("span", { className: "szc-rate__description", children: description })) : null] }, rate.id));
+                }) })) : null] }));
+}
+const ICON_PROPS$1 = {
+    viewBox: '0 0 24 24',
+    width: 26,
+    height: 26,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': true,
+};
+function TruckIcon() {
+    return (jsxs("svg", { ...ICON_PROPS$1, children: [jsx("path", { d: "M14 17V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h1" }), jsx("path", { d: "M9 18h5" }), jsx("path", { d: "M18 18h1a1 1 0 0 0 1-1v-3.28a1 1 0 0 0-.21-.62l-2.7-3.39A1 1 0 0 0 16.3 9H14" }), jsx("circle", { cx: "7", cy: "18", r: "2" }), jsx("circle", { cx: "16", cy: "18", r: "2" })] }));
+}
+function ShippingRateIcon({ rate }) {
+    const iconKey = shippingRateIconKey(rate);
+    switch (iconKey) {
+        case 'post':
+            return jsx(PostIcon, {});
+        case 'free-delivery':
+            return jsx(FreeDeliveryIcon, {});
+        case 'courier':
+            return jsx(CourierIcon, {});
+        case 'delivery-man':
+            return jsx(DeliveryManIcon, {});
+        default:
+            return rate.icon && isImageUrl(rate.icon) ? jsx("img", { src: rate.icon, alt: "" }) : jsx(TruckIcon, {});
+    }
+}
+function shippingRateIconKey(rate) {
+    const explicit = (rate.icon || rate.type || '').trim().toLowerCase().replace(/_/g, '-');
+    if (explicit)
+        return explicit;
+    const name = rate.name.trim().toLowerCase();
+    if (name.includes('پست') || name.includes('post'))
+        return 'post';
+    if (name.includes('رایگان') || name.includes('free'))
+        return 'free-delivery';
+    if (name.includes('پیک') || name.includes('courier'))
+        return 'courier';
+    if (name.includes('حضوری') || name.includes('delivery man'))
+        return 'delivery-man';
+    return '';
+}
+/**
+ * The API returns `color` as a palette *token* (e.g. `mainColor`, `green`) — not
+ * always a CSS color. Map the known tokens to concrete CSS colors so each rate
+ * renders its own chip color instead of every icon falling back to the accent.
+ */
+const SHIPPING_COLOR_TOKENS = {
+    green: '#16a34a',
+    red: '#dc2626',
+    blue: '#2563eb',
+    orange: '#ea580c',
+    yellow: '#eab308',
+    purple: '#7c3aed',
+    pink: '#db2777',
+    teal: '#0d9488',
+    cyan: '#0891b2',
+    indigo: '#4f46e5',
+    gray: '#6b7280',
+    grey: '#6b7280',
+    black: '#0f172a',
+    brown: '#92400e'
+};
+function resolveShippingColor(raw) {
+    const token = raw.trim().toLowerCase();
+    if (!token)
+        return undefined;
+    // The shop's "main color" is the theme accent → let the CSS fallback handle it.
+    if (token === 'maincolor' || token === 'main')
+        return undefined;
+    if (token === 'transparent' || token === 'white')
+        return '#ffffff';
+    if (SHIPPING_COLOR_TOKENS[token])
+        return SHIPPING_COLOR_TOKENS[token];
+    // Already a concrete CSS color value (hex / rgb()).
+    if (parseColorChannels(token))
+        return token;
+    return undefined;
+}
+function shippingRateIconStyle(color) {
+    if (!color)
+        return undefined;
+    const resolved = resolveShippingColor(color);
+    // Unknown token / unparseable → let CSS use the theme's soft accent treatment.
+    if (!resolved)
+        return undefined;
+    const rgb = parseColorChannels(resolved);
+    if (!rgb)
+        return undefined;
+    const luminance = (0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) / 255;
+    // A white / near-white brand color (common for "post") would vanish against
+    // the card. Render a neutral chip with a slate glyph instead.
+    if (luminance > 0.9) {
+        return {
+            '--szc-rate-color': '#eef0f5',
+            '--szc-rate-foreground': '#475569'
+        };
+    }
+    const foreground = luminance > 0.62
+        ? `rgb(${rgb.map((channel) => Math.round(channel * 0.58)).join(', ')})`
+        : resolved;
+    return {
+        '--szc-rate-color': `color-mix(in srgb, ${resolved} 13%, var(--szc-card))`,
+        '--szc-rate-foreground': foreground
+    };
+}
+function parseColorChannels(value) {
+    const hex = value.match(/^#([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i)?.[1];
+    if (hex?.length === 3) {
+        return [0, 1, 2].map((index) => parseInt(hex[index] + hex[index], 16));
+    }
+    if (hex && hex.length >= 6) {
+        return [
+            parseInt(hex.slice(0, 2), 16),
+            parseInt(hex.slice(2, 4), 16),
+            parseInt(hex.slice(4, 6), 16)
+        ];
+    }
+    const channels = value.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+    if (channels)
+        return [Number(channels[1]), Number(channels[2]), Number(channels[3])];
+    return null;
+}
+function isImageUrl(value) {
+    return /^(https?:)?\/\//i.test(value) || value.startsWith('/') || value.startsWith('data:');
+}
+function PostIcon() {
+    return (jsxs("svg", { ...ICON_PROPS$1, children: [jsx("path", { d: "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" }), jsx("path", { d: "M3.3 7 12 12l8.7-5" }), jsx("path", { d: "M12 22V12" }), jsx("path", { d: "m7.5 4.6 9 5.2" })] }));
+}
+function FreeDeliveryIcon() {
+    return (jsxs("svg", { ...ICON_PROPS$1, children: [jsx("path", { d: "M21 11V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l1.5-.86" }), jsx("path", { d: "M3.3 7 12 12l8.7-5" }), jsx("path", { d: "M12 22V12" }), jsx("path", { d: "m15.5 17 2 2 4-4" })] }));
+}
+function CourierIcon() {
+    return (jsxs("svg", { ...ICON_PROPS$1, children: [jsx("circle", { cx: "5.5", cy: "17.5", r: "3.5" }), jsx("circle", { cx: "18.5", cy: "17.5", r: "3.5" }), jsx("circle", { cx: "15", cy: "5", r: "1" }), jsx("path", { d: "M12 17.5V14l-3-3 4-3 2 3h2" })] }));
+}
+function DeliveryManIcon() {
+    return (jsxs("svg", { ...ICON_PROPS$1, children: [jsx("circle", { cx: "9", cy: "4.5", r: "2.5" }), jsx("path", { d: "M5.5 21v-6.5a3.5 3.5 0 0 1 7 0V21" }), jsx("rect", { x: "14", y: "11.5", width: "6.5", height: "7", rx: "1.2" }), jsx("path", { d: "M14 15h6.5" }), jsx("path", { d: "M17.2 11.5v3.5" })] }));
+}
+function CheckIcon$1() {
+    return (jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "m3.2 8.2 3 3 6.6-6.4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+
+/** Human line for the applied-code card: "20% off (50,000)", "Free shipping", … */
+function describeDiscount(discount, t, money, locale) {
+    const parts = [];
+    if (discount.kind === 'percentage' && (discount.percent ?? 0) > 0) {
+        const percentOff = t.discountPercentOff(formatPercent(discount.percent, locale));
+        parts.push(discount.amount > 0 ? `${percentOff} (${money(discount.amount)})` : percentOff);
+    }
+    else if (discount.amount > 0) {
+        parts.push(t.discountAmountOff(money(discount.amount)));
+    }
+    if (discount.kind === 'free_shipping' || (discount.shippingSaved ?? 0) > 0) {
+        parts.push(t.discountFreeShipping);
+    }
+    return parts.length > 0 ? parts.join(' + ') : null;
+}
+function PaymentStep() {
+    const { state, actions, t, money } = useCheckout();
+    const { paymentMethods, selectedPaymentMethodId, appliedDiscount, discountCode, discountError, flags, locale } = state;
+    return (jsxs("section", { className: "szc-step-panel", children: [jsx(SectionTitle, { children: t.paymentMethod }), flags.loadingPayments ? (jsxs("p", { className: "szc-inline-loading", children: [jsx(Spinner, {}), " ", t.loading] })) : (jsx("div", { className: "szc-pay-list", role: "radiogroup", "aria-label": t.paymentMethod, children: paymentMethods.map((method) => {
+                    const selected = selectedPaymentMethodId === method.id;
+                    const info = paymentMethodInfo(method.code, locale);
+                    // Prefer backend-provided title/description; fall back to derived labels.
+                    const backendTitle = locale === 'fa' ? method.titleFa : method.title;
+                    const title = backendTitle?.trim() || info.title;
+                    const description = method.description?.trim() || info.description;
+                    return (jsxs("button", { type: "button", role: "radio", "aria-checked": selected, className: `szc-pay${selected ? ' szc-pay--selected' : ''}`, onClick: () => actions.selectPaymentMethod(method.id), children: [jsx("span", { className: "szc-pay__icon", "aria-hidden": "true", children: jsx(PaymentIcon, { kind: info.kind }) }), jsxs("span", { className: "szc-pay__body", children: [jsx("span", { className: "szc-pay__name", children: title }), jsx("span", { className: "szc-pay__desc", children: description })] }), jsx("span", { className: "szc-pay__radio", "aria-hidden": "true", children: selected ? jsx(CheckIcon, {}) : null })] }, method.id));
+                }) })), jsx(SectionTitle, { children: t.discountCode }), appliedDiscount ? (jsxs("div", { className: "szc-discount szc-discount--applied", children: [jsx("span", { className: "szc-discount__icon", "aria-hidden": "true", children: jsx(TagIcon, {}) }), jsxs("span", { className: "szc-discount__body", children: [jsx("code", { className: "szc-discount__code", children: appliedDiscount.code }), jsx("span", { className: "szc-discount__desc", children: describeDiscount(appliedDiscount, t, money, locale) ?? t.applied })] }), jsxs("span", { className: "szc-discount__badge", children: [jsx(CheckIcon, {}), " ", t.applied] }), jsx(Button, { variant: "ghost", onClick: () => actions.removeDiscount(), loading: flags.applyingDiscount, children: t.remove })] })) : (jsxs("div", { className: "szc-discount-field", children: [jsxs("div", { className: "szc-discount", children: [jsxs("span", { className: "szc-discount__inputwrap", children: [jsx(TagIcon, {}), jsx("input", { className: `szc-input${discountError ? ' szc-input--error' : ''}`, placeholder: t.discountPlaceholder, value: discountCode, "aria-invalid": discountError ? true : undefined, onChange: (e) => actions.setDiscountCode(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === 'Enter')
+                                                actions.applyDiscount();
+                                        } })] }), jsx(Button, { variant: "outline", onClick: () => actions.applyDiscount(), loading: flags.applyingDiscount, disabled: !discountCode.trim(), children: t.apply })] }), discountError ? (jsxs("p", { className: "szc-discount__error", role: "alert", children: [jsx(AlertIcon, {}), discountError] })) : null] }))] }));
+}
+function TagIcon() {
+    return (jsxs("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [jsx("path", { d: "M10.5 2.5H16v5.5l-7.5 7.5a1.8 1.8 0 0 1-2.5 0L3 13a1.8 1.8 0 0 1 0-2.5z" }), jsx("circle", { cx: "12.8", cy: "5.7", r: "1", fill: "currentColor", stroke: "none" })] }));
+}
+const ICON_PROPS = {
+    viewBox: '0 0 20 20',
+    width: 20,
+    height: 20,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.4,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': true
+};
+function AlertIcon() {
+    return (jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", "aria-hidden": "true", children: [jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.4" }), jsx("path", { d: "M8 4.8v3.4", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }), jsx("circle", { cx: "8", cy: "11", r: "0.85", fill: "currentColor" })] }));
+}
+function CheckIcon() {
+    return (jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "m3.2 8.2 3 3 6.6-6.4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function PaymentIcon({ kind }) {
+    switch (kind) {
+        case 'card':
+            // two cards / transfer
+            return (jsxs("svg", { ...ICON_PROPS, children: [jsx("rect", { x: "2", y: "5", width: "13", height: "9", rx: "2" }), jsx("path", { d: "M2 8h13M5.5 11.5h3" }), jsx("path", { d: "M15.5 6.5h2.5v9h-9v-1.5" })] }));
+        case 'cod':
+            // package / hand
+            return (jsxs("svg", { ...ICON_PROPS, children: [jsx("path", { d: "M10 2.5 17 6v8l-7 3.5L3 14V6z" }), jsx("path", { d: "M3 6l7 3.5L17 6M10 9.5v8" })] }));
+        case 'bnpl':
+            // calendar / installments
+            return (jsxs("svg", { ...ICON_PROPS, children: [jsx("rect", { x: "3", y: "4", width: "14", height: "13", rx: "2" }), jsx("path", { d: "M3 8h14M7 2.5v3M13 2.5v3M6.5 12h3" })] }));
+        case 'wallet':
+            return (jsxs("svg", { ...ICON_PROPS, children: [jsx("rect", { x: "2.5", y: "5", width: "15", height: "11", rx: "2.5" }), jsx("path", { d: "M2.5 9h15" }), jsx("circle", { cx: "14", cy: "12.5", r: "1.1", fill: "currentColor", stroke: "none" })] }));
+        case 'free':
+            // tag
+            return (jsxs("svg", { ...ICON_PROPS, children: [jsx("path", { d: "M10.5 2.5H16v5.5l-7.5 7.5a1.8 1.8 0 0 1-2.5 0L3 13a1.8 1.8 0 0 1 0-2.5z" }), jsx("circle", { cx: "12.8", cy: "5.7", r: "1", fill: "currentColor", stroke: "none" })] }));
+        case 'gateway':
+        default:
+            // single card / bank
+            return (jsxs("svg", { ...ICON_PROPS, children: [jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "2" }), jsx("path", { d: "M2.5 8.5h15M5.5 12.5h4" })] }));
+    }
+}
+
+function ResultStep({ continueShoppingUrl }) {
+    const { state, actions, t } = useCheckout();
+    const result = state.result;
+    const status = result?.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] })] }));
+}
+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" })] }));
+}
+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 themeVars(theme) {
+    const vars = {};
+    if (theme?.accent)
+        vars['--szc-accent'] = theme.accent;
+    if (theme?.accentForeground)
+        vars['--szc-accent-foreground'] = theme.accentForeground;
+    if (theme?.accentSoft)
+        vars['--szc-accent-soft'] = theme.accentSoft;
+    if (theme?.background)
+        vars['--szc-bg'] = theme.background;
+    if (theme?.foreground)
+        vars['--szc-fg'] = theme.foreground;
+    if (theme?.muted)
+        vars['--szc-muted'] = theme.muted;
+    if (theme?.mutedForeground)
+        vars['--szc-muted-fg'] = theme.mutedForeground;
+    if (theme?.border)
+        vars['--szc-border'] = theme.border;
+    if (theme?.card)
+        vars['--szc-card'] = theme.card;
+    if (theme?.summaryBackground)
+        vars['--szc-summary-bg'] = theme.summaryBackground;
+    if (theme?.danger)
+        vars['--szc-danger'] = theme.danger;
+    if (theme?.success)
+        vars['--szc-success'] = theme.success;
+    if (theme?.radius != null)
+        vars['--szc-radius'] = `${theme.radius}px`;
+    if (theme?.fontFamily)
+        vars['--szc-font'] = theme.fontFamily;
+    return vars;
+}
+function CheckoutSkeleton({ label }) {
+    return (jsxs("div", { className: "szc-layout szc-skeleton-layout", role: "status", "aria-label": label, children: [jsxs("main", { className: "szc-main", "aria-hidden": "true", children: [jsxs("div", { className: "szc-skeleton-cart-row", children: [jsx("span", { className: "szc-skeleton szc-skeleton--thumb" }), jsxs("div", { className: "szc-skeleton-copy", children: [jsx("span", { className: "szc-skeleton szc-skeleton--title" }), jsx("span", { className: "szc-skeleton szc-skeleton--text" }), jsx("span", { className: "szc-skeleton szc-skeleton--price" })] }), jsx("span", { className: "szc-skeleton szc-skeleton--counter" })] }), jsxs("div", { className: "szc-skeleton-cart-row", children: [jsx("span", { className: "szc-skeleton szc-skeleton--thumb" }), jsxs("div", { className: "szc-skeleton-copy", children: [jsx("span", { className: "szc-skeleton szc-skeleton--title" }), jsx("span", { className: "szc-skeleton szc-skeleton--text" }), jsx("span", { className: "szc-skeleton szc-skeleton--price" })] }), jsx("span", { className: "szc-skeleton szc-skeleton--counter" })] })] }), jsxs("div", { className: "szc-side", "aria-hidden": "true", children: [jsxs("aside", { className: "szc-summary szc-summary--skeleton", children: [jsxs("div", { className: "szc-summary__total-head", children: [jsx("span", { className: "szc-skeleton szc-skeleton--summary-label" }), jsx("span", { className: "szc-skeleton szc-skeleton--summary-total" })] }), jsxs("div", { className: "szc-skeleton-summary-lines", children: [jsxs("div", { children: [jsx("span", { className: "szc-skeleton" }), jsx("span", { className: "szc-skeleton" })] }), jsxs("div", { children: [jsx("span", { className: "szc-skeleton" }), jsx("span", { className: "szc-skeleton" })] })] }), jsxs("div", { className: "szc-skeleton-summary-grand", children: [jsx("span", { className: "szc-skeleton" }), jsx("span", { className: "szc-skeleton" })] })] }), jsx("div", { className: "szc-side__cta", children: jsx("span", { className: "szc-skeleton szc-skeleton--button" }) })] })] }));
+}
+function SazitoCheckout({ theme, continueShoppingUrl, className, renderNextButton, renderBackButton, renderEmptyCart, }) {
+    const { state, actions, t, summary, money } = useCheckout();
+    const { step, direction, flags, error } = state;
+    const isResult = step === 'result';
+    const bootstrapping = step === 'cart' && !error && (!state.cart || !state.invoice || flags.bootstrapping);
+    const fatal = error && !state.cart && step === 'cart';
+    const cartEmpty = !state.cart || state.cart.items.length === 0;
+    const footerVisible = (step === 'cart' && !cartEmpty) || step === 'shipping' || step === 'payment';
+    const nextBusy = state.status === 'working' ||
+        flags.savingAddress ||
+        flags.loadingShipping ||
+        flags.loadingPayments ||
+        flags.placingOrder;
+    const needsShipping = state.invoice?.needsShipping !== false;
+    const shippingSavePhase = state.addressDirty || !state.applicable;
+    const shippingReady = !needsShipping ||
+        (state.shippingGroups.length > 0 &&
+            state.shippingGroups.every((g) => g.selectedRateId != null));
+    const paymentReady = state.paymentMethods.length > 0 && state.selectedPaymentMethodId != null;
+    const nextDisabled = step === 'cart'
+        ? cartEmpty
+        : step === 'shipping'
+            ? !shippingSavePhase && !shippingReady
+            : step === 'payment'
+                ? !paymentReady
+                : false;
+    const nextLabel = step === 'cart'
+        ? t.placeOrder
+        : step === 'shipping'
+            ? needsShipping && shippingSavePhase
+                ? t.saveShippingDetails
+                : t.continueToPayment
+            : t.finishPurchase;
+    const backOnClick = step === 'cart' && continueShoppingUrl
+        ? () => { window.location.href = continueShoppingUrl; }
+        : () => actions.back();
+    const backVisible = step !== 'cart' || !!continueShoppingUrl;
+    const nextButtonProps = {
+        loading: nextBusy,
+        disabled: nextDisabled,
+        onClick: () => actions.next(),
+        children: nextLabel,
+    };
+    const backButtonProps = {
+        loading: false,
+        disabled: false,
+        onClick: backOnClick,
+        children: t.back,
+    };
+    /* Rendered twice: under the order summary (desktop) and in the sticky
+       bottom bar (mobile). CSS shows exactly one of the two. */
+    const nextButtonNode = renderNextButton ? (renderNextButton(nextButtonProps)) : (jsx(Button, { className: "szc-footer__next", loading: nextBusy, disabled: nextDisabled, onClick: () => actions.next(), children: nextLabel }));
+    const backButtonNode = backVisible ? (renderBackButton ? (renderBackButton(backButtonProps)) : (jsxs(Button, { variant: "ghost", className: "szc-back-btn", onClick: backOnClick, children: [jsx("svg", { className: "szc-back-arrow", viewBox: "0 0 16 16", width: "15", height: "15", 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" }) }), t.back] }))) : null;
+    const actionsVisible = !bootstrapping && !fatal && !isResult && footerVisible;
+    /* Mobile header (replaces the stepper on small screens): back chevron at the
+       inline start, current step title centered, "step n of m" at the end. */
+    const flowSteps = ['cart', 'shipping', 'payment'];
+    const flowIndex = flowSteps.indexOf(step);
+    const headTitle = step === 'cart'
+        ? t.stepCart
+        : step === 'shipping'
+            ? t.stepShippingInfo
+            : step === 'payment'
+                ? t.stepPayment
+                : t.stepResult;
+    const HeadIcon = step === 'cart'
+        ? CartIcon
+        : step === 'shipping'
+            ? TruckIcon$1
+            : step === 'payment'
+                ? 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(CheckoutSkeleton, { 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 ? jsx(ErrorBanner, { message: error.message }) : null, step === 'cart' ? jsx(CartStep, { continueShoppingUrl: continueShoppingUrl, 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, paymentReturnParams, className, renderNextButton, renderBackButton, renderEmptyCart, }) {
+    const isReturn = paymentReturnParams != null;
+    const client = useSazitoClient();
+    return (jsxs(CheckoutProvider, { client: client, credentials: credentials, config: config, autoStart: !isReturn, children: [isReturn ? jsx(ResolveReturn, { params: paymentReturnParams }) : null, jsx(SazitoCheckout, { theme: config?.theme, continueShoppingUrl: config?.continueShoppingUrl, className: className, renderNextButton: renderNextButton, renderBackButton: renderBackButton, renderEmptyCart: renderEmptyCart })] }));
+}
+function ResolveReturn({ params }) {
+    const { actions } = useCheckout();
+    useEffect(() => {
+        void actions.resolvePaymentReturn(params);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+}
+
+export { Button, CheckoutProvider, ErrorBanner, Field, ProductPlaceholder, SazitoCheckout, SazitoCheckoutPage, SectionTitle, Spinner, useCheckout };
+//# sourceMappingURL=index.js.map