@betterstore/react 0.3.42 → 0.3.43

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,5 +1,11 @@
1
1
  # @betterstore/sdk
2
2
 
3
+ ## 0.3.43
4
+
5
+ ### Patch Changes
6
+
7
+ - bug fixes
8
+
3
9
  ## 0.3.42
4
10
 
5
11
  ### Patch Changes
@@ -1,10 +1,10 @@
1
1
  import { Appearance as StripeAppearance, StripeElementsOptions } from "@stripe/stripe-js";
2
2
  export type Themes = "dark" | "light";
3
+ export type Fonts = StripeElementsOptions["fonts"];
3
4
  export type AppearanceConfig = {
4
5
  theme?: Themes;
5
6
  borderRadius?: number;
6
7
  font?: string;
7
- fontSources?: StripeElementsOptions["fonts"];
8
8
  colors?: {
9
9
  background?: string;
10
10
  foreground?: string;
@@ -21,7 +21,8 @@ export type AppearanceConfig = {
21
21
  ring?: string;
22
22
  };
23
23
  };
24
- export default function Appearance({ appearance, }: {
24
+ export default function Appearance({ appearance, fonts, }: {
25
25
  appearance?: AppearanceConfig;
26
+ fonts?: Fonts;
26
27
  }): null;
27
- export declare const convertCheckoutAppearanceToStripeAppearance: (appearance?: AppearanceConfig, fonts?: StripeElementsOptions["fonts"]) => StripeAppearance;
28
+ export declare const convertCheckoutAppearanceToStripeAppearance: (appearance?: AppearanceConfig, fonts?: Fonts) => StripeAppearance;
@@ -1,7 +1,7 @@
1
1
  import { CheckoutSession, createStoreClient } from "@betterstore/sdk";
2
- import { StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
2
+ import { StripeElementLocale } from "@stripe/stripe-js";
3
3
  import React from "react";
4
- import { AppearanceConfig } from "./appearance";
4
+ import { AppearanceConfig, Fonts } from "./appearance";
5
5
  interface CheckoutFormProps {
6
6
  storeClient: ReturnType<typeof createStoreClient>;
7
7
  checkoutId: string;
@@ -12,7 +12,7 @@ interface CheckoutFormProps {
12
12
  customer?: CheckoutSession["customer"];
13
13
  currency: string;
14
14
  checkoutAppearance?: AppearanceConfig;
15
- fonts?: StripeElementsOptions["fonts"];
15
+ fonts?: Fonts;
16
16
  locale?: StripeElementLocale;
17
17
  setShippingCost: (cost: number) => void;
18
18
  exchangeRate: number;
@@ -1,7 +1,6 @@
1
1
  import { Locale } from "@/i18n";
2
- import { StripeElementsOptions } from "@stripe/stripe-js";
3
2
  import React from "react";
4
- import { AppearanceConfig } from "./appearance";
3
+ import { AppearanceConfig, Fonts } from "./appearance";
5
4
  interface CheckoutEmbedProps {
6
5
  checkoutId: string;
7
6
  config: {
@@ -9,7 +8,7 @@ interface CheckoutEmbedProps {
9
8
  cancelUrl: string;
10
9
  successUrl: string;
11
10
  appearance?: AppearanceConfig;
12
- fonts?: StripeElementsOptions["fonts"];
11
+ fonts?: Fonts;
13
12
  locale?: Locale;
14
13
  clientProxy?: string;
15
14
  };
@@ -1,6 +1,6 @@
1
- import { StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
1
+ import { StripeElementLocale } from "@stripe/stripe-js";
2
2
  import React from "react";
3
- import { AppearanceConfig } from "../../appearance";
3
+ import { AppearanceConfig, Fonts } from "../../appearance";
4
4
  interface PaymentFormProps {
5
5
  paymentSecret: string | null;
6
6
  onSuccess: () => void;
@@ -12,7 +12,7 @@ interface PaymentFormProps {
12
12
  shippingName: string;
13
13
  shippingPrice: string;
14
14
  checkoutAppearance?: AppearanceConfig;
15
- fonts?: StripeElementsOptions["fonts"];
15
+ fonts?: Fonts;
16
16
  locale?: StripeElementLocale;
17
17
  publicKey: string | null;
18
18
  }
@@ -1,11 +1,12 @@
1
- import { Appearance, StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
1
+ import { Appearance, StripeElementLocale } from "@stripe/stripe-js";
2
2
  import React from "react";
3
+ import { Fonts } from "../checkout-embed/appearance";
3
4
  declare function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }: {
4
5
  paymentSecret: string;
5
6
  publicKey: string | null;
6
7
  checkoutAppearance?: Appearance;
7
8
  locale?: StripeElementLocale;
8
- fonts?: StripeElementsOptions["fonts"];
9
+ fonts?: Fonts;
9
10
  onSuccess?: () => void;
10
11
  onError?: () => void;
11
12
  children: React.ReactNode;
package/dist/index.cjs.js CHANGED
@@ -568,7 +568,7 @@ const appearance = {
568
568
  variables: {
569
569
  fontFamily: '-apple-system, BlinkMacSystemFont, "Geist", "Gill Sans", sans-serif'}};
570
570
 
571
- function Appearance({ appearance, }) {
571
+ function Appearance({ appearance, fonts, }) {
572
572
  React.useEffect(() => {
573
573
  const variables = getVariablesFromAppearanceConfig(appearance);
574
574
  if (variables) {
@@ -577,8 +577,8 @@ function Appearance({ appearance, }) {
577
577
  });
578
578
  }
579
579
  // Load fonts if provided
580
- if (appearance === null || appearance === void 0 ? void 0 : appearance.fontSources) {
581
- appearance.fontSources.forEach((font) => {
580
+ if (fonts) {
581
+ fonts.forEach((font) => {
582
582
  if ("cssSrc" in font) {
583
583
  // Handle CSS font source
584
584
  const link = document.createElement("link");
@@ -12081,7 +12081,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
12081
12081
  }, []);
12082
12082
  return (React.createElement(IframeWrapper, null,
12083
12083
  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 " },
12084
- React.createElement(Appearance, { appearance: appearance }),
12084
+ React.createElement(Appearance, { appearance: appearance, fonts: config.fonts }),
12085
12085
  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, setCheckout: setCheckout, setPublicKey: setPublicKey, publicKey: publicKey, setPaymentSecret: setPaymentSecret, paymentSecret: paymentSecret }))),
12086
12086
  React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" },
12087
12087
  React.createElement(Toaster, null),
package/dist/index.mjs CHANGED
@@ -545,7 +545,7 @@ const appearance = {
545
545
  variables: {
546
546
  fontFamily: '-apple-system, BlinkMacSystemFont, "Geist", "Gill Sans", sans-serif'}};
547
547
 
548
- function Appearance({ appearance, }) {
548
+ function Appearance({ appearance, fonts, }) {
549
549
  useEffect(() => {
550
550
  const variables = getVariablesFromAppearanceConfig(appearance);
551
551
  if (variables) {
@@ -554,8 +554,8 @@ function Appearance({ appearance, }) {
554
554
  });
555
555
  }
556
556
  // Load fonts if provided
557
- if (appearance === null || appearance === void 0 ? void 0 : appearance.fontSources) {
558
- appearance.fontSources.forEach((font) => {
557
+ if (fonts) {
558
+ fonts.forEach((font) => {
559
559
  if ("cssSrc" in font) {
560
560
  // Handle CSS font source
561
561
  const link = document.createElement("link");
@@ -12058,7 +12058,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
12058
12058
  }, []);
12059
12059
  return (React__default.createElement(IframeWrapper, null,
12060
12060
  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 " },
12061
- React__default.createElement(Appearance, { appearance: appearance }),
12061
+ React__default.createElement(Appearance, { appearance: appearance, fonts: config.fonts }),
12062
12062
  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, setCheckout: setCheckout, setPublicKey: setPublicKey, publicKey: publicKey, setPaymentSecret: setPaymentSecret, paymentSecret: paymentSecret }))),
12063
12063
  React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" },
12064
12064
  React__default.createElement(Toaster, null),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@betterstore/react",
3
- "version": "0.3.42",
3
+ "version": "0.3.43",
4
4
  "description": "E-commerce for Developers",
5
5
  "private": false,
6
6
  "publishConfig": {