@betterstore/react 0.3.14 → 0.3.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.3.16
+
+### Patch Changes
+
+- bug fix
+
+## 0.3.15
+
+### Patch Changes
+
+- bug fixes
+
 ## 0.3.14
 
 ### Patch Changes

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

@@ -17,6 +17,10 @@ interface CheckoutFormProps {
     setShippingCost: (cost: number) => void;
     exchangeRate: number;
     setCheckout: (checkout: any) => void;
+    setPaymentSecret: (paymentSecret: string) => void;
+    setPublicKey: (publicKey: string) => void;
+    paymentSecret: string | null;
+    publicKey: string | null;
 }
-export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, }: CheckoutFormProps): React.JSX.Element;
+export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, setPaymentSecret, setPublicKey, paymentSecret, publicKey, }: CheckoutFormProps): React.JSX.Element;
 export {};

package/dist/index.cjs.js

@@ -35241,7 +35241,13 @@ var PaymentElement$1 = React.memo(PaymentElement);
 
 function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [key, setKey] = React.useState(0);
     const { t } = useTranslation();
+    React.useEffect(() => {
+        if (paymentSecret) {
+            setKey((prev) => prev + 1);
+        }
+    }, [paymentSecret]);
     return (React.createElement("div", { className: "space-y-6" },
         React.createElement("div", null,
             React.createElement("h2", { className: "mb-2" }, t("CheckoutEmbed.Payment.title")),
@@ -35268,7 +35274,7 @@ 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, setSubmitting: setIsSubmitting, publicKey: publicKey },
+        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { key: key, fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey },
             React.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React.createElement(ChevronLeft, null),
@@ -35451,10 +35457,8 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, setPaymentSecret, setPublicKey, paymentSecret, publicKey, }) {
     const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
-    const [paymentSecret, setPaymentSecret] = React.useState(null);
-    const [publicKey, setPublicKey] = React.useState(null);
     const [shippingRates, setShippingRates] = React.useState([]);
     const validateStep = React.useCallback(() => {
         if (step === "customer")
@@ -35609,9 +35613,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     React.useEffect(() => {
         const asyncFunc = () => __awaiter(this, void 0, void 0, function* () {
-            const _a = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId), { paymentSecret, publicKey, checkoutSession: newCheckout } = _a, rest = __rest(_a, ["paymentSecret", "publicKey", "checkoutSession"]);
-            console.log("newCheckout", newCheckout);
-            console.log("rest", rest);
+            const { paymentSecret, publicKey, checkoutSession: newCheckout, } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
             setPaymentSecret(paymentSecret);
             setPublicKey(publicKey);
             setCheckout(newCheckout);
@@ -35854,7 +35856,9 @@ function CheckoutEmbed({ checkoutId, config }) {
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = React.useMemo(() => sdk.createStoreClient({ proxy: clientProxy }), [clientProxy]);
     React.useMemo(() => createI18nInstance(locale), []);
-    const { formData, setFormData, setStep } = useFormStore();
+    const { formData, step } = useFormStore();
+    const [paymentSecret, setPaymentSecret] = React.useState(null);
+    const [publicKey, setPublicKey] = React.useState(null);
     const [checkout, setCheckout] = React.useState(null);
     const [loading, setLoading] = React.useState(true);
     React.useEffect(() => {
@@ -35908,12 +35912,28 @@ function CheckoutEmbed({ checkoutId, config }) {
         setCheckout(newCheckout);
     });
     const revalidateDiscounts = () => __awaiter(this, void 0, void 0, function* () {
-        const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
-        setCheckout(newCheckout);
+        if (step === "payment") {
+            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
+            setPaymentSecret(paymentSecret);
+            setPublicKey(publicKey);
+            setCheckout(checkoutSession);
+        }
+        else {
+            const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
+            setCheckout(newCheckout);
+        }
     });
     const removeDiscount = (id) => __awaiter(this, void 0, void 0, function* () {
         const newCheckout = yield storeClient.removeDiscount(clientSecret, checkoutId, id);
-        setCheckout(newCheckout);
+        if (step === "payment") {
+            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
+            setPaymentSecret(paymentSecret);
+            setPublicKey(publicKey);
+            setCheckout(checkoutSession);
+        }
+        else {
+            setCheckout(newCheckout);
+        }
     });
     React.useEffect(() => {
         const interval = setTimeout(() => {
@@ -35923,7 +35943,7 @@ function CheckoutEmbed({ checkoutId, config }) {
     }, []);
     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, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, setCheckout: setCheckout }))),
+        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, setCheckout: setCheckout, setPublicKey: setPublicKey, publicKey: publicKey, setPaymentSecret: setPaymentSecret, paymentSecret: paymentSecret }))),
         React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" },
             React.createElement(Toaster, null),
             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, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], revalidateDiscounts: revalidateDiscounts, removeDiscount: removeDiscount })))));

package/dist/index.mjs

@@ -35218,7 +35218,13 @@ var PaymentElement$1 = memo$1(PaymentElement);
 
 function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [key, setKey] = useState(0);
     const { t } = useTranslation();
+    useEffect(() => {
+        if (paymentSecret) {
+            setKey((prev) => prev + 1);
+        }
+    }, [paymentSecret]);
     return (React__default.createElement("div", { className: "space-y-6" },
         React__default.createElement("div", null,
             React__default.createElement("h2", { className: "mb-2" }, t("CheckoutEmbed.Payment.title")),
@@ -35245,7 +35251,7 @@ 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, setSubmitting: setIsSubmitting, publicKey: publicKey },
+        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { key: key, fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey },
             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),
@@ -35428,10 +35434,8 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, setPaymentSecret, setPublicKey, paymentSecret, publicKey, }) {
     const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
-    const [paymentSecret, setPaymentSecret] = useState(null);
-    const [publicKey, setPublicKey] = useState(null);
     const [shippingRates, setShippingRates] = useState([]);
     const validateStep = useCallback(() => {
         if (step === "customer")
@@ -35586,9 +35590,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     useEffect(() => {
         const asyncFunc = () => __awaiter(this, void 0, void 0, function* () {
-            const _a = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId), { paymentSecret, publicKey, checkoutSession: newCheckout } = _a, rest = __rest(_a, ["paymentSecret", "publicKey", "checkoutSession"]);
-            console.log("newCheckout", newCheckout);
-            console.log("rest", rest);
+            const { paymentSecret, publicKey, checkoutSession: newCheckout, } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
             setPaymentSecret(paymentSecret);
             setPublicKey(publicKey);
             setCheckout(newCheckout);
@@ -35831,7 +35833,9 @@ function CheckoutEmbed({ checkoutId, config }) {
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = React__default.useMemo(() => createStoreClient({ proxy: clientProxy }), [clientProxy]);
     React__default.useMemo(() => createI18nInstance(locale), []);
-    const { formData, setFormData, setStep } = useFormStore();
+    const { formData, step } = useFormStore();
+    const [paymentSecret, setPaymentSecret] = useState(null);
+    const [publicKey, setPublicKey] = useState(null);
     const [checkout, setCheckout] = useState(null);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
@@ -35885,12 +35889,28 @@ function CheckoutEmbed({ checkoutId, config }) {
         setCheckout(newCheckout);
     });
     const revalidateDiscounts = () => __awaiter(this, void 0, void 0, function* () {
-        const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
-        setCheckout(newCheckout);
+        if (step === "payment") {
+            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
+            setPaymentSecret(paymentSecret);
+            setPublicKey(publicKey);
+            setCheckout(checkoutSession);
+        }
+        else {
+            const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
+            setCheckout(newCheckout);
+        }
     });
     const removeDiscount = (id) => __awaiter(this, void 0, void 0, function* () {
         const newCheckout = yield storeClient.removeDiscount(clientSecret, checkoutId, id);
-        setCheckout(newCheckout);
+        if (step === "payment") {
+            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
+            setPaymentSecret(paymentSecret);
+            setPublicKey(publicKey);
+            setCheckout(checkoutSession);
+        }
+        else {
+            setCheckout(newCheckout);
+        }
     });
     useEffect(() => {
         const interval = setTimeout(() => {
@@ -35900,7 +35920,7 @@ function CheckoutEmbed({ checkoutId, config }) {
     }, []);
     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, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, setCheckout: setCheckout }))),
+        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, setCheckout: setCheckout, setPublicKey: setPublicKey, publicKey: publicKey, setPaymentSecret: setPaymentSecret, paymentSecret: paymentSecret }))),
         React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" },
             React__default.createElement(Toaster, null),
             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, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], revalidateDiscounts: revalidateDiscounts, removeDiscount: removeDiscount })))));

package/package.json

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