@superlogic/spree-pay 0.1.28 → 0.1.30

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.28";
+var version = "0.1.30";
 
 // 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/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
+        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: "Log in / Sign up for an AIR account"
+      }
     )
   ] });
 };
@@ -1344,7 +1352,7 @@ var PointsSwitch = (props) => {
         )
       ] })
     ] }),
-    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: [
+    message && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex 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",
         {
@@ -2370,6 +2378,8 @@ var PointsSelector = (props) => {
   const handleCommit = (value) => {
     setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
   };
+  const pointsValue = String(Math.round(splitTokens));
+  const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "button",
     {
@@ -2393,14 +2403,15 @@ var PointsSelector = (props) => {
           /* @__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-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.jsxs)("div", { className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Input,
               {
                 readOnly: true,
                 name: "points amount",
-                value: Math.round(splitTokens),
-                className: "sm:text-md min-w-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
+                value: pointsValue,
+                className: "sm:text-md min-w-[50px] bg-white px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                style: { width: `${pointsValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2418,14 +2429,15 @@ var PointsSelector = (props) => {
               step
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Input,
               {
                 readOnly: true,
                 name: "usd amount",
-                value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
-                className: "sm:text-md min-w-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
+                value: usdValue,
+                className: "sm:text-md min-w-[50px] bg-white px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                style: { width: `${usdValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -3499,15 +3511,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: [
@@ -3525,7 +3538,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

@@ -449,9 +449,6 @@
 .sl-spreepay .w-full {
   width: 100%;
 }
-.sl-spreepay .max-w-\[100px\] {
-  max-width: 100px;
-}
 .sl-spreepay .max-w-\[540px\] {
   max-width: 540px;
 }
@@ -464,8 +461,8 @@
 .sl-spreepay .min-w-0 {
   min-width: calc(var(--spacing) * 0);
 }
-.sl-spreepay .min-w-\[75px\] {
-  min-width: 75px;
+.sl-spreepay .min-w-\[50px\] {
+  min-width: 50px;
 }
 .sl-spreepay .flex-1 {
   flex: 1;
@@ -827,6 +824,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;
@@ -1462,6 +1463,11 @@
     max-width: var(--container-lg);
   }
 }
+.sl-spreepay .sm\:min-w-\[100px\] {
+  @media (width >= 40rem) {
+    min-width: 100px;
+  }
+}
 .sl-spreepay .sm\:flex-row {
   @media (width >= 40rem) {
     flex-direction: row;
@@ -1482,6 +1488,11 @@
     gap: calc(var(--spacing) * 3);
   }
 }
+.sl-spreepay .sm\:px-2 {
+  @media (width >= 40rem) {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+}
 .sl-spreepay .sm\:px-3 {
   @media (width >= 40rem) {
     padding-inline: calc(var(--spacing) * 3);

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.28";
+var version = "0.1.30";
 
 // 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/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
+        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: "Log in / Sign up for an AIR account"
+      }
     )
   ] });
 };
@@ -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,
         {
@@ -1304,7 +1312,7 @@ var PointsSwitch = (props) => {
         )
       ] })
     ] }),
-    message && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+    message && /* @__PURE__ */ jsxs9("div", { className: "flex 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",
         {
@@ -2330,6 +2338,8 @@ var PointsSelector = (props) => {
   const handleCommit = (value) => {
     setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
   };
+  const pointsValue = String(Math.round(splitTokens));
+  const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
   return /* @__PURE__ */ jsxs12(
     "button",
     {
@@ -2353,14 +2363,15 @@ var PointsSelector = (props) => {
           /* @__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-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__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ jsx24(
               Input,
               {
                 readOnly: true,
                 name: "points amount",
-                value: Math.round(splitTokens),
-                className: "sm:text-md min-w-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
+                value: pointsValue,
+                className: "sm:text-md min-w-[50px] bg-white px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                style: { width: `${pointsValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2378,14 +2389,15 @@ var PointsSelector = (props) => {
               step
             }
           ) }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ jsx24(
               Input,
               {
                 readOnly: true,
                 name: "usd amount",
-                value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
-                className: "sm:text-md min-w-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
+                value: usdValue,
+                className: "sm:text-md min-w-[50px] bg-white px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                style: { width: `${usdValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2446,7 +2458,7 @@ 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);
@@ -2460,7 +2472,7 @@ var Points = () => {
       setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
     }
   };
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
     /* @__PURE__ */ jsx26(
       PointsSwitch,
       {
@@ -2718,11 +2730,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",
@@ -3036,7 +3048,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();
@@ -3100,7 +3112,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" })
@@ -3126,7 +3138,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" })
@@ -3459,15 +3471,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: [
@@ -3485,7 +3498,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.28",
+  "version": "0.1.30",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",