@reevit/react 0.5.9 → 0.7.0

package/dist/index.mjs

@@ -253,7 +253,7 @@ var ReevitAPIClient = class {
         allowed_providers: options?.allowedProviders
       };
     }
-    const idempotencyKey = generateIdempotencyKey({
+    const idempotencyKey = config.idempotencyKey || generateIdempotencyKey({
       amount: config.amount,
       currency: config.currency,
       customer: config.email || config.metadata?.customerId || "",
@@ -432,6 +432,72 @@ function normalizeBranding(branding) {
   setIf("selectedBorderColor", getString(raw.selectedBorderColor ?? raw.selected_border_color));
   return theme;
 }
+var INTENT_CACHE_TTL_MS = 10 * 60 * 1e3;
+var intentCache = /* @__PURE__ */ new Map();
+function pruneIntentCache(now = Date.now()) {
+  for (const [key, entry] of intentCache) {
+    if (entry.expiresAt <= now) {
+      intentCache.delete(key);
+    }
+  }
+}
+function getIntentCacheEntry(key) {
+  const entry = intentCache.get(key);
+  if (!entry) {
+    return void 0;
+  }
+  if (entry.expiresAt <= Date.now()) {
+    intentCache.delete(key);
+    return void 0;
+  }
+  return entry;
+}
+function setIntentCacheEntry(key, update) {
+  const now = Date.now();
+  const existing = getIntentCacheEntry(key);
+  const next = {
+    ...existing,
+    ...update,
+    expiresAt: now + INTENT_CACHE_TTL_MS
+  };
+  intentCache.set(key, next);
+  return next;
+}
+function clearIntentCacheEntry(key) {
+  intentCache.delete(key);
+}
+function buildIdempotencyPayload(config, method, options) {
+  const payload = {
+    amount: config.amount,
+    currency: config.currency,
+    email: config.email || "",
+    phone: config.phone || "",
+    customerName: config.customerName || "",
+    paymentLinkCode: config.paymentLinkCode || "",
+    paymentMethods: config.paymentMethods || [],
+    metadata: config.metadata || {},
+    customFields: config.customFields || {},
+    method: method || "",
+    preferredProvider: options?.preferredProvider || "",
+    allowedProviders: options?.allowedProviders || [],
+    publicKey: config.publicKey || ""
+  };
+  if (config.reference) {
+    payload.reference = config.reference;
+  }
+  return payload;
+}
+function resolveIntentIdentity(config, method, options) {
+  pruneIntentCache();
+  const idempotencyKey = config.idempotencyKey || generateIdempotencyKey(buildIdempotencyPayload(config, method, options));
+  const existing = getIntentCacheEntry(idempotencyKey);
+  const reference = config.reference || existing?.reference || generateReference();
+  const cacheEntry = setIntentCacheEntry(idempotencyKey, { reference });
+  return { idempotencyKey, reference, cacheEntry };
+}
+function isPaymentError(error) {
+  return typeof error === "object" && error !== null && "code" in error && "message" in error;
+}
 function mapToPaymentIntent(response, config) {
   return {
     id: response.id,
@@ -465,14 +531,22 @@ function useReevit(options) {
     selectedMethod: config.initialPaymentIntent?.availableMethods?.length === 1 ? config.initialPaymentIntent.availableMethods[0] : null
   });
   const apiClientRef = useRef(null);
-  const initializingRef = useRef(!!config.initialPaymentIntent);
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  const currentIntentKeyRef = useRef(
+    config.initialPaymentIntent ? `initial:${config.initialPaymentIntent.id}` : null
+  );
   const initRequestIdRef = useRef(0);
   useEffect(() => {
     if (config.initialPaymentIntent) {
       if (!state.paymentIntent || state.paymentIntent.id !== config.initialPaymentIntent.id) {
         dispatch({ type: "INIT_SUCCESS", payload: config.initialPaymentIntent });
-        initializingRef.current = true;
+        currentIntentKeyRef.current = `initial:${config.initialPaymentIntent.id}`;
       }
+    } else if (currentIntentKeyRef.current?.startsWith("initial:")) {
+      currentIntentKeyRef.current = null;
     }
   }, [config.initialPaymentIntent, state.paymentIntent?.id]);
   if (!apiClientRef.current) {
@@ -486,61 +560,60 @@ function useReevit(options) {
   }, [state.status, onStateChange]);
   const initialize = useCallback(
     async (method, options2) => {
-      if (initializingRef.current) {
+      if (config.initialPaymentIntent) {
         return;
       }
-      initializingRef.current = true;
-      const requestId = ++initRequestIdRef.current;
-      dispatch({ type: "INIT_START" });
+      let requestId = 0;
+      let intentKey = null;
       try {
         const apiClient = apiClientRef.current;
         if (!apiClient) {
           throw new Error("API client not initialized");
         }
-        const reference = config.reference || generateReference();
         const country = detectCountryFromCurrency(config.currency);
         const defaultMethod = config.paymentMethods && config.paymentMethods.length === 1 ? config.paymentMethods[0] : void 0;
         const paymentMethod = method ?? defaultMethod;
-        let data;
-        let error;
-        if (config.paymentLinkCode) {
-          const idempotencyKey = generateIdempotencyKey({
-            paymentLinkCode: config.paymentLinkCode,
-            amount: config.amount,
-            email: config.email || "",
-            phone: config.phone || "",
-            method: paymentMethod || "",
-            provider: options2?.preferredProvider || options2?.allowedProviders?.[0] || ""
-          });
-          const response = await fetch(
-            `${apiBaseUrl || DEFAULT_PUBLIC_API_BASE_URL}/v1/pay/${config.paymentLinkCode}/pay`,
-            {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                "Idempotency-Key": idempotencyKey
-              },
-              body: JSON.stringify({
-                amount: config.amount,
-                email: config.email || "",
-                name: config.customerName || "",
-                phone: config.phone || "",
-                method: paymentMethod,
-                country,
-                provider: options2?.preferredProvider || options2?.allowedProviders?.[0],
-                custom_fields: config.customFields
-              })
+        const identity = resolveIntentIdentity(config, paymentMethod, options2);
+        const { idempotencyKey, reference, cacheEntry } = identity;
+        intentKey = idempotencyKey;
+        if (currentIntentKeyRef.current === idempotencyKey && stateRef.current.paymentIntent) {
+          return;
+        }
+        currentIntentKeyRef.current = idempotencyKey;
+        requestId = ++initRequestIdRef.current;
+        if (stateRef.current.status !== "loading") {
+          dispatch({ type: "INIT_START" });
+        }
+        const requestIntent = async () => {
+          if (config.paymentLinkCode) {
+            const response = await fetch(
+              `${apiBaseUrl || DEFAULT_PUBLIC_API_BASE_URL}/v1/pay/${config.paymentLinkCode}/pay`,
+              {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                  "Idempotency-Key": idempotencyKey
+                },
+                body: JSON.stringify({
+                  amount: config.amount,
+                  email: config.email || "",
+                  name: config.customerName || "",
+                  phone: config.phone || "",
+                  method: paymentMethod,
+                  country,
+                  provider: options2?.preferredProvider || options2?.allowedProviders?.[0],
+                  custom_fields: config.customFields
+                })
+              }
+            );
+            const responseData = await response.json().catch(() => ({}));
+            if (!response.ok) {
+              throw buildPaymentLinkError(response, responseData);
             }
-          );
-          const responseData = await response.json().catch(() => ({}));
-          if (!response.ok) {
-            error = buildPaymentLinkError(response, responseData);
-          } else {
-            data = responseData;
+            return responseData;
           }
-        } else {
           const result = await apiClient.createPaymentIntent(
-            { ...config, reference },
+            { ...config, reference, idempotencyKey },
             paymentMethod,
             country,
             {
@@ -548,35 +621,43 @@ function useReevit(options) {
               allowedProviders: options2?.allowedProviders
             }
           );
-          data = result.data;
-          error = result.error;
+          if (result.error) {
+            throw result.error;
+          }
+          if (!result.data) {
+            throw {
+              code: "INIT_FAILED",
+              message: "No data received from API",
+              recoverable: true
+            };
+          }
+          return result.data;
+        };
+        let data;
+        if (cacheEntry?.response) {
+          data = cacheEntry.response;
+        } else {
+          let intentPromise = cacheEntry?.promise;
+          if (!intentPromise) {
+            intentPromise = requestIntent();
+            setIntentCacheEntry(idempotencyKey, { promise: intentPromise });
+          }
+          data = await intentPromise;
+          setIntentCacheEntry(idempotencyKey, { response: data, promise: void 0 });
         }
         if (requestId !== initRequestIdRef.current) {
           return;
         }
-        if (error) {
-          dispatch({ type: "INIT_ERROR", payload: error });
-          onError?.(error);
-          return;
-        }
-        if (!data) {
-          const noDataError = {
-            code: "INIT_FAILED",
-            message: "No data received from API",
-            recoverable: true
-          };
-          dispatch({ type: "INIT_ERROR", payload: noDataError });
-          onError?.(noDataError);
-          initializingRef.current = false;
-          return;
-        }
-        const paymentIntent = mapToPaymentIntent(data, { ...config, reference });
+        const paymentIntent = mapToPaymentIntent(data, { ...config, reference, idempotencyKey });
         dispatch({ type: "INIT_SUCCESS", payload: paymentIntent });
       } catch (err) {
+        if (intentKey) {
+          clearIntentCacheEntry(intentKey);
+        }
         if (requestId !== initRequestIdRef.current) {
           return;
         }
-        const error = {
+        const error = isPaymentError(err) ? err : {
           code: "INIT_FAILED",
           message: err instanceof Error ? err.message : "Failed to initialize checkout",
           recoverable: true,
@@ -584,7 +665,6 @@ function useReevit(options) {
         };
         dispatch({ type: "INIT_ERROR", payload: error });
         onError?.(error);
-        initializingRef.current = false;
       }
     },
     [config, onError, apiBaseUrl]
@@ -665,7 +745,7 @@ function useReevit(options) {
       } catch {
       }
     }
-    initializingRef.current = false;
+    currentIntentKeyRef.current = null;
     initRequestIdRef.current += 1;
     dispatch({ type: "RESET" });
   }, [state.paymentIntent, state.status]);
@@ -731,30 +811,47 @@ function detectCountryFromCurrency(currency) {
   };
   return currencyToCountry[currency.toUpperCase()] || "GH";
 }
+var MethodIcons = {
+  card: () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "15", x2: "9", y2: "15" })
+  ] }),
+  mobile_money: () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "12", y2: "18.01", strokeWidth: "2", strokeLinecap: "round" })
+  ] }),
+  bank_transfer: () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 21h18" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3l9 7H3l9-7z" }),
+    /* @__PURE__ */ jsx("path", { d: "M6 10v8" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 10v8" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 10v8" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 10v8" })
+  ] }),
+  apple_pay: () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }),
+  google_pay: () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z", fill: "currentColor" }) })
+};
 var methodConfig = {
   card: {
     label: "Card",
-    icon: "\u{1F4B3}",
     description: "Pay with Visa, Mastercard, or other cards"
   },
   mobile_money: {
     label: "Mobile Money",
-    icon: "\u{1F4F1}",
     description: "MTN, Telecel, AirtelTigo Money"
   },
   bank_transfer: {
     label: "Bank Transfer",
-    icon: "\u{1F3E6}",
     description: "Pay directly from your bank account"
   },
   apple_pay: {
     label: "Apple Pay",
-    icon: "\u{1F34E}",
     description: "Pay with Apple Pay"
   },
   google_pay: {
     label: "Google Pay",
-    icon: "\u{1F916}",
     description: "Pay with Google Pay"
   }
 };
@@ -804,7 +901,6 @@ function PaymentMethodSelector({
         ),
         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);
@@ -835,7 +931,7 @@ function PaymentMethodSelector({
                     className: "reevit-method-option__logo-img"
                   },
                   i
-                )) }) : /* @__PURE__ */ jsx("span", { className: "reevit-method-option__icon", children: config.icon }) }),
+                )) }) : /* @__PURE__ */ jsx("span", { className: "reevit-method-option__icon", children: MethodIcons[method]() }) }),
                 /* @__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 })
@@ -2395,7 +2491,11 @@ function ReevitCheckout({
   const renderContent = () => {
     if (status === "loading" || status === "processing") {
       return /* @__PURE__ */ jsxs("div", { className: "reevit-loading reevit-animate-fade-in", children: [
-        /* @__PURE__ */ jsx("div", { className: "reevit-spinner" }),
+        /* @__PURE__ */ jsxs("div", { className: "reevit-dot-pulse", children: [
+          /* @__PURE__ */ jsx("span", { className: "reevit-dot-pulse__dot" }),
+          /* @__PURE__ */ jsx("span", { className: "reevit-dot-pulse__dot" }),
+          /* @__PURE__ */ jsx("span", { className: "reevit-dot-pulse__dot" })
+        ] }),
         /* @__PURE__ */ jsx("p", { children: status === "loading" ? "Preparing checkout..." : "Processing payment..." })
       ] });
     }
@@ -2411,12 +2511,22 @@ function ReevitCheckout({
           "Reference: ",
           result.reference
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "reevit-success__redirect", children: "Redirecting in a moment..." })
+        /* @__PURE__ */ jsx("p", { className: "reevit-success__redirect", children: "Redirecting in a moment..." }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "reevit-success__countdown",
+            style: { animationDuration: `${successDelayMs}ms` }
+          }
+        )
       ] });
     }
     if (status === "failed" && error && !error.recoverable) {
       return /* @__PURE__ */ jsxs("div", { className: "reevit-error reevit-animate-fade-in", children: [
-        /* @__PURE__ */ jsx("div", { className: "reevit-error__icon", children: "\u2715" }),
+        /* @__PURE__ */ jsx("div", { className: "reevit-error__icon", children: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", 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__ */ jsx("h3", { children: "Payment Failed" }),
         /* @__PURE__ */ jsx("p", { children: error.message }),
         /* @__PURE__ */ jsx("button", { className: "reevit-btn reevit-btn--primary", onClick: handleBack, children: "Try Again" })
@@ -2538,7 +2648,11 @@ function ReevitCheckout({
           );
         default:
           return /* @__PURE__ */ jsxs("div", { className: "reevit-error", children: [
-            /* @__PURE__ */ jsx("div", { className: "reevit-error__icon", children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsx("div", { className: "reevit-error__icon", children: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+            ] }) }),
             /* @__PURE__ */ jsx("h3", { children: "Provider Not Supported" }),
             /* @__PURE__ */ jsxs("p", { children: [
               "Provider (",