@superlogic/spree-pay 0.1.27 → 0.1.28

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.28";
 
 // src/context/SpreePayActionsContext.tsx
 var import_react = require("react");
@@ -1308,24 +1308,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 +2390,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-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2403,8 +2423,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-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2452,7 +2473,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 +2492,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 +2507,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)(

package/build/index.css

@@ -464,6 +464,9 @@
 .sl-spreepay .min-w-0 {
   min-width: calc(var(--spacing) * 0);
 }
+.sl-spreepay .min-w-\[75px\] {
+  min-width: 75px;
+}
 .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);
 }
@@ -1463,11 +1472,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 +1528,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.28";
 
 // src/context/SpreePayActionsContext.tsx
 import { createContext, useCallback, useContext, useRef, useState } from "react";
@@ -1268,24 +1268,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 +2350,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-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2363,8 +2383,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-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2412,7 +2433,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),
@@ -2431,6 +2452,7 @@ var Points = () => {
   const [selectedPointsType, setSelectedPointsType] = useState10(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -2445,7 +2467,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__ */ jsx26(

package/package.json

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