@superlogic/spree-pay 0.3.1 → 0.3.3

package/README.md

@@ -18,7 +18,7 @@ import { useCapture3DS } from '@superlogic/spree-pay';
 import '@superlogic/spree-pay/styles.css';
 
 const spreeEnv = {
-  tenantId: 'moca' as const, // Keep moca for crypto payments on BASE network
+  tenantId: 'your-tenant-id', // Tenant identifier provided during onboarding
   environment: 'dev' as const,
   redirect3dsURI: '/3ds', // Any valid URI in your app that captures 3ds redirect
   ssoPageURI: '/silent-check-sso.html', // Any valid URI in your app that will handle Keycloak SSO (example below)
@@ -115,7 +115,7 @@ type SpreePayProps = {
 ```typescript
 type ENV = {
   environment: 'dev' | 'stg' | 'prod'; // Environment for API endpoints and logging
-  tenantId: 'bookit' | 'moca' | 'qiibee' | 'umhp' | 'cdc'; // Tenant identifier
+  tenantId: string; // Tenant identifier
   ssoPageURI: string; // Path to Keycloak SSO page (e.g., '/silent-check-sso.html')
   redirect3dsURI: string; // Path to 3DS redirect handler (e.g., '/3ds')
   accessToken?: string; // Optional: provide pre-authenticated token to skip Keycloak SSO
@@ -213,24 +213,18 @@ enum LogLevel {
 
 ## Theme Customization
 
-The widget uses CSS variables for theming. You can override the default theme by wrapping the `<SpreePay>` component in a container with custom CSS variables:
+The widget uses CSS variables for theming. The `<SpreePay>` component renders with the `sl-spreepay` class, so you can override theme variables by targeting that class in your CSS:
 
-```tsx
-<div
-  style={
-    {
-      '--primary': '#your-color',
-      '--accent': '#your-accent',
-      '--s-default': '#your-surface-color',
-      // ... see packages/spree-pay/src/styles/globals.css for all 54 variables
-    } as React.CSSProperties
-  }
->
-  <SpreePay {...props} />
-</div>
+```css
+.sl-spreepay {
+  --primary: #your-color;
+  --accent: #your-accent;
+  --s-default: #your-surface-color;
+  /* ... see packages/spree-pay/src/styles/globals.css for all 58 variables */
+}
 ```
 
-All available CSS variables are documented in `packages/spree-pay/src/styles/globals.css:21-81`.
+All available CSS variables are documented in `packages/spree-pay/src/styles/globals.css:22-82`.
 
 ## Keycloak SSO page example (/silent-check-sso.html)
 

package/build/{CryptoComTab-ZJ3DSA4L.js → CryptoComTab-OW42JVO5.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-FKUENBLV.js";
+} from "./chunk-BSDEX662.js";
 import {
   InfoBanner,
   Legal,
@@ -12,7 +12,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-NIRDNVFQ.js";
+} from "./chunk-6RZ4XF7B.js";
 
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";

package/build/{CryptoTab-FZMTI6KN.js → CryptoTab-NTHHA7YO.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-BX2LOL6J.js";
+} from "./chunk-ZPFV3WW6.js";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-NIRDNVFQ.js";
+} from "./chunk-6RZ4XF7B.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";

package/build/{chunk-NIRDNVFQ.js → chunk-6RZ4XF7B.js}

@@ -9,7 +9,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 
 // package.json
-var version = "0.3.1";
+var version = "0.3.3";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -256,8 +256,8 @@ var config = {
       keycloakUrl: "https://auth.dev.umusicpassport.com"
     },
     cdc: {
-      slapiUrl: "https://slapi.dev.superlogic.com",
-      keycloakUrl: "https://auth.dev02.superlogic.com"
+      slapiUrl: "https://slapi.dev.travel.crypto.superlogic.com",
+      keycloakUrl: "https://auth.dev.travel.crypto.superlogic.com"
     },
     tria: {
       slapiUrl: "https://slapi.dev.tria.superlogic.com",
@@ -282,8 +282,8 @@ var config = {
       keycloakUrl: "https://auth.stg.umusicpassport.com"
     },
     cdc: {
-      slapiUrl: "https://slapi.stg.superlogic.com",
-      keycloakUrl: "https://auth.stg02.superlogic.com"
+      slapiUrl: "https://slapi.stg.travel.crypto.superlogic.com",
+      keycloakUrl: "https://auth.stg.travel.crypto.superlogic.com"
     },
     tria: {
       slapiUrl: "https://slapi.stg.tria.superlogic.com",
@@ -308,12 +308,12 @@ var config = {
       keycloakUrl: "https://auth.umusicpassport.com"
     },
     cdc: {
-      slapiUrl: "https://slapi.superlogic.com",
-      keycloakUrl: "https://auth.superlogic.com"
+      slapiUrl: "https://slapi.travel.crypto.com",
+      keycloakUrl: "https://auth.travel.crypto.com"
     },
     tria: {
-      slapiUrl: "https://auth.travel.tria.so",
-      keycloakUrl: "https://slapi.travel.tria.so"
+      slapiUrl: "https://slapi.travel.tria.so",
+      keycloakUrl: "https://auth.travel.tria.so"
     }
   }
 };

package/build/{chunk-FKUENBLV.js → chunk-BSDEX662.js}

@@ -2,7 +2,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle
-} from "./chunk-NIRDNVFQ.js";
+} from "./chunk-6RZ4XF7B.js";
 
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";

package/build/{chunk-BX2LOL6J.js → chunk-ZPFV3WW6.js}

@@ -6,7 +6,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-NIRDNVFQ.js";
+} from "./chunk-6RZ4XF7B.js";
 
 // src/components/common/PointsSwitch.tsx
 import { useId } from "react";
@@ -234,15 +234,18 @@ var CheckoutButton = ({ isLoggedIn }) => {
     }
     return "Checkout";
   };
-  const checkoutClass = "text-(--inverse) h-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
-  return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-4 bg-(--s-default) p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
+  const checkoutClass = "text-(--inverse) h-14 leading-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
+  return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-4 p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
     /* @__PURE__ */ jsx5(Legal, {}),
-    isLoggedIn ? /* @__PURE__ */ jsx5(Fragment, { children: onProcess && /* @__PURE__ */ jsx5("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ jsx5(
+    isLoggedIn ? /* @__PURE__ */ jsx5(Fragment, { children: onProcess && /* @__PURE__ */ jsx5("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ jsxs3(
       "a",
       {
         href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${env.keycloakClientId ?? "oneof-next"}&response_type=code&redirect_uri=${window.location.href}`,
         className: checkoutClass,
-        children: "Log in / Sign up for an AIR account"
+        children: [
+          "Log in / Sign up",
+          env.tenantId === "moca" ? " for an AIR account" : ""
+        ]
       }
     ),
     /* @__PURE__ */ jsxs3("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [

package/build/index.cjs

@@ -68,7 +68,7 @@ var init_payments = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.3.1";
+    version = "0.3.3";
   }
 });
 
@@ -319,8 +319,8 @@ var init_config = __esm({
           keycloakUrl: "https://auth.dev.umusicpassport.com"
         },
         cdc: {
-          slapiUrl: "https://slapi.dev.superlogic.com",
-          keycloakUrl: "https://auth.dev02.superlogic.com"
+          slapiUrl: "https://slapi.dev.travel.crypto.superlogic.com",
+          keycloakUrl: "https://auth.dev.travel.crypto.superlogic.com"
         },
         tria: {
           slapiUrl: "https://slapi.dev.tria.superlogic.com",
@@ -345,8 +345,8 @@ var init_config = __esm({
           keycloakUrl: "https://auth.stg.umusicpassport.com"
         },
         cdc: {
-          slapiUrl: "https://slapi.stg.superlogic.com",
-          keycloakUrl: "https://auth.stg02.superlogic.com"
+          slapiUrl: "https://slapi.stg.travel.crypto.superlogic.com",
+          keycloakUrl: "https://auth.stg.travel.crypto.superlogic.com"
         },
         tria: {
           slapiUrl: "https://slapi.stg.tria.superlogic.com",
@@ -371,12 +371,12 @@ var init_config = __esm({
           keycloakUrl: "https://auth.umusicpassport.com"
         },
         cdc: {
-          slapiUrl: "https://slapi.superlogic.com",
-          keycloakUrl: "https://auth.superlogic.com"
+          slapiUrl: "https://slapi.travel.crypto.com",
+          keycloakUrl: "https://auth.travel.crypto.com"
         },
         tria: {
-          slapiUrl: "https://auth.travel.tria.so",
-          keycloakUrl: "https://slapi.travel.tria.so"
+          slapiUrl: "https://slapi.travel.tria.so",
+          keycloakUrl: "https://auth.travel.tria.so"
         }
       }
     };
@@ -1261,15 +1261,18 @@ var init_CheckoutButton = __esm({
         }
         return "Checkout";
       };
-      const checkoutClass = "text-(--inverse) h-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-4 bg-(--s-default) p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
+      const checkoutClass = "text-(--inverse) h-14 leading-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-4 p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Legal, {}),
-        isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "a",
           {
             href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${env.keycloakClientId ?? "oneof-next"}&response_type=code&redirect_uri=${window.location.href}`,
             className: checkoutClass,
-            children: "Log in / Sign up for an AIR account"
+            children: [
+              "Log in / Sign up",
+              env.tenantId === "moca" ? " for an AIR account" : ""
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
@@ -3379,7 +3382,7 @@ var CreditCard = () => {
         {
           onClick: () => setShowForm(true),
           disabled: !spreePayConfig?.stripePublicKey,
-          className: "text-md text-(--brand-primary) hover:underline",
+          className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )

package/build/index.css

@@ -844,6 +844,10 @@
   --tw-leading: calc(var(--spacing) * 9);
   line-height: calc(var(--spacing) * 9);
 }
+.sl-spreepay .leading-14 {
+  --tw-leading: calc(var(--spacing) * 14);
+  line-height: calc(var(--spacing) * 14);
+}
 .sl-spreepay .leading-\[1\.3\] {
   --tw-leading: 1.3;
   line-height: 1.3;
@@ -1315,6 +1319,11 @@
     color: var(--disabled);
   }
 }
+.sl-spreepay .disabled\:no-underline {
+  &:disabled {
+    text-decoration-line: none;
+  }
+}
 .sl-spreepay .disabled\:opacity-50 {
   &:disabled {
     opacity: 50%;

package/build/index.d.cts

@@ -14,13 +14,11 @@ declare const SpreePay: FC<SpreePayProps>;
 
 declare const useCapture3DS: (searchParams: Record<string, string | null>) => void;
 
-type TenantId = 'bookit' | 'moca' | 'qiibee' | 'umhp' | 'cdc' | 'tria';
-
 type Environment = 'dev' | 'stg' | 'prod';
 type ENV = {
     environment: Environment;
     ssoPageURI: string;
-    tenantId: TenantId;
+    tenantId: string;
     redirect3dsURI: string;
     accessToken?: string;
     useWeb3Points?: boolean;

package/build/index.d.ts

@@ -14,13 +14,11 @@ declare const SpreePay: FC<SpreePayProps>;
 
 declare const useCapture3DS: (searchParams: Record<string, string | null>) => void;
 
-type TenantId = 'bookit' | 'moca' | 'qiibee' | 'umhp' | 'cdc' | 'tria';
-
 type Environment = 'dev' | 'stg' | 'prod';
 type ENV = {
     environment: Environment;
     ssoPageURI: string;
-    tenantId: TenantId;
+    tenantId: string;
     redirect3dsURI: string;
     accessToken?: string;
     useWeb3Points?: boolean;

package/build/index.js

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-BX2LOL6J.js";
+} from "./chunk-ZPFV3WW6.js";
 import {
   Iframe3ds
-} from "./chunk-FKUENBLV.js";
+} from "./chunk-BSDEX662.js";
 import {
   InfoBanner,
   LogLevel,
@@ -31,7 +31,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-NIRDNVFQ.js";
+} from "./chunk-6RZ4XF7B.js";
 
 // src/SpreePay.tsx
 import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo7, useState as useState10 } from "react";
@@ -868,7 +868,7 @@ var CreditCard = () => {
         {
           onClick: () => setShowForm(true),
           disabled: !spreePayConfig?.stripePublicKey,
-          className: "text-md text-(--brand-primary) hover:underline",
+          className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )
@@ -2190,9 +2190,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-FZMTI6KN.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-NTHHA7YO.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-ZJ3DSA4L.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-OW42JVO5.js").then((module) => ({ default: module.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
   /* @__PURE__ */ jsx18("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),

package/package.json

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

package/src/styles/globals.css

@@ -16,7 +16,6 @@
 @custom-variant dark (&:is(.dark *));
 
 /* Default theme values in :root for standalone use.
-   These match the moca/bookit theme from live-tickets.
    When used inside live-tickets, these are overridden by the host's :root variables. */
 :root {
   /* color / text-icons */