@betterstore/react 0.3.78 → 0.3.80
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
|
@@ -18,6 +18,7 @@ interface CheckoutFormProps {
|
|
|
18
18
|
exchangeRate: number;
|
|
19
19
|
paymentSecret: string | null;
|
|
20
20
|
publicKey: string | null;
|
|
21
|
+
paymentComponentKey: number;
|
|
21
22
|
}
|
|
22
|
-
export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, }: CheckoutFormProps): React.JSX.Element;
|
|
23
|
+
export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }: CheckoutFormProps): React.JSX.Element;
|
|
23
24
|
export {};
|
|
@@ -15,6 +15,7 @@ interface PaymentFormProps {
|
|
|
15
15
|
fonts?: Fonts;
|
|
16
16
|
locale?: StripeElementLocale;
|
|
17
17
|
publicKey: string | null;
|
|
18
|
+
paymentComponentKey: number;
|
|
18
19
|
}
|
|
19
|
-
export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }: PaymentFormProps): React.JSX.Element;
|
|
20
|
+
export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }: PaymentFormProps): React.JSX.Element;
|
|
20
21
|
export {};
|
package/dist/index.cjs.js
CHANGED
|
@@ -35081,15 +35081,9 @@ function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale,
|
|
|
35081
35081
|
}
|
|
35082
35082
|
var PaymentElement$1 = React.memo(PaymentElement);
|
|
35083
35083
|
|
|
35084
|
-
function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
|
|
35084
|
+
function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
|
|
35085
35085
|
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
|
35086
|
-
const [key, setKey] = React.useState(0);
|
|
35087
35086
|
const { t } = useTranslation();
|
|
35088
|
-
React.useEffect(() => {
|
|
35089
|
-
if (paymentSecret) {
|
|
35090
|
-
setKey((prev) => prev + 1);
|
|
35091
|
-
}
|
|
35092
|
-
}, [paymentSecret]);
|
|
35093
35087
|
return (React.createElement("div", { className: "space-y-6" },
|
|
35094
35088
|
React.createElement("div", null,
|
|
35095
35089
|
React.createElement("h2", { className: "mb-2" }, t("CheckoutEmbed.Payment.title")),
|
|
@@ -35116,7 +35110,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
|
|
|
35116
35110
|
" \u00B7 ",
|
|
35117
35111
|
shippingPrice)),
|
|
35118
35112
|
React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
|
|
35119
|
-
React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { key:
|
|
35113
|
+
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 },
|
|
35120
35114
|
React.createElement("div", { className: "flex justify-between items-center pt-8" },
|
|
35121
35115
|
React.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
|
|
35122
35116
|
React.createElement(ChevronLeft, null),
|
|
@@ -35293,7 +35287,7 @@ const resetFormStore = (formData) => {
|
|
|
35293
35287
|
localStorage.setItem("checkout", JSON.stringify(Object.assign(Object.assign({}, currentState), { state: Object.assign(Object.assign({}, currentState.state), { step: "customer", formData: { customer: formData.customer } }) })));
|
|
35294
35288
|
};
|
|
35295
35289
|
|
|
35296
|
-
function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, }) {
|
|
35290
|
+
function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }) {
|
|
35297
35291
|
const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
|
|
35298
35292
|
const [shippingRates, setShippingRates] = React.useState([]);
|
|
35299
35293
|
const validateStep = React.useCallback(() => {
|
|
@@ -35451,7 +35445,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
|
|
|
35451
35445
|
};
|
|
35452
35446
|
const renderStep = () => {
|
|
35453
35447
|
if (step === "payment" && formData.customer && formData.shipping) {
|
|
35454
|
-
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 }));
|
|
35448
|
+
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 }));
|
|
35455
35449
|
}
|
|
35456
35450
|
if (step === "shipping" && formData.customer) {
|
|
35457
35451
|
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 }) {
|
|
|
35705
35699
|
const paymentSecretPromiseRef = React.useRef(null);
|
|
35706
35700
|
const [paymentSecret, setPaymentSecret] = React.useState(null);
|
|
35707
35701
|
const [publicKey, setPublicKey] = React.useState(null);
|
|
35702
|
+
const [paymentComponentKey, setPaymentComponentKey] = React.useState(0);
|
|
35708
35703
|
const [checkout, setCheckout] = React.useState(null);
|
|
35709
35704
|
const [loading, setLoading] = React.useState(true);
|
|
35710
35705
|
React.useEffect(() => {
|
|
@@ -35774,12 +35769,24 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
|
|
|
35774
35769
|
const newCheckout = yield storeClient.applyDiscountCode(clientSecret, checkoutId, code);
|
|
35775
35770
|
setCheckout(newCheckout);
|
|
35776
35771
|
if (step === "payment") {
|
|
35777
|
-
|
|
35772
|
+
const newTotal = calculateTotalWithDiscounts(newCheckout);
|
|
35773
|
+
const currentTotal = calculateTotalWithDiscounts(checkout);
|
|
35774
|
+
if (newTotal !== currentTotal) {
|
|
35775
|
+
yield generatePaymentSecret();
|
|
35776
|
+
setPaymentComponentKey((prev) => prev + 1);
|
|
35777
|
+
}
|
|
35778
35778
|
}
|
|
35779
35779
|
});
|
|
35780
35780
|
const revalidateDiscounts = () => __awaiter(this, void 0, void 0, function* () {
|
|
35781
35781
|
if (step === "payment") {
|
|
35782
|
-
yield
|
|
35782
|
+
const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
|
|
35783
|
+
const newTotal = calculateTotalWithDiscounts(newCheckout);
|
|
35784
|
+
const currentTotal = calculateTotalWithDiscounts(checkout);
|
|
35785
|
+
if (newTotal !== currentTotal) {
|
|
35786
|
+
yield generatePaymentSecret();
|
|
35787
|
+
setPaymentComponentKey((prev) => prev + 1);
|
|
35788
|
+
}
|
|
35789
|
+
setCheckout(newCheckout);
|
|
35783
35790
|
}
|
|
35784
35791
|
else {
|
|
35785
35792
|
const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
|
|
@@ -35790,9 +35797,32 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
|
|
|
35790
35797
|
const newCheckout = yield storeClient.removeDiscount(clientSecret, checkoutId, id);
|
|
35791
35798
|
setCheckout(newCheckout);
|
|
35792
35799
|
if (step === "payment") {
|
|
35793
|
-
|
|
35800
|
+
const newTotal = calculateTotalWithDiscounts(newCheckout);
|
|
35801
|
+
const currentTotal = calculateTotalWithDiscounts(checkout);
|
|
35802
|
+
if (newTotal !== currentTotal) {
|
|
35803
|
+
yield generatePaymentSecret();
|
|
35804
|
+
setPaymentComponentKey((prev) => prev + 1);
|
|
35805
|
+
}
|
|
35794
35806
|
}
|
|
35795
35807
|
});
|
|
35808
|
+
const calculateTotalWithDiscounts = (checkout) => {
|
|
35809
|
+
var _a, _b;
|
|
35810
|
+
if (!checkout)
|
|
35811
|
+
return 0;
|
|
35812
|
+
const subtotal = checkout.lineItems.reduce((acc, item) => {
|
|
35813
|
+
var _a, _b;
|
|
35814
|
+
const productItem = ((_a = item.productData) === null || _a === void 0 ? void 0 : _a.selectedVariant) || item.productData;
|
|
35815
|
+
return acc + ((_b = productItem === null || productItem === void 0 ? void 0 : productItem.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
|
|
35816
|
+
}, 0);
|
|
35817
|
+
const shippingPrice = (_a = checkout.shipping) !== null && _a !== void 0 ? _a : 0;
|
|
35818
|
+
const total = subtotal + ((_b = checkout.tax) !== null && _b !== void 0 ? _b : 0) + shippingPrice;
|
|
35819
|
+
const isShippingFree = subtotal > shippingPrice &&
|
|
35820
|
+
checkout.appliedDiscounts.some((discount) => discount.discount.type === "FREE_SHIPPING");
|
|
35821
|
+
const filteredDiscounts = checkout.appliedDiscounts.filter((discount) => discount.discount.type !== "FREE_SHIPPING");
|
|
35822
|
+
return (total -
|
|
35823
|
+
filteredDiscounts.reduce((acc, { amount }) => acc + amount, 0) -
|
|
35824
|
+
(isShippingFree ? shippingPrice : 0));
|
|
35825
|
+
};
|
|
35796
35826
|
React.useEffect(() => {
|
|
35797
35827
|
const interval = setTimeout(() => {
|
|
35798
35828
|
if (step !== "payment") {
|
|
@@ -35804,7 +35834,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
|
|
|
35804
35834
|
return (React.createElement(IframeWrapper, { iframeRef: iframeRef },
|
|
35805
35835
|
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 " },
|
|
35806
35836
|
React.createElement(Appearance, { appearance: appearance, fonts: config.fonts, iframeRef: iframeRef }),
|
|
35807
|
-
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 }))),
|
|
35837
|
+
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 }))),
|
|
35808
35838
|
React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 h-max order-first md:order-last" },
|
|
35809
35839
|
React.createElement(Toaster, null),
|
|
35810
35840
|
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
CHANGED
|
@@ -35061,15 +35061,9 @@ function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale,
|
|
|
35061
35061
|
}
|
|
35062
35062
|
var PaymentElement$1 = memo(PaymentElement);
|
|
35063
35063
|
|
|
35064
|
-
function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
|
|
35064
|
+
function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
|
|
35065
35065
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
35066
|
-
const [key, setKey] = useState(0);
|
|
35067
35066
|
const { t } = useTranslation();
|
|
35068
|
-
useEffect(() => {
|
|
35069
|
-
if (paymentSecret) {
|
|
35070
|
-
setKey((prev) => prev + 1);
|
|
35071
|
-
}
|
|
35072
|
-
}, [paymentSecret]);
|
|
35073
35067
|
return (React__default.createElement("div", { className: "space-y-6" },
|
|
35074
35068
|
React__default.createElement("div", null,
|
|
35075
35069
|
React__default.createElement("h2", { className: "mb-2" }, t("CheckoutEmbed.Payment.title")),
|
|
@@ -35096,7 +35090,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
|
|
|
35096
35090
|
" \u00B7 ",
|
|
35097
35091
|
shippingPrice)),
|
|
35098
35092
|
React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
|
|
35099
|
-
React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { key:
|
|
35093
|
+
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 },
|
|
35100
35094
|
React__default.createElement("div", { className: "flex justify-between items-center pt-8" },
|
|
35101
35095
|
React__default.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
|
|
35102
35096
|
React__default.createElement(ChevronLeft, null),
|
|
@@ -35273,7 +35267,7 @@ const resetFormStore = (formData) => {
|
|
|
35273
35267
|
localStorage.setItem("checkout", JSON.stringify(Object.assign(Object.assign({}, currentState), { state: Object.assign(Object.assign({}, currentState.state), { step: "customer", formData: { customer: formData.customer } }) })));
|
|
35274
35268
|
};
|
|
35275
35269
|
|
|
35276
|
-
function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, }) {
|
|
35270
|
+
function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }) {
|
|
35277
35271
|
const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
|
|
35278
35272
|
const [shippingRates, setShippingRates] = useState([]);
|
|
35279
35273
|
const validateStep = useCallback(() => {
|
|
@@ -35431,7 +35425,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
|
|
|
35431
35425
|
};
|
|
35432
35426
|
const renderStep = () => {
|
|
35433
35427
|
if (step === "payment" && formData.customer && formData.shipping) {
|
|
35434
|
-
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 }));
|
|
35428
|
+
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 }));
|
|
35435
35429
|
}
|
|
35436
35430
|
if (step === "shipping" && formData.customer) {
|
|
35437
35431
|
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 }) {
|
|
|
35685
35679
|
const paymentSecretPromiseRef = useRef(null);
|
|
35686
35680
|
const [paymentSecret, setPaymentSecret] = useState(null);
|
|
35687
35681
|
const [publicKey, setPublicKey] = useState(null);
|
|
35682
|
+
const [paymentComponentKey, setPaymentComponentKey] = useState(0);
|
|
35688
35683
|
const [checkout, setCheckout] = useState(null);
|
|
35689
35684
|
const [loading, setLoading] = useState(true);
|
|
35690
35685
|
useEffect(() => {
|
|
@@ -35754,12 +35749,24 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
|
|
|
35754
35749
|
const newCheckout = yield storeClient.applyDiscountCode(clientSecret, checkoutId, code);
|
|
35755
35750
|
setCheckout(newCheckout);
|
|
35756
35751
|
if (step === "payment") {
|
|
35757
|
-
|
|
35752
|
+
const newTotal = calculateTotalWithDiscounts(newCheckout);
|
|
35753
|
+
const currentTotal = calculateTotalWithDiscounts(checkout);
|
|
35754
|
+
if (newTotal !== currentTotal) {
|
|
35755
|
+
yield generatePaymentSecret();
|
|
35756
|
+
setPaymentComponentKey((prev) => prev + 1);
|
|
35757
|
+
}
|
|
35758
35758
|
}
|
|
35759
35759
|
});
|
|
35760
35760
|
const revalidateDiscounts = () => __awaiter(this, void 0, void 0, function* () {
|
|
35761
35761
|
if (step === "payment") {
|
|
35762
|
-
yield
|
|
35762
|
+
const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
|
|
35763
|
+
const newTotal = calculateTotalWithDiscounts(newCheckout);
|
|
35764
|
+
const currentTotal = calculateTotalWithDiscounts(checkout);
|
|
35765
|
+
if (newTotal !== currentTotal) {
|
|
35766
|
+
yield generatePaymentSecret();
|
|
35767
|
+
setPaymentComponentKey((prev) => prev + 1);
|
|
35768
|
+
}
|
|
35769
|
+
setCheckout(newCheckout);
|
|
35763
35770
|
}
|
|
35764
35771
|
else {
|
|
35765
35772
|
const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
|
|
@@ -35770,9 +35777,32 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
|
|
|
35770
35777
|
const newCheckout = yield storeClient.removeDiscount(clientSecret, checkoutId, id);
|
|
35771
35778
|
setCheckout(newCheckout);
|
|
35772
35779
|
if (step === "payment") {
|
|
35773
|
-
|
|
35780
|
+
const newTotal = calculateTotalWithDiscounts(newCheckout);
|
|
35781
|
+
const currentTotal = calculateTotalWithDiscounts(checkout);
|
|
35782
|
+
if (newTotal !== currentTotal) {
|
|
35783
|
+
yield generatePaymentSecret();
|
|
35784
|
+
setPaymentComponentKey((prev) => prev + 1);
|
|
35785
|
+
}
|
|
35774
35786
|
}
|
|
35775
35787
|
});
|
|
35788
|
+
const calculateTotalWithDiscounts = (checkout) => {
|
|
35789
|
+
var _a, _b;
|
|
35790
|
+
if (!checkout)
|
|
35791
|
+
return 0;
|
|
35792
|
+
const subtotal = checkout.lineItems.reduce((acc, item) => {
|
|
35793
|
+
var _a, _b;
|
|
35794
|
+
const productItem = ((_a = item.productData) === null || _a === void 0 ? void 0 : _a.selectedVariant) || item.productData;
|
|
35795
|
+
return acc + ((_b = productItem === null || productItem === void 0 ? void 0 : productItem.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
|
|
35796
|
+
}, 0);
|
|
35797
|
+
const shippingPrice = (_a = checkout.shipping) !== null && _a !== void 0 ? _a : 0;
|
|
35798
|
+
const total = subtotal + ((_b = checkout.tax) !== null && _b !== void 0 ? _b : 0) + shippingPrice;
|
|
35799
|
+
const isShippingFree = subtotal > shippingPrice &&
|
|
35800
|
+
checkout.appliedDiscounts.some((discount) => discount.discount.type === "FREE_SHIPPING");
|
|
35801
|
+
const filteredDiscounts = checkout.appliedDiscounts.filter((discount) => discount.discount.type !== "FREE_SHIPPING");
|
|
35802
|
+
return (total -
|
|
35803
|
+
filteredDiscounts.reduce((acc, { amount }) => acc + amount, 0) -
|
|
35804
|
+
(isShippingFree ? shippingPrice : 0));
|
|
35805
|
+
};
|
|
35776
35806
|
useEffect(() => {
|
|
35777
35807
|
const interval = setTimeout(() => {
|
|
35778
35808
|
if (step !== "payment") {
|
|
@@ -35784,7 +35814,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
|
|
|
35784
35814
|
return (React__default.createElement(IframeWrapper, { iframeRef: iframeRef },
|
|
35785
35815
|
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 " },
|
|
35786
35816
|
React__default.createElement(Appearance, { appearance: appearance, fonts: config.fonts, iframeRef: iframeRef }),
|
|
35787
|
-
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 }))),
|
|
35817
|
+
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 }))),
|
|
35788
35818
|
React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 h-max order-first md:order-last" },
|
|
35789
35819
|
React__default.createElement(Toaster, null),
|
|
35790
35820
|
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 }))))));
|