@betterstore/react 0.2.36 → 0.2.38

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.2.38
+
+### Patch Changes
+
+- zasilkovna added
+
+## 0.2.37
+
+### Patch Changes
+
+- bug fixes, loading state, scrollbar bug fix
+
 ## 0.2.36
 
 ### Patch Changes

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

@@ -15,6 +15,7 @@ interface CheckoutFormProps {
     fonts?: StripeElementsOptions["fonts"];
     locale?: StripeElementLocale;
     setShippingCost: (cost: number) => void;
+    exchangeRate: number;
 }
-export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }: CheckoutFormProps): React.JSX.Element;
+export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, }: CheckoutFormProps): React.JSX.Element;
 export {};

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

@@ -10,11 +10,13 @@ export declare const customerSchema: z.ZodObject<{
         state: z.ZodOptional<z.ZodString>;
         zipCode: z.ZodString;
         country: z.ZodString;
+        countryCode: z.ZodString;
     }, "strip", z.ZodTypeAny, {
         line1: string;
         city: string;
         zipCode: string;
         country: string;
+        countryCode: string;
         line2?: string | undefined;
         state?: string | undefined;
     }, {
@@ -22,6 +24,7 @@ export declare const customerSchema: z.ZodObject<{
         city: string;
         zipCode: string;
         country: string;
+        countryCode: string;
         line2?: string | undefined;
         state?: string | undefined;
     }>;
@@ -36,6 +39,7 @@ export declare const customerSchema: z.ZodObject<{
         city: string;
         zipCode: string;
         country: string;
+        countryCode: string;
         line2?: string | undefined;
         state?: string | undefined;
     };
@@ -50,6 +54,7 @@ export declare const customerSchema: z.ZodObject<{
         city: string;
         zipCode: string;
         country: string;
+        countryCode: string;
         line2?: string | undefined;
         state?: string | undefined;
     };
@@ -58,19 +63,22 @@ export declare const customerSchema: z.ZodObject<{
 }>;
 export declare const shippingMethodSchema: z.ZodObject<{
     rateId: z.ZodString;
-    name: z.ZodString;
     provider: z.ZodString;
-    amount: z.ZodNumber;
+    price: z.ZodNumber;
+    name: z.ZodString;
+    pickupPointId: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     rateId: string;
-    name: string;
     provider: string;
-    amount: number;
+    price: number;
+    name: string;
+    pickupPointId?: string | undefined;
 }, {
     rateId: string;
-    name: string;
     provider: string;
-    amount: number;
+    price: number;
+    name: string;
+    pickupPointId?: string | undefined;
 }>;
 export declare const checkoutSchema: z.ZodObject<{
     customer: z.ZodObject<{
@@ -84,11 +92,13 @@ export declare const checkoutSchema: z.ZodObject<{
             state: z.ZodOptional<z.ZodString>;
             zipCode: z.ZodString;
             country: z.ZodString;
+            countryCode: z.ZodString;
         }, "strip", z.ZodTypeAny, {
             line1: string;
             city: string;
             zipCode: string;
             country: string;
+            countryCode: string;
             line2?: string | undefined;
             state?: string | undefined;
         }, {
@@ -96,6 +106,7 @@ export declare const checkoutSchema: z.ZodObject<{
             city: string;
             zipCode: string;
             country: string;
+            countryCode: string;
             line2?: string | undefined;
             state?: string | undefined;
         }>;
@@ -110,6 +121,7 @@ export declare const checkoutSchema: z.ZodObject<{
             city: string;
             zipCode: string;
             country: string;
+            countryCode: string;
             line2?: string | undefined;
             state?: string | undefined;
         };
@@ -124,6 +136,7 @@ export declare const checkoutSchema: z.ZodObject<{
             city: string;
             zipCode: string;
             country: string;
+            countryCode: string;
             line2?: string | undefined;
             state?: string | undefined;
         };
@@ -132,19 +145,22 @@ export declare const checkoutSchema: z.ZodObject<{
     }>;
     shipping: z.ZodObject<{
         rateId: z.ZodString;
-        name: z.ZodString;
         provider: z.ZodString;
-        amount: z.ZodNumber;
+        price: z.ZodNumber;
+        name: z.ZodString;
+        pickupPointId: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         rateId: string;
-        name: string;
         provider: string;
-        amount: number;
+        price: number;
+        name: string;
+        pickupPointId?: string | undefined;
     }, {
         rateId: string;
-        name: string;
         provider: string;
-        amount: number;
+        price: number;
+        name: string;
+        pickupPointId?: string | undefined;
     }>;
     customerId: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
@@ -157,6 +173,7 @@ export declare const checkoutSchema: z.ZodObject<{
             city: string;
             zipCode: string;
             country: string;
+            countryCode: string;
             line2?: string | undefined;
             state?: string | undefined;
         };
@@ -165,9 +182,10 @@ export declare const checkoutSchema: z.ZodObject<{
     };
     shipping: {
         rateId: string;
-        name: string;
         provider: string;
-        amount: number;
+        price: number;
+        name: string;
+        pickupPointId?: string | undefined;
     };
     customerId?: string | undefined;
 }, {
@@ -180,6 +198,7 @@ export declare const checkoutSchema: z.ZodObject<{
             city: string;
             zipCode: string;
             country: string;
+            countryCode: string;
             line2?: string | undefined;
             state?: string | undefined;
         };
@@ -188,9 +207,10 @@ export declare const checkoutSchema: z.ZodObject<{
     };
     shipping: {
         rateId: string;
-        name: string;
         provider: string;
-        amount: number;
+        price: number;
+        name: string;
+        pickupPointId?: string | undefined;
     };
     customerId?: string | undefined;
 }>;

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

@@ -8,6 +8,10 @@ interface ShippingMethodFormProps {
     onBack: () => void;
     contactEmail: string;
     shippingAddress: string;
+    currency: string;
+    exchangeRate: number;
+    locale?: string;
+    countryCode?: string;
 }
-export default function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, }: ShippingMethodFormProps): React.JSX.Element;
+export default function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, }: ShippingMethodFormProps): React.JSX.Element;
 export {};

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare global {
+    interface Window {
+        Packeta: any;
+    }
+}
+export default function ZasilkovnaShippingOption({ children, onPickupPointSelected, locale, countryCode, apiKey, }: {
+    children: React.ReactNode;
+    onPickupPointSelected?: (pickupPointId: string) => void;
+    locale?: string;
+    countryCode?: string;
+    apiKey?: string;
+}): React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import { ShippingRate } from "@betterstore/sdk";
+import React from "react";
+export default function ShippingOptionWrapper({ rate, children, onPickupPointSelected, locale, countryCode, }: {
+    rate: ShippingRate;
+    children: React.ReactNode;
+    onPickupPointSelected?: (pickupPointId: string) => void;
+    locale?: string;
+    countryCode?: string;
+}): React.JSX.Element | undefined;

package/dist/components/payment-element/checkout-form.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<({ onSuccess, onError, children, }: {
+declare const _default: React.MemoExoticComponent<({ onSuccess, onError, children, setSubmitting, }: {
     onSuccess?: () => void;
     onError?: () => void;
     children: React.ReactNode;
+    setSubmitting?: (isSubmitting: boolean) => void;
 }) => React.JSX.Element>;
 export default _default;

package/dist/components/payment-element/index.d.ts

@@ -1,6 +1,6 @@
 import { Appearance, StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
-declare function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }: {
+declare function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }: {
     paymentSecret: string;
     checkoutAppearance?: Appearance;
     locale?: StripeElementLocale;
@@ -8,6 +8,7 @@ declare function PaymentElement({ paymentSecret, checkoutAppearance, locale, fon
     onSuccess?: () => void;
     onError?: () => void;
     children: React.ReactNode;
+    setSubmitting?: (isSubmitting: boolean) => void;
 }): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof PaymentElement>;
 export default _default;

package/dist/index.cjs.js

@@ -2593,6 +2593,13 @@ function defaults(obj) {
   });
   return obj;
 }
+function hasXSS(input) {
+  if (typeof input !== 'string') return false;
+
+  // Common XSS attack patterns
+  const xssPatterns = [/<\s*script.*?>/i, /<\s*\/\s*script\s*>/i, /<\s*img.*?on\w+\s*=/i, /<\s*\w+\s*on\w+\s*=.*?>/i, /javascript\s*:/i, /vbscript\s*:/i, /expression\s*\(/i, /eval\s*\(/i, /alert\s*\(/i, /document\.cookie/i, /document\.write\s*\(/i, /window\.location/i, /innerHTML/i];
+  return xssPatterns.some(pattern => pattern.test(input));
+}
 
 // eslint-disable-next-line no-control-regex
 const fieldContentRegExp = /^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;
@@ -2956,7 +2963,7 @@ class Browser {
         if (lookup) detected = detected.concat(lookup);
       }
     });
-    detected = detected.map(d => this.options.convertDetectedLanguage(d));
+    detected = detected.filter(d => d !== undefined && d !== null && !hasXSS(d)).map(d => this.options.convertDetectedLanguage(d));
     if (this.services && this.services.languageUtils && this.services.languageUtils.getBestMatchFromCodes) return detected; // new i18next v19.5.0
     return detected.length > 0 ? detected[0] : null; // a little backward compatibility
   }
@@ -3269,7 +3276,11 @@ const CheckoutEmbed$2 = {
 		estimatedDeliveryDate: "Odhadované datum dodání:",
 		shipTo: "Ship to:",
 		shipping: "Doprava:",
-		title: "Přeprava"
+		title: "Přeprava",
+		description: {
+			other: "Váš balíček bude doručen kurýrem.",
+			zasilkovna: "Váš balíček bude doručen do bodu vyzvednutí."
+		}
 	}
 };
 const Errors$1 = {
@@ -3337,7 +3348,11 @@ const CheckoutEmbed$1 = {
 		shipping: "Shipping:",
 		estimatedDeliveryDate: "Estimated delivery date: ",
 		day: "day",
-		days: "days"
+		days: "days",
+		description: {
+			other: "Your package will be delivered by a courier.",
+			zasilkovna: "Your package will be delivered to a pickup point."
+		}
 	},
 	Payment: {
 		title: "Payment",
@@ -3552,6 +3567,8 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance$1, fonts) => {
     return newAppearance;
 };
 
+const storeHelpers = sdk.createStoreHelpers();
+
 const LayoutGroupContext = React.createContext({});
 
 /**
@@ -3666,33 +3683,36 @@ function PopChild({ children, isPresent, anchorX }) {
 const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
     const presenceChildren = useConstant(newChildrenMap);
     const id = React.useId();
-    const memoizedOnExitComplete = React.useCallback((childId) => {
-        presenceChildren.set(childId, true);
-        for (const isComplete of presenceChildren.values()) {
-            if (!isComplete)
-                return; // can stop searching when any is incomplete
-        }
-        onExitComplete && onExitComplete();
-    }, [presenceChildren, onExitComplete]);
-    const context = React.useMemo(() => ({
-        id,
-        initial,
-        isPresent,
-        custom,
-        onExitComplete: memoizedOnExitComplete,
-        register: (childId) => {
-            presenceChildren.set(childId, false);
-            return () => presenceChildren.delete(childId);
-        },
-    }), 
+    let isReusedContext = true;
+    let context = React.useMemo(() => {
+        isReusedContext = false;
+        return {
+            id,
+            initial,
+            isPresent,
+            custom,
+            onExitComplete: (childId) => {
+                presenceChildren.set(childId, true);
+                for (const isComplete of presenceChildren.values()) {
+                    if (!isComplete)
+                        return; // can stop searching when any is incomplete
+                }
+                onExitComplete && onExitComplete();
+            },
+            register: (childId) => {
+                presenceChildren.set(childId, false);
+                return () => presenceChildren.delete(childId);
+            },
+        };
+    }, [isPresent, presenceChildren, onExitComplete]);
     /**
      * If the presence of a child affects the layout of the components around it,
      * we want to make a new context value to ensure they get re-rendered
      * so they can detect that layout change.
      */
-    presenceAffectsLayout
-        ? [Math.random(), memoizedOnExitComplete]
-        : [isPresent, memoizedOnExitComplete]);
+    if (presenceAffectsLayout && isReusedContext) {
+        context = { ...context };
+    }
     React.useMemo(() => {
         presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
     }, [isPresent]);
@@ -5599,7 +5619,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.7.2";
+        this.version = "12.7.4";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -13201,7 +13221,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.7.2", `Attempting to mix Motion versions ${nextValue.version} with 12.7.2 may not work as expected.`);
+                warnOnce(nextValue.version === "12.7.4", `Attempting to mix Motion versions ${nextValue.version} with 12.7.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -18241,6 +18261,7 @@ const customerSchema = z.object({
         state: z.string().optional(),
         zipCode: z.string().min(5, "invalid_zipCode"),
         country: z.string().min(1, "required_error"),
+        countryCode: z.string().min(1, "required_error"),
     }),
     saveInfo: z.boolean().optional(),
     phone: z.string().regex(phoneRegex, "invalid_phone"),
@@ -18248,9 +18269,10 @@ const customerSchema = z.object({
 // Shipping method schema
 const shippingMethodSchema = z.object({
     rateId: z.string().min(1, "required_error"),
-    name: z.string().min(1, "required_error"),
     provider: z.string().min(1, "required_error"),
-    amount: z.number().min(1, "required_error"),
+    price: z.number().min(1, "required_error"),
+    name: z.string().min(1, "required_error"),
+    pickupPointId: z.string().optional(),
 });
 // Combined checkout schema
 z.object({
@@ -32622,6 +32644,7 @@ function AddressInput() {
                             React.createElement(FormLabel, null, t("CheckoutEmbed.CustomerForm.address.country")),
                             React.createElement(CountryDropdown, { placeholder: t("CheckoutEmbed.CustomerForm.address.countryPlaceholder"), defaultValue: field.value, onChange: (country) => {
                                     field.onChange(country.name);
+                                    form.setValue("address.countryCode", country.alpha2);
                                 } }),
                             React.createElement(FormMessage, null))) })),
                 React.createElement(DialogFooter, null,
@@ -34142,7 +34165,7 @@ const useCheckout = create((set) => ({
     setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
 }));
 
-const CheckoutForm$1 = ({ onSuccess, onError, children, }) => {
+const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
     const stripe = reactStripe_umdExports.useStripe();
     const elements = reactStripe_umdExports.useElements();
     const { setIsSubmitting } = useCheckout();
@@ -34152,6 +34175,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, }) => {
         if (!stripe || !elements) {
             return;
         }
+        setSubmitting === null || setSubmitting === void 0 ? void 0 : setSubmitting(true);
         setIsSubmitting(true);
         const response = yield stripe.confirmPayment({
             elements,
@@ -34160,15 +34184,18 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, }) => {
         if (response.error) {
             setErrorMessage(response.error.message || "Something went wrong.");
             setIsSubmitting(false);
+            setSubmitting === null || setSubmitting === void 0 ? void 0 : setSubmitting(false);
             onError === null || onError === void 0 ? void 0 : onError();
         }
         else {
             setErrorMessage(undefined);
             setIsSubmitting(false);
+            setSubmitting === null || setSubmitting === void 0 ? void 0 : setSubmitting(false);
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         }
         setErrorMessage(undefined);
         setIsSubmitting(false);
+        setSubmitting === null || setSubmitting === void 0 ? void 0 : setSubmitting(false);
     });
     return (React.createElement("form", { onSubmit: handleSubmit },
         React.createElement("div", null,
@@ -34180,7 +34207,7 @@ var CheckoutForm$2 = React.memo(CheckoutForm$1);
 
 const publicStripeKey = "pk_test_51RCjhw2cgbkVT71muwgBSw1tP06YVR4l4P9zI8wP2ipmze9VnTmTwxESVVePmU6QV8TL6bxG7f10oXQRnKC3F3KT00EsvlPAoS";
 const stripePromise = loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }) {
+function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }) {
     const options = {
         locale: locale !== null && locale !== void 0 ? locale : "en",
         appearance: checkoutAppearance,
@@ -34188,11 +34215,12 @@ function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSu
         fonts: fonts,
     };
     return (React.createElement(reactStripe_umdExports.Elements, { stripe: stripePromise, options: options },
-        React.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children })));
+        React.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children, setSubmitting: setSubmitting })));
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
 function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }) {
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
     const { t } = useTranslation();
     return (React.createElement("div", { className: "space-y-6" },
         React.createElement("div", null,
@@ -34220,12 +34248,12 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         " \u00B7 ",
                         shippingPrice)),
                 React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
+        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting },
             React.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React.createElement(ChevronLeft, null),
                     t("CheckoutEmbed.Payment.back")),
-                React.createElement(SubmitButton, { isValid: true, isSubmitting: false }, t("CheckoutEmbed.Payment.button"))))))));
+                React.createElement(SubmitButton, { isValid: true, isSubmitting: isSubmitting }, t("CheckoutEmbed.Payment.button"))))))));
 }
 
 function Skeleton(_a) {
@@ -34233,16 +34261,62 @@ function Skeleton(_a) {
     return (React__namespace.createElement("div", Object.assign({ "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className) }, props)));
 }
 
-function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, }) {
+function ZasilkovnaShippingOption({ children, onPickupPointSelected, locale, countryCode, apiKey, }) {
+    const [widgetLoaded, setWidgetLoaded] = React.useState(false);
+    React.useEffect(() => {
+        // Check if the script is already present
+        if (!document.querySelector('script[src="https://widget.packeta.com/v6/www/js/library.js"]')) {
+            const script = document.createElement("script");
+            script.src = "https://widget.packeta.com/v6/www/js/library.js";
+            script.async = true;
+            script.onload = () => {
+                setWidgetLoaded(true);
+                console.log("loaded");
+            };
+            script.onerror = () => console.error("Failed to load Packeta Widget script.");
+            document.body.appendChild(script);
+        }
+        else {
+            setWidgetLoaded(true);
+        }
+    }, []);
+    const handleClick = () => {
+        if (widgetLoaded && window.Packeta && window.Packeta.Widget) {
+            const options = {
+                language: locale,
+                country: countryCode,
+                view: "modal",
+                valueFormat: "id,name,city,street",
+            };
+            window.Packeta.Widget.pick(apiKey, (point) => {
+                onPickupPointSelected === null || onPickupPointSelected === void 0 ? void 0 : onPickupPointSelected(point.id);
+            }, options);
+        }
+        else {
+            console.error("Packeta widget not found", window);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { onClick: () => handleClick() }, children)));
+}
+
+function ShippingOptionWrapper({ rate, children, onPickupPointSelected, locale, countryCode, }) {
+    if (rate.provider === "zasilkovna") {
+        return (React.createElement(ZasilkovnaShippingOption, { onPickupPointSelected: onPickupPointSelected, locale: locale, countryCode: countryCode, apiKey: rate.clientSecret }, children));
+    }
+    return;
+}
+
+function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, }) {
     var _a;
     const { t } = useTranslation();
     const form = useForm({
         resolver: s$1(shippingMethodSchema),
         defaultValues: initialData || {
             rateId: "",
-            name: "",
             provider: "",
-            amount: 0,
+            price: 0,
+            pickupPointId: "",
         },
     });
     const currentRateId = form.watch("rateId");
@@ -34266,28 +34340,27 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
                 shippingRates.length === 0 &&
                     Array.from({ length: 3 }).map((_, index) => (React.createElement(ShippingRateLoading, { key: index }))),
                 shippingRates.map((rate) => {
-                    const rateId = rate.objectId;
-                    const intPrice = Math.ceil(Number(rate.amount));
-                    const price = intPrice + " " + rate.currency;
-                    return (React.createElement("div", { className: clsx("p-4 cursor-pointer rounded-md border bg-background", {
-                            "bg-muted border-primary": currentRateId === rateId,
-                        }), onClick: () => {
-                            form.setValue("rateId", rateId);
-                            form.setValue("provider", rate.provider);
-                            form.setValue("name", rate.shipment);
-                            form.setValue("amount", intPrice);
-                        }, key: rateId },
-                        React.createElement("div", { className: "flex items-center justify-between w-full" },
-                            React.createElement("p", null, rate.provider),
-                            React.createElement("p", null, price)),
-                        rate.estimatedDays && (React.createElement("p", { className: "text-sm text-muted-foreground" },
-                            t("CheckoutEmbed.Shipping.estimatedDeliveryDate"),
-                            " ",
-                            rate.estimatedDays,
-                            " ",
-                            rate.estimatedDays === 1
-                                ? t("CheckoutEmbed.Shipping.day")
-                                : t("CheckoutEmbed.Shipping.days")))));
+                    const rateId = rate.provider + rate.name;
+                    const intPrice = Math.ceil(Number(rate.price));
+                    const displayPrice = storeHelpers.formatPrice(intPrice, currency, exchangeRate);
+                    const description = rate.provider === "zasilkovna"
+                        ? t("CheckoutEmbed.Shipping.description.zasilkovna")
+                        : t("CheckoutEmbed.Shipping.description.other");
+                    return (React.createElement(ShippingOptionWrapper, { rate: rate, key: rateId, onPickupPointSelected: (pickupPointId) => {
+                            form.setValue("pickupPointId", pickupPointId);
+                        }, 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: () => {
+                                form.setValue("rateId", rateId);
+                                form.setValue("provider", rate.provider);
+                                form.setValue("name", rate.name);
+                                form.setValue("price", intPrice);
+                            } },
+                            React.createElement("div", { className: "flex items-center justify-between w-full" },
+                                React.createElement("p", null, rate.name),
+                                React.createElement("p", null, displayPrice)),
+                            React.createElement("p", { className: "text-sm text-muted-foreground" }, description))));
                 }),
                 React.createElement(FormMessage, null, (_a = form.formState.errors.rateId) === null || _a === void 0 ? void 0 : _a.message),
                 React.createElement("div", { className: "flex justify-between items-center pt-4" },
@@ -34317,7 +34390,7 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, }) {
     const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
     const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [shippingRates, setShippingRates] = React.useState([]);
@@ -34341,7 +34414,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         validateStep();
     }, [step]);
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        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)) {
             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 : "",
@@ -34354,6 +34427,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
                         city: (_r = (_q = customer.address) === null || _q === void 0 ? void 0 : _q.city) !== null && _r !== void 0 ? _r : "",
                         zipCode: (_t = (_s = customer.address) === null || _s === void 0 ? void 0 : _s.zipCode) !== null && _t !== void 0 ? _t : "",
                         country: (_v = (_u = customer.address) === null || _u === void 0 ? void 0 : _u.country) !== null && _v !== void 0 ? _v : "",
+                        countryCode: (_x = (_w = customer.address) === null || _w === void 0 ? void 0 : _w.countryCode) !== null && _x !== void 0 ? _x : "",
                     },
                 } }));
         }
@@ -34365,12 +34439,14 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             return;
         const getShippingRates = () => __awaiter(this, void 0, void 0, function* () {
             const shippingRates = yield storeClient.getCheckoutShippingRates(clientSecret, checkoutId);
+            console.log(shippingRates);
             setShippingRates(shippingRates);
         });
         getShippingRates();
     }, [step, shippingRates]);
     // Handle address form submission
     const handleCustomerSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
+        setFormData(Object.assign(Object.assign({}, formData), { customer: data }));
         let newCustomerId = formData.customerId;
         if (!newCustomerId) {
             const newCustomer = yield storeClient.createCustomer(clientSecret, {
@@ -34404,16 +34480,15 @@ 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.amount * 100,
-            shippingInfo: {
-                rateId: data.rateId,
-                name: data.name,
+            shipping: data.price,
+            shipmentInfo: {
                 provider: data.provider,
+                pickupPointId: data.pickupPointId,
             },
         });
         const paymentSecret = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
         setPaymentSecret(paymentSecret);
-        setShippingCost(data.amount * 100);
+        setShippingCost(data.price);
         setStep("payment");
     });
     // Navigate back to previous step
@@ -34443,9 +34518,9 @@ 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) }))),
+                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 }))),
             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: formData.shipping.amount.toString() + " " + currency }))))));
+                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) }))))));
 }
 
 function CheckoutFormLoading() {
@@ -34467,8 +34542,6 @@ function InputGroupLoading({ className }) {
         React.createElement(Skeleton, { className: "w-full h-9" })));
 }
 
-const storeHelpers = sdk.createStoreHelpers();
-
 function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }) {
     const [isOpen, setIsOpen] = React.useState(false);
     const { t } = useTranslation();
@@ -34559,7 +34632,7 @@ function CheckoutSummaryLoading() {
 }
 
 function CheckoutEmbed({ checkoutId, config }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = sdk.createStoreClient({ proxy: clientProxy });
     React.useMemo(() => createI18nInstance(locale), []);
@@ -34608,10 +34681,10 @@ function CheckoutEmbed({ checkoutId, config }) {
             return;
         setCheckout(Object.assign(Object.assign({}, checkout), { shipping: cost }));
     };
-    return (React.createElement("div", { className: "checkout-embed mx-auto max-w-[1200px] min-h-screen overflow-x-hidden gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
+    return (React.createElement("div", { className: "checkout-embed scrollbar-hidden mx-auto max-w-[1200px] min-h-screen overflow-x-hidden gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
         React.createElement(Appearance, { appearance: appearance }),
-        React.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError }))),
-        React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React.createElement(CheckoutSummaryLoading, null)) : (React.createElement(CheckoutSummary, { currency: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _b !== void 0 ? _b : "", lineItems: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _c !== void 0 ? _c : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _d !== void 0 ? _d : 1 })))));
+        React.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1 }))),
+        React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React.createElement(CheckoutSummaryLoading, null)) : (React.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1 })))));
 }
 var index = React.memo(CheckoutEmbed);
 

package/dist/index.mjs

@@ -2570,6 +2570,13 @@ function defaults(obj) {
   });
   return obj;
 }
+function hasXSS(input) {
+  if (typeof input !== 'string') return false;
+
+  // Common XSS attack patterns
+  const xssPatterns = [/<\s*script.*?>/i, /<\s*\/\s*script\s*>/i, /<\s*img.*?on\w+\s*=/i, /<\s*\w+\s*on\w+\s*=.*?>/i, /javascript\s*:/i, /vbscript\s*:/i, /expression\s*\(/i, /eval\s*\(/i, /alert\s*\(/i, /document\.cookie/i, /document\.write\s*\(/i, /window\.location/i, /innerHTML/i];
+  return xssPatterns.some(pattern => pattern.test(input));
+}
 
 // eslint-disable-next-line no-control-regex
 const fieldContentRegExp = /^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;
@@ -2933,7 +2940,7 @@ class Browser {
         if (lookup) detected = detected.concat(lookup);
       }
     });
-    detected = detected.map(d => this.options.convertDetectedLanguage(d));
+    detected = detected.filter(d => d !== undefined && d !== null && !hasXSS(d)).map(d => this.options.convertDetectedLanguage(d));
     if (this.services && this.services.languageUtils && this.services.languageUtils.getBestMatchFromCodes) return detected; // new i18next v19.5.0
     return detected.length > 0 ? detected[0] : null; // a little backward compatibility
   }
@@ -3246,7 +3253,11 @@ const CheckoutEmbed$2 = {
 		estimatedDeliveryDate: "Odhadované datum dodání:",
 		shipTo: "Ship to:",
 		shipping: "Doprava:",
-		title: "Přeprava"
+		title: "Přeprava",
+		description: {
+			other: "Váš balíček bude doručen kurýrem.",
+			zasilkovna: "Váš balíček bude doručen do bodu vyzvednutí."
+		}
 	}
 };
 const Errors$1 = {
@@ -3314,7 +3325,11 @@ const CheckoutEmbed$1 = {
 		shipping: "Shipping:",
 		estimatedDeliveryDate: "Estimated delivery date: ",
 		day: "day",
-		days: "days"
+		days: "days",
+		description: {
+			other: "Your package will be delivered by a courier.",
+			zasilkovna: "Your package will be delivered to a pickup point."
+		}
 	},
 	Payment: {
 		title: "Payment",
@@ -3529,6 +3544,8 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance$1, fonts) => {
     return newAppearance;
 };
 
+const storeHelpers = createStoreHelpers();
+
 const LayoutGroupContext = createContext({});
 
 /**
@@ -3643,33 +3660,36 @@ function PopChild({ children, isPresent, anchorX }) {
 const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
     const presenceChildren = useConstant(newChildrenMap);
     const id = useId();
-    const memoizedOnExitComplete = useCallback((childId) => {
-        presenceChildren.set(childId, true);
-        for (const isComplete of presenceChildren.values()) {
-            if (!isComplete)
-                return; // can stop searching when any is incomplete
-        }
-        onExitComplete && onExitComplete();
-    }, [presenceChildren, onExitComplete]);
-    const context = useMemo(() => ({
-        id,
-        initial,
-        isPresent,
-        custom,
-        onExitComplete: memoizedOnExitComplete,
-        register: (childId) => {
-            presenceChildren.set(childId, false);
-            return () => presenceChildren.delete(childId);
-        },
-    }), 
+    let isReusedContext = true;
+    let context = useMemo(() => {
+        isReusedContext = false;
+        return {
+            id,
+            initial,
+            isPresent,
+            custom,
+            onExitComplete: (childId) => {
+                presenceChildren.set(childId, true);
+                for (const isComplete of presenceChildren.values()) {
+                    if (!isComplete)
+                        return; // can stop searching when any is incomplete
+                }
+                onExitComplete && onExitComplete();
+            },
+            register: (childId) => {
+                presenceChildren.set(childId, false);
+                return () => presenceChildren.delete(childId);
+            },
+        };
+    }, [isPresent, presenceChildren, onExitComplete]);
     /**
      * If the presence of a child affects the layout of the components around it,
      * we want to make a new context value to ensure they get re-rendered
      * so they can detect that layout change.
      */
-    presenceAffectsLayout
-        ? [Math.random(), memoizedOnExitComplete]
-        : [isPresent, memoizedOnExitComplete]);
+    if (presenceAffectsLayout && isReusedContext) {
+        context = { ...context };
+    }
     useMemo(() => {
         presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
     }, [isPresent]);
@@ -5576,7 +5596,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.7.2";
+        this.version = "12.7.4";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -13178,7 +13198,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.7.2", `Attempting to mix Motion versions ${nextValue.version} with 12.7.2 may not work as expected.`);
+                warnOnce(nextValue.version === "12.7.4", `Attempting to mix Motion versions ${nextValue.version} with 12.7.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -18218,6 +18238,7 @@ const customerSchema = z.object({
         state: z.string().optional(),
         zipCode: z.string().min(5, "invalid_zipCode"),
         country: z.string().min(1, "required_error"),
+        countryCode: z.string().min(1, "required_error"),
     }),
     saveInfo: z.boolean().optional(),
     phone: z.string().regex(phoneRegex, "invalid_phone"),
@@ -18225,9 +18246,10 @@ const customerSchema = z.object({
 // Shipping method schema
 const shippingMethodSchema = z.object({
     rateId: z.string().min(1, "required_error"),
-    name: z.string().min(1, "required_error"),
     provider: z.string().min(1, "required_error"),
-    amount: z.number().min(1, "required_error"),
+    price: z.number().min(1, "required_error"),
+    name: z.string().min(1, "required_error"),
+    pickupPointId: z.string().optional(),
 });
 // Combined checkout schema
 z.object({
@@ -32599,6 +32621,7 @@ function AddressInput() {
                             React__default.createElement(FormLabel, null, t("CheckoutEmbed.CustomerForm.address.country")),
                             React__default.createElement(CountryDropdown, { placeholder: t("CheckoutEmbed.CustomerForm.address.countryPlaceholder"), defaultValue: field.value, onChange: (country) => {
                                     field.onChange(country.name);
+                                    form.setValue("address.countryCode", country.alpha2);
                                 } }),
                             React__default.createElement(FormMessage, null))) })),
                 React__default.createElement(DialogFooter, null,
@@ -34119,7 +34142,7 @@ const useCheckout = create((set) => ({
     setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
 }));
 
-const CheckoutForm$1 = ({ onSuccess, onError, children, }) => {
+const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
     const stripe = reactStripe_umdExports.useStripe();
     const elements = reactStripe_umdExports.useElements();
     const { setIsSubmitting } = useCheckout();
@@ -34129,6 +34152,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, }) => {
         if (!stripe || !elements) {
             return;
         }
+        setSubmitting === null || setSubmitting === void 0 ? void 0 : setSubmitting(true);
         setIsSubmitting(true);
         const response = yield stripe.confirmPayment({
             elements,
@@ -34137,15 +34161,18 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, }) => {
         if (response.error) {
             setErrorMessage(response.error.message || "Something went wrong.");
             setIsSubmitting(false);
+            setSubmitting === null || setSubmitting === void 0 ? void 0 : setSubmitting(false);
             onError === null || onError === void 0 ? void 0 : onError();
         }
         else {
             setErrorMessage(undefined);
             setIsSubmitting(false);
+            setSubmitting === null || setSubmitting === void 0 ? void 0 : setSubmitting(false);
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         }
         setErrorMessage(undefined);
         setIsSubmitting(false);
+        setSubmitting === null || setSubmitting === void 0 ? void 0 : setSubmitting(false);
     });
     return (React__default.createElement("form", { onSubmit: handleSubmit },
         React__default.createElement("div", null,
@@ -34157,7 +34184,7 @@ var CheckoutForm$2 = memo$1(CheckoutForm$1);
 
 const publicStripeKey = "pk_test_51RCjhw2cgbkVT71muwgBSw1tP06YVR4l4P9zI8wP2ipmze9VnTmTwxESVVePmU6QV8TL6bxG7f10oXQRnKC3F3KT00EsvlPAoS";
 const stripePromise = loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }) {
+function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }) {
     const options = {
         locale: locale !== null && locale !== void 0 ? locale : "en",
         appearance: checkoutAppearance,
@@ -34165,11 +34192,12 @@ function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSu
         fonts: fonts,
     };
     return (React__default.createElement(reactStripe_umdExports.Elements, { stripe: stripePromise, options: options },
-        React__default.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children })));
+        React__default.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children, setSubmitting: setSubmitting })));
 }
 var PaymentElement$1 = memo$1(PaymentElement);
 
 function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }) {
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const { t } = useTranslation();
     return (React__default.createElement("div", { className: "space-y-6" },
         React__default.createElement("div", null,
@@ -34197,12 +34225,12 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         " \u00B7 ",
                         shippingPrice)),
                 React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
+        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting },
             React__default.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React__default.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React__default.createElement(ChevronLeft, null),
                     t("CheckoutEmbed.Payment.back")),
-                React__default.createElement(SubmitButton, { isValid: true, isSubmitting: false }, t("CheckoutEmbed.Payment.button"))))))));
+                React__default.createElement(SubmitButton, { isValid: true, isSubmitting: isSubmitting }, t("CheckoutEmbed.Payment.button"))))))));
 }
 
 function Skeleton(_a) {
@@ -34210,16 +34238,62 @@ function Skeleton(_a) {
     return (React.createElement("div", Object.assign({ "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className) }, props)));
 }
 
-function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, }) {
+function ZasilkovnaShippingOption({ children, onPickupPointSelected, locale, countryCode, apiKey, }) {
+    const [widgetLoaded, setWidgetLoaded] = useState(false);
+    useEffect(() => {
+        // Check if the script is already present
+        if (!document.querySelector('script[src="https://widget.packeta.com/v6/www/js/library.js"]')) {
+            const script = document.createElement("script");
+            script.src = "https://widget.packeta.com/v6/www/js/library.js";
+            script.async = true;
+            script.onload = () => {
+                setWidgetLoaded(true);
+                console.log("loaded");
+            };
+            script.onerror = () => console.error("Failed to load Packeta Widget script.");
+            document.body.appendChild(script);
+        }
+        else {
+            setWidgetLoaded(true);
+        }
+    }, []);
+    const handleClick = () => {
+        if (widgetLoaded && window.Packeta && window.Packeta.Widget) {
+            const options = {
+                language: locale,
+                country: countryCode,
+                view: "modal",
+                valueFormat: "id,name,city,street",
+            };
+            window.Packeta.Widget.pick(apiKey, (point) => {
+                onPickupPointSelected === null || onPickupPointSelected === void 0 ? void 0 : onPickupPointSelected(point.id);
+            }, options);
+        }
+        else {
+            console.error("Packeta widget not found", window);
+        }
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { onClick: () => handleClick() }, children)));
+}
+
+function ShippingOptionWrapper({ rate, children, onPickupPointSelected, locale, countryCode, }) {
+    if (rate.provider === "zasilkovna") {
+        return (React__default.createElement(ZasilkovnaShippingOption, { onPickupPointSelected: onPickupPointSelected, locale: locale, countryCode: countryCode, apiKey: rate.clientSecret }, children));
+    }
+    return;
+}
+
+function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, }) {
     var _a;
     const { t } = useTranslation();
     const form = useForm({
         resolver: s$1(shippingMethodSchema),
         defaultValues: initialData || {
             rateId: "",
-            name: "",
             provider: "",
-            amount: 0,
+            price: 0,
+            pickupPointId: "",
         },
     });
     const currentRateId = form.watch("rateId");
@@ -34243,28 +34317,27 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
                 shippingRates.length === 0 &&
                     Array.from({ length: 3 }).map((_, index) => (React__default.createElement(ShippingRateLoading, { key: index }))),
                 shippingRates.map((rate) => {
-                    const rateId = rate.objectId;
-                    const intPrice = Math.ceil(Number(rate.amount));
-                    const price = intPrice + " " + rate.currency;
-                    return (React__default.createElement("div", { className: clsx("p-4 cursor-pointer rounded-md border bg-background", {
-                            "bg-muted border-primary": currentRateId === rateId,
-                        }), onClick: () => {
-                            form.setValue("rateId", rateId);
-                            form.setValue("provider", rate.provider);
-                            form.setValue("name", rate.shipment);
-                            form.setValue("amount", intPrice);
-                        }, key: rateId },
-                        React__default.createElement("div", { className: "flex items-center justify-between w-full" },
-                            React__default.createElement("p", null, rate.provider),
-                            React__default.createElement("p", null, price)),
-                        rate.estimatedDays && (React__default.createElement("p", { className: "text-sm text-muted-foreground" },
-                            t("CheckoutEmbed.Shipping.estimatedDeliveryDate"),
-                            " ",
-                            rate.estimatedDays,
-                            " ",
-                            rate.estimatedDays === 1
-                                ? t("CheckoutEmbed.Shipping.day")
-                                : t("CheckoutEmbed.Shipping.days")))));
+                    const rateId = rate.provider + rate.name;
+                    const intPrice = Math.ceil(Number(rate.price));
+                    const displayPrice = storeHelpers.formatPrice(intPrice, currency, exchangeRate);
+                    const description = rate.provider === "zasilkovna"
+                        ? t("CheckoutEmbed.Shipping.description.zasilkovna")
+                        : t("CheckoutEmbed.Shipping.description.other");
+                    return (React__default.createElement(ShippingOptionWrapper, { rate: rate, key: rateId, onPickupPointSelected: (pickupPointId) => {
+                            form.setValue("pickupPointId", pickupPointId);
+                        }, 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: () => {
+                                form.setValue("rateId", rateId);
+                                form.setValue("provider", rate.provider);
+                                form.setValue("name", rate.name);
+                                form.setValue("price", intPrice);
+                            } },
+                            React__default.createElement("div", { className: "flex items-center justify-between w-full" },
+                                React__default.createElement("p", null, rate.name),
+                                React__default.createElement("p", null, displayPrice)),
+                            React__default.createElement("p", { className: "text-sm text-muted-foreground" }, description))));
                 }),
                 React__default.createElement(FormMessage, null, (_a = form.formState.errors.rateId) === null || _a === void 0 ? void 0 : _a.message),
                 React__default.createElement("div", { className: "flex justify-between items-center pt-4" },
@@ -34294,7 +34367,7 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, }) {
     const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
     const [paymentSecret, setPaymentSecret] = useState(null);
     const [shippingRates, setShippingRates] = useState([]);
@@ -34318,7 +34391,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         validateStep();
     }, [step]);
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        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)) {
             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 : "",
@@ -34331,6 +34404,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
                         city: (_r = (_q = customer.address) === null || _q === void 0 ? void 0 : _q.city) !== null && _r !== void 0 ? _r : "",
                         zipCode: (_t = (_s = customer.address) === null || _s === void 0 ? void 0 : _s.zipCode) !== null && _t !== void 0 ? _t : "",
                         country: (_v = (_u = customer.address) === null || _u === void 0 ? void 0 : _u.country) !== null && _v !== void 0 ? _v : "",
+                        countryCode: (_x = (_w = customer.address) === null || _w === void 0 ? void 0 : _w.countryCode) !== null && _x !== void 0 ? _x : "",
                     },
                 } }));
         }
@@ -34342,12 +34416,14 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             return;
         const getShippingRates = () => __awaiter(this, void 0, void 0, function* () {
             const shippingRates = yield storeClient.getCheckoutShippingRates(clientSecret, checkoutId);
+            console.log(shippingRates);
             setShippingRates(shippingRates);
         });
         getShippingRates();
     }, [step, shippingRates]);
     // Handle address form submission
     const handleCustomerSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
+        setFormData(Object.assign(Object.assign({}, formData), { customer: data }));
         let newCustomerId = formData.customerId;
         if (!newCustomerId) {
             const newCustomer = yield storeClient.createCustomer(clientSecret, {
@@ -34381,16 +34457,15 @@ 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.amount * 100,
-            shippingInfo: {
-                rateId: data.rateId,
-                name: data.name,
+            shipping: data.price,
+            shipmentInfo: {
                 provider: data.provider,
+                pickupPointId: data.pickupPointId,
             },
         });
         const paymentSecret = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
         setPaymentSecret(paymentSecret);
-        setShippingCost(data.amount * 100);
+        setShippingCost(data.price);
         setStep("payment");
     });
     // Navigate back to previous step
@@ -34420,9 +34495,9 @@ 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) }))),
+                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 }))),
             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: formData.shipping.amount.toString() + " " + currency }))))));
+                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) }))))));
 }
 
 function CheckoutFormLoading() {
@@ -34444,8 +34519,6 @@ function InputGroupLoading({ className }) {
         React__default.createElement(Skeleton, { className: "w-full h-9" })));
 }
 
-const storeHelpers = createStoreHelpers();
-
 function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }) {
     const [isOpen, setIsOpen] = useState(false);
     const { t } = useTranslation();
@@ -34536,7 +34609,7 @@ function CheckoutSummaryLoading() {
 }
 
 function CheckoutEmbed({ checkoutId, config }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = createStoreClient({ proxy: clientProxy });
     React__default.useMemo(() => createI18nInstance(locale), []);
@@ -34585,10 +34658,10 @@ function CheckoutEmbed({ checkoutId, config }) {
             return;
         setCheckout(Object.assign(Object.assign({}, checkout), { shipping: cost }));
     };
-    return (React__default.createElement("div", { className: "checkout-embed mx-auto max-w-[1200px] min-h-screen overflow-x-hidden gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
+    return (React__default.createElement("div", { className: "checkout-embed scrollbar-hidden mx-auto max-w-[1200px] min-h-screen overflow-x-hidden gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
         React__default.createElement(Appearance, { appearance: appearance }),
-        React__default.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError }))),
-        React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _b !== void 0 ? _b : "", lineItems: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _c !== void 0 ? _c : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _d !== void 0 ? _d : 1 })))));
+        React__default.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1 }))),
+        React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1 })))));
 }
 var index = memo$1(CheckoutEmbed);
 

package/package.json

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