@betterstore/react 0.2.42 → 0.2.43

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @betterstore/sdk
 
+## 0.2.43
+
+### Patch Changes
+
+- variant handeling bug fixes
+
 ## 0.2.42
 
 ### Patch Changes

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

@@ -9,11 +9,11 @@ interface PaymentFormProps {
     onDoubleBack: () => void;
     contactEmail: string;
     shippingAddress: string;
-    shippingProvider: string;
+    shippingName: string;
     shippingPrice: string;
     checkoutAppearance?: AppearanceConfig;
     fonts?: StripeElementsOptions["fonts"];
     locale?: StripeElementLocale;
 }
-export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }: PaymentFormProps): React.JSX.Element;
+export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, }: PaymentFormProps): React.JSX.Element;
 export {};

package/dist/index.cjs.js

@@ -3274,7 +3274,7 @@ const CheckoutEmbed$2 = {
 		day: "den",
 		days: "dny",
 		estimatedDeliveryDate: "Odhadované datum dodání:",
-		shipTo: "Ship to:",
+		address: "Adresa:",
 		shipping: "Doprava:",
 		title: "Přeprava",
 		description: {
@@ -3341,7 +3341,7 @@ const CheckoutEmbed$1 = {
 	Shipping: {
 		title: "Shipping",
 		change: "Change",
-		shipTo: "Ship to:",
+		address: "Address:",
 		contact: "Contact:",
 		button: "Continue to checkout",
 		back: "Back to information",
@@ -18547,12 +18547,12 @@ function deepEqual(object1, object2) {
 }
 
 const useDeepEqualEffect = (effect, deps) => {
-    const ref = React.useRef(deps);
+    const ref = React__namespace.useRef(deps);
     if (!deepEqual(deps, ref.current)) {
         ref.current = deps;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(effect, ref.current);
+    React__namespace.useEffect(effect, ref.current);
 };
 
 /**
@@ -20537,6 +20537,7 @@ function useForm(props = {}) {
             ...data,
             isReady: true,
         }));
+        control._formState.isReady = true;
         return sub;
     }, [control]);
     React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
@@ -34241,7 +34242,7 @@ function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSu
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, }) {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const { t } = useTranslation();
     return (React.createElement("div", { className: "space-y-6" },
@@ -34257,7 +34258,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                 React.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
             React.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React.createElement("p", null,
-                    React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipTo")),
+                    React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.address")),
                     " ",
                     React.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
                 React.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
@@ -34266,7 +34267,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                     React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipping")),
                     " ",
                     React.createElement("span", { className: "text-muted-foreground" },
-                        shippingProvider,
+                        shippingName,
                         " \u00B7 ",
                         shippingPrice)),
                 React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
@@ -34354,7 +34355,7 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
                 React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change"))),
             React.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React.createElement("p", null,
-                    React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipTo")),
+                    React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.address")),
                     " ",
                     React.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
                 React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
@@ -34472,6 +34473,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     React.useEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         if (customer && !((_a = formData.customer) === null || _a === void 0 ? void 0 : _a.email)) {
+            const step = customer.id ? "shipping" : "customer";
             setFormData(Object.assign(Object.assign({}, formData), { customerId: customer.id, customer: {
                     firstName: (_d = (_c = (_b = customer.address) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.split(" ")[0]) !== null && _d !== void 0 ? _d : "",
                     lastName: (_g = (_f = (_e = customer.address) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.split(" ")[1]) !== null && _g !== void 0 ? _g : "",
@@ -34486,6 +34488,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
                         countryCode: (_x = (_w = customer.address) === null || _w === void 0 ? void 0 : _w.countryCode) !== null && _x !== void 0 ? _x : "",
                     },
                 } }));
+            setStep(step);
         }
     }, [customer]);
     React.useEffect(() => {
@@ -34580,7 +34583,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "shipping" && formData.customer && (React.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 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) }))))));
+                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), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate) }))))));
 }
 
 function CheckoutFormLoading() {
@@ -34609,7 +34612,13 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
     const { t } = useTranslation();
     const subtotal = lineItems.reduce((acc, item) => {
         var _a, _b;
-        const variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => variant.variantOptions === item.variantOptions);
+        const variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => {
+            if (!variant.variantOptions || !item.variantOptions)
+                return false;
+            if (variant.variantOptions.length !== item.variantOptions.length)
+                return false;
+            return variant.variantOptions.every((vOpt) => item.variantOptions.some((iOpt) => vOpt.name === iOpt.name && vOpt.value === iOpt.value));
+        });
         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);
@@ -34653,7 +34662,13 @@ 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 variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => {
+                if (!variant.variantOptions || !item.variantOptions)
+                    return false;
+                if (variant.variantOptions.length !== item.variantOptions.length)
+                    return false;
+                return variant.variantOptions.every((vOpt) => item.variantOptions.some((iOpt) => vOpt.name === iOpt.name && vOpt.value === iOpt.value));
+            });
             const productItem = variant || item.product;
             return (React.createElement("div", { key: index, className: "flex items-center" },
                 React.createElement("div", { className: "relative" },

package/dist/index.mjs

@@ -3251,7 +3251,7 @@ const CheckoutEmbed$2 = {
 		day: "den",
 		days: "dny",
 		estimatedDeliveryDate: "Odhadované datum dodání:",
-		shipTo: "Ship to:",
+		address: "Adresa:",
 		shipping: "Doprava:",
 		title: "Přeprava",
 		description: {
@@ -3318,7 +3318,7 @@ const CheckoutEmbed$1 = {
 	Shipping: {
 		title: "Shipping",
 		change: "Change",
-		shipTo: "Ship to:",
+		address: "Address:",
 		contact: "Contact:",
 		button: "Continue to checkout",
 		back: "Back to information",
@@ -18524,12 +18524,12 @@ function deepEqual(object1, object2) {
 }
 
 const useDeepEqualEffect = (effect, deps) => {
-    const ref = useRef(deps);
+    const ref = React.useRef(deps);
     if (!deepEqual(deps, ref.current)) {
         ref.current = deps;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(effect, ref.current);
+    React.useEffect(effect, ref.current);
 };
 
 /**
@@ -20514,6 +20514,7 @@ function useForm(props = {}) {
             ...data,
             isReady: true,
         }));
+        control._formState.isReady = true;
         return sub;
     }, [control]);
     React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
@@ -34218,7 +34219,7 @@ function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSu
 }
 var PaymentElement$1 = memo$1(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, }) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const { t } = useTranslation();
     return (React__default.createElement("div", { className: "space-y-6" },
@@ -34234,7 +34235,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                 React__default.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
             React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React__default.createElement("p", null,
-                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipTo")),
+                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.address")),
                     " ",
                     React__default.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
                 React__default.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
@@ -34243,7 +34244,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                     React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipping")),
                     " ",
                     React__default.createElement("span", { className: "text-muted-foreground" },
-                        shippingProvider,
+                        shippingName,
                         " \u00B7 ",
                         shippingPrice)),
                 React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
@@ -34331,7 +34332,7 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
                 React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change"))),
             React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React__default.createElement("p", null,
-                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipTo")),
+                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.address")),
                     " ",
                     React__default.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
                 React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
@@ -34449,6 +34450,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     useEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         if (customer && !((_a = formData.customer) === null || _a === void 0 ? void 0 : _a.email)) {
+            const step = customer.id ? "shipping" : "customer";
             setFormData(Object.assign(Object.assign({}, formData), { customerId: customer.id, customer: {
                     firstName: (_d = (_c = (_b = customer.address) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.split(" ")[0]) !== null && _d !== void 0 ? _d : "",
                     lastName: (_g = (_f = (_e = customer.address) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.split(" ")[1]) !== null && _g !== void 0 ? _g : "",
@@ -34463,6 +34465,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
                         countryCode: (_x = (_w = customer.address) === null || _w === void 0 ? void 0 : _w.countryCode) !== null && _x !== void 0 ? _x : "",
                     },
                 } }));
+            setStep(step);
         }
     }, [customer]);
     useEffect(() => {
@@ -34557,7 +34560,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "shipping" && formData.customer && (React__default.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 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) }))))));
+                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), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate) }))))));
 }
 
 function CheckoutFormLoading() {
@@ -34586,7 +34589,13 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
     const { t } = useTranslation();
     const subtotal = lineItems.reduce((acc, item) => {
         var _a, _b;
-        const variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => variant.variantOptions === item.variantOptions);
+        const variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => {
+            if (!variant.variantOptions || !item.variantOptions)
+                return false;
+            if (variant.variantOptions.length !== item.variantOptions.length)
+                return false;
+            return variant.variantOptions.every((vOpt) => item.variantOptions.some((iOpt) => vOpt.name === iOpt.name && vOpt.value === iOpt.value));
+        });
         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);
@@ -34630,7 +34639,13 @@ 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 variant = (_a = item.product) === null || _a === void 0 ? void 0 : _a.productVariants.find((variant) => {
+                if (!variant.variantOptions || !item.variantOptions)
+                    return false;
+                if (variant.variantOptions.length !== item.variantOptions.length)
+                    return false;
+                return variant.variantOptions.every((vOpt) => item.variantOptions.some((iOpt) => vOpt.name === iOpt.name && vOpt.value === iOpt.value));
+            });
             const productItem = variant || item.product;
             return (React__default.createElement("div", { key: index, className: "flex items-center" },
                 React__default.createElement("div", { className: "relative" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.2.42",
+  "version": "0.2.43",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {