@reevit/react 0.4.5 → 0.4.7

package/dist/index.mjs

@@ -360,6 +360,36 @@ function mapAvailableProviders(providers) {
     };
   }).filter((provider) => provider.methods.length > 0);
 }
+function normalizeBranding(branding) {
+  if (!branding) {
+    return {};
+  }
+  const raw = branding;
+  const theme = { ...raw };
+  const getString = (value) => typeof value === "string" ? value : void 0;
+  const getBoolean = (value) => typeof value === "boolean" ? value : void 0;
+  const setIf = (key, value) => {
+    if (value !== void 0) {
+      theme[key] = value;
+    }
+  };
+  setIf("logoUrl", getString(raw.logoUrl ?? raw.logo_url));
+  setIf("companyName", getString(raw.companyName ?? raw.company_name));
+  setIf("primaryColor", getString(raw.primaryColor ?? raw.primary_color));
+  setIf("primaryForegroundColor", getString(raw.primaryForegroundColor ?? raw.primary_foreground_color));
+  setIf("backgroundColor", getString(raw.backgroundColor ?? raw.background_color));
+  setIf("surfaceColor", getString(raw.surfaceColor ?? raw.surface_color));
+  setIf("textColor", getString(raw.textColor ?? raw.text_color));
+  setIf("mutedTextColor", getString(raw.mutedTextColor ?? raw.muted_text_color));
+  setIf("borderRadius", getString(raw.borderRadius ?? raw.border_radius));
+  setIf("fontFamily", getString(raw.fontFamily ?? raw.font_family));
+  setIf("darkMode", getBoolean(raw.darkMode ?? raw.dark_mode));
+  setIf("pspSelectorBgColor", getString(raw.pspSelectorBgColor ?? raw.psp_selector_bg_color));
+  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));
+  return theme;
+}
 function mapToPaymentIntent(response, config) {
   return {
     id: response.id,
@@ -379,7 +409,7 @@ function mapToPaymentIntent(response, config) {
     netAmount: response.net_amount,
     metadata: config.metadata,
     availableProviders: mapAvailableProviders(response.available_psps),
-    branding: response.branding
+    branding: normalizeBranding(response.branding)
   };
 }
 function useReevit(options) {
@@ -1083,7 +1113,9 @@ function HubtelBridge({
   publicKey,
   merchantAccount,
   amount,
+  currency,
   reference,
+  email,
   phone,
   description = "Payment",
   callbackUrl,
@@ -1098,7 +1130,6 @@ function HubtelBridge({
   autoStart = true
 }) {
   const initialized = useRef(false);
-  const checkoutRef = useRef(null);
   const [authValue, setAuthValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [resolvedMerchantAccount, setResolvedMerchantAccount] = useState(merchantAccount);
@@ -1112,19 +1143,17 @@ function HubtelBridge({
         try {
           const client = createReevitClient({ publicKey, baseUrl: apiBaseUrl });
           const { data, error } = await client.createHubtelSession(paymentId, clientSecret);
-          if (error) {
+          if (error || !data?.basicAuth) {
             onError({
               code: "SESSION_ERROR",
-              message: error.message || "Failed to create Hubtel session",
+              message: error?.message || "Failed to create Hubtel session",
               recoverable: true
             });
             return;
           }
-          if (data) {
-            setAuthValue(data.token);
-            if (data.merchantAccount) {
-              setResolvedMerchantAccount(data.merchantAccount);
-            }
+          setAuthValue(data.basicAuth);
+          if (data.merchantAccount) {
+            setResolvedMerchantAccount(data.merchantAccount);
           }
         } catch (err) {
           onError({
@@ -1148,13 +1177,13 @@ function HubtelBridge({
     }
     try {
       const checkout = new CheckoutSdk();
-      checkoutRef.current = checkout;
       const methodPreference = preferredMethod === "mobile_money" ? "momo" : preferredMethod === "card" ? "card" : void 0;
       const purchaseInfo = {
         amount: amount / 100,
         // Convert from minor to major units
         purchaseDescription: description,
         customerPhoneNumber: phone || "",
+        ...email ? { customerEmail: email } : {},
         clientReference: reference || `hubtel_${Date.now()}`,
         ...methodPreference ? { paymentMethod: methodPreference } : {}
       };
@@ -1162,8 +1191,6 @@ function HubtelBridge({
         branding: "enabled",
         callbackUrl: callbackUrl || window.location.href,
         merchantAccount: typeof resolvedMerchantAccount === "string" ? parseInt(resolvedMerchantAccount, 10) : resolvedMerchantAccount,
-        // Use session token or basicAuth for authentication
-        // Session tokens are base64-encoded credentials fetched securely from the server
         basicAuth: authValue || "",
         ...methodPreference ? { paymentMethod: methodPreference } : {}
       };
@@ -1177,8 +1204,8 @@ function HubtelBridge({
               paymentId: data.transactionId || reference || "",
               reference: data.clientReference || reference || "",
               amount,
-              currency: "GHS",
-              paymentMethod: "mobile_money",
+              currency: currency || "GHS",
+              paymentMethod: preferredMethod || "mobile_money",
               psp: "hubtel",
               pspReference: data.transactionId || "",
               status: "success"
@@ -1209,7 +1236,21 @@ function HubtelBridge({
       };
       onError(error);
     }
-  }, [merchantAccount, amount, reference, phone, description, callbackUrl, authValue, isLoading, preferredMethod, onSuccess, onError, onClose]);
+  }, [
+    amount,
+    reference,
+    phone,
+    description,
+    callbackUrl,
+    authValue,
+    isLoading,
+    preferredMethod,
+    onSuccess,
+    onError,
+    onClose,
+    resolvedMerchantAccount,
+    currency
+  ]);
   useEffect(() => {
     if (autoStart && !initialized.current && !isLoading && authValue) {
       initialized.current = true;
@@ -2167,6 +2208,7 @@ function ReevitCheckout({
     };
   }, [paymentIntent?.branding, theme]);
   const themeStyles = resolvedTheme ? createThemeVariables(resolvedTheme) : {};
+  const brandName = resolvedTheme?.companyName;
   const themeMode = resolvedTheme?.darkMode;
   const dataTheme = useMemo(() => {
     if (typeof themeMode === "boolean") {
@@ -2243,7 +2285,7 @@ function ReevitCheckout({
             {
               paymentId: paymentIntent?.id || "",
               publicKey,
-              merchantAccount: pspKey,
+              merchantAccount: paymentIntent?.pspCredentials?.merchantAccount || "",
               amount: paymentIntent?.amount ?? amount,
               currency: paymentIntent?.currency ?? currency,
               reference: paymentIntent?.reference || reference,
@@ -2409,7 +2451,17 @@ function ReevitCheckout({
         "aria-modal": "true",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "reevit-modal__header", children: [
-            /* @__PURE__ */ jsx("div", { className: "reevit-modal__branding", children: /* @__PURE__ */ jsx("img", { src: resolvedTheme?.logoUrl || "https://i.imgur.com/bzUR5Lm.png", alt: "Checkout", className: "reevit-modal__logo" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "reevit-modal__branding", children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: resolvedTheme?.logoUrl || "https://i.imgur.com/bzUR5Lm.png",
+                  alt: brandName || "Reevit",
+                  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__ */ jsxs("div", { className: "reevit-modal__amount", children: [