@betterstore/react 0.2.18 → 0.2.19
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,8 +1,9 @@
|
|
|
1
|
-
import { CheckoutSession } from "@betterstore/sdk";
|
|
1
|
+
import { CheckoutSession, createStoreClient } from "@betterstore/sdk";
|
|
2
2
|
import { StripeElementsOptions } from "@stripe/stripe-js";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { AppearanceConfig } from "./appearance";
|
|
5
5
|
interface CheckoutFormProps {
|
|
6
|
+
storeClient: ReturnType<typeof createStoreClient>;
|
|
6
7
|
checkoutId: string;
|
|
7
8
|
onSuccess: () => void;
|
|
8
9
|
onError: () => void;
|
|
@@ -13,5 +14,5 @@ interface CheckoutFormProps {
|
|
|
13
14
|
checkoutAppearance?: AppearanceConfig;
|
|
14
15
|
fonts?: StripeElementsOptions["fonts"];
|
|
15
16
|
}
|
|
16
|
-
export default function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }: CheckoutFormProps): React.JSX.Element;
|
|
17
|
+
export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }: CheckoutFormProps): React.JSX.Element;
|
|
17
18
|
export {};
|
package/dist/index.cjs.js
CHANGED
|
@@ -4390,9 +4390,6 @@ function createStoreHelpers(config) {
|
|
|
4390
4390
|
return new helpers_default(void 0 );
|
|
4391
4391
|
}
|
|
4392
4392
|
|
|
4393
|
-
const storeClient = createStoreClient({ proxy: "/api/betterstore" });
|
|
4394
|
-
const storeHelpers = createStoreHelpers();
|
|
4395
|
-
|
|
4396
4393
|
function Appearance({ appearance, }) {
|
|
4397
4394
|
React.useEffect(() => {
|
|
4398
4395
|
const variables = getVariablesFromAppearanceConfig(appearance);
|
|
@@ -15412,7 +15409,7 @@ const motionSettings = {
|
|
|
15412
15409
|
exit: { opacity: 0 },
|
|
15413
15410
|
transition: { duration: 0.2 },
|
|
15414
15411
|
};
|
|
15415
|
-
function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
|
|
15412
|
+
function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
|
|
15416
15413
|
const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
|
|
15417
15414
|
const [paymentSecret, setPaymentSecret] = React.useState(null);
|
|
15418
15415
|
const [shippingRates, setShippingRates] = React.useState([]);
|
|
@@ -15561,6 +15558,8 @@ function InputGroupLoading({ className }) {
|
|
|
15561
15558
|
React.createElement(Skeleton, { className: "w-full h-9" })));
|
|
15562
15559
|
}
|
|
15563
15560
|
|
|
15561
|
+
const storeHelpers = createStoreHelpers();
|
|
15562
|
+
|
|
15564
15563
|
function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }) {
|
|
15565
15564
|
const { t } = reactI18next.useTranslation();
|
|
15566
15565
|
const subtotal = lineItems.reduce((acc, item) => {
|
|
@@ -15634,7 +15633,8 @@ function CheckoutSummaryLoading() {
|
|
|
15634
15633
|
|
|
15635
15634
|
function CheckoutEmbed({ checkoutId, config }) {
|
|
15636
15635
|
var _a, _b, _c, _d;
|
|
15637
|
-
const { cancelUrl, successUrl, appearance, locale, clientSecret } = config;
|
|
15636
|
+
const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
|
|
15637
|
+
const storeClient = createStoreClient({ proxy: clientProxy });
|
|
15638
15638
|
React.useMemo(() => createI18nInstance(locale), []);
|
|
15639
15639
|
const [checkout, setCheckout] = React.useState(null);
|
|
15640
15640
|
const [loading, setLoading] = React.useState(true);
|
|
@@ -15678,7 +15678,7 @@ function CheckoutEmbed({ checkoutId, config }) {
|
|
|
15678
15678
|
}
|
|
15679
15679
|
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 " },
|
|
15680
15680
|
React.createElement(Appearance, { appearance: appearance }),
|
|
15681
|
-
React.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { 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 }))),
|
|
15681
|
+
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 }))),
|
|
15682
15682
|
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 })))));
|
|
15683
15683
|
}
|
|
15684
15684
|
var index = React.memo(CheckoutEmbed);
|
package/dist/index.mjs
CHANGED
|
@@ -4367,9 +4367,6 @@ function createStoreHelpers(config) {
|
|
|
4367
4367
|
return new helpers_default(void 0 );
|
|
4368
4368
|
}
|
|
4369
4369
|
|
|
4370
|
-
const storeClient = createStoreClient({ proxy: "/api/betterstore" });
|
|
4371
|
-
const storeHelpers = createStoreHelpers();
|
|
4372
|
-
|
|
4373
4370
|
function Appearance({ appearance, }) {
|
|
4374
4371
|
useEffect(() => {
|
|
4375
4372
|
const variables = getVariablesFromAppearanceConfig(appearance);
|
|
@@ -15389,7 +15386,7 @@ const motionSettings = {
|
|
|
15389
15386
|
exit: { opacity: 0 },
|
|
15390
15387
|
transition: { duration: 0.2 },
|
|
15391
15388
|
};
|
|
15392
|
-
function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
|
|
15389
|
+
function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
|
|
15393
15390
|
const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
|
|
15394
15391
|
const [paymentSecret, setPaymentSecret] = useState(null);
|
|
15395
15392
|
const [shippingRates, setShippingRates] = useState([]);
|
|
@@ -15538,6 +15535,8 @@ function InputGroupLoading({ className }) {
|
|
|
15538
15535
|
React__default.createElement(Skeleton, { className: "w-full h-9" })));
|
|
15539
15536
|
}
|
|
15540
15537
|
|
|
15538
|
+
const storeHelpers = createStoreHelpers();
|
|
15539
|
+
|
|
15541
15540
|
function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }) {
|
|
15542
15541
|
const { t } = useTranslation();
|
|
15543
15542
|
const subtotal = lineItems.reduce((acc, item) => {
|
|
@@ -15611,7 +15610,8 @@ function CheckoutSummaryLoading() {
|
|
|
15611
15610
|
|
|
15612
15611
|
function CheckoutEmbed({ checkoutId, config }) {
|
|
15613
15612
|
var _a, _b, _c, _d;
|
|
15614
|
-
const { cancelUrl, successUrl, appearance, locale, clientSecret } = config;
|
|
15613
|
+
const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
|
|
15614
|
+
const storeClient = createStoreClient({ proxy: clientProxy });
|
|
15615
15615
|
React__default.useMemo(() => createI18nInstance(locale), []);
|
|
15616
15616
|
const [checkout, setCheckout] = useState(null);
|
|
15617
15617
|
const [loading, setLoading] = useState(true);
|
|
@@ -15655,7 +15655,7 @@ function CheckoutEmbed({ checkoutId, config }) {
|
|
|
15655
15655
|
}
|
|
15656
15656
|
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 " },
|
|
15657
15657
|
React__default.createElement(Appearance, { appearance: appearance }),
|
|
15658
|
-
React__default.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { 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 }))),
|
|
15658
|
+
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 }))),
|
|
15659
15659
|
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 })))));
|
|
15660
15660
|
}
|
|
15661
15661
|
var index = memo$1(CheckoutEmbed);
|
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
export declare const storeClient: {
|
|
2
|
-
proxy?: string;
|
|
3
|
-
retrieveCheckout(clientSecret: string, checkoutId: string): Promise<import("@betterstore/sdk").CheckoutSession>;
|
|
4
|
-
updateCheckout(clientSecret: string, checkoutId: string, params: import("@betterstore/sdk").CheckoutUpdateParams): Promise<import("@betterstore/sdk").CheckoutSession>;
|
|
5
|
-
getCheckoutShippingRates(clientSecret: string, checkoutId: string): Promise<import("@betterstore/sdk").ShippingRate[]>;
|
|
6
|
-
generateCheckoutsPaymentSecret(clientSecret: string, checkoutId: string): Promise<string>;
|
|
7
|
-
createCustomer(clientSecret: string, params: import("@betterstore/sdk").CustomerCreateParams): Promise<import("@betterstore/sdk").Customer>;
|
|
8
|
-
retrieveCustomer(clientSecret: string, idOrEmail: string): Promise<import("@betterstore/sdk").Customer>;
|
|
9
|
-
updateCustomer(clientSecret: string, customerId: string, params: import("@betterstore/sdk").CustomerUpdateParams): Promise<import("@betterstore/sdk").Customer>;
|
|
10
|
-
};
|
|
11
1
|
export declare const storeHelpers: {
|
|
12
2
|
proxy?: string;
|
|
13
3
|
formatPrice(priceInCents: number, currency: string, exchangeRate?: number): string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@betterstore/react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.19",
|
|
4
4
|
"description": "E-commerce for Developers",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"zustand": "^5.0.3"
|
|
80
80
|
},
|
|
81
81
|
"scripts": {
|
|
82
|
-
"dev": "vite",
|
|
82
|
+
"dev": "BETTERSTORE_DEV_PROXY=true vite",
|
|
83
83
|
"prep": "changeset && changeset version && git add .",
|
|
84
84
|
"build": "rollup -c",
|
|
85
85
|
"lint": "tsc",
|