@betterstore/react 0.2.33 → 0.2.34

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @betterstore/sdk
 
+## 0.2.34
+
+### Patch Changes
+
+- bug fixes
+
 ## 0.2.33
 
 ### Patch Changes

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

@@ -1,5 +1,5 @@
 import { CheckoutSession, createStoreClient } from "@betterstore/sdk";
-import { StripeElementsOptions } from "@stripe/stripe-js";
+import { StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
 import { AppearanceConfig } from "./appearance";
 interface CheckoutFormProps {
@@ -13,6 +13,8 @@ interface CheckoutFormProps {
     currency: string;
     checkoutAppearance?: AppearanceConfig;
     fonts?: StripeElementsOptions["fonts"];
+    locale?: StripeElementLocale;
+    setShippingCost: (cost: number) => void;
 }
-export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }: CheckoutFormProps): React.JSX.Element;
+export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }: CheckoutFormProps): React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { StripeElementsOptions } from "@stripe/stripe-js";
+import { StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
 import { AppearanceConfig } from "../../appearance";
 interface PaymentFormProps {
@@ -13,6 +13,7 @@ interface PaymentFormProps {
     shippingPrice: string;
     checkoutAppearance?: AppearanceConfig;
     fonts?: StripeElementsOptions["fonts"];
+    locale?: StripeElementLocale;
 }
-export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }: PaymentFormProps): React.JSX.Element;
+export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }: PaymentFormProps): React.JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
-import { Appearance, StripeElementsOptions } from "@stripe/stripe-js";
+import { Appearance, StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
-declare function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }: {
+declare function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }: {
     paymentSecret: string;
     checkoutAppearance?: Appearance;
+    locale?: StripeElementLocale;
     fonts?: StripeElementsOptions["fonts"];
     onSuccess?: () => void;
     onError?: () => void;

package/dist/index.cjs.js

@@ -34176,9 +34176,9 @@ var CheckoutForm$2 = React.memo(CheckoutForm$1);
 
 const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
 const stripePromise = loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }) {
+function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }) {
     const options = {
-        locale: "en",
+        locale: locale !== null && locale !== void 0 ? locale : "en",
         appearance: checkoutAppearance,
         clientSecret: paymentSecret,
         fonts: fonts,
@@ -34188,7 +34188,7 @@ function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, o
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }) {
     const { t } = useTranslation();
     return (React.createElement("div", { className: "space-y-6" },
         React.createElement("div", null,
@@ -34216,7 +34216,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), 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 },
             React.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React.createElement(ChevronLeft, null),
@@ -34313,7 +34313,7 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }) {
     const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
     const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [shippingRates, setShippingRates] = React.useState([]);
@@ -34409,6 +34409,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         });
         const paymentSecret = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
         setPaymentSecret(paymentSecret);
+        setShippingCost(data.amount * 100);
         setStep("payment");
     });
     // Navigate back to previous step
@@ -34440,7 +34441,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "shipping" && formData.customer && (React.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 React.createElement(ShippingMethodForm, { shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address) }))),
             step === "payment" && formData.customer && formData.shipping && (React.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
-                React.createElement(PaymentForm, { 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: formData.shipping.amount.toString() + " " + currency }))))));
 }
 
 function CheckoutFormLoading() {
@@ -34580,9 +34581,14 @@ function CheckoutEmbed({ checkoutId, config }) {
     if (!checkout && !loading) {
         throw new Error("Checkout not found");
     }
+    const setShippingCost = (cost) => {
+        if (!checkout)
+            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 py-8 md:py-12 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, { 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-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 })))));
 }
 var index = React.memo(CheckoutEmbed);

package/dist/index.mjs

@@ -34153,9 +34153,9 @@ var CheckoutForm$2 = memo$1(CheckoutForm$1);
 
 const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
 const stripePromise = loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }) {
+function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }) {
     const options = {
-        locale: "en",
+        locale: locale !== null && locale !== void 0 ? locale : "en",
         appearance: checkoutAppearance,
         clientSecret: paymentSecret,
         fonts: fonts,
@@ -34165,7 +34165,7 @@ function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, o
 }
 var PaymentElement$1 = memo$1(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }) {
     const { t } = useTranslation();
     return (React__default.createElement("div", { className: "space-y-6" },
         React__default.createElement("div", null,
@@ -34193,7 +34193,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), 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 },
             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),
@@ -34290,7 +34290,7 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }) {
     const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
     const [paymentSecret, setPaymentSecret] = useState(null);
     const [shippingRates, setShippingRates] = useState([]);
@@ -34386,6 +34386,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         });
         const paymentSecret = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
         setPaymentSecret(paymentSecret);
+        setShippingCost(data.amount * 100);
         setStep("payment");
     });
     // Navigate back to previous step
@@ -34417,7 +34418,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "shipping" && formData.customer && (React__default.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 React__default.createElement(ShippingMethodForm, { shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address) }))),
             step === "payment" && formData.customer && formData.shipping && (React__default.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
-                React__default.createElement(PaymentForm, { 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: formData.shipping.amount.toString() + " " + currency }))))));
 }
 
 function CheckoutFormLoading() {
@@ -34557,9 +34558,14 @@ function CheckoutEmbed({ checkoutId, config }) {
     if (!checkout && !loading) {
         throw new Error("Checkout not found");
     }
+    const setShippingCost = (cost) => {
+        if (!checkout)
+            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 py-8 md:py-12 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, { 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-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 })))));
 }
 var index = memo$1(CheckoutEmbed);

package/package.json

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