@betterstore/react 0.3.78 → 0.3.79

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @betterstore/sdk
 
+## 0.3.79
+
+### Patch Changes
+
+- bug fixes
+
 ## 0.3.78
 
 ### Patch Changes

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

@@ -18,6 +18,7 @@ interface CheckoutFormProps {
     exchangeRate: number;
     paymentSecret: string | null;
     publicKey: string | null;
+    paymentComponentKey: number;
 }
-export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, }: CheckoutFormProps): React.JSX.Element;
+export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }: CheckoutFormProps): React.JSX.Element;
 export {};

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

@@ -15,6 +15,7 @@ interface PaymentFormProps {
     fonts?: Fonts;
     locale?: StripeElementLocale;
     publicKey: string | null;
+    paymentComponentKey: number;
 }
-export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }: PaymentFormProps): React.JSX.Element;
+export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }: PaymentFormProps): React.JSX.Element;
 export {};

package/dist/index.cjs.js

@@ -35081,15 +35081,9 @@ function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale,
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
     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")),
@@ -35116,7 +35110,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, { key: key, 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: paymentComponentKey, 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),
@@ -35293,7 +35287,7 @@ const resetFormStore = (formData) => {
     localStorage.setItem("checkout", JSON.stringify(Object.assign(Object.assign({}, currentState), { state: Object.assign(Object.assign({}, currentState.state), { step: "customer", formData: { customer: formData.customer } }) })));
 };
 
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }) {
     const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
     const [shippingRates, setShippingRates] = React.useState([]);
     const validateStep = React.useCallback(() => {
@@ -35451,7 +35445,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     const renderStep = () => {
         if (step === "payment" && formData.customer && formData.shipping) {
-            return (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), publicKey: publicKey }));
+            return (React.createElement(PaymentForm, { paymentComponentKey: paymentComponentKey, 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), publicKey: publicKey }));
         }
         if (step === "shipping" && formData.customer) {
             return (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 }));
@@ -35705,6 +35699,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     const paymentSecretPromiseRef = React.useRef(null);
     const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [publicKey, setPublicKey] = React.useState(null);
+    const [paymentComponentKey, setPaymentComponentKey] = React.useState(0);
     const [checkout, setCheckout] = React.useState(null);
     const [loading, setLoading] = React.useState(true);
     React.useEffect(() => {
@@ -35775,11 +35770,13 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         setCheckout(newCheckout);
         if (step === "payment") {
             yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
     });
     const revalidateDiscounts = () => __awaiter(this, void 0, void 0, function* () {
         if (step === "payment") {
             yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
         else {
             const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
@@ -35791,6 +35788,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         setCheckout(newCheckout);
         if (step === "payment") {
             yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
     });
     React.useEffect(() => {
@@ -35804,7 +35802,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     return (React.createElement(IframeWrapper, { iframeRef: iframeRef },
         React.createElement("div", { className: "checkout-embed h-max gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
             React.createElement(Appearance, { appearance: appearance, fonts: config.fonts, iframeRef: iframeRef }),
-            React.createElement("div", { className: "md:col-span-4 px-4 h-max 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, publicKey: publicKey, paymentSecret: paymentSecret }))),
+            React.createElement("div", { className: "md:col-span-4 px-4 h-max 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, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey }))),
             React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 h-max 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 : [], removeDiscount: removeDiscount }))))));

package/dist/index.mjs

@@ -35061,15 +35061,9 @@ function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale,
 }
 var PaymentElement$1 = memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
     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")),
@@ -35096,7 +35090,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, { 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: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { key: paymentComponentKey, 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),
@@ -35273,7 +35267,7 @@ const resetFormStore = (formData) => {
     localStorage.setItem("checkout", JSON.stringify(Object.assign(Object.assign({}, currentState), { state: Object.assign(Object.assign({}, currentState.state), { step: "customer", formData: { customer: formData.customer } }) })));
 };
 
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }) {
     const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
     const [shippingRates, setShippingRates] = useState([]);
     const validateStep = useCallback(() => {
@@ -35431,7 +35425,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     const renderStep = () => {
         if (step === "payment" && formData.customer && formData.shipping) {
-            return (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), publicKey: publicKey }));
+            return (React__default.createElement(PaymentForm, { paymentComponentKey: paymentComponentKey, 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), publicKey: publicKey }));
         }
         if (step === "shipping" && formData.customer) {
             return (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 }));
@@ -35685,6 +35679,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     const paymentSecretPromiseRef = useRef(null);
     const [paymentSecret, setPaymentSecret] = useState(null);
     const [publicKey, setPublicKey] = useState(null);
+    const [paymentComponentKey, setPaymentComponentKey] = useState(0);
     const [checkout, setCheckout] = useState(null);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
@@ -35755,11 +35750,13 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         setCheckout(newCheckout);
         if (step === "payment") {
             yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
     });
     const revalidateDiscounts = () => __awaiter(this, void 0, void 0, function* () {
         if (step === "payment") {
             yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
         else {
             const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
@@ -35771,6 +35768,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         setCheckout(newCheckout);
         if (step === "payment") {
             yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
     });
     useEffect(() => {
@@ -35784,7 +35782,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     return (React__default.createElement(IframeWrapper, { iframeRef: iframeRef },
         React__default.createElement("div", { className: "checkout-embed h-max 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, fonts: config.fonts, iframeRef: iframeRef }),
-            React__default.createElement("div", { className: "md:col-span-4 px-4 h-max 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, publicKey: publicKey, paymentSecret: paymentSecret }))),
+            React__default.createElement("div", { className: "md:col-span-4 px-4 h-max 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, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey }))),
             React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 h-max 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 : [], removeDiscount: removeDiscount }))))));

package/package.json

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