@betterstore/react 0.2.45 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { LineItem } from "@betterstore/sdk";
|
|
2
2
|
import React from "react";
|
|
3
|
-
export default function CheckoutSummary({ lineItems, shipping, tax, currency,
|
|
3
|
+
export default function CheckoutSummary({ lineItems, shipping, tax, currency, onCancel, exchangeRate, }: {
|
|
4
4
|
lineItems: LineItem[];
|
|
5
5
|
shipping?: number;
|
|
6
6
|
tax?: number;
|
|
7
7
|
currency: string;
|
|
8
8
|
exchangeRate: number;
|
|
9
|
-
|
|
9
|
+
onCancel: () => void;
|
|
10
10
|
}): React.JSX.Element;
|
package/dist/index.cjs.js
CHANGED
|
@@ -34461,7 +34461,7 @@ function InputGroupLoading({ className }) {
|
|
|
34461
34461
|
React.createElement(Skeleton, { className: "w-full h-9" })));
|
|
34462
34462
|
}
|
|
34463
34463
|
|
|
34464
|
-
function CheckoutSummary({ lineItems, shipping, tax, currency,
|
|
34464
|
+
function CheckoutSummary({ lineItems, shipping, tax, currency, onCancel, exchangeRate, }) {
|
|
34465
34465
|
var _a;
|
|
34466
34466
|
const { formData } = useFormStore();
|
|
34467
34467
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -34488,8 +34488,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
|
|
|
34488
34488
|
"rotate-180": isOpen,
|
|
34489
34489
|
}) })),
|
|
34490
34490
|
React.createElement("p", { className: "font-bold text-lg tracking-tight md:hidden" }, storeHelpers.formatPrice(total, currency, exchangeRate)),
|
|
34491
|
-
React.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link",
|
|
34492
|
-
React.createElement("a", { href: cancelUrl }, t("CheckoutEmbed.Summary.edit")))),
|
|
34491
|
+
React.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link", onClick: onCancel }, t("CheckoutEmbed.Summary.edit"))),
|
|
34493
34492
|
React.createElement("hr", null),
|
|
34494
34493
|
React.createElement("div", { className: clsx("gap-3 order-4 md:order-none", {
|
|
34495
34494
|
"hidden md:grid": !isOpen,
|
|
@@ -34579,6 +34578,7 @@ function CheckoutEmbed({ checkoutId, config }) {
|
|
|
34579
34578
|
const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
|
|
34580
34579
|
const storeClient = sdk.createStoreClient({ proxy: clientProxy });
|
|
34581
34580
|
React.useMemo(() => createI18nInstance(locale), []);
|
|
34581
|
+
const { formData, setFormData, step, setStep } = useFormStore();
|
|
34582
34582
|
const [checkout, setCheckout] = React.useState(null);
|
|
34583
34583
|
const [loading, setLoading] = React.useState(true);
|
|
34584
34584
|
React.useEffect(() => {
|
|
@@ -34607,15 +34607,20 @@ function CheckoutEmbed({ checkoutId, config }) {
|
|
|
34607
34607
|
};
|
|
34608
34608
|
}, [checkoutId]); // Only re-run if checkoutId changes
|
|
34609
34609
|
const onSuccess = () => {
|
|
34610
|
+
setStep("customer");
|
|
34611
|
+
setFormData({ customer: formData.customer });
|
|
34610
34612
|
if (successUrl) {
|
|
34611
34613
|
window.location.href = successUrl;
|
|
34612
34614
|
}
|
|
34613
34615
|
};
|
|
34614
|
-
const
|
|
34616
|
+
const onCancel = () => {
|
|
34617
|
+
setStep("customer");
|
|
34618
|
+
setFormData({ customer: formData.customer });
|
|
34615
34619
|
if (cancelUrl) {
|
|
34616
34620
|
window.location.href = cancelUrl;
|
|
34617
34621
|
}
|
|
34618
34622
|
};
|
|
34623
|
+
const onError = () => { };
|
|
34619
34624
|
if (!checkout && !loading) {
|
|
34620
34625
|
throw new Error("Checkout not found");
|
|
34621
34626
|
}
|
|
@@ -34627,7 +34632,7 @@ function CheckoutEmbed({ checkoutId, config }) {
|
|
|
34627
34632
|
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 " },
|
|
34628
34633
|
React.createElement(Appearance, { appearance: appearance }),
|
|
34629
34634
|
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 }))),
|
|
34630
|
-
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,
|
|
34635
|
+
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, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1 })))));
|
|
34631
34636
|
}
|
|
34632
34637
|
var index = React.memo(CheckoutEmbed);
|
|
34633
34638
|
|
package/dist/index.mjs
CHANGED
|
@@ -34438,7 +34438,7 @@ function InputGroupLoading({ className }) {
|
|
|
34438
34438
|
React__default.createElement(Skeleton, { className: "w-full h-9" })));
|
|
34439
34439
|
}
|
|
34440
34440
|
|
|
34441
|
-
function CheckoutSummary({ lineItems, shipping, tax, currency,
|
|
34441
|
+
function CheckoutSummary({ lineItems, shipping, tax, currency, onCancel, exchangeRate, }) {
|
|
34442
34442
|
var _a;
|
|
34443
34443
|
const { formData } = useFormStore();
|
|
34444
34444
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -34465,8 +34465,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
|
|
|
34465
34465
|
"rotate-180": isOpen,
|
|
34466
34466
|
}) })),
|
|
34467
34467
|
React__default.createElement("p", { className: "font-bold text-lg tracking-tight md:hidden" }, storeHelpers.formatPrice(total, currency, exchangeRate)),
|
|
34468
|
-
React__default.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link",
|
|
34469
|
-
React__default.createElement("a", { href: cancelUrl }, t("CheckoutEmbed.Summary.edit")))),
|
|
34468
|
+
React__default.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link", onClick: onCancel }, t("CheckoutEmbed.Summary.edit"))),
|
|
34470
34469
|
React__default.createElement("hr", null),
|
|
34471
34470
|
React__default.createElement("div", { className: clsx("gap-3 order-4 md:order-none", {
|
|
34472
34471
|
"hidden md:grid": !isOpen,
|
|
@@ -34556,6 +34555,7 @@ function CheckoutEmbed({ checkoutId, config }) {
|
|
|
34556
34555
|
const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
|
|
34557
34556
|
const storeClient = createStoreClient({ proxy: clientProxy });
|
|
34558
34557
|
React__default.useMemo(() => createI18nInstance(locale), []);
|
|
34558
|
+
const { formData, setFormData, step, setStep } = useFormStore();
|
|
34559
34559
|
const [checkout, setCheckout] = useState(null);
|
|
34560
34560
|
const [loading, setLoading] = useState(true);
|
|
34561
34561
|
useEffect(() => {
|
|
@@ -34584,15 +34584,20 @@ function CheckoutEmbed({ checkoutId, config }) {
|
|
|
34584
34584
|
};
|
|
34585
34585
|
}, [checkoutId]); // Only re-run if checkoutId changes
|
|
34586
34586
|
const onSuccess = () => {
|
|
34587
|
+
setStep("customer");
|
|
34588
|
+
setFormData({ customer: formData.customer });
|
|
34587
34589
|
if (successUrl) {
|
|
34588
34590
|
window.location.href = successUrl;
|
|
34589
34591
|
}
|
|
34590
34592
|
};
|
|
34591
|
-
const
|
|
34593
|
+
const onCancel = () => {
|
|
34594
|
+
setStep("customer");
|
|
34595
|
+
setFormData({ customer: formData.customer });
|
|
34592
34596
|
if (cancelUrl) {
|
|
34593
34597
|
window.location.href = cancelUrl;
|
|
34594
34598
|
}
|
|
34595
34599
|
};
|
|
34600
|
+
const onError = () => { };
|
|
34596
34601
|
if (!checkout && !loading) {
|
|
34597
34602
|
throw new Error("Checkout not found");
|
|
34598
34603
|
}
|
|
@@ -34604,7 +34609,7 @@ function CheckoutEmbed({ checkoutId, config }) {
|
|
|
34604
34609
|
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 " },
|
|
34605
34610
|
React__default.createElement(Appearance, { appearance: appearance }),
|
|
34606
34611
|
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 }))),
|
|
34607
|
-
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,
|
|
34612
|
+
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, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1 })))));
|
|
34608
34613
|
}
|
|
34609
34614
|
var index = memo$1(CheckoutEmbed);
|
|
34610
34615
|
|