@reevit/react 0.2.8 → 0.3.0

package/dist/index.mjs

@@ -176,6 +176,7 @@ var ReevitAPIClient = class {
       method: this.mapPaymentMethod(method),
       country,
       customer_id: config.email || config.metadata?.customerId,
+      phone: config.phone,
       metadata
     };
     return this.request("POST", "/v1/payments/intents", request);
@@ -231,7 +232,12 @@ function reevitReducer(state, action) {
     case "INIT_START":
       return { ...state, status: "loading", error: null };
     case "INIT_SUCCESS":
-      return { ...state, status: "ready", paymentIntent: action.payload };
+      return {
+        ...state,
+        status: "ready",
+        paymentIntent: action.payload,
+        selectedMethod: action.payload.availableMethods?.length === 1 ? action.payload.availableMethods[0] : state.selectedMethod
+      };
     case "INIT_ERROR":
       return { ...state, status: "failed", error: action.payload };
     case "SELECT_METHOD":
@@ -277,9 +283,22 @@ function mapToPaymentIntent(response, config) {
 }
 function useReevit(options) {
   const { config, onSuccess, onError, onClose, onStateChange, apiBaseUrl } = options;
-  const [state, dispatch] = useReducer(reevitReducer, initialState);
+  const [state, dispatch] = useReducer(reevitReducer, {
+    ...initialState,
+    status: config.initialPaymentIntent ? "ready" : "idle",
+    paymentIntent: config.initialPaymentIntent || null,
+    selectedMethod: config.initialPaymentIntent?.availableMethods?.length === 1 ? config.initialPaymentIntent.availableMethods[0] : null
+  });
   const apiClientRef = useRef(null);
-  const initializingRef = useRef(false);
+  const initializingRef = useRef(!!config.initialPaymentIntent);
+  useEffect(() => {
+    if (config.initialPaymentIntent) {
+      if (!state.paymentIntent || state.paymentIntent.id !== config.initialPaymentIntent.id) {
+        dispatch({ type: "INIT_SUCCESS", payload: config.initialPaymentIntent });
+        initializingRef.current = true;
+      }
+    }
+  }, [config.initialPaymentIntent, state.paymentIntent?.id]);
   if (!apiClientRef.current) {
     apiClientRef.current = new ReevitAPIClient({
       publicKey: config.publicKey,
@@ -370,11 +389,16 @@ function useReevit(options) {
           paymentMethod: state.selectedMethod,
           psp: state.paymentIntent.recommendedPsp,
           pspReference: paymentData.pspReference || data?.provider_ref_id || "",
-          status: "success",
+          status: data?.status === "succeeded" ? "success" : "pending",
           metadata: paymentData
         };
-        dispatch({ type: "PROCESS_SUCCESS", payload: result });
-        onSuccess?.(result);
+        if (result.status === "success") {
+          dispatch({ type: "PROCESS_SUCCESS", payload: result });
+          onSuccess?.(result);
+        } else {
+          dispatch({ type: "PROCESS_SUCCESS", payload: result });
+          onSuccess?.(result);
+        }
       } catch (err) {
         const error = {
           code: "PAYMENT_FAILED",
@@ -664,6 +688,7 @@ function loadPaystackScript() {
 function PaystackBridge({
   publicKey,
   email,
+  phone,
   amount,
   currency = "GHS",
   reference,
@@ -693,6 +718,7 @@ function PaystackBridge({
       const handler = window.PaystackPop.setup({
         key: publicKey,
         email,
+        phone,
         amount,
         // Paystack expects amount in kobo/pesewas (smallest unit)
         currency,
@@ -700,13 +726,18 @@ function PaystackBridge({
         metadata,
         channels,
         callback: (response) => {
+          let usedMethod = "card";
+          if (channels && channels.length === 1) {
+            usedMethod = channels[0];
+          } else if (response.message?.toLowerCase().includes("mobile money")) {
+            usedMethod = "mobile_money";
+          }
           const result = {
             paymentId: response.transaction,
             reference: response.reference,
             amount,
             currency,
-            paymentMethod: "card",
-            // Paystack handles this internally
+            paymentMethod: usedMethod,
             psp: "paystack",
             pspReference: response.trans,
             status: response.status === "success" ? "success" : "pending",
@@ -759,6 +790,7 @@ function ReevitCheckout({
   reference,
   metadata,
   paymentMethods = ["card", "mobile_money"],
+  initialPaymentIntent,
   // Callbacks
   onSuccess,
   onError,
@@ -767,10 +799,23 @@ function ReevitCheckout({
   // UI
   children,
   autoOpen = false,
+  isOpen: controlledIsOpen,
+  onOpenChange,
   theme,
   apiBaseUrl
 }) {
-  const [isOpen, setIsOpen] = useState(autoOpen);
+  const [internalIsOpen, setInternalIsOpen] = useState(autoOpen);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const setIsOpen = useCallback(
+    (value) => {
+      if (onOpenChange) {
+        onOpenChange(value);
+      } else {
+        setInternalIsOpen(value);
+      }
+    },
+    [onOpenChange]
+  );
   const [showPSPBridge, setShowPSPBridge] = useState(false);
   const [momoData, setMomoData] = useState(null);
   const {
@@ -787,7 +832,17 @@ function ReevitCheckout({
     isLoading,
     isComplete
   } = useReevit({
-    config: { publicKey, amount, currency, email, phone, reference, metadata, paymentMethods },
+    config: {
+      publicKey,
+      amount,
+      currency,
+      email,
+      phone,
+      reference,
+      metadata,
+      paymentMethods,
+      initialPaymentIntent
+    },
     apiBaseUrl,
     onSuccess: (result2) => {
       onSuccess?.(result2);
@@ -803,21 +858,31 @@ function ReevitCheckout({
     onStateChange
   });
   useEffect(() => {
-    if (isOpen && status === "idle") {
+    if (isOpen && status === "idle" && !initialPaymentIntent) {
       initialize();
     }
-  }, [isOpen, status, initialize]);
+  }, [isOpen, status, initialize, initialPaymentIntent]);
+  useEffect(() => {
+    if (isOpen && (selectedMethod === "card" || selectedMethod === "mobile_money") && !showPSPBridge) {
+      if (selectedMethod === "card" && paymentIntent) {
+        setShowPSPBridge(true);
+      } else if (selectedMethod === "mobile_money" && paymentIntent && (momoData?.phone || phone)) {
+        setShowPSPBridge(true);
+      }
+    }
+  }, [isOpen, selectedMethod, showPSPBridge, paymentIntent, momoData, phone]);
   const handleOpen = useCallback(() => {
+    if (controlledIsOpen !== void 0) return;
     setIsOpen(true);
     setShowPSPBridge(false);
     setMomoData(null);
-  }, []);
+  }, [controlledIsOpen, setIsOpen]);
   const handleClose = useCallback(() => {
     closeCheckout();
     setIsOpen(false);
     setShowPSPBridge(false);
     setMomoData(null);
-  }, [closeCheckout]);
+  }, [closeCheckout, setIsOpen]);
   const handleMethodSelect = useCallback(
     (method) => {
       selectMethod(method);
@@ -859,10 +924,11 @@ function ReevitCheckout({
     setShowPSPBridge(false);
   }, [reset]);
   const themeStyles = theme ? createThemeVariables(theme) : {};
-  const trigger = children ? /* @__PURE__ */ jsx("span", { onClick: handleOpen, role: "button", tabIndex: 0, children }) : /* @__PURE__ */ jsxs("button", { className: "reevit-trigger-btn", onClick: handleOpen, children: [
+  const isControlled = controlledIsOpen !== void 0;
+  const trigger = children ? /* @__PURE__ */ jsx("span", { onClick: isControlled ? void 0 : handleOpen, role: isControlled ? void 0 : "button", tabIndex: isControlled ? void 0 : 0, children }) : !isControlled ? /* @__PURE__ */ jsxs("button", { className: "reevit-trigger-btn", onClick: handleOpen, children: [
     "Pay ",
     formatAmount(amount, currency)
-  ] });
+  ] }) : null;
   const renderContent = () => {
     if (status === "loading") {
       return /* @__PURE__ */ jsxs("div", { className: "reevit-loading", children: [
@@ -895,6 +961,7 @@ function ReevitCheckout({
         {
           publicKey: pspKey,
           email,
+          phone: momoData?.phone || phone,
           amount: paymentIntent?.amount ?? amount,
           currency: paymentIntent?.currency ?? currency,
           reference,
@@ -903,7 +970,8 @@ function ReevitCheckout({
             // Override with correct payment intent ID for webhook routing
             // This ensures Paystack webhook includes the correct ID to find the payment
             payment_id: paymentIntent?.id,
-            connection_id: paymentIntent?.connectionId ?? metadata?.connection_id
+            connection_id: paymentIntent?.connectionId ?? metadata?.connection_id,
+            customer_phone: momoData?.phone || phone
           },
           channels: selectedMethod === "mobile_money" ? ["mobile_money"] : ["card"],
           onSuccess: handlePSPSuccess,