@reevit/react 0.3.7 → 0.4.0

package/dist/index.d.mts

@@ -163,8 +163,9 @@ interface PaymentMethodSelectorProps {
     selectedMethod: PaymentMethod | null;
     onSelect: (method: PaymentMethod) => void;
     disabled?: boolean;
+    provider?: string;
 }
-declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface MobileMoneyFormProps {
     onSubmit: (data: MobileMoneyFormData) => void;

package/dist/index.d.ts

@@ -163,8 +163,9 @@ interface PaymentMethodSelectorProps {
     selectedMethod: PaymentMethod | null;
     onSelect: (method: PaymentMethod) => void;
     disabled?: boolean;
+    provider?: string;
 }
-declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentMethodSelector({ methods, selectedMethod, onSelect, disabled, provider, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface MobileMoneyFormProps {
     onSubmit: (data: MobileMoneyFormData) => void;

package/dist/index.js

@@ -512,6 +512,14 @@ function detectCountryFromCurrency(currency) {
   };
   return currencyToCountry[currency.toUpperCase()] || "GH";
 }
+var pspNames = {
+  hubtel: "Hubtel",
+  paystack: "Paystack",
+  flutterwave: "Flutterwave",
+  monnify: "Monnify",
+  mpesa: "M-Pesa",
+  stripe: "Stripe"
+};
 var methodConfig = {
   card: {
     label: "Card",
@@ -533,13 +541,30 @@ function PaymentMethodSelector({
   methods,
   selectedMethod,
   onSelect,
-  disabled = false
+  disabled = false,
+  provider
 }) {
+  const getMethodLabel = (method, psp) => {
+    const config = methodConfig[method];
+    if (psp?.toLowerCase().includes("hubtel") && method === "mobile_money") {
+      return `Pay with ${pspNames[psp.toLowerCase()] || "Hubtel"}`;
+    }
+    return config.label;
+  };
+  const getMethodDescription = (method, psp) => {
+    const config = methodConfig[method];
+    if (psp?.toLowerCase().includes("hubtel")) {
+      return "Card, Mobile Money, and Bank Transfer";
+    }
+    return config.description;
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-method-selector", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-method-selector__label", children: "Select payment method" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-method-selector__options", children: methods.map((method) => {
       const config = methodConfig[method];
       const isSelected = selectedMethod === method;
+      const methodLabel = getMethodLabel(method, provider);
+      const methodDescription = getMethodDescription(method, provider);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -555,8 +580,8 @@ function PaymentMethodSelector({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__icon", children: config.icon }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-method-option__content", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__label", children: config.label }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__description", children: config.description })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__label", children: methodLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__description", children: methodDescription })
             ] }),
             isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__check", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
               "path",
@@ -1363,6 +1388,87 @@ function loadStripeScript() {
   });
   return stripeScriptPromise;
 }
+var getReevitStripeAppearance = () => {
+  const isDarkMode = typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  return {
+    theme: isDarkMode ? "night" : "stripe",
+    variables: {
+      colorPrimary: isDarkMode ? "#fafafa" : "#171717",
+      colorBackground: isDarkMode ? "#171717" : "#ffffff",
+      colorText: isDarkMode ? "#fafafa" : "#171717",
+      colorTextSecondary: isDarkMode ? "#a3a3a3" : "#737373",
+      colorTextPlaceholder: isDarkMode ? "#737373" : "#a3a3a3",
+      colorDanger: "#dc2626",
+      fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+      fontSizeBase: "14px",
+      fontSizeSm: "12px",
+      fontSizeLg: "16px",
+      fontWeightNormal: "400",
+      fontWeightMedium: "500",
+      fontWeightBold: "600",
+      borderRadius: "10px",
+      spacingUnit: "4px",
+      spacingGridRow: "16px",
+      spacingGridColumn: "16px"
+    },
+    rules: {
+      ".Input": {
+        border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid #e5e5e5",
+        boxShadow: "none",
+        padding: "12px 14px",
+        fontSize: "14px",
+        backgroundColor: isDarkMode ? "#262626" : "#ffffff"
+      },
+      ".Input:focus": {
+        border: isDarkMode ? "1px solid #a3a3a3" : "1px solid #737373",
+        boxShadow: "none",
+        backgroundColor: isDarkMode ? "#262626" : "#fafafa"
+      },
+      ".Input--invalid": {
+        border: "1px solid #dc2626",
+        boxShadow: "none"
+      },
+      ".Label": {
+        fontSize: "12px",
+        fontWeight: "500",
+        marginBottom: "6px",
+        color: isDarkMode ? "#a3a3a3" : "#737373",
+        textTransform: "none",
+        letterSpacing: "0.02em"
+      },
+      ".Tab": {
+        border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid #e5e5e5",
+        backgroundColor: "transparent",
+        borderRadius: "10px",
+        padding: "12px 14px"
+      },
+      ".Tab:hover": {
+        border: isDarkMode ? "1px solid #a3a3a3" : "1px solid #737373",
+        backgroundColor: isDarkMode ? "#262626" : "#fafafa"
+      },
+      ".Tab--selected": {
+        border: isDarkMode ? "1px solid #fafafa" : "1px solid #171717",
+        backgroundColor: isDarkMode ? "#262626" : "#fafafa"
+      },
+      ".TabIcon": {
+        marginRight: "8px"
+      },
+      ".Block": {
+        border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid #e5e5e5",
+        borderRadius: "10px",
+        backgroundColor: isDarkMode ? "#262626" : "#ffffff",
+        padding: "12px 14px"
+      },
+      ".CheckboxInput": {
+        border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.1)" : "1px solid #e5e5e5"
+      },
+      ".CheckboxInput--checked": {
+        backgroundColor: isDarkMode ? "#fafafa" : "#171717",
+        borderColor: isDarkMode ? "#fafafa" : "#171717"
+      }
+    }
+  };
+};
 function StripeBridge({
   publishableKey,
   clientSecret,
@@ -1390,9 +1496,10 @@ function StripeBridge({
           throw new Error("Stripe not available");
         }
         stripeRef.current = window.Stripe(publishableKey);
+        const stripeAppearance = appearance || getReevitStripeAppearance();
         elementsRef.current = stripeRef.current.elements({
           clientSecret,
-          appearance: appearance || { theme: "stripe" }
+          appearance: stripeAppearance
         });
         paymentElementRef.current = elementsRef.current.create("payment");
         if (containerRef.current) {
@@ -1462,6 +1569,12 @@ function StripeBridge({
       setIsSubmitting(false);
     }
   }, [onSuccess, onError]);
+  const formattedAmount = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: currency.toUpperCase(),
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(amount / 100);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-bridge", children: [
     isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-loading", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
@@ -1475,8 +1588,8 @@ function StripeBridge({
         style: { display: isLoading ? "none" : "block", minHeight: "200px" }
       }
     ),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-stripe-error", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-actions", children: [
+    error && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-stripe-error", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) }),
+    !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-stripe-actions", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1484,11 +1597,12 @@ function StripeBridge({
           className: "reevit-submit-btn",
           onClick: handleSubmit,
           disabled: isLoading || isSubmitting,
-          children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-spinner" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-spinner", style: { width: "16px", height: "16px" } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Processing..." })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             "Pay ",
-            currency,
-            " ",
-            (amount / 100).toFixed(2)
+            formattedAmount
           ] })
         }
       ),
@@ -1687,9 +1801,9 @@ function ReevitCheckout({
         /* @__PURE__ */ jsxRuntime.jsx("button", { className: "reevit-btn reevit-btn--primary", onClick: handleBack, children: "Try Again" })
       ] });
     }
+    const psp = paymentIntent?.recommendedPsp || "paystack";
     if (showPSPBridge) {
       const pspKey = paymentIntent?.pspPublicKey || publicKey;
-      const psp = paymentIntent?.recommendedPsp || "paystack";
       const bridgeMetadata = {
         ...metadata,
         // Override with correct payment intent ID for webhook routing
@@ -1866,7 +1980,8 @@ function ReevitCheckout({
           methods: paymentMethods,
           selectedMethod,
           onSelect: handleMethodSelect,
-          disabled: isLoading
+          disabled: isLoading,
+          provider: psp
         }
       ),
       selectedMethod && selectedMethod !== "mobile_money" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-method-step__actions", children: /* @__PURE__ */ jsxRuntime.jsx(