@betterstore/react 0.2.36 → 0.2.37

package/CHANGELOG.md

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

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

@@ -5599,7 +5599,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.3";
         /**
          * 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 +13201,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.3", `Attempting to mix Motion versions ${nextValue.version} with 12.7.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -34142,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();
@@ -34152,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,
@@ -34160,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.createElement("form", { onSubmit: handleSubmit },
         React.createElement("div", null,
@@ -34180,7 +34184,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 +34192,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 +34225,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) {
@@ -34608,7 +34613,7 @@ 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 })))));

package/dist/index.mjs

@@ -5576,7 +5576,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.3";
         /**
          * 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 +13178,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.3", `Attempting to mix Motion versions ${nextValue.version} with 12.7.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -34119,7 +34119,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 +34129,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 +34138,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 +34161,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 +34169,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 +34202,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) {
@@ -34585,7 +34590,7 @@ 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 })))));

package/package.json

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