npm - @sazito/checkout - Versions diffs - 0.1.0 → 0.1.2 - Mend

@sazito/checkout 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/README.md +34 -0
package/dist/chunks/{labels-ChywPk2i.js → labels-ByA_yGKl.js} +131 -53
package/dist/chunks/labels-ByA_yGKl.js.map +1 -0
package/dist/chunks/{labels-BlMZkOsV.cjs → labels-DJ_RnkCQ.cjs} +132 -52
package/dist/chunks/labels-DJ_RnkCQ.cjs.map +1 -0
package/dist/chunks/{use-checkout-Cvp_K3UW.cjs → use-checkout-CQBSONj1.cjs} +2 -2
package/dist/chunks/{use-checkout-Cvp_K3UW.cjs.map → use-checkout-CQBSONj1.cjs.map} +1 -1
package/dist/chunks/{use-checkout-E0O8HsSs.js → use-checkout-gAjnCzae.js} +2 -2
package/dist/chunks/{use-checkout-E0O8HsSs.js.map → use-checkout-gAjnCzae.js.map} +1 -1
package/dist/core/index.cjs +3 -1
package/dist/core/index.cjs.map +1 -1
package/dist/core/index.d.cts +9 -4
package/dist/core/index.d.ts +9 -4
package/dist/core/index.js +1 -1
package/dist/next/index.cjs +19 -9
package/dist/next/index.cjs.map +1 -1
package/dist/next/index.d.cts +1 -0
package/dist/next/index.d.ts +1 -0
package/dist/next/index.js +21 -11
package/dist/next/index.js.map +1 -1
package/dist/react/index.cjs +2 -2
package/dist/react/index.d.cts +1 -0
package/dist/react/index.d.ts +1 -0
package/dist/react/index.js +2 -2
package/dist/styles.css +123 -8
package/package.json +12 -6
package/dist/chunks/labels-BlMZkOsV.cjs.map +0 -1
package/dist/chunks/labels-ChywPk2i.js.map +0 -1

package/README.md CHANGED Viewed

@@ -83,6 +83,40 @@ export default function Checkout() {
 The component **inherits the host font** (`--szc-font: inherit`). The demo app
 loads Vazirmatn on `<body>`; that's all it takes for a Persian/RTL checkout.
+Theme values may reference host application tokens directly. Changes to those
+tokens, including dark-mode changes, are reflected without rerendering:
+```tsx
+config={{
+  theme: {
+    accent: 'var(--color-primary)',
+    accentForeground: 'var(--color-on-primary)',
+    background: 'var(--color-background)',
+    foreground: 'var(--color-foreground)',
+    card: 'var(--color-card)',
+    border: 'var(--color-border)',
+    fontFamily: 'var(--font-sans)',
+  },
+}}
+```
+Alternatively, pass `className="store-checkout"` and map the native variables
+in CSS imported after the checkout stylesheet:
+```css
+.szc-root.store-checkout {
+  --szc-accent: var(--color-primary);
+  --szc-bg: var(--color-background);
+  --szc-fg: var(--color-foreground);
+  --szc-card: var(--color-card);
+  --szc-border: var(--color-border);
+  --szc-radius: var(--radius-lg);
+}
+```
+Avoid configuring the same token through both methods: `config.theme` writes
+inline variables and therefore wins over ordinary stylesheet declarations.
 ## Flow (v1 scope)
 4 states — `cart → shipping → payment → result`:

package/dist/chunks/{labels-ChywPk2i.js → labels-ByA_yGKl.js} RENAMED Viewed

@@ -200,6 +200,30 @@ function createBrowserEffectExecutor(config) {
 const noopEffectExecutor = () => { };
 const idStr = (value) => String(value);
+function cartItemCreatedAt(item) {
+    if (!item.createdAt)
+        return null;
+    const timestamp = Date.parse(item.createdAt);
+    return Number.isFinite(timestamp) ? timestamp : null;
+}
+/** Return cart lines newest-first without mutating SDK state. */
+function sortCartItemsNewestFirst(items) {
+    return [...items].sort((a, b) => {
+        const aCreatedAt = cartItemCreatedAt(a);
+        const bCreatedAt = cartItemCreatedAt(b);
+        if (aCreatedAt != null || bCreatedAt != null) {
+            if (aCreatedAt == null)
+                return 1;
+            if (bCreatedAt == null)
+                return -1;
+            if (aCreatedAt !== bCreatedAt)
+                return bCreatedAt - aCreatedAt;
+        }
+        const aId = Number(a.id);
+        const bId = Number(b.id);
+        return Number.isFinite(aId) && Number.isFinite(bId) ? bId - aId : 0;
+    });
+}
 function emptyAddressForm() {
     return {
         firstName: '',
@@ -298,6 +322,28 @@ function uniqueRates(rates) {
     }
     return out;
 }
+function isDigitalServiceLabel(value) {
+    if (!value)
+        return false;
+    const normalized = value.trim().toLocaleLowerCase('en-US');
+    return (normalized.includes('digital') ||
+        normalized.includes('service') ||
+        normalized.includes('دیجیتال') ||
+        normalized.includes('خدمات') ||
+        normalized.includes('خدمت'));
+}
+function isDigitalServiceItem(item) {
+    return isDigitalServiceLabel(item.productType);
+}
+/** True for the API's automatic digital/service delivery group. */
+function isDigitalServiceGroup(group) {
+    if (isDigitalServiceLabel(group.key) || isDigitalServiceLabel(group.title)) {
+        return true;
+    }
+    const ratesAreDigitalService = group.rates.length > 0 &&
+        group.rates.every((rate) => isDigitalServiceLabel(rate.type) || isDigitalServiceLabel(rate.name));
+    return ratesAreDigitalService || (group.items.length > 0 && group.items.every(isDigitalServiceItem));
+}
 /**
  * Group invoice items into shippable bundles with their switchable rates and
  * the currently selected rate. Digital-only invoices yield an empty list.
@@ -317,10 +363,12 @@ function deriveShippingGroups(invoice, applicable) {
         return [];
     }
     const itemById = new Map(invoice.items.map((item) => [idStr(item.id), item]));
-    // Exclude digital items — they never go through physical shipping groups.
+    // The API's plain `digital` products never receive a shipping assignment.
+    // Other digital/service variants may arrive through an automatic fulfillment
+    // rate; retain those groups for the API assignment and hide them in the UI.
     const physicalItemsRate = (applicable.itemsShippingRate ?? []).filter((isr) => {
         const item = itemById.get(idStr(isr.invoiceItemId));
-        return !item || item.productType !== 'digital';
+        return !item || item.productType?.trim().toLocaleLowerCase('en-US') !== 'digital';
     });
     if (physicalItemsRate.length === 0)
         return [];
@@ -419,24 +467,27 @@ function deriveShippingGroups(invoice, applicable) {
         }
     ];
 }
-/** Build the API payload from the current group selections. */
+/** Build the API payload from physical shipping selections. */
 function buildShippingAssignments(groups) {
     return groups
-        .filter((group) => group.selectedRateId != null)
+        .filter((group) => !isDigitalServiceGroup(group) && group.selectedRateId != null)
         .map((group) => ({
         rateId: group.selectedRateId,
         invoiceItemIds: group.itemIds
     }));
 }
-/** True once every shippable group has a selected rate. */
+/** True once every physical shipping group has a selected rate. */
 function isShippingComplete(invoice, groups) {
     if (!invoice?.needsShipping) {
         return true;
     }
-    if (groups.length === 0) {
-        return false;
+    const physicalGroups = groups.filter((group) => !isDigitalServiceGroup(group));
+    if (physicalGroups.length === 0) {
+        // The API may set needsShipping for an automatic Digital/Service group.
+        // It is fulfillment metadata, not a customer-selectable shipping method.
+        return groups.length > 0 && groups.every(isDigitalServiceGroup);
     }
-    return groups.every((group) => group.selectedRateId != null);
+    return physicalGroups.every((group) => group.selectedRateId != null);
 }
 const codeDiscountTotal = (invoice) => (invoice.couponTotal || 0) + (invoice.discountTotal || 0);
 /**
@@ -540,14 +591,22 @@ function selectDigitalItems(invoice, groups, applicable) {
     // Before shipping methods are loaded, only explicitly-digital items are known.
     // Showing everything as "digital" when applicable is null would be wrong.
     if (applicable == null) {
-        return invoice.items.filter((item) => item.productType === 'digital');
+        return invoice.items.filter(isDigitalServiceItem);
     }
-    // After shipping methods load: items absent from all groups are non-shippable.
-    const shippable = new Set(groups.flatMap((g) => g.itemIds.map(idStr)));
-    return invoice.items.filter((item) => !shippable.has(idStr(item.id)));
+    // The backend may model digital/service fulfillment as an automatic zero-cost
+    // shipping group. Treat its products as non-shippable in the UI while keeping
+    // the group in state so its assignment can still be submitted.
+    const digitalGroupItems = new Set(groups
+        .filter(isDigitalServiceGroup)
+        .flatMap((group) => group.itemIds.map(idStr)));
+    const groupedItems = new Set(groups.flatMap((group) => group.itemIds.map(idStr)));
+    return invoice.items.filter((item) => isDigitalServiceItem(item) ||
+        digitalGroupItems.has(idStr(item.id)) ||
+        !groupedItems.has(idStr(item.id)));
 }
 const STEP_ORDER = ['cart', 'shipping', 'payment', 'result'];
+const ADDRESS_AUTOSUBMIT_DEBOUNCE_MS = 350;
 function initialFlags() {
     return {
         bootstrapping: false,
@@ -594,6 +653,7 @@ function createCheckoutEngine(options) {
     let effectExecutor = noopEffectExecutor;
     let lock = Promise.resolve();
     let addressRevision = 0;
+    let addressAutoSubmitTimer = null;
     // ---- internal helpers -------------------------------------------------
     const get = () => store.getState();
     const set = store.setState;
@@ -614,6 +674,19 @@ function createCheckoutEngine(options) {
         lock = next.then(() => undefined, () => undefined);
         return next;
     }
+    function clearAddressAutoSubmit() {
+        if (addressAutoSubmitTimer) {
+            clearTimeout(addressAutoSubmitTimer);
+            addressAutoSubmitTimer = null;
+        }
+    }
+    function scheduleAddressAutoSubmit(delay = ADDRESS_AUTOSUBMIT_DEBOUNCE_MS) {
+        clearAddressAutoSubmit();
+        addressAutoSubmitTimer = setTimeout(() => {
+            addressAutoSubmitTimer = null;
+            void withLock(submitAddressInternal);
+        }, delay);
+    }
     function recomputeGroups() {
         const { invoice, applicable } = get();
         const groups = deriveShippingGroups(invoice, applicable);
@@ -809,13 +882,17 @@ function createCheckoutEngine(options) {
     }
     // ---- public actions ---------------------------------------------------
     function goToStep(step) {
+        if (step !== 'shipping') {
+            clearAddressAutoSubmit();
+        }
         set({ step, error: null });
         emit('step_viewed', { step });
         // When landing on shipping with a complete address but no methods fetched yet,
         // auto-submit so methods appear without requiring a manual Continue press.
         if (step === 'shipping') {
-            const { addressForm, invoice, applicable } = get();
-            if (!applicable && isAddressComplete(addressForm, invoice?.needsShipping ?? true, get().postalCodeMandatory, get().emailMandatory)) {
+            const { addressForm, addressDirty, invoice, applicable, shippingGroups } = get();
+            const methodsUnresolved = Boolean(invoice?.needsShipping) && shippingGroups.length === 0;
+            if ((addressDirty || !applicable || methodsUnresolved) && isAddressComplete(addressForm, invoice?.needsShipping ?? true, get().postalCodeMandatory, get().emailMandatory)) {
                 void withLock(submitAddressInternal);
             }
         }
@@ -918,13 +995,18 @@ function createCheckoutEngine(options) {
                         // the Shipping step becomes visible.
                         const invoice = get().invoice;
                         if (isUsableSavedAddress(invoice?.shippingAddress)) {
-                            set({ addressForm: addressFormFromInvoice(invoice) });
+                            const addressForm = reconcileAddressWithRegions(addressFormFromInvoice(invoice), get().regions, savedAddressCityName(invoice?.shippingAddress));
+                            set({
+                                addressForm,
+                                addressDirty: isAddressDirty(addressForm, invoice)
+                            });
                         }
                         goToStep('shipping');
                     }
                     return;
                 }
                 if (state.step === 'shipping') {
+                    clearAddressAutoSubmit();
                     // Phase 1: address not saved yet (or changed) → save it and reveal the
                     // shipping methods, staying on the shipping step.
                     const needsSave = state.addressDirty || !state.applicable;
@@ -969,10 +1051,6 @@ function createCheckoutEngine(options) {
                 const res = await binding.client.cart.updateItem(cartProductId, variantId, quantity);
                 if (res.data) {
                     set({ cart: res.data });
-                    // Optimistically update summary from cart data, then confirm with server.
-                    const inv = get().invoice;
-                    if (inv)
-                        set({ invoice: applyCartToInvoice(inv, res.data) });
                     await refreshInvoice();
                 }
                 else if (res.error) {
@@ -987,9 +1065,6 @@ function createCheckoutEngine(options) {
                 const res = await binding.client.cart.removeItem(cartProductId, variantId);
                 if (res.data) {
                     set({ cart: res.data });
-                    const inv = get().invoice;
-                    if (inv)
-                        set({ invoice: applyCartToInvoice(inv, res.data) });
                     await refreshInvoice();
                 }
                 else if (res.error) {
@@ -1001,6 +1076,7 @@ function createCheckoutEngine(options) {
         setAddressField(key, value) {
             const before = get().addressForm;
             const changed = before[key] !== value || (key === 'regionId' && before.cityId !== null);
+            const destinationChanged = changed && (key === 'regionId' || key === 'cityId');
             if (changed) {
                 addressRevision += 1;
             }
@@ -1014,22 +1090,28 @@ function createCheckoutEngine(options) {
                 return {
                     addressForm,
                     addressDirty,
-                    // Rates are derived from the address snapshot. Never keep showing or
-                    // accepting rates fetched for a different form value.
-                    ...(addressDirty ? { applicable: null, shippingGroups: [] } : {})
+                    // Shipping rates depend on region/city. Contact and street edits must
+                    // not discard valid methods for the same destination.
+                    ...(destinationChanged ? { applicable: null, shippingGroups: [] } : {})
                 };
             });
-            // City selection is a discrete destination change, so refresh rates
-            // automatically. Text inputs still wait for Save/Continue to avoid an
-            // address creation and shipping request on every keystroke.
-            if (changed && key === 'cityId' && value != null && get().step === 'shipping') {
+            // Browser autofill often populates the selects before the final required
+            // text field. Once the form becomes complete, debounce text changes and
+            // submit automatically; a discrete city selection can submit immediately.
+            if (changed && get().step === 'shipping') {
                 const state = get();
-                if (isAddressComplete(state.addressForm, state.invoice?.needsShipping ?? true, state.postalCodeMandatory, state.emailMandatory)) {
-                    void withLock(submitAddressInternal);
+                const methodsUnresolved = !state.applicable
+                    || (Boolean(state.invoice?.needsShipping) && state.shippingGroups.length === 0);
+                if (isAddressComplete(state.addressForm, state.invoice?.needsShipping ?? true, state.postalCodeMandatory, state.emailMandatory) && (destinationChanged || methodsUnresolved)) {
+                    scheduleAddressAutoSubmit(key === 'cityId' ? 0 : undefined);
+                }
+                else if (!isAddressComplete(state.addressForm, state.invoice?.needsShipping ?? true, state.postalCodeMandatory, state.emailMandatory)) {
+                    clearAddressAutoSubmit();
                 }
             }
         },
         async submitAddress() {
+            clearAddressAutoSubmit();
             return withLock(submitAddressInternal);
         },
         async selectShippingRate(groupKey, rateId) {
@@ -1151,6 +1233,8 @@ function createCheckoutEngine(options) {
         const state = get();
         const submittedAddressRevision = addressRevision;
         const needsShipping = state.invoice?.needsShipping ?? true;
+        const shouldReloadShipping = needsShipping
+            && (!state.applicable || state.shippingGroups.length === 0);
         const abandonStaleSubmission = (invoice) => {
             set({
                 ...(invoice ? { invoice } : {}),
@@ -1195,7 +1279,15 @@ function createCheckoutEngine(options) {
         }
         set({ invoice: linkRes.data, addressDirty: false });
         if (needsShipping) {
-            const ok = await loadApplicableShipping(submittedAddressRevision);
+            let ok = true;
+            if (shouldReloadShipping) {
+                ok = await loadApplicableShipping(submittedAddressRevision);
+            }
+            else if (recomputeGroups().length === 0) {
+                // Invoice item IDs can change when the new address snapshot is linked.
+                // Reload only if the existing applicable data can no longer form groups.
+                ok = await loadApplicableShipping(submittedAddressRevision);
+            }
             if (ok) {
                 await assignCurrentShipping();
                 if (addressRevision !== submittedAddressRevision) {
@@ -1222,6 +1314,7 @@ function createCheckoutEngine(options) {
             effectExecutor = executor;
         },
         destroy() {
+            clearAddressAutoSubmit();
             effectExecutor = noopEffectExecutor;
         }
     };
@@ -1274,23 +1367,6 @@ function toAddressInput(form) {
         description: form.description.trim() || undefined
     };
 }
-/**
- * Immediately derive updated invoice item quantities and totals from a fresh
- * cart response so the summary panel doesn't wait for the invoice refresh.
- */
-function applyCartToInvoice(invoice, cart) {
-    const byVariant = new Map(cart.items.map((i) => [i.productVariantId, i]));
-    const newItems = invoice.items
-        .filter((item) => byVariant.has(item.productVariantId))
-        .map((item) => {
-        const ci = byVariant.get(item.productVariantId);
-        return { ...item, quantity: ci.quantity, lineTotal: ci.lineTotal };
-    });
-    const subtotal = newItems.reduce((s, i) => s + i.lineTotal, 0);
-    const discount = (invoice.itemsDiscount || 0) + (invoice.discountTotal || 0) + (invoice.couponTotal || 0);
-    const finalTotal = Math.max(0, subtotal - discount + (invoice.shippingTotal || 0) + (invoice.vat || 0) - (invoice.creditTotal || 0));
-    return { ...invoice, items: newItems, itemsTotalRawPrice: subtotal, netTotal: subtotal, finalTotal };
-}
 // Map raw gateway-return query params into the typed payment-step input.
 // Only the string-valued callback fields are forwarded; `trackingData` /
 // `payload` are parsed from JSON when the gateway sends them encoded.
@@ -1451,7 +1527,8 @@ const fa = {
     shippingMethod: 'روش ارسال',
     shippingMethods: 'روش‌های ارسال',
     shippingMethodsHint: 'پس از ثبت نشانی، روش‌های قابل استفاده نمایش داده می‌شوند.',
-    digitalNoShipping: 'محصول دیجیتال — بدون نیاز به ارسال',
+    digitalNoShipping: 'محصولات دیجیتال و خدمات',
+    digitalNoShippingHint: 'این موارد به ارسال فیزیکی نیاز ندارند.',
     errorRequired: 'این فیلد اجباری است',
     errorMobilePhone: 'شماره موبایل معتبر وارد کنید (مثلاً ۰۹۱۲۳۴۵۶۷۸۹)',
     errorEmail: 'آدرس ایمیل معتبر نیست',
@@ -1531,7 +1608,8 @@ const en = {
     shippingMethod: 'Shipping method',
     shippingMethods: 'Shipping methods',
     shippingMethodsHint: 'Available delivery options will appear after you save this address.',
-    digitalNoShipping: 'Digital product — no shipping required',
+    digitalNoShipping: 'Digital products and services',
+    digitalNoShippingHint: 'These items do not require physical delivery.',
     errorRequired: 'This field is required',
     errorMobilePhone: 'Enter a valid mobile number (e.g. 09123456789)',
     errorEmail: 'Enter a valid email address',
@@ -1609,5 +1687,5 @@ function paymentMethodInfo(code, locale) {
     };
 }
-export { paymentMethodLabel as A, selectDigitalItems as B, selectSummary as C, strings as D, toEnglishDigits as E, toPersianDigits as F, addressFormFromInvoice as a, buildShippingAssignments as b, classifyAppliedDiscount as c, createBrowserEffectExecutor as d, createCheckoutEngine as e, createSdkBinding as f, createStore as g, defaultCurrencyLabel as h, deriveShippingGroups as i, emptyAddressForm as j, formatMoney as k, formatNumber as l, formatPercent as m, formatPrice as n, fromSdkError as o, isAddressComplete as p, isAddressDirty as q, isShippingComplete as r, isValidIranianMobile as s, isValidIranianPhone as t, makeError as u, makeEvent as v, messageForCode as w, noopEffectExecutor as x, normalizeIranianPhone as y, paymentMethodInfo as z };
-//# sourceMappingURL=labels-ChywPk2i.js.map
+export { paymentMethodInfo as A, paymentMethodLabel as B, selectDigitalItems as C, selectSummary as D, sortCartItemsNewestFirst as E, strings as F, toEnglishDigits as G, toPersianDigits as H, addressFormFromInvoice as a, buildShippingAssignments as b, classifyAppliedDiscount as c, createBrowserEffectExecutor as d, createCheckoutEngine as e, createSdkBinding as f, createStore as g, defaultCurrencyLabel as h, deriveShippingGroups as i, emptyAddressForm as j, formatMoney as k, formatNumber as l, formatPercent as m, formatPrice as n, fromSdkError as o, isAddressComplete as p, isAddressDirty as q, isDigitalServiceGroup as r, isShippingComplete as s, isValidIranianMobile as t, isValidIranianPhone as u, makeError as v, makeEvent as w, messageForCode as x, noopEffectExecutor as y, normalizeIranianPhone as z };
+//# sourceMappingURL=labels-ByA_yGKl.js.map