@reevit/react 0.4.7 → 0.4.9

package/dist/index.mjs

@@ -56,61 +56,45 @@ function detectNetwork(phone) {
   }
   return null;
 }
-function createThemeVariables(theme) {
-  const variables = {};
-  if (theme.primaryColor) {
-    variables["--reevit-primary"] = theme.primaryColor;
-    if (theme.primaryForegroundColor) {
-      variables["--reevit-primary-foreground"] = theme.primaryForegroundColor;
-    } else {
-      const contrast = getContrastingColor(theme.primaryColor);
-      if (contrast) {
-        variables["--reevit-primary-foreground"] = contrast;
-      }
-    }
-  }
-  if (theme.backgroundColor) {
-    variables["--reevit-background"] = theme.backgroundColor;
-  }
-  if (theme.surfaceColor) {
-    variables["--reevit-surface"] = theme.surfaceColor;
-  }
-  if (theme.textColor) {
-    variables["--reevit-text"] = theme.textColor;
-  }
-  if (theme.mutedTextColor) {
-    variables["--reevit-text-secondary"] = theme.mutedTextColor;
-  }
-  if (theme.borderRadius) {
-    variables["--reevit-radius"] = theme.borderRadius;
-    variables["--reevit-radius-sm"] = theme.borderRadius;
-    variables["--reevit-radius-lg"] = theme.borderRadius;
-  }
-  if (theme.fontFamily) {
-    variables["--reevit-font"] = theme.fontFamily;
-  }
-  return variables;
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
 }
-function getContrastingColor(color) {
-  const hex = color.trim();
-  if (!hex.startsWith("#")) {
-    return null;
-  }
-  const normalized = hex.length === 4 ? `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex;
-  if (normalized.length !== 7) {
-    return null;
+function getCountryFromCurrency(currency) {
+  const currencyToCountry = {
+    GHS: "GH",
+    NGN: "NG",
+    KES: "KE",
+    ZAR: "ZA",
+    USD: "US",
+    GBP: "GB",
+    EUR: "EU"
+  };
+  return currencyToCountry[currency.toUpperCase()] || "GH";
+}
+function getMethodLogos(country, method) {
+  const c = country.toUpperCase();
+  const LOGOS = {
+    visa: "https://js.stripe.com/v3/fingerprinted/img/visa-729c05c240c4bdb47b03ac81d9945bfe.svg",
+    mastercard: "https://js.stripe.com/v3/fingerprinted/img/mastercard-4d8844094130711885b5e41b28c9848f.svg",
+    apple_pay: "https://js.stripe.com/v3/fingerprinted/img/apple_pay_mark-ea40d9a0f83ff6c94c3aa5c2c1ba4427.svg",
+    google_pay: "https://js.stripe.com/v3/fingerprinted/img/google_pay_mark-ed0c5a85e00a6e95f57a3c89e9d2a69c.svg",
+    mtn: "https://play-lh.googleusercontent.com/WdLBv6Ck6Xk4VJQvPxODXXjLNmxEGHDnXML_TVqWOBBzXpWLV1K3xXlStCfFLrl0Tw=w240-h480-rw",
+    vodafone: "https://play-lh.googleusercontent.com/cTpsmMl_ZXKvPLKWwCvC0VaKgT1ISyH0fNDgVbXHMGJl4PYvGMnlFFe8Kj3vTqz0Xg=w240-h480-rw",
+    airtel: "https://play-lh.googleusercontent.com/Mh2OxhKPKMfxCn2Y7J3gD3TLvkvOeFXwPLLGqrDHD5qJ5le_ph7Y6PmfwwZKJMZWcYU=w240-h480-rw",
+    mpesa: "https://play-lh.googleusercontent.com/2wd-PssHqg1Xv0HnKzH7ecFfozXo_vr5M-Hf7k7X7kqxMGqj5PmKWnFhTqCYXCPCAYE=w240-h480-rw"
+  };
+  if (method === "card") {
+    return [LOGOS.visa, LOGOS.mastercard];
   }
-  const r = parseInt(normalized.slice(1, 3), 16);
-  const g = parseInt(normalized.slice(3, 5), 16);
-  const b = parseInt(normalized.slice(5, 7), 16);
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return null;
+  if (method === "apple_pay") return [LOGOS.apple_pay];
+  if (method === "google_pay") return [LOGOS.google_pay];
+  if (method === "mobile_money") {
+    if (c === "GH") return [LOGOS.mtn, LOGOS.vodafone, LOGOS.airtel];
+    if (c === "KE") return [LOGOS.mpesa, LOGOS.airtel];
+    if (c === "NG") return [LOGOS.mtn, LOGOS.airtel];
+    return [LOGOS.mtn];
   }
-  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
-  return brightness >= 140 ? "#0b1120" : "#ffffff";
-}
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ");
+  return [];
 }
 
 // src/api/client.ts
@@ -388,6 +372,10 @@ function normalizeBranding(branding) {
   setIf("pspSelectorTextColor", getString(raw.pspSelectorTextColor ?? raw.psp_selector_text_color));
   setIf("pspSelectorBorderColor", getString(raw.pspSelectorBorderColor ?? raw.psp_selector_border_color));
   setIf("pspSelectorUseBorder", getBoolean(raw.pspSelectorUseBorder ?? raw.psp_selector_use_border));
+  setIf("selectedBackgroundColor", getString(raw.selectedBackgroundColor ?? raw.selected_background_color));
+  setIf("selectedTextColor", getString(raw.selectedTextColor ?? raw.selected_text_color));
+  setIf("selectedDescriptionColor", getString(raw.selectedDescriptionColor ?? raw.selected_description_color));
+  setIf("selectedBorderColor", getString(raw.selectedBorderColor ?? raw.selected_border_color));
   return theme;
 }
 function mapToPaymentIntent(response, config) {
@@ -395,6 +383,7 @@ function mapToPaymentIntent(response, config) {
     id: response.id,
     clientSecret: response.client_secret,
     pspPublicKey: response.psp_public_key,
+    pspCredentials: response.psp_credentials,
     amount: response.amount,
     currency: response.currency,
     status: response.status,
@@ -422,6 +411,7 @@ function useReevit(options) {
   });
   const apiClientRef = useRef(null);
   const initializingRef = useRef(!!config.initialPaymentIntent);
+  const initRequestIdRef = useRef(0);
   useEffect(() => {
     if (config.initialPaymentIntent) {
       if (!state.paymentIntent || state.paymentIntent.id !== config.initialPaymentIntent.id) {
@@ -445,11 +435,11 @@ function useReevit(options) {
         return;
       }
       initializingRef.current = true;
+      const requestId = ++initRequestIdRef.current;
       dispatch({ type: "INIT_START" });
       try {
         const apiClient = apiClientRef.current;
         if (!apiClient) {
-          initializingRef.current = false;
           throw new Error("API client not initialized");
         }
         const reference = config.reference || generateReference();
@@ -498,6 +488,9 @@ function useReevit(options) {
           data = result.data;
           error = result.error;
         }
+        if (requestId !== initRequestIdRef.current) {
+          return;
+        }
         if (error) {
           dispatch({ type: "INIT_ERROR", payload: error });
           onError?.(error);
@@ -517,6 +510,9 @@ function useReevit(options) {
         const paymentIntent = mapToPaymentIntent(data, { ...config, reference });
         dispatch({ type: "INIT_SUCCESS", payload: paymentIntent });
       } catch (err) {
+        if (requestId !== initRequestIdRef.current) {
+          return;
+        }
         const error = {
           code: "INIT_FAILED",
           message: err instanceof Error ? err.message : "Failed to initialize checkout",
@@ -598,6 +594,7 @@ function useReevit(options) {
   );
   const reset = useCallback(() => {
     initializingRef.current = false;
+    initRequestIdRef.current += 1;
     dispatch({ type: "RESET" });
   }, []);
   const close = useCallback(async () => {
@@ -686,59 +683,90 @@ function PaymentMethodSelector({
   disabled = false,
   provider,
   layout = "list",
-  showLabel = true
+  showLabel = true,
+  country = "GH",
+  selectedTheme
 }) {
   const getMethodLabel = (method, psp) => {
     const config = methodConfig[method];
     return config.label;
   };
-  const getMethodDescription = (method, psp) => {
-    const config = methodConfig[method];
-    if (psp?.toLowerCase().includes("hubtel")) {
-      return config.description;
+  const getMethodDescription = (method, psp, countryCode) => {
+    const c = (country).toUpperCase();
+    if (method === "mobile_money") {
+      const mobileMoneyDescriptions = {
+        GH: "MTN, Vodafone Cash, AirtelTigo Money",
+        KE: "M-Pesa, Airtel Money",
+        NG: "MTN MoMo, Airtel Money",
+        ZA: "Mobile Money"
+      };
+      return mobileMoneyDescriptions[c] || "Mobile Money";
+    }
+    if (method === "card") {
+      return "Pay with Visa, Mastercard, or other cards";
     }
-    return config.description;
+    if (method === "bank_transfer") {
+      return "Pay directly from your bank account";
+    }
+    return "";
   };
   const isGrid = layout === "grid";
   return /* @__PURE__ */ jsxs("div", { className: cn("reevit-method-selector", isGrid && "reevit-method-selector--grid"), children: [
     showLabel && /* @__PURE__ */ jsx("div", { className: "reevit-method-selector__label", children: "Select payment method" }),
-    /* @__PURE__ */ jsx("div", { className: cn(
-      "reevit-method-selector__options",
-      isGrid ? "reevit-method-selector__options--grid" : "reevit-method-selector__options--list"
-    ), children: methods.map((method, index) => {
-      const config = methodConfig[method];
-      const isSelected = selectedMethod === method;
-      const methodLabel = getMethodLabel(method);
-      const methodDescription = getMethodDescription(method, provider);
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "reevit-method-option",
-            isGrid ? "reevit-method-option--grid" : "reevit-method-option--list",
-            isSelected && "reevit-method-option--selected",
-            disabled && "reevit-method-option--disabled"
-          ),
-          style: {
-            animationDelay: `${index * 0.05}s`
-          },
-          onClick: () => onSelect(method),
-          disabled,
-          "aria-pressed": isSelected,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "reevit-method-option__icon-wrapper", children: /* @__PURE__ */ jsx("span", { className: "reevit-method-option__icon", children: config.icon }) }),
-            /* @__PURE__ */ jsxs("div", { className: "reevit-method-option__content", children: [
-              /* @__PURE__ */ jsx("span", { className: "reevit-method-option__label", children: methodLabel }),
-              !isGrid && /* @__PURE__ */ jsx("span", { className: "reevit-method-option__description", children: methodDescription })
-            ] }),
-            !isGrid && isSelected && /* @__PURE__ */ jsx("span", { className: "reevit-method-option__check", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
-            !isGrid && !isSelected && /* @__PURE__ */ jsx("span", { className: "reevit-method-option__chevron", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) }) })
-          ]
-        },
-        method
-      );
-    }) })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "reevit-method-selector__options",
+          isGrid ? "reevit-method-selector__options--grid" : "reevit-method-selector__options--list"
+        ),
+        style: selectedTheme?.backgroundColor ? { backgroundColor: selectedTheme.backgroundColor } : void 0,
+        children: methods.map((method, index) => {
+          const config = methodConfig[method];
+          const isSelected = selectedMethod === method;
+          const methodLabel = getMethodLabel(method);
+          const methodDescription = getMethodDescription(method);
+          const logos = getMethodLogos(country, method);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "reevit-method-option",
+                isGrid ? "reevit-method-option--grid" : "reevit-method-option--list",
+                isSelected && "reevit-method-option--selected",
+                disabled && "reevit-method-option--disabled"
+              ),
+              style: {
+                animationDelay: `${index * 0.05}s`,
+                borderBottomColor: selectedTheme?.borderColor
+              },
+              onClick: () => onSelect(method),
+              disabled,
+              "aria-pressed": isSelected,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "reevit-method-option__icon-wrapper", children: logos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "reevit-method-option__logos", children: logos.slice(0, 3).map((logo, i) => /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: logo,
+                    alt: "",
+                    className: "reevit-method-option__logo-img"
+                  },
+                  i
+                )) }) : /* @__PURE__ */ jsx("span", { className: "reevit-method-option__icon", children: config.icon }) }),
+                /* @__PURE__ */ jsxs("div", { className: "reevit-method-option__content", children: [
+                  /* @__PURE__ */ jsx("span", { className: "reevit-method-option__label", style: selectedTheme?.textColor ? { color: selectedTheme.textColor } : void 0, children: methodLabel }),
+                  !isGrid && /* @__PURE__ */ jsx("span", { className: "reevit-method-option__description", style: selectedTheme?.descriptionColor ? { color: selectedTheme.descriptionColor } : void 0, children: methodDescription })
+                ] }),
+                !isGrid && isSelected && /* @__PURE__ */ jsx("span", { className: "reevit-method-option__check", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+                !isGrid && !isSelected && /* @__PURE__ */ jsx("span", { className: "reevit-method-option__chevron", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) }) })
+              ]
+            },
+            method
+          );
+        })
+      }
+    )
   ] });
 }
 var networks = [
@@ -906,28 +934,11 @@ function ProviderSelector({
   onSelect,
   disabled = false,
   theme,
+  country = "GH",
   selectedMethod,
   onMethodSelect,
   renderMethodContent
 }) {
-  const useBorder = theme?.pspSelectorUseBorder ?? false;
-  const bgColor = theme?.pspSelectorBgColor || "#0a0a0a";
-  const textColor = theme?.pspSelectorTextColor || "#ffffff";
-  const borderColor = theme?.pspSelectorBorderColor || "#374151";
-  const getOptionStyle = (isSelected) => {
-    if (useBorder) {
-      return {
-        backgroundColor: "transparent",
-        border: `2px solid ${isSelected ? borderColor : "#374151"}`,
-        color: isSelected ? textColor : "var(--reevit-text)"
-      };
-    }
-    return {
-      backgroundColor: isSelected ? bgColor : "transparent",
-      border: `2px solid ${isSelected ? bgColor : "#374151"}`,
-      color: isSelected ? textColor : "var(--reevit-text)"
-    };
-  };
   return /* @__PURE__ */ jsxs("div", { className: "reevit-psp-selector", children: [
     /* @__PURE__ */ jsx("div", { className: "reevit-psp-selector__label", children: "Select payment provider" }),
     /* @__PURE__ */ jsx("div", { className: "reevit-psp-selector__options", children: providers.map((provider) => {
@@ -938,7 +949,7 @@ function ProviderSelector({
       const providerMethods = sanitizeMethods(provider.provider, provider.methods);
       const isSelected = selectedProvider === provider.provider;
       const fallbackInitial = provider.name.slice(0, 1).toUpperCase();
-      const optionStyle = getOptionStyle(isSelected);
+      const providerCountry = provider.countries?.[0] || country;
       return /* @__PURE__ */ jsxs("div", { className: "reevit-psp-accordion", children: [
         /* @__PURE__ */ jsxs(
           "button",
@@ -949,7 +960,6 @@ function ProviderSelector({
               isSelected && "reevit-psp-option--selected",
               disabled && "reevit-psp-option--disabled"
             ),
-            style: optionStyle,
             onClick: () => onSelect(provider.provider),
             disabled,
             "aria-expanded": isSelected,
@@ -964,27 +974,46 @@ function ProviderSelector({
                 }
               ) : /* @__PURE__ */ jsx("span", { className: "reevit-psp-option__logo-fallback", children: fallbackInitial }) }),
               /* @__PURE__ */ jsxs("div", { className: "reevit-psp-option__content", children: [
-                /* @__PURE__ */ jsx("span", { className: "reevit-psp-option__name", children: provider.name }),
+                /* @__PURE__ */ jsxs("span", { className: "reevit-psp-option__name", children: [
+                  "Pay with ",
+                  provider.name
+                ] }),
                 /* @__PURE__ */ jsx("span", { className: "reevit-psp-option__methods", children: formatMethods(providerMethods) || meta.hint })
               ] })
             ]
           }
         ),
-        isSelected && onMethodSelect && /* @__PURE__ */ jsxs("div", { className: "reevit-psp-accordion__content", children: [
-          /* @__PURE__ */ jsx("div", { className: "reevit-psp-methods", children: /* @__PURE__ */ jsx(
-            PaymentMethodSelector,
-            {
-              methods: providerMethods,
-              selectedMethod: selectedMethod || null,
-              onSelect: onMethodSelect,
-              disabled,
-              provider: provider.provider,
-              layout: "list",
-              showLabel: false
-            }
-          ) }),
-          selectedMethod && renderMethodContent && /* @__PURE__ */ jsx("div", { className: "reevit-psp-accordion__method-content", children: renderMethodContent(provider.provider, selectedMethod) })
-        ] })
+        isSelected && onMethodSelect && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "reevit-psp-accordion__content",
+            style: theme?.selectedBorderColor ? {
+              borderTop: `1px solid ${theme.selectedBorderColor}`
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "reevit-psp-methods", children: /* @__PURE__ */ jsx(
+                PaymentMethodSelector,
+                {
+                  methods: providerMethods,
+                  selectedMethod: selectedMethod || null,
+                  onSelect: onMethodSelect,
+                  disabled,
+                  provider: provider.provider,
+                  layout: "list",
+                  showLabel: false,
+                  country: providerCountry,
+                  selectedTheme: theme ? {
+                    backgroundColor: theme.selectedBackgroundColor,
+                    textColor: theme.selectedTextColor,
+                    descriptionColor: theme.selectedDescriptionColor,
+                    borderColor: theme.selectedBorderColor
+                  } : void 0
+                }
+              ) }),
+              selectedMethod && renderMethodContent && /* @__PURE__ */ jsx("div", { className: "reevit-psp-accordion__method-content", children: renderMethodContent(provider.provider, selectedMethod) })
+            ]
+          }
+        )
       ] }, provider.provider);
     }) })
   ] });
@@ -2207,7 +2236,29 @@ function ReevitCheckout({
       ...theme || {}
     };
   }, [paymentIntent?.branding, theme]);
-  const themeStyles = resolvedTheme ? createThemeVariables(resolvedTheme) : {};
+  const themeStyles = useMemo(() => {
+    if (!resolvedTheme) return {};
+    const vars = {};
+    if (resolvedTheme.backgroundColor) {
+      vars["--reevit-background"] = resolvedTheme.backgroundColor;
+      vars["--reevit-surface"] = resolvedTheme.backgroundColor;
+    }
+    if (resolvedTheme.primaryColor) {
+      vars["--reevit-text"] = resolvedTheme.primaryColor;
+    }
+    if (resolvedTheme.primaryForegroundColor) {
+      vars["--reevit-text-secondary"] = resolvedTheme.primaryForegroundColor;
+      vars["--reevit-muted"] = resolvedTheme.primaryForegroundColor;
+    }
+    if (resolvedTheme.borderColor) {
+      vars["--reevit-border"] = resolvedTheme.borderColor;
+    }
+    if (resolvedTheme.borderRadius) {
+      vars["--reevit-radius"] = resolvedTheme.borderRadius;
+      vars["--reevit-radius-lg"] = resolvedTheme.borderRadius;
+    }
+    return vars;
+  }, [resolvedTheme]);
   const brandName = resolvedTheme?.companyName;
   const themeMode = resolvedTheme?.darkMode;
   const dataTheme = useMemo(() => {
@@ -2405,6 +2456,7 @@ function ReevitCheckout({
           onSelect: handleProviderSelect,
           disabled: isLoading,
           theme: resolvedTheme,
+          country: getCountryFromCurrency(currency),
           selectedMethod,
           onMethodSelect: handleMethodSelect,
           renderMethodContent
@@ -2421,7 +2473,14 @@ function ReevitCheckout({
           disabled: isLoading,
           provider: psp,
           layout: "list",
-          showLabel: false
+          showLabel: false,
+          country: getCountryFromCurrency(currency),
+          selectedTheme: resolvedTheme ? {
+            backgroundColor: resolvedTheme.selectedBackgroundColor,
+            textColor: resolvedTheme.selectedTextColor,
+            descriptionColor: resolvedTheme.selectedDescriptionColor,
+            borderColor: resolvedTheme.selectedBorderColor
+          } : void 0
         }
       ),
       selectedMethod && /* @__PURE__ */ jsx("div", { className: "reevit-method-step__actions reevit-animate-slide-up", children: selectedMethod === "mobile_money" && pspLower.includes("mpesa") && !phone ? /* @__PURE__ */ jsx(MobileMoneyForm, { onSubmit: handleMomoSubmit, onCancel: () => selectMethod(null), isLoading, initialPhone: phone }) : /* @__PURE__ */ jsxs("div", { className: "reevit-card-info reevit-animate-fade-in", children: [
@@ -2452,17 +2511,20 @@ function ReevitCheckout({
         children: [
           /* @__PURE__ */ jsxs("div", { className: "reevit-modal__header", children: [
             /* @__PURE__ */ jsxs("div", { className: "reevit-modal__branding", children: [
-              /* @__PURE__ */ jsx(
+              resolvedTheme?.logoUrl && /* @__PURE__ */ jsx(
                 "img",
                 {
-                  src: resolvedTheme?.logoUrl || "https://i.imgur.com/bzUR5Lm.png",
-                  alt: brandName || "Reevit",
+                  src: resolvedTheme.logoUrl,
+                  alt: brandName || "",
                   className: "reevit-modal__logo"
                 }
               ),
               brandName && /* @__PURE__ */ jsx("span", { className: "reevit-modal__brand-name", children: brandName })
             ] }),
-            /* @__PURE__ */ jsx("button", { className: "reevit-modal__close", onClick: handleClose, "aria-label": "Close", children: "\u2715" })
+            /* @__PURE__ */ jsx("button", { className: "reevit-modal__close", onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "reevit-modal__amount", children: [
             /* @__PURE__ */ jsx("span", { className: "reevit-modal__amount-label", children: "Amount" }),