@superlogic/spree-pay 0.1.27 → 0.1.29

package/build/index.cjs

@@ -44,7 +44,7 @@ var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
 // package.json
-var version = "0.1.27";
+var version = "0.1.29";
 
 // src/context/SpreePayActionsContext.tsx
 var import_react = require("react");
@@ -323,9 +323,10 @@ var getTransactionFee = (amount = 0, transactionFeePercentage) => {
 // src/components/CheckoutButton.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CheckoutButton = ({ isLoggedIn }) => {
-  const { appProps } = useStaticConfig();
+  const { appProps, staticConfig } = useStaticConfig();
   const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
   const { spreePayConfig } = useSpreePayConfig();
+  const { env } = useSpreePayEnv();
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
   const { splitAmount, type, method } = selectedPaymentMethod;
   const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
@@ -360,7 +361,7 @@ var CheckoutButton = ({ isLoggedIn }) => {
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
       "."
     ] }) }),
-    onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
         disabled: isDisabled,
@@ -368,6 +369,13 @@ var CheckoutButton = ({ isLoggedIn }) => {
         className: "bg-primary h-[60px] w-full cursor-pointer text-xl font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
         children: getCheckoutContent()
       }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "a",
+      {
+        href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/logout?client_id=${staticConfig.keycloakClientId}&post_logout_redirect_uri=${window.location.origin}${window.location.pathname}`,
+        className: "bg-primary h-[60px] w-full cursor-pointer text-center text-xl leading-[60px] font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
+        children: "Login"
+      }
     )
   ] });
 };
@@ -1308,24 +1316,43 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 var PointsSwitch = (props) => {
   const { disabled = false, value, onChange, message } = props;
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
   const { balance } = useSlapiBalance();
   const id = (0, import_react7.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-          "Use Points ",
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          Label,
+          {
+            htmlFor: id,
+            className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-semibold text-black sm:flex-row sm:gap-2 md:text-lg",
+            children: [
+              "Use Points ",
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
+            ]
+          }
+        )
       ] }),
-      balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-        formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
-        " ",
-        !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio) })
-      ] }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+        balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+          formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+        ] }) : null,
+        Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "a",
+          {
+            className: "bg-primary cursor-pointer rounded-full px-2 py-1.5 text-xs font-medium text-white",
+            rel: "noreferrer",
+            target: "_blank",
+            href: appProps.topUpLink,
+            children: "Top Up"
+          }
+        )
+      ] })
     ] }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+    message && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "path",
         {
@@ -2371,16 +2398,17 @@ var PointsSelector = (props) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-3 px-3", children })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
         ] }),
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between gap-3", children: [
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-2 pt-6 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Input,
               {
                 readOnly: true,
+                name: "points amount",
                 value: Math.round(splitTokens),
-                className: "bg-white text-center font-medium",
+                className: "sm:text-md min-w-[80px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2403,8 +2431,9 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
+                name: "usd amount",
                 value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
-                className: "bg-white text-center font-medium",
+                className: "sm:text-md min-w-[80px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2452,7 +2481,7 @@ var SplitBlock = (props) => {
     initWallet(spreePayConfig?.pointsChain);
   }, [spreePayConfig?.pointsChain, initWallet]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-sm font-medium text-black", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: "Available" }),
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
@@ -2471,6 +2500,7 @@ var Points = () => {
   const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -2485,7 +2515,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points
+        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
       }
     ),
     usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -3477,15 +3507,16 @@ var SpreePayInner = () => {
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
+  const _accessToken = env.accessToken ?? accessToken;
   const slapiFetcher = (0, import_react18.useMemo)(() => {
-    if (accessToken || env.accessToken) {
+    if (_accessToken) {
       return registerApi({
-        accessToken: env.accessToken || accessToken,
+        accessToken: _accessToken,
         tenantId,
         baseUrl: staticConfig.slapiUrl
       });
     }
-  }, [env.accessToken, staticConfig, tenantId, accessToken]);
+  }, [_accessToken, staticConfig, tenantId]);
   const getContent = () => {
     if (isChecking) {
       return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex w-full flex-col", children: [
@@ -3503,7 +3534,7 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
       }
     );
   };

package/build/index.css

@@ -464,6 +464,9 @@
 .sl-spreepay .min-w-0 {
   min-width: calc(var(--spacing) * 0);
 }
+.sl-spreepay .min-w-\[80px\] {
+  min-width: 80px;
+}
 .sl-spreepay .flex-1 {
   flex: 1;
 }
@@ -511,9 +514,6 @@
 .sl-spreepay .items-center {
   align-items: center;
 }
-.sl-spreepay .items-start {
-  align-items: flex-start;
-}
 .sl-spreepay .justify-between {
   justify-content: space-between;
 }
@@ -535,6 +535,9 @@
 .sl-spreepay .gap-2 {
   gap: calc(var(--spacing) * 2);
 }
+.sl-spreepay .gap-2\.5 {
+  gap: calc(var(--spacing) * 2.5);
+}
 .sl-spreepay .gap-3 {
   gap: calc(var(--spacing) * 3);
 }
@@ -718,9 +721,15 @@
 .sl-spreepay .p-6 {
   padding: calc(var(--spacing) * 6);
 }
+.sl-spreepay .px-1 {
+  padding-inline: calc(var(--spacing) * 1);
+}
 .sl-spreepay .px-1\.5 {
   padding-inline: calc(var(--spacing) * 1.5);
 }
+.sl-spreepay .px-2 {
+  padding-inline: calc(var(--spacing) * 2);
+}
 .sl-spreepay .px-2\.5 {
   padding-inline: calc(var(--spacing) * 2.5);
 }
@@ -818,6 +827,10 @@
   --tw-leading: 34px;
   line-height: 34px;
 }
+.sl-spreepay .leading-\[60px\] {
+  --tw-leading: 60px;
+  line-height: 60px;
+}
 .sl-spreepay .leading-none {
   --tw-leading: 1;
   line-height: 1;
@@ -1463,11 +1476,32 @@
     justify-content: flex-end;
   }
 }
+.sl-spreepay .sm\:gap-2 {
+  @media (width >= 40rem) {
+    gap: calc(var(--spacing) * 2);
+  }
+}
+.sl-spreepay .sm\:gap-3 {
+  @media (width >= 40rem) {
+    gap: calc(var(--spacing) * 3);
+  }
+}
+.sl-spreepay .sm\:px-3 {
+  @media (width >= 40rem) {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+}
 .sl-spreepay .sm\:text-left {
   @media (width >= 40rem) {
     text-align: left;
   }
 }
+.sl-spreepay .sm\:text-sm {
+  @media (width >= 40rem) {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+}
 .sl-spreepay .md\:block {
   @media (width >= 48rem) {
     display: block;
@@ -1498,16 +1532,16 @@
     padding-bottom: calc(var(--spacing) * 7);
   }
 }
-.sl-spreepay .md\:text-sm {
+.sl-spreepay .md\:text-lg {
   @media (width >= 48rem) {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
   }
 }
-.sl-spreepay .md\:text-xl {
+.sl-spreepay .md\:text-sm {
   @media (width >= 48rem) {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 }
 .sl-spreepay .dark\:border-input {

package/build/index.d.cts

@@ -6,6 +6,8 @@ type SpreePayProps = {
     className?: string;
     isProcessing?: boolean;
     transactionFeePercentage?: number;
+    disabledPoints?: boolean;
+    topUpLink?: string;
 };
 
 declare const SpreePay: FC<SpreePayProps>;

package/build/index.d.ts

@@ -6,6 +6,8 @@ type SpreePayProps = {
     className?: string;
     isProcessing?: boolean;
     transactionFeePercentage?: number;
+    disabledPoints?: boolean;
+    topUpLink?: string;
 };
 
 declare const SpreePay: FC<SpreePayProps>;

package/build/index.js

@@ -4,7 +4,7 @@ import NiceModal7 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
 // package.json
-var version = "0.1.27";
+var version = "0.1.29";
 
 // src/context/SpreePayActionsContext.tsx
 import { createContext, useCallback, useContext, useRef, useState } from "react";
@@ -281,11 +281,12 @@ var getTransactionFee = (amount = 0, transactionFeePercentage) => {
 };
 
 // src/components/CheckoutButton.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var CheckoutButton = ({ isLoggedIn }) => {
-  const { appProps } = useStaticConfig();
+  const { appProps, staticConfig } = useStaticConfig();
   const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
   const { spreePayConfig } = useSpreePayConfig();
+  const { env } = useSpreePayEnv();
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
   const { splitAmount, type, method } = selectedPaymentMethod;
   const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
@@ -320,7 +321,7 @@ var CheckoutButton = ({ isLoggedIn }) => {
       /* @__PURE__ */ jsx4("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
       "."
     ] }) }),
-    onProcess && /* @__PURE__ */ jsx4(
+    isLoggedIn ? /* @__PURE__ */ jsx4(Fragment, { children: onProcess && /* @__PURE__ */ jsx4(
       "button",
       {
         disabled: isDisabled,
@@ -328,6 +329,13 @@ var CheckoutButton = ({ isLoggedIn }) => {
         className: "bg-primary h-[60px] w-full cursor-pointer text-xl font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
         children: getCheckoutContent()
       }
+    ) }) : /* @__PURE__ */ jsx4(
+      "a",
+      {
+        href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/logout?client_id=${staticConfig.keycloakClientId}&post_logout_redirect_uri=${window.location.origin}${window.location.pathname}`,
+        className: "bg-primary h-[60px] w-full cursor-pointer text-center text-xl leading-[60px] font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
+        children: "Login"
+      }
     )
   ] });
 };
@@ -1083,7 +1091,7 @@ function Label({ className, ...props }) {
 }
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var style = {
   base: {
     fontSize: "16px",
@@ -1141,7 +1149,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       setCardError("An error occurred while processing your card. Please try again.");
     }
   };
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
     /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-1", children: [
       /* @__PURE__ */ jsx12(
         CardNumberElement,
@@ -1189,7 +1197,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var StripeWrapper = (props) => {
   const stripePromise = useMemo2(() => loadStripe(props.publicKey), [props.publicKey]);
   return /* @__PURE__ */ jsx13(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx13(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
@@ -1212,7 +1220,7 @@ var CreditCard = () => {
   };
   return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-baseline gap-4", children: [
     /* @__PURE__ */ jsx13("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
-    !showForm && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    !showForm && /* @__PURE__ */ jsxs8(Fragment3, { children: [
       /* @__PURE__ */ jsx13(
         CardsList,
         {
@@ -1268,24 +1276,43 @@ import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var PointsSwitch = (props) => {
   const { disabled = false, value, onChange, message } = props;
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
   const { balance } = useSlapiBalance();
   const id = useId2();
   return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx15(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-        /* @__PURE__ */ jsxs9(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-          "Use Points ",
-          /* @__PURE__ */ jsx15("span", { className: "text-xs font-medium", children: "Optional" })
-        ] })
+        /* @__PURE__ */ jsxs9(
+          Label,
+          {
+            htmlFor: id,
+            className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-semibold text-black sm:flex-row sm:gap-2 md:text-lg",
+            children: [
+              "Use Points ",
+              /* @__PURE__ */ jsx15("span", { className: "text-xs font-medium", children: "Optional" })
+            ]
+          }
+        )
       ] }),
-      balance?.availablePoints ? /* @__PURE__ */ jsxs9("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-        formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
-        " ",
-        !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio) })
-      ] }) : null
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2.5", children: [
+        balance?.availablePoints ? /* @__PURE__ */ jsxs9("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+          formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+        ] }) : null,
+        Boolean(appProps.topUpLink) && /* @__PURE__ */ jsx15(
+          "a",
+          {
+            className: "bg-primary cursor-pointer rounded-full px-2 py-1.5 text-xs font-medium text-white",
+            rel: "noreferrer",
+            target: "_blank",
+            href: appProps.topUpLink,
+            children: "Top Up"
+          }
+        )
+      ] })
     ] }),
-    message && /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+    message && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
       /* @__PURE__ */ jsx15("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx15(
         "path",
         {
@@ -2331,16 +2358,17 @@ var PointsSelector = (props) => {
               children: /* @__PURE__ */ jsx24("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx24("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
             }
           ),
-          /* @__PURE__ */ jsx24("div", { className: "flex h-full w-full items-center justify-between gap-3 px-3", children })
+          /* @__PURE__ */ jsx24("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
         ] }),
-        isSelected && /* @__PURE__ */ jsx24("div", { className: "px-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex justify-between gap-3", children: [
+        isSelected && /* @__PURE__ */ jsx24("div", { className: "px-2 pt-6 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
           /* @__PURE__ */ jsxs12("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
             /* @__PURE__ */ jsx24(
               Input,
               {
                 readOnly: true,
+                name: "points amount",
                 value: Math.round(splitTokens),
-                className: "bg-white text-center font-medium",
+                className: "sm:text-md min-w-[80px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2363,8 +2391,9 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
+                name: "usd amount",
                 value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
-                className: "bg-white text-center font-medium",
+                className: "sm:text-md min-w-[80px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2412,7 +2441,7 @@ var SplitBlock = (props) => {
     initWallet(spreePayConfig?.pointsChain);
   }, [spreePayConfig?.pointsChain, initWallet]);
   return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
-    /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs13("p", { className: "text-sm font-medium text-black", children: [
+    /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs13("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
       /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: "Available" }),
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
@@ -2425,12 +2454,13 @@ var SplitBlock = (props) => {
 };
 
 // src/components/CreditCardTab/Points/Points.tsx
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var Points = () => {
   const [usePoints, setUsePoints] = useState10(false);
   const [selectedPointsType, setSelectedPointsType] = useState10(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -2438,14 +2468,14 @@ var Points = () => {
       setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
     }
   };
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
     /* @__PURE__ */ jsx26(
       PointsSwitch,
       {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points
+        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
       }
     ),
     usePoints && /* @__PURE__ */ jsx26(
@@ -2696,11 +2726,11 @@ var useCryptoPayment = () => {
 
 // src/components/CryptoTab/Crypto/ConnectButton.tsx
 import { ConnectButton as RainbowButton } from "@rainbow-me/rainbowkit";
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var ConnectButton = () => {
   return /* @__PURE__ */ jsx28(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
     if (!mounted) return null;
-    return /* @__PURE__ */ jsx28(Fragment4, { children: (() => {
+    return /* @__PURE__ */ jsx28(Fragment5, { children: (() => {
       if (!mounted || !account || !chain) {
         return /* @__PURE__ */ jsx28(
           "button",
@@ -3014,7 +3044,7 @@ var useBaseTokens = () => {
 };
 
 // src/modals/CryptoSelectModal.tsx
-import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 var CryptoSelectModal = NiceModal4.create(() => {
   const modal = useModal2();
   const { isLoading, error, erc20Balances } = useBaseERC20Token();
@@ -3078,7 +3108,7 @@ var CryptoSelectModal = NiceModal4.create(() => {
             },
             nativeBalance.symbol
           ),
-          isLoading && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+          isLoading && /* @__PURE__ */ jsxs19(Fragment6, { children: [
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
@@ -3104,7 +3134,7 @@ var CryptoSelectModal = NiceModal4.create(() => {
         ] }),
         /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
         /* @__PURE__ */ jsxs19("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
-          tokensIsLoading && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+          tokensIsLoading && /* @__PURE__ */ jsxs19(Fragment6, { children: [
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
@@ -3437,15 +3467,16 @@ var SpreePayInner = () => {
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
+  const _accessToken = env.accessToken ?? accessToken;
   const slapiFetcher = useMemo9(() => {
-    if (accessToken || env.accessToken) {
+    if (_accessToken) {
       return registerApi({
-        accessToken: env.accessToken || accessToken,
+        accessToken: _accessToken,
         tenantId,
         baseUrl: staticConfig.slapiUrl
       });
     }
-  }, [env.accessToken, staticConfig, tenantId, accessToken]);
+  }, [_accessToken, staticConfig, tenantId]);
   const getContent = () => {
     if (isChecking) {
       return /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col", children: [
@@ -3463,7 +3494,7 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ jsx43(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx43(NiceModal7.Provider, { children: /* @__PURE__ */ jsx43(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
+        children: /* @__PURE__ */ jsx43(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx43(NiceModal7.Provider, { children: /* @__PURE__ */ jsx43(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
       }
     );
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",