@superlogic/spree-pay 0.1.28 → 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.28";
+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"
+      }
     )
   ] });
 };
@@ -2400,7 +2408,7 @@ var PointsSelector = (props) => {
                 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",
+                className: "sm:text-md min-w-[80px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2425,7 +2433,7 @@ var PointsSelector = (props) => {
                 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",
+                className: "sm:text-md min-w-[80px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -3499,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: [
@@ -3525,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,8 +464,8 @@
 .sl-spreepay .min-w-0 {
   min-width: calc(var(--spacing) * 0);
 }
-.sl-spreepay .min-w-\[75px\] {
-  min-width: 75px;
+.sl-spreepay .min-w-\[80px\] {
+  min-width: 80px;
 }
 .sl-spreepay .flex-1 {
   flex: 1;
@@ -827,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;

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.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,
         {
@@ -2360,7 +2368,7 @@ var PointsSelector = (props) => {
                 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",
+                className: "sm:text-md min-w-[80px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2385,7 +2393,7 @@ var PointsSelector = (props) => {
                 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",
+                className: "sm:text-md min-w-[80px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2446,7 +2454,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 +2468,7 @@ var Points = () => {
       setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
     }
   };
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
     /* @__PURE__ */ jsx26(
       PointsSwitch,
       {
@@ -2718,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",
@@ -3036,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();
@@ -3100,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" })
@@ -3126,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" })
@@ -3459,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: [
@@ -3485,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.28",
+  "version": "0.1.29",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",