@superlogic/spree-pay 0.1.42 → 0.2.1

package/build/chunk-2V675UEC.js

@@ -0,0 +1,56 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle
+} from "./chunk-RQX2IOTB.js";
+
+// src/modals/Iframe3ds.tsx
+import { useEffect } from "react";
+import NiceModal, { useModal } from "@ebay/nice-modal-react";
+
+// src/services/eventBus.ts
+var emit = (name, detail) => {
+  window.dispatchEvent(new CustomEvent(name, { detail }));
+};
+var on = (name, handler) => {
+  const callback = ((event) => handler(event.detail));
+  window.addEventListener(name, callback);
+  return () => window.removeEventListener(name, callback);
+};
+var bus = { emit, on };
+if (typeof window !== "undefined") {
+  window.SP_EVENT_BUS ||= bus;
+}
+
+// src/modals/Iframe3ds.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Iframe3ds = NiceModal.create(({ url }) => {
+  const modal = useModal();
+  useEffect(() => {
+    return bus.on("paymentIntent", (data) => {
+      modal.resolve(data.paymentIntent);
+      modal.remove();
+    });
+  }, [modal]);
+  const handleClose = () => {
+    modal.reject();
+    modal.remove();
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "hidden", children: "Payment Verification" }),
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: url,
+        id: "3ds-iframe",
+        title: "Payment Verificatio",
+        className: "h-[731px] w-full rounded-lg border-0"
+      }
+    )
+  ] }) });
+});
+Iframe3ds.displayName = "Iframe3ds";
+
+export {
+  Iframe3ds
+};

package/build/chunk-FGNS5H2Q.js

@@ -0,0 +1,278 @@
+import {
+  InfoBanner,
+  Legal,
+  cn,
+  useSpreePayConfig,
+  useSpreePayEnv,
+  useSpreePaymentMethod,
+  useStaticConfig
+} from "./chunk-RQX2IOTB.js";
+
+// src/components/common/PointsSwitch.tsx
+import { useId } from "react";
+
+// src/hooks/useSlapiBalance.ts
+import useSWR from "swr";
+var useSlapiBalance = () => {
+  const { data, isLoading, mutate } = useSWR(`/v1/loyalty/accounts`);
+  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
+};
+
+// src/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx } from "react/jsx-runtime";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium text-(--primary) select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/switch.tsx
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-(--s-brand) data-[state=unchecked]:bg-(--s-tertiary)",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx2(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block size-4 rounded-full bg-(--s-default) ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        }
+      )
+    }
+  );
+}
+
+// src/utils/format.ts
+var formatUSD = (amount, currency = "USD") => {
+  const formattedAmount = new Intl.NumberFormat("en-US", {
+    currency,
+    style: "currency",
+    maximumFractionDigits: 5,
+    minimumFractionDigits: 2
+  }).format(amount);
+  return formattedAmount;
+};
+var formatPoints = (amount, pointsTitle = "") => {
+  const formattedAmount = new Intl.NumberFormat("en-US", {
+    notation: "compact",
+    style: "decimal",
+    maximumFractionDigits: 1,
+    minimumFractionDigits: 0
+  }).format(amount);
+  return `${formattedAmount} ${pointsTitle}`;
+};
+var formatCoin = (amount, currency = "USDC") => {
+  const formattedAmount = new Intl.NumberFormat("en-US", {
+    style: "decimal",
+    maximumFractionDigits: 5,
+    minimumFractionDigits: 2
+  }).format(amount);
+  return `${formattedAmount} ${currency}`;
+};
+
+// src/components/common/PointsSwitch.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var PointsSwitch = (props) => {
+  const { disabled = false, value, onChange, message } = props;
+  const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
+  const { balance } = useSlapiBalance();
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx3(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+        /* @__PURE__ */ jsxs(
+          Label,
+          {
+            htmlFor: id,
+            className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-medium text-(--brand-primary) sm:flex-row sm:gap-2 md:text-[22px]",
+            children: [
+              "Use Points ",
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-(--tertiary)", children: "Optional" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+        balance?.availablePoints ? /* @__PURE__ */ jsxs("p", { className: "flex-1 text-right text-sm font-medium text-(--brand-primary)", children: [
+          formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx3("span", { className: "text-(--secondary)", children: ` \xB7 ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+        ] }) : null,
+        Boolean(appProps.topUpLink) && /* @__PURE__ */ jsx3(
+          "a",
+          {
+            className: "cursor-pointer rounded-full bg-(--s-brand) px-2 py-1.5 text-xs font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
+            rel: "noreferrer",
+            target: "_blank",
+            href: appProps.topUpLink,
+            children: "Top Up"
+          }
+        )
+      ] })
+    ] }),
+    message && /* @__PURE__ */ jsx3(InfoBanner, { type: "warning", message })
+  ] });
+};
+
+// src/ui/spinner.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Spinner = (props) => {
+  const { size = "md", className } = props;
+  const sizeClasses = {
+    xs: "size-4",
+    sm: "size-6",
+    md: "size-8",
+    lg: "size-12",
+    xl: "size-16"
+  };
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      className: cn(`${sizeClasses[size]} animate-spin text-(--tertiary)`, className),
+      viewBox: "0 0 64 64",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      children: [
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            d: "M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",
+            stroke: "currentColor",
+            strokeWidth: "5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            d: "M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",
+            stroke: "currentColor",
+            strokeWidth: "5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-(--brand-primary)"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/utils/split.ts
+var getSplitAmount = (amount, splitTokens, pointsConversionRatio) => {
+  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !pointsConversionRatio || !Number.isFinite(pointsConversionRatio)) {
+    return amount;
+  }
+  if (pointsConversionRatio <= 0) return amount;
+  const usdCoveredByPoints = splitTokens * pointsConversionRatio;
+  const remaining = amount - usdCoveredByPoints;
+  return Math.max(0, parseFloat(remaining.toFixed(2)));
+};
+
+// src/utils/transactionFee.ts
+var getTransactionFee = (amount = 0, transactionFeePercentage) => {
+  if (!Number.isFinite(amount) || amount <= 0) return 0;
+  if (!Number.isFinite(transactionFeePercentage) || !transactionFeePercentage || transactionFeePercentage <= 0) {
+    return 0;
+  }
+  const fee = amount * transactionFeePercentage;
+  return Math.round((fee + Number.EPSILON) * 100) / 100;
+};
+
+// src/components/CheckoutButton.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var CheckoutButton = ({ isLoggedIn }) => {
+  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);
+  const isDisabled = !amount || !method && usdAmount !== 0 || !!isProcessing || isInternalProcessing || !isLoggedIn;
+  const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
+  const isCrypto = type === "CRYPTO" /* CRYPTO */;
+  const getCheckoutContent = () => {
+    if (!!isProcessing || isInternalProcessing) {
+      return /* @__PURE__ */ jsx5(Spinner, { className: "inline", size: "sm" });
+    }
+    if (isCC && amount) {
+      if (splitAmount && usdAmount) {
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
+      }
+      if (usdAmount) {
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
+      }
+      if (splitAmount) {
+        return `Pay ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
+      }
+      return "Checkout";
+    }
+    if (isCrypto && amount) {
+      return `Pay ${formatCoin(amount)}`;
+    }
+    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: [
+    /* @__PURE__ */ jsx5(Legal, {}),
+    isLoggedIn ? /* @__PURE__ */ jsx5(Fragment, { children: onProcess && /* @__PURE__ */ jsx5("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ jsx5(
+      "a",
+      {
+        href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
+        className: checkoutClass,
+        children: "Log in / Sign up for an AIR account"
+      }
+    ),
+    /* @__PURE__ */ jsxs3("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
+      /* @__PURE__ */ jsx5("p", { children: "Powered by" }),
+      /* @__PURE__ */ jsx5("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "h-[30px]", viewBox: "0 0 66 30", children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M57.79 25.48a5 5 0 0 1-1.55-.25l.55-1.86q.51.15.92.15c.41 0 .51-.1.72-.26q.32-.24.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31q-.28.81-.75 1.38t-1.14.88-1.6.3Zm-8.84-3.58a4 4 0 0 1-1.73-.35q-.75-.34-1.2-1.02a3 3 0 0 1-.44-1.67 2.4 2.4 0 0 1 1.18-2.3q.53-.35 1.22-.5.69-.19 1.42-.27l1.44-.16q.56-.08.8-.24.27-.15.26-.5v-.04q0-.75-.44-1.15-.45-.4-1.27-.4-.87 0-1.38.37-.51.39-.69.9l-2.22-.31a3.5 3.5 0 0 1 2.35-2.47 6.3 6.3 0 0 1 3.38-.14q.72.16 1.32.56.6.38.96 1.06.37.66.37 1.67v6.75h-2.29v-1.38h-.08a3 3 0 0 1-1.59 1.37q-.58.21-1.37.22m.62-1.75q.72 0 1.24-.28.53-.3.8-.77.3-.46.3-1.03V16.9q-.11.09-.38.17a18 18 0 0 1-1.8.32q-.54.07-.96.23-.42.17-.66.46t-.24.75q0 .66.48 1t1.22.33ZM34.43 21.7V8.23h5.05q1.55 0 2.6.58 1.05.57 1.6 1.59.54 1 .54 2.28 0 1.3-.55 2.3a4 4 0 0 1-1.6 1.59q-1.07.57-2.63.57H36.1v-2h3.01q.9 0 1.49-.32.57-.32.85-.87.3-.55.29-1.27 0-.71-.29-1.26a2 2 0 0 0-.86-.84 3 3 0 0 0-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.08M5.59 18.12l-.84 3.35h.83l.84-3.35zm1.66 0-.83 3.35h1.66l.84-3.35zm3.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.35zm10.44 0-.84 3.35h1.67l.83-3.35zm2.5 0-.84 3.35h.83l.84-3.35z"
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// ../ui/src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  getTransactionFee,
+  getSplitAmount,
+  useSlapiBalance,
+  formatUSD,
+  formatPoints,
+  Label,
+  PointsSwitch,
+  CheckoutButton,
+  cn2 as cn
+};