@superlogic/spree-pay 0.1.9 → 0.1.11

package/build/index.cjs

@@ -211,8 +211,8 @@ var CheckoutButton = ({ isProcessing, amount, onCheckout }) => {
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
   const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing;
   const isUSD = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-col overflow-hidden rounded-[24px] border border-black/25 bg-white text-xs font-medium", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-7 py-5", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-[#798B95]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-col overflow-hidden rounded-3xl border border-black/25 bg-white text-xs font-medium", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-7 py-5", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-black/50", children: [
       "By clicking on the button below I acknowledge that I have read and accepted the",
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Property Policies" }),
@@ -251,7 +251,7 @@ var SpreeLegal = () => {
         d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-xs text-[#798B95]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-xs text-black/50", children: [
       "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: "/", children: "Learn more" }),
@@ -316,7 +316,8 @@ function Dialog({ ...props }) {
 }
 function DialogPortal({ ...props }) {
   const container = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: container ?? void 0, "data-slot": "dialog-portal", ...props });
+  const safeContainer = container && document.body.contains(container) ? container : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -527,14 +528,14 @@ var SlapiPaymentService = {
   //   return coin.balance > outAmountNumber;
   // },
   createPayment: (params) => {
-    const { type, hash } = params;
+    const { type, hash, metadata, capture = false } = params;
     let reqParams;
     if (type === "CRYPTO" /* CRYPTO */) {
       reqParams = { type, hash, crypto: params.crypto };
     } else {
       reqParams = { type, hash, card: params.card };
     }
-    return slapiApi.post("/v1/payments", { ...reqParams, capture: false }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments", { ...reqParams, capture, metadata }).then((data) => ({ data }));
   },
   baseVerify: ({ id, txHash }) => {
     return slapiApi.post(`/v1/base-transactions/transactions/${id}/verify`, { txHash });
@@ -561,7 +562,13 @@ var SlapiPaymentService = {
 };
 
 // src/services/cardPayment.ts
-var cardPayment = async ({ card, hash, redirect3dsURI }) => {
+var cardPayment = async ({
+  card,
+  hash,
+  redirect3dsURI,
+  metadata,
+  capture
+}) => {
   let cardId = card.id;
   if ("token" in card) {
     const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
@@ -570,6 +577,8 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
   const { data: paymentResData } = await SlapiPaymentService.createPayment({
     hash,
     type: "CREDIT_CARD" /* CREDIT_CARD */,
+    metadata,
+    capture,
     card: { cardId, returnUrl: `${window.location.origin}${redirect3dsURI}` }
   });
   if (paymentResData.redirectUrl) {
@@ -578,15 +587,17 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
       const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
       return {
         status: validateData.status,
-        txHash: null,
-        paymentId: paymentResData.id
+        paymentId: paymentResData.id,
+        txId: paymentResData.txId,
+        txHash: null
       };
     }
   }
   return {
     status: paymentResData.status,
-    txHash: null,
-    paymentId: paymentResData.id
+    paymentId: paymentResData.id,
+    txId: paymentResData.txId,
+    txHash: null
   };
 };
 
@@ -707,7 +718,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-sm font-medium text-[#798B95]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-sm font-medium text-black/50", children: [
               "Ending in ",
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
             ] }),
@@ -999,8 +1010,8 @@ var CreditCardTab = () => {
       try {
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
           const res = await cardPayment({
+            ...data,
             card: selectedPaymentMethod.method,
-            hash: data.hash,
             redirect3dsURI: env.redirect3dsURI
           });
           if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
@@ -1160,7 +1171,7 @@ var useCryptoPayment = () => {
   const { data: walletClient } = (0, import_wagmi.useWalletClient)();
   const config2 = (0, import_wagmi.useConfig)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const cryptoPayment = async ({ hash }) => {
+  const cryptoPayment = async (params) => {
     if (!walletClient) {
       throw new Error("Wallet not connected");
     }
@@ -1194,8 +1205,8 @@ var useCryptoPayment = () => {
       }
     }
     const paymentRes = await SlapiPaymentService.createPayment({
+      ...params,
       type: "CRYPTO" /* CRYPTO */,
-      hash,
       crypto: {
         token: TOKEN,
         publicKey: walletClient.account.address,
@@ -1213,7 +1224,8 @@ var useCryptoPayment = () => {
     const res = await SlapiPaymentService.baseVerify({ id: paymentRes.data.txId, txHash });
     return {
       txHash,
-      paymentId: paymentRes.data.txId,
+      paymentId: paymentRes.data.id,
+      txId: paymentRes.data.txId,
       status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */
     };
   };
@@ -1231,7 +1243,7 @@ var ConnectButton = () => {
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "button",
           {
-            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium",
+            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-black",
             onClick: openConnectModal,
             children: "Connect a Wallet"
           }
@@ -1250,7 +1262,7 @@ var ConnectButton = () => {
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "button",
         {
-          className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium",
+          className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium text-black",
           onClick: openAccountModal,
           children: [
             chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
@@ -1495,7 +1507,7 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
           nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
             "button",
             {
-              className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100",
+              className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100",
               onClick: () => handleSelect(nativeBalance),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -1524,7 +1536,7 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
             return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "button",
               {
-                className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
+                className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
                 onClick: () => handleSelect(coin),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -1570,10 +1582,10 @@ var SelectedCoin = (props) => {
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
         Icon,
         !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "font-semibold", children: coin }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "font-semibold text-black", children: coin }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-xs font-medium text-[#798B95]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
         "Wallet balance ",
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-black", children: balance })
       ] })
@@ -1592,7 +1604,7 @@ var Crypto = () => {
   const handlePay = (0, import_react8.useCallback)(
     async (data) => {
       try {
-        const res = await cryptoPayment({ hash: data.hash });
+        const res = await cryptoPayment(data);
         if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
           return Promise.resolve(res);
         }
@@ -1718,7 +1730,7 @@ var TabButtons = (props) => {
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Tabs = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
@@ -1849,7 +1861,7 @@ var envConfig = {
 var SpreePay = ({ className, ...rest }) => {
   const rootRef = (0, import_react10.useRef)(null);
   const [portalEl, setPortalEl] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     if (!rootRef.current) return;
     const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
@@ -1858,11 +1870,11 @@ var SpreePay = ({ className, ...rest }) => {
   const environment = env?.environment || "dev";
   const tenantId = env?.tenantId || "bookit";
   const { isChecking, accessToken, error } = useKeycloakSSO({
-    realm: env.tenantId,
+    realm: tenantId,
     url: envConfig[environment][tenantId].keyklockUrl,
     clientId: envConfig[environment][tenantId].keyklockClientId,
-    ssoPageURI: env.ssoPageURI,
-    enabled: !env.accessToken
+    ssoPageURI: env?.ssoPageURI,
+    enabled: !env?.accessToken
   });
   const slapiFetcher = (0, import_react10.useMemo)(() => {
     if (accessToken || env.accessToken) {
@@ -1873,18 +1885,17 @@ var SpreePay = ({ className, ...rest }) => {
       });
     }
   }, [env.accessToken, environment, tenantId, accessToken]);
-  if (isChecking) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-center text-sm", children: "Loading..." }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-full text-center text-sm", children: [
-      "Error: ",
-      error.message
-    ] }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sl-spreepay__portal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const getContent = () => {
+    if (isChecking) {
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-center text-sm", children: "Loading..." });
+    }
+    if (error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-full text-center text-sm", children: [
+        "Error: ",
+        error.message
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_swr4.SWRConfig,
       {
         value: {
@@ -1895,7 +1906,11 @@ var SpreePay = ({ className, ...rest }) => {
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SpreePayContent, { ...rest }) }) })
       }
-    )
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sl-spreepay__portal" }),
+    getContent()
   ] });
 };