@betterstore/react 0.2.39 → 0.2.42

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @betterstore/sdk
 
+## 0.2.42
+
+### Patch Changes
+
+- checkout bug fix variants
+
+## 0.2.41
+
+### Patch Changes
+
+- client secret
+
+## 0.2.40
+
+### Patch Changes
+
+- bug fix
+
 ## 0.2.39
 
 ### Patch Changes

package/dist/components/cart/useCart.d.ts

@@ -1,7 +1,6 @@
 import { Product, LineItem as SDKLineItem } from "@betterstore/sdk";
 type LineItemOptionalParams = {
     quantity?: number;
-    productId: string;
     variantOptions?: {
         name: string;
         value: string;

package/dist/components/checkout-embed/steps/shipping/form.d.ts

@@ -1,6 +1,7 @@
 import { ShippingRate } from "@betterstore/sdk";
 import React from "react";
 import { type ShippingMethodFormData } from "../../checkout-schema";
+import { FormStore } from "../../useFormStore";
 interface ShippingMethodFormProps {
     shippingRates: ShippingRate[];
     initialData?: ShippingMethodFormData;
@@ -12,6 +13,8 @@ interface ShippingMethodFormProps {
     exchangeRate: number;
     locale?: string;
     countryCode?: string;
+    setFormData: FormStore["setFormData"];
+    formData: FormStore["formData"];
 }
-export default function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, }: ShippingMethodFormProps): React.JSX.Element;
+export default function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, setFormData, formData, }: ShippingMethodFormProps): React.JSX.Element;
 export {};

package/dist/components/checkout-embed/steps/shipping/shipping-option-wrapper.d.ts

@@ -6,4 +6,4 @@ export default function ShippingOptionWrapper({ rate, children, onPickupPointSel
     onPickupPointSelected?: (pickupPointId: string, pickupPointName: string) => void;
     locale?: string;
     countryCode?: string;
-}): React.JSX.Element | undefined;
+}): React.JSX.Element;

package/dist/components/checkout-embed/steps/summary/index.d.ts

@@ -1,7 +1,7 @@
-import { CheckoutSession } from "@betterstore/sdk";
+import { LineItem } from "@betterstore/sdk";
 import React from "react";
 export default function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }: {
-    lineItems: CheckoutSession["lineItems"];
+    lineItems: LineItem[];
     shipping?: number;
     tax?: number;
     currency: string;

package/dist/components/checkout-embed/useFormStore.d.ts

@@ -1,12 +1,12 @@
 import { CheckoutFormData } from "./checkout-schema";
 export type CheckoutStep = "customer" | "shipping" | "payment";
-interface FormStore {
+export interface FormStore {
     formData: Partial<CheckoutFormData>;
     setFormData: (formData: Partial<CheckoutFormData>) => void;
     step: CheckoutStep;
     setStep: (step: CheckoutStep) => void;
 }
-export declare const useFormStore: (checkoutId: string) => import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStore>, "persist"> & {
+export declare const useFormStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<FormStore, FormStore>>) => void;
         clearStorage: () => void;
@@ -17,4 +17,3 @@ export declare const useFormStore: (checkoutId: string) => import("zustand").Use
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<FormStore, FormStore>>;
     };
 }>;
-export {};

package/dist/index.cjs.js

@@ -3589,7 +3589,7 @@ function useConstant(init) {
 
 const isBrowser = typeof window !== "undefined";
 
-const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect$1 = isBrowser ? React.useLayoutEffect : React.useEffect;
 
 /**
  * @public
@@ -3852,7 +3852,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
      */
     const [diffedChildren, setDiffedChildren] = React.useState(presentChildren);
     const [renderedChildren, setRenderedChildren] = React.useState(presentChildren);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
         isInitialRender.current = false;
         pendingPresentChildren.current = presentChildren;
         /**
@@ -4472,7 +4472,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const wantsHandoff = React.useRef(Boolean(optimisedAppearId) &&
         !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
         window.MotionHasOptimisedAnimation?.(optimisedAppearId));
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
         if (!visualElement)
             return;
         isMounted.current = true;
@@ -18513,6 +18513,48 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual(val1, val2)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+const useDeepEqualEffect = (effect, deps) => {
+    const ref = React.useRef(deps);
+    if (!deepEqual(deps, ref.current)) {
+        ref.current = deps;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(effect, ref.current);
+};
+
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
  *
@@ -18557,10 +18599,8 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    const _name = React.useRef(name);
-    _name.current = name;
-    React.useEffect(() => control._subscribe({
-        name: _name.current,
+    useDeepEqualEffect(() => control._subscribe({
+        name: name,
         formState: _localProxyFormState.current,
         exact,
         callback: (formState) => {
@@ -18570,7 +18610,7 @@ function useFormState(props) {
                     ...formState,
                 });
         },
-    }), [control, disabled, exact]);
+    }), [name, disabled, exact]);
     React.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
@@ -18610,19 +18650,16 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const _name = React.useRef(name);
-    const _defaultValue = React.useRef(defaultValue);
-    _name.current = name;
-    React.useEffect(() => control._subscribe({
-        name: _name.current,
+    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
+    useDeepEqualEffect(() => control._subscribe({
+        name: name,
         formState: {
             values: true,
         },
         exact,
         callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, _defaultValue.current)),
-    }), [control, disabled, exact]);
-    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
+            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue)),
+    }), [name, defaultValue, disabled, exact]);
     React.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -18857,39 +18894,6 @@ var createSubject = () => {
     };
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual(object1, object2) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!keys2.includes(key)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2)
-                : val1 !== val2) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
@@ -19438,6 +19442,7 @@ function createFormControl(props = {}) {
     let _formState = {
         submitCount: 0,
         isDirty: false,
+        isReady: false,
         isLoading: isFunction(_options.defaultValues),
         isValidating: false,
         isSubmitted: false,
@@ -20457,6 +20462,7 @@ function createFormControl(props = {}) {
     };
 }
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 /**
  * Custom hook to manage the entire form.
  *
@@ -20503,6 +20509,7 @@ function useForm(props = {}) {
         validatingFields: {},
         errors: props.errors || {},
         disabled: props.disabled || false,
+        isReady: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined
             : props.defaultValues,
@@ -20520,12 +20527,36 @@ function useForm(props = {}) {
     }
     const control = _formControl.current.control;
     control._options = props;
-    React.useLayoutEffect(() => control._subscribe({
-        formState: control._proxyFormState,
-        callback: () => updateFormState({ ...control._formState }),
-        reRenderRoot: true,
-    }), [control]);
+    useIsomorphicLayoutEffect(() => {
+        const sub = control._subscribe({
+            formState: control._proxyFormState,
+            callback: () => updateFormState({ ...control._formState }),
+            reRenderRoot: true,
+        });
+        updateFormState((data) => ({
+            ...data,
+            isReady: true,
+        }));
+        return sub;
+    }, [control]);
     React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React.useEffect(() => {
+        if (props.mode) {
+            control._options.mode = props.mode;
+        }
+        if (props.reValidateMode) {
+            control._options.reValidateMode = props.reValidateMode;
+        }
+        if (props.errors && !isEmptyObject(props.errors)) {
+            control._setErrors(props.errors);
+        }
+    }, [control, props.errors, props.mode, props.reValidateMode]);
+    React.useEffect(() => {
+        props.shouldUnregister &&
+            control._subjects.state.next({
+                values: control._getWatch(),
+            });
+    }, [control, props.shouldUnregister]);
     React.useEffect(() => {
         if (control._proxyFormState.isDirty) {
             const isDirty = control._getDirty();
@@ -20545,12 +20576,7 @@ function useForm(props = {}) {
         else {
             control._resetDefaultValues();
         }
-    }, [props.values, control]);
-    React.useEffect(() => {
-        if (props.errors && !isEmptyObject(props.errors)) {
-            control._setErrors(props.errors);
-        }
-    }, [props.errors, control]);
+    }, [control, props.values]);
     React.useEffect(() => {
         if (!control._state.mount) {
             control._setValid();
@@ -20562,12 +20588,6 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    React.useEffect(() => {
-        props.shouldUnregister &&
-            control._subjects.state.next({
-                values: control._getWatch(),
-            });
-    }, [props.shouldUnregister, control]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -34207,7 +34227,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
 };
 var CheckoutForm$2 = React.memo(CheckoutForm$1);
 
-const publicStripeKey = "pk_test_51RCjhw2cgbkVT71muwgBSw1tP06YVR4l4P9zI8wP2ipmze9VnTmTwxESVVePmU6QV8TL6bxG7f10oXQRnKC3F3KT00EsvlPAoS";
+const publicStripeKey = "pk_live_51QvliXK5wvEuxX36GWLFgMtUrG2cGIjpW0eXoqVzjEr8S0PdGzAp4ydQa6ssxVW9u0zaLajod93YZnQIU5C8cgqp00Bb64X60b";
 const stripePromise = loadStripe(publicStripeKey);
 function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }) {
     const options = {
@@ -34307,10 +34327,10 @@ function ShippingOptionWrapper({ rate, children, onPickupPointSelected, locale,
     if (rate.provider === "zasilkovna") {
         return (React.createElement(ZasilkovnaShippingOption, { onPickupPointSelected: onPickupPointSelected, locale: locale, countryCode: countryCode, apiKey: rate.clientSecret }, children));
     }
-    return;
+    return React.createElement(React.Fragment, null, children);
 }
 
-function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, }) {
+function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, setFormData, formData, }) {
     var _a;
     const { t } = useTranslation();
     const form = useForm({
@@ -34353,17 +34373,39 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
                     return (React.createElement(ShippingOptionWrapper, { rate: rate, key: rateId, onPickupPointSelected: (pickupPointId, pickupPointName) => {
                             form.setValue("pickupPointId", pickupPointId);
                             form.setValue("pickupPointDisplayName", pickupPointName);
+                            setFormData(Object.assign(Object.assign({}, formData), { shipping: {
+                                    rateId,
+                                    provider: rate.provider,
+                                    price: intPrice,
+                                    name: rate.name,
+                                    pickupPointId,
+                                    pickupPointDisplayName,
+                                } }));
                         }, locale: locale, countryCode: countryCode },
                         React.createElement("div", { className: clsx("p-4 cursor-pointer rounded-md border bg-background", {
                                 "bg-muted border-primary": currentRateId === rateId,
                             }), onClick: () => {
+                                const newFormData = {
+                                    rateId,
+                                    provider: rate.provider,
+                                    price: intPrice,
+                                    name: rate.name,
+                                    pickupPointId: rate.provider === "zasilkovna"
+                                        ? form.watch("pickupPointId")
+                                        : "",
+                                    pickupPointDisplayName: rate.provider === "zasilkovna"
+                                        ? form.watch("pickupPointDisplayName")
+                                        : "",
+                                };
                                 form.setValue("rateId", rateId);
                                 form.setValue("provider", rate.provider);
                                 form.setValue("name", rate.name);
                                 form.setValue("price", intPrice);
                                 if (rate.provider !== "zasilkovna") {
                                     form.setValue("pickupPointDisplayName", "");
+                                    form.setValue("pickupPointId", "");
                                 }
+                                setFormData(Object.assign(Object.assign({}, formData), { shipping: newFormData }));
                             } },
                             React.createElement("div", { className: "flex items-center justify-between w-full" },
                                 React.createElement("p", null, rate.name),
@@ -34391,12 +34433,12 @@ function ShippingRateLoading() {
         React.createElement(Skeleton, { className: "w-40 h-3.5" })));
 }
 
-const useFormStore = (checkoutId) => create()(persist((set) => ({
+const useFormStore = create()(persist((set) => ({
     formData: {},
     setFormData: (formData) => set({ formData }),
     step: "customer",
     setStep: (step) => set({ step }),
-}), { name: `checkout-${checkoutId}` }));
+}), { name: `checkout` }));
 
 const motionSettings = {
     initial: { opacity: 0 },
@@ -34405,7 +34447,7 @@ const motionSettings = {
     transition: { duration: 0.2 },
 };
 function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, }) {
-    const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
+    const { formData, setFormData, step, setStep } = useFormStore();
     const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [shippingRates, setShippingRates] = React.useState([]);
     const validateStep = React.useCallback(() => {
@@ -34452,12 +34494,17 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         if (shippingRates.length > 0)
             return;
         const getShippingRates = () => __awaiter(this, void 0, void 0, function* () {
-            const shippingRates = yield storeClient.getCheckoutShippingRates(clientSecret, checkoutId);
-            console.log(shippingRates);
-            setShippingRates(shippingRates);
+            try {
+                const shippingRates = yield storeClient.getCheckoutShippingRates(clientSecret, checkoutId);
+                setShippingRates(shippingRates);
+            }
+            catch (error) {
+                console.error("Failed to load shipping rates:", error);
+                setShippingRates([]);
+            }
         });
         getShippingRates();
-    }, [step, shippingRates]);
+    }, [step, clientSecret, checkoutId]);
     // Handle address form submission
     const handleCustomerSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
         setFormData(Object.assign(Object.assign({}, formData), { customer: data }));
@@ -34494,8 +34541,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         const newFormData = Object.assign(Object.assign({}, formData), { shipping: data });
         setFormData(newFormData);
         yield storeClient.updateCheckout(clientSecret, checkoutId, {
-            shipping: data.price,
-            shipmentInfo: {
+            shipmentData: {
                 provider: data.provider,
                 pickupPointId: data.pickupPointId,
             },
@@ -34532,7 +34578,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "customer" && (React.createElement(motion.div, Object.assign({ key: "customer" }, motionSettings, { className: "absolute w-full" }),
                 React.createElement(CustomerForm, { initialData: formData.customer, onSubmit: handleCustomerSubmit }))),
             step === "shipping" && formData.customer && (React.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
-                React.createElement(ShippingMethodForm, { shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }))),
+                React.createElement(ShippingMethodForm, { setFormData: setFormData, formData: formData, shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }))),
             step === "payment" && formData.customer && formData.shipping && (React.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
                 React.createElement(PaymentForm, { locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate) }))))));
 }
@@ -34557,13 +34603,18 @@ function InputGroupLoading({ className }) {
 }
 
 function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }) {
+    var _a;
+    const { formData } = useFormStore();
     const [isOpen, setIsOpen] = React.useState(false);
     const { t } = useTranslation();
     const subtotal = lineItems.reduce((acc, item) => {
         var _a, _b;
-        return acc + ((_b = (_a = item.product) === null || _a === void 0 ? void 0 : _a.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
+        const variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => variant.variantOptions === item.variantOptions);
+        const productItem = variant || item.product;
+        return acc + ((_b = productItem === null || productItem === void 0 ? void 0 : productItem.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
     }, 0);
-    const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shipping !== null && shipping !== void 0 ? shipping : 0);
+    const shippingPrice = shipping !== null && shipping !== void 0 ? shipping : (_a = formData.shipping) === null || _a === void 0 ? void 0 : _a.price;
+    const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shippingPrice !== null && shippingPrice !== void 0 ? shippingPrice : 0);
     return (React.createElement("div", { className: "grid gap-5" },
         React.createElement("div", { className: "flex justify-between items-center" },
             React.createElement("div", { onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 cursor-pointer" },
@@ -34584,8 +34635,8 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
                 React.createElement("p", null, storeHelpers.formatPrice(subtotal, currency, exchangeRate))),
             React.createElement("div", { className: "flex justify-between" },
                 React.createElement("p", null, t("CheckoutEmbed.Summary.shipping")),
-                React.createElement("p", null, !!shipping
-                    ? storeHelpers.formatPrice(shipping, currency, exchangeRate)
+                React.createElement("p", null, !!shippingPrice
+                    ? storeHelpers.formatPrice(shippingPrice, currency, exchangeRate)
                     : t("CheckoutEmbed.Summary.calculatedAtNextStep"))),
             !!tax && (React.createElement("div", { className: "flex justify-between" },
                 React.createElement("p", null, t("CheckoutEmbed.Summary.tax")),
@@ -34602,15 +34653,22 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
                 grid: isOpen,
             }) }, lineItems.map((item, index) => {
             var _a, _b, _c, _d, _e;
+            const variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => variant.variantOptions === item.variantOptions);
+            const productItem = variant || item.product;
             return (React.createElement("div", { key: index, className: "flex items-center" },
                 React.createElement("div", { className: "relative" },
-                    React.createElement("div", { className: "w-16 h-16 bg-secondary rounded-lg overflow-hidden relative" }, ((_a = item.product) === null || _a === void 0 ? void 0 : _a.images[0]) && (React.createElement("img", { src: item.product.images[0] || "/placeholder.svg", alt: ((_b = item.product) === null || _b === void 0 ? void 0 : _b.title) || "", className: "object-cover w-full h-full", sizes: "64px" }))),
+                    React.createElement("div", { className: "w-16 h-16 bg-secondary rounded-lg overflow-hidden relative" }, (productItem === null || productItem === void 0 ? void 0 : productItem.images[0]) && (React.createElement("img", { src: productItem.images[0] ||
+                            ((_b = item === null || item === void 0 ? void 0 : item.product) === null || _b === void 0 ? void 0 : _b.images[0]) ||
+                            "/placeholder.svg", alt: ((_c = item.product) === null || _c === void 0 ? void 0 : _c.title) || "", className: "object-cover w-full h-full", sizes: "64px" }))),
                     React.createElement("div", { className: "absolute -top-2 -right-2 w-6 h-6 bg-primary rounded-full flex items-center text-background justify-center text-sm" }, item.quantity)),
                 React.createElement("div", { className: "ml-4 flex-1" },
-                    React.createElement("h3", { className: "text-lg font-medium" }, (_c = item.product) === null || _c === void 0 ? void 0 : _c.title),
-                    React.createElement("p", { className: "text-muted-foreground text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
+                    React.createElement("h3", { className: "text-lg font-medium" }, (_d = item.product) === null || _d === void 0 ? void 0 : _d.title),
+                    React.createElement("p", { className: "text-muted-foreground text-sm" }, item.variantOptions.map((option) => (React.createElement("span", { key: option.name },
+                        option.name,
+                        ": ",
+                        option.value))))),
                 React.createElement("div", { className: "text-right" },
-                    React.createElement("p", { className: "text-lg font-medium" }, storeHelpers.formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0, currency, exchangeRate)))));
+                    React.createElement("p", { className: "text-lg font-medium" }, storeHelpers.formatPrice((_e = productItem === null || productItem === void 0 ? void 0 : productItem.priceInCents) !== null && _e !== void 0 ? _e : 0, currency, exchangeRate)))));
         }))));
 }
 

package/dist/index.mjs

@@ -3566,7 +3566,7 @@ function useConstant(init) {
 
 const isBrowser = typeof window !== "undefined";
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$1 = isBrowser ? useLayoutEffect : useEffect;
 
 /**
  * @public
@@ -3829,7 +3829,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
      */
     const [diffedChildren, setDiffedChildren] = useState(presentChildren);
     const [renderedChildren, setRenderedChildren] = useState(presentChildren);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
         isInitialRender.current = false;
         pendingPresentChildren.current = presentChildren;
         /**
@@ -4449,7 +4449,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const wantsHandoff = useRef(Boolean(optimisedAppearId) &&
         !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
         window.MotionHasOptimisedAnimation?.(optimisedAppearId));
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
         if (!visualElement)
             return;
         isMounted.current = true;
@@ -18490,6 +18490,48 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual(val1, val2)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+const useDeepEqualEffect = (effect, deps) => {
+    const ref = useRef(deps);
+    if (!deepEqual(deps, ref.current)) {
+        ref.current = deps;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, ref.current);
+};
+
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
  *
@@ -18534,10 +18576,8 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    const _name = React__default.useRef(name);
-    _name.current = name;
-    React__default.useEffect(() => control._subscribe({
-        name: _name.current,
+    useDeepEqualEffect(() => control._subscribe({
+        name: name,
         formState: _localProxyFormState.current,
         exact,
         callback: (formState) => {
@@ -18547,7 +18587,7 @@ function useFormState(props) {
                     ...formState,
                 });
         },
-    }), [control, disabled, exact]);
+    }), [name, disabled, exact]);
     React__default.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
@@ -18587,19 +18627,16 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const _name = React__default.useRef(name);
-    const _defaultValue = React__default.useRef(defaultValue);
-    _name.current = name;
-    React__default.useEffect(() => control._subscribe({
-        name: _name.current,
+    const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
+    useDeepEqualEffect(() => control._subscribe({
+        name: name,
         formState: {
             values: true,
         },
         exact,
         callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, _defaultValue.current)),
-    }), [control, disabled, exact]);
-    const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
+            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue)),
+    }), [name, defaultValue, disabled, exact]);
     React__default.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -18834,39 +18871,6 @@ var createSubject = () => {
     };
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual(object1, object2) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!keys2.includes(key)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2)
-                : val1 !== val2) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
@@ -19415,6 +19419,7 @@ function createFormControl(props = {}) {
     let _formState = {
         submitCount: 0,
         isDirty: false,
+        isReady: false,
         isLoading: isFunction(_options.defaultValues),
         isValidating: false,
         isSubmitted: false,
@@ -20434,6 +20439,7 @@ function createFormControl(props = {}) {
     };
 }
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
 /**
  * Custom hook to manage the entire form.
  *
@@ -20480,6 +20486,7 @@ function useForm(props = {}) {
         validatingFields: {},
         errors: props.errors || {},
         disabled: props.disabled || false,
+        isReady: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined
             : props.defaultValues,
@@ -20497,12 +20504,36 @@ function useForm(props = {}) {
     }
     const control = _formControl.current.control;
     control._options = props;
-    React__default.useLayoutEffect(() => control._subscribe({
-        formState: control._proxyFormState,
-        callback: () => updateFormState({ ...control._formState }),
-        reRenderRoot: true,
-    }), [control]);
+    useIsomorphicLayoutEffect(() => {
+        const sub = control._subscribe({
+            formState: control._proxyFormState,
+            callback: () => updateFormState({ ...control._formState }),
+            reRenderRoot: true,
+        });
+        updateFormState((data) => ({
+            ...data,
+            isReady: true,
+        }));
+        return sub;
+    }, [control]);
     React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React__default.useEffect(() => {
+        if (props.mode) {
+            control._options.mode = props.mode;
+        }
+        if (props.reValidateMode) {
+            control._options.reValidateMode = props.reValidateMode;
+        }
+        if (props.errors && !isEmptyObject(props.errors)) {
+            control._setErrors(props.errors);
+        }
+    }, [control, props.errors, props.mode, props.reValidateMode]);
+    React__default.useEffect(() => {
+        props.shouldUnregister &&
+            control._subjects.state.next({
+                values: control._getWatch(),
+            });
+    }, [control, props.shouldUnregister]);
     React__default.useEffect(() => {
         if (control._proxyFormState.isDirty) {
             const isDirty = control._getDirty();
@@ -20522,12 +20553,7 @@ function useForm(props = {}) {
         else {
             control._resetDefaultValues();
         }
-    }, [props.values, control]);
-    React__default.useEffect(() => {
-        if (props.errors && !isEmptyObject(props.errors)) {
-            control._setErrors(props.errors);
-        }
-    }, [props.errors, control]);
+    }, [control, props.values]);
     React__default.useEffect(() => {
         if (!control._state.mount) {
             control._setValid();
@@ -20539,12 +20565,6 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    React__default.useEffect(() => {
-        props.shouldUnregister &&
-            control._subjects.state.next({
-                values: control._getWatch(),
-            });
-    }, [props.shouldUnregister, control]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -34184,7 +34204,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
 };
 var CheckoutForm$2 = memo$1(CheckoutForm$1);
 
-const publicStripeKey = "pk_test_51RCjhw2cgbkVT71muwgBSw1tP06YVR4l4P9zI8wP2ipmze9VnTmTwxESVVePmU6QV8TL6bxG7f10oXQRnKC3F3KT00EsvlPAoS";
+const publicStripeKey = "pk_live_51QvliXK5wvEuxX36GWLFgMtUrG2cGIjpW0eXoqVzjEr8S0PdGzAp4ydQa6ssxVW9u0zaLajod93YZnQIU5C8cgqp00Bb64X60b";
 const stripePromise = loadStripe(publicStripeKey);
 function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }) {
     const options = {
@@ -34284,10 +34304,10 @@ function ShippingOptionWrapper({ rate, children, onPickupPointSelected, locale,
     if (rate.provider === "zasilkovna") {
         return (React__default.createElement(ZasilkovnaShippingOption, { onPickupPointSelected: onPickupPointSelected, locale: locale, countryCode: countryCode, apiKey: rate.clientSecret }, children));
     }
-    return;
+    return React__default.createElement(React__default.Fragment, null, children);
 }
 
-function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, }) {
+function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, setFormData, formData, }) {
     var _a;
     const { t } = useTranslation();
     const form = useForm({
@@ -34330,17 +34350,39 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
                     return (React__default.createElement(ShippingOptionWrapper, { rate: rate, key: rateId, onPickupPointSelected: (pickupPointId, pickupPointName) => {
                             form.setValue("pickupPointId", pickupPointId);
                             form.setValue("pickupPointDisplayName", pickupPointName);
+                            setFormData(Object.assign(Object.assign({}, formData), { shipping: {
+                                    rateId,
+                                    provider: rate.provider,
+                                    price: intPrice,
+                                    name: rate.name,
+                                    pickupPointId,
+                                    pickupPointDisplayName,
+                                } }));
                         }, locale: locale, countryCode: countryCode },
                         React__default.createElement("div", { className: clsx("p-4 cursor-pointer rounded-md border bg-background", {
                                 "bg-muted border-primary": currentRateId === rateId,
                             }), onClick: () => {
+                                const newFormData = {
+                                    rateId,
+                                    provider: rate.provider,
+                                    price: intPrice,
+                                    name: rate.name,
+                                    pickupPointId: rate.provider === "zasilkovna"
+                                        ? form.watch("pickupPointId")
+                                        : "",
+                                    pickupPointDisplayName: rate.provider === "zasilkovna"
+                                        ? form.watch("pickupPointDisplayName")
+                                        : "",
+                                };
                                 form.setValue("rateId", rateId);
                                 form.setValue("provider", rate.provider);
                                 form.setValue("name", rate.name);
                                 form.setValue("price", intPrice);
                                 if (rate.provider !== "zasilkovna") {
                                     form.setValue("pickupPointDisplayName", "");
+                                    form.setValue("pickupPointId", "");
                                 }
+                                setFormData(Object.assign(Object.assign({}, formData), { shipping: newFormData }));
                             } },
                             React__default.createElement("div", { className: "flex items-center justify-between w-full" },
                                 React__default.createElement("p", null, rate.name),
@@ -34368,12 +34410,12 @@ function ShippingRateLoading() {
         React__default.createElement(Skeleton, { className: "w-40 h-3.5" })));
 }
 
-const useFormStore = (checkoutId) => create()(persist((set) => ({
+const useFormStore = create()(persist((set) => ({
     formData: {},
     setFormData: (formData) => set({ formData }),
     step: "customer",
     setStep: (step) => set({ step }),
-}), { name: `checkout-${checkoutId}` }));
+}), { name: `checkout` }));
 
 const motionSettings = {
     initial: { opacity: 0 },
@@ -34382,7 +34424,7 @@ const motionSettings = {
     transition: { duration: 0.2 },
 };
 function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, }) {
-    const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
+    const { formData, setFormData, step, setStep } = useFormStore();
     const [paymentSecret, setPaymentSecret] = useState(null);
     const [shippingRates, setShippingRates] = useState([]);
     const validateStep = useCallback(() => {
@@ -34429,12 +34471,17 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         if (shippingRates.length > 0)
             return;
         const getShippingRates = () => __awaiter(this, void 0, void 0, function* () {
-            const shippingRates = yield storeClient.getCheckoutShippingRates(clientSecret, checkoutId);
-            console.log(shippingRates);
-            setShippingRates(shippingRates);
+            try {
+                const shippingRates = yield storeClient.getCheckoutShippingRates(clientSecret, checkoutId);
+                setShippingRates(shippingRates);
+            }
+            catch (error) {
+                console.error("Failed to load shipping rates:", error);
+                setShippingRates([]);
+            }
         });
         getShippingRates();
-    }, [step, shippingRates]);
+    }, [step, clientSecret, checkoutId]);
     // Handle address form submission
     const handleCustomerSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
         setFormData(Object.assign(Object.assign({}, formData), { customer: data }));
@@ -34471,8 +34518,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         const newFormData = Object.assign(Object.assign({}, formData), { shipping: data });
         setFormData(newFormData);
         yield storeClient.updateCheckout(clientSecret, checkoutId, {
-            shipping: data.price,
-            shipmentInfo: {
+            shipmentData: {
                 provider: data.provider,
                 pickupPointId: data.pickupPointId,
             },
@@ -34509,7 +34555,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "customer" && (React__default.createElement(motion.div, Object.assign({ key: "customer" }, motionSettings, { className: "absolute w-full" }),
                 React__default.createElement(CustomerForm, { initialData: formData.customer, onSubmit: handleCustomerSubmit }))),
             step === "shipping" && formData.customer && (React__default.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
-                React__default.createElement(ShippingMethodForm, { shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }))),
+                React__default.createElement(ShippingMethodForm, { setFormData: setFormData, formData: formData, shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }))),
             step === "payment" && formData.customer && formData.shipping && (React__default.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
                 React__default.createElement(PaymentForm, { locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate) }))))));
 }
@@ -34534,13 +34580,18 @@ function InputGroupLoading({ className }) {
 }
 
 function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }) {
+    var _a;
+    const { formData } = useFormStore();
     const [isOpen, setIsOpen] = useState(false);
     const { t } = useTranslation();
     const subtotal = lineItems.reduce((acc, item) => {
         var _a, _b;
-        return acc + ((_b = (_a = item.product) === null || _a === void 0 ? void 0 : _a.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
+        const variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => variant.variantOptions === item.variantOptions);
+        const productItem = variant || item.product;
+        return acc + ((_b = productItem === null || productItem === void 0 ? void 0 : productItem.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
     }, 0);
-    const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shipping !== null && shipping !== void 0 ? shipping : 0);
+    const shippingPrice = shipping !== null && shipping !== void 0 ? shipping : (_a = formData.shipping) === null || _a === void 0 ? void 0 : _a.price;
+    const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shippingPrice !== null && shippingPrice !== void 0 ? shippingPrice : 0);
     return (React__default.createElement("div", { className: "grid gap-5" },
         React__default.createElement("div", { className: "flex justify-between items-center" },
             React__default.createElement("div", { onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 cursor-pointer" },
@@ -34561,8 +34612,8 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
                 React__default.createElement("p", null, storeHelpers.formatPrice(subtotal, currency, exchangeRate))),
             React__default.createElement("div", { className: "flex justify-between" },
                 React__default.createElement("p", null, t("CheckoutEmbed.Summary.shipping")),
-                React__default.createElement("p", null, !!shipping
-                    ? storeHelpers.formatPrice(shipping, currency, exchangeRate)
+                React__default.createElement("p", null, !!shippingPrice
+                    ? storeHelpers.formatPrice(shippingPrice, currency, exchangeRate)
                     : t("CheckoutEmbed.Summary.calculatedAtNextStep"))),
             !!tax && (React__default.createElement("div", { className: "flex justify-between" },
                 React__default.createElement("p", null, t("CheckoutEmbed.Summary.tax")),
@@ -34579,15 +34630,22 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
                 grid: isOpen,
             }) }, lineItems.map((item, index) => {
             var _a, _b, _c, _d, _e;
+            const variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => variant.variantOptions === item.variantOptions);
+            const productItem = variant || item.product;
             return (React__default.createElement("div", { key: index, className: "flex items-center" },
                 React__default.createElement("div", { className: "relative" },
-                    React__default.createElement("div", { className: "w-16 h-16 bg-secondary rounded-lg overflow-hidden relative" }, ((_a = item.product) === null || _a === void 0 ? void 0 : _a.images[0]) && (React__default.createElement("img", { src: item.product.images[0] || "/placeholder.svg", alt: ((_b = item.product) === null || _b === void 0 ? void 0 : _b.title) || "", className: "object-cover w-full h-full", sizes: "64px" }))),
+                    React__default.createElement("div", { className: "w-16 h-16 bg-secondary rounded-lg overflow-hidden relative" }, (productItem === null || productItem === void 0 ? void 0 : productItem.images[0]) && (React__default.createElement("img", { src: productItem.images[0] ||
+                            ((_b = item === null || item === void 0 ? void 0 : item.product) === null || _b === void 0 ? void 0 : _b.images[0]) ||
+                            "/placeholder.svg", alt: ((_c = item.product) === null || _c === void 0 ? void 0 : _c.title) || "", className: "object-cover w-full h-full", sizes: "64px" }))),
                     React__default.createElement("div", { className: "absolute -top-2 -right-2 w-6 h-6 bg-primary rounded-full flex items-center text-background justify-center text-sm" }, item.quantity)),
                 React__default.createElement("div", { className: "ml-4 flex-1" },
-                    React__default.createElement("h3", { className: "text-lg font-medium" }, (_c = item.product) === null || _c === void 0 ? void 0 : _c.title),
-                    React__default.createElement("p", { className: "text-muted-foreground text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
+                    React__default.createElement("h3", { className: "text-lg font-medium" }, (_d = item.product) === null || _d === void 0 ? void 0 : _d.title),
+                    React__default.createElement("p", { className: "text-muted-foreground text-sm" }, item.variantOptions.map((option) => (React__default.createElement("span", { key: option.name },
+                        option.name,
+                        ": ",
+                        option.value))))),
                 React__default.createElement("div", { className: "text-right" },
-                    React__default.createElement("p", { className: "text-lg font-medium" }, storeHelpers.formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0, currency, exchangeRate)))));
+                    React__default.createElement("p", { className: "text-lg font-medium" }, storeHelpers.formatPrice((_e = productItem === null || productItem === void 0 ? void 0 : productItem.priceInCents) !== null && _e !== void 0 ? _e : 0, currency, exchangeRate)))));
         }))));
 }
 

package/dist/lib/betterstore.d.ts

@@ -1,5 +1,5 @@
 export declare const storeHelpers: {
     proxy?: string;
-    formatPrice(priceInCents: number, currency: string, exchangeRate?: number): string;
+    formatPrice(priceInCents: number, currency: string, exchangeRate?: number | null): string;
     getExchangeRate(baseCurrency: string, targetCurrency: string): Promise<number>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.2.39",
+  "version": "0.2.42",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {
@@ -19,7 +19,7 @@
   "author": "Better Store",
   "license": "MIT",
   "devDependencies": {
-    "@betterstore/sdk": "^0.3.31",
+    "@betterstore/sdk": "^0.3.36",
     "@changesets/cli": "^2.28.1",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",