@reevit/react 0.4.6 → 0.4.8

package/dist/index.d.mts

@@ -117,6 +117,8 @@ interface ReevitTheme {
     darkMode?: boolean;
     /** Custom logo URL to display in checkout header */
     logoUrl?: string;
+    /** Company or organization name to display in checkout header */
+    companyName?: string;
     /** PSP selector background color */
     pspSelectorBgColor?: string;
     /** PSP selector text color */

package/dist/index.d.ts

@@ -117,6 +117,8 @@ interface ReevitTheme {
     darkMode?: boolean;
     /** Custom logo URL to display in checkout header */
     logoUrl?: string;
+    /** Company or organization name to display in checkout header */
+    companyName?: string;
     /** PSP selector background color */
     pspSelectorBgColor?: string;
     /** PSP selector text color */

package/dist/index.js

@@ -366,6 +366,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,
@@ -385,7 +415,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) {
@@ -398,6 +428,7 @@ function useReevit(options) {
   });
   const apiClientRef = react.useRef(null);
   const initializingRef = react.useRef(!!config.initialPaymentIntent);
+  const initRequestIdRef = react.useRef(0);
   react.useEffect(() => {
     if (config.initialPaymentIntent) {
       if (!state.paymentIntent || state.paymentIntent.id !== config.initialPaymentIntent.id) {
@@ -421,11 +452,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();
@@ -474,6 +505,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);
@@ -493,6 +527,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",
@@ -574,6 +611,7 @@ function useReevit(options) {
   );
   const reset = react.useCallback(() => {
     initializingRef.current = false;
+    initRequestIdRef.current += 1;
     dispatch({ type: "RESET" });
   }, []);
   const close = react.useCallback(async () => {
@@ -2184,6 +2222,7 @@ function ReevitCheckout({
     };
   }, [paymentIntent?.branding, theme]);
   const themeStyles = resolvedTheme ? createThemeVariables(resolvedTheme) : {};
+  const brandName = resolvedTheme?.companyName;
   const themeMode = resolvedTheme?.darkMode;
   const dataTheme = react.useMemo(() => {
     if (typeof themeMode === "boolean") {
@@ -2426,7 +2465,17 @@ function ReevitCheckout({
         "aria-modal": "true",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__header", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-modal__branding", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: resolvedTheme?.logoUrl || "https://i.imgur.com/bzUR5Lm.png", alt: "Checkout", className: "reevit-modal__logo" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__branding", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: resolvedTheme?.logoUrl || "https://i.imgur.com/bzUR5Lm.png",
+                  alt: brandName || "Reevit",
+                  className: "reevit-modal__logo"
+                }
+              ),
+              brandName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-modal__brand-name", children: brandName })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx("button", { className: "reevit-modal__close", onClick: handleClose, "aria-label": "Close", children: "\u2715" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__amount", children: [