@superlogic/spree-pay 0.1.29 → 0.1.31

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.29";
+var version = "0.1.31";
 
 // src/context/SpreePayActionsContext.tsx
 var import_react = require("react");
@@ -372,9 +372,9 @@ var CheckoutButton = ({ isLoggedIn }) => {
     ) }) : /* @__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}`,
+        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: "Login"
+        children: "Log in / Sign up for an AIR account"
       }
     )
   ] });
@@ -961,6 +961,13 @@ var useCards = () => {
   };
 };
 
+// src/hooks/useSlapiBalance.ts
+var import_swr3 = __toESM(require("swr"), 1);
+var useSlapiBalance = () => {
+  const { data, isLoading, mutate } = (0, import_swr3.default)(`/v1/loyalty/accounts`);
+  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
+};
+
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 var import_react6 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
@@ -1280,13 +1287,6 @@ var import_react12 = require("react");
 // src/components/common/PointsSwitch.tsx
 var import_react7 = require("react");
 
-// src/hooks/useSlapiBalance.ts
-var import_swr3 = __toESM(require("swr"), 1);
-var useSlapiBalance = () => {
-  const { data, isLoading, mutate } = (0, import_swr3.default)(`/v1/loyalty/accounts`);
-  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
-};
-
 // src/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -1352,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",
         {
@@ -2378,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",
     {
@@ -2401,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-[80px] 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()
               }
             ),
@@ -2426,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-[80px] 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()
               }
             ),
@@ -2537,6 +2541,7 @@ var CreditCardTab = () => {
   const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
+  const { mutateBalance } = useSlapiBalance();
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments();
   const { pointsPayment } = usePointsPayment();
@@ -2562,6 +2567,7 @@ var CreditCardTab = () => {
       } finally {
         setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
         mutateCards();
+        mutateBalance();
       }
     },
     [
@@ -2572,7 +2578,8 @@ var CreditCardTab = () => {
       setSelectedPaymentMethod,
       cardPayment,
       splitPayment,
-      spreePayConfig
+      spreePayConfig,
+      mutateBalance
     ]
   );
   (0, import_react13.useEffect)(() => {

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-\[80px\] {
-  min-width: 80px;
+.sl-spreepay .min-w-\[50px\] {
+  min-width: 50px;
 }
 .sl-spreepay .flex-1 {
   flex: 1;
@@ -1466,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;
@@ -1486,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.29";
+var version = "0.1.31";
 
 // src/context/SpreePayActionsContext.tsx
 import { createContext, useCallback, useContext, useRef, useState } from "react";
@@ -332,9 +332,9 @@ var CheckoutButton = ({ isLoggedIn }) => {
     ) }) : /* @__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}`,
+        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: "Login"
+        children: "Log in / Sign up for an AIR account"
       }
     )
   ] });
@@ -921,6 +921,13 @@ var useCards = () => {
   };
 };
 
+// src/hooks/useSlapiBalance.ts
+import useSWR3 from "swr";
+var useSlapiBalance = () => {
+  const { data, isLoading, mutate } = useSWR3(`/v1/loyalty/accounts`);
+  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
+};
+
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 import { useMemo as useMemo2, useState as useState4 } from "react";
 import { Elements } from "@stripe/react-stripe-js";
@@ -1240,13 +1247,6 @@ import { useState as useState10 } from "react";
 // src/components/common/PointsSwitch.tsx
 import { useId as useId2 } from "react";
 
-// src/hooks/useSlapiBalance.ts
-import useSWR3 from "swr";
-var useSlapiBalance = () => {
-  const { data, isLoading, mutate } = useSWR3(`/v1/loyalty/accounts`);
-  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
-};
-
 // src/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -1312,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",
         {
@@ -2338,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",
     {
@@ -2361,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-[80px] 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()
               }
             ),
@@ -2386,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-[80px] 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()
               }
             ),
@@ -2497,6 +2501,7 @@ var CreditCardTab = () => {
   const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
+  const { mutateBalance } = useSlapiBalance();
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments();
   const { pointsPayment } = usePointsPayment();
@@ -2522,6 +2527,7 @@ var CreditCardTab = () => {
       } finally {
         setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
         mutateCards();
+        mutateBalance();
       }
     },
     [
@@ -2532,7 +2538,8 @@ var CreditCardTab = () => {
       setSelectedPaymentMethod,
       cardPayment,
       splitPayment,
-      spreePayConfig
+      spreePayConfig,
+      mutateBalance
     ]
   );
   useEffect7(() => {

package/package.json

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