@applite/duticotac-react 0.0.1

package/dist/index.js

@@ -0,0 +1,720 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DuticotacPaymentModal: () => DuticotacPaymentModal,
+  OtpInput: () => OtpInput,
+  PhoneInput: () => PhoneInput,
+  ProviderSelector: () => ProviderSelector,
+  TransactionStatus: () => TransactionStatus,
+  cn: () => cn,
+  formatCFA: () => formatCFA,
+  getPhoneRegex: () => getPhoneRegex,
+  needsOtp: () => needsOtp,
+  normalizePhone: () => normalizePhone,
+  validatePhone: () => validatePhone
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/payment-modal.tsx
+var React2 = __toESM(require("react"));
+var import_duticotac2 = require("@applite/duticotac");
+
+// src/components/provider-selector.tsx
+var import_duticotac = require("@applite/duticotac");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/provider-selector.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ProviderSelector({
+  providers,
+  value,
+  onChange,
+  disabled,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("grid gap-2", className), style: {
+    gridTemplateColumns: `repeat(${Math.min(providers.length, 4)}, 1fr)`
+  }, children: providers.map((provider) => {
+    const selected = value === provider;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => onChange(provider),
+        className: cn(
+          "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
+          "hover:scale-[1.02] disabled:pointer-events-none disabled:opacity-50",
+          selected ? "border-primary bg-primary/5 shadow-sm" : "border-border bg-background hover:border-primary/40"
+        ),
+        children: [
+          selected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M5 12l5 5L20 7",
+              stroke: "#fff",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: (0, import_duticotac.getProviderLogo)(provider),
+              alt: (0, import_duticotac.getProviderName)(provider),
+              width: 44,
+              height: 44,
+              className: "rounded-lg object-contain"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: cn(
+                "text-center text-xs leading-tight",
+                selected ? "font-semibold text-primary" : "font-medium text-muted-foreground"
+              ),
+              children: (0, import_duticotac.getProviderName)(provider)
+            }
+          )
+        ]
+      },
+      provider
+    );
+  }) });
+}
+
+// src/components/phone-input.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PhoneInput({
+  value,
+  onChange,
+  label = "Numero de telephone",
+  placeholder = "07 01 02 03 04",
+  error,
+  disabled,
+  className,
+  autoFocus
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("space-y-1.5", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-sm font-semibold text-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex h-10 items-center rounded-md border border-border bg-muted px-3 text-sm font-medium text-muted-foreground", children: "+225" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "tel",
+          inputMode: "numeric",
+          value,
+          onChange: (e) => {
+            const cleaned = e.target.value.replace(/[^\d\s]/g, "");
+            onChange(cleaned);
+          },
+          placeholder,
+          disabled,
+          autoFocus,
+          className: cn(
+            "h-10 w-full rounded-md border bg-background px-3 text-sm font-medium outline-none transition-colors",
+            "placeholder:text-muted-foreground/50",
+            "focus:border-primary focus:ring-2 focus:ring-primary/20",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            error ? "border-destructive" : "border-border"
+          )
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-destructive", children: error })
+  ] });
+}
+
+// src/components/otp-input.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function OtpInput({
+  value,
+  onChange,
+  length = 4,
+  disabled,
+  className
+}) {
+  const inputRefs = React.useRef([]);
+  const digits = value.padEnd(length, "").slice(0, length).split("");
+  const setDigit = (index, char) => {
+    const next = [...digits];
+    next[index] = char;
+    onChange(next.join(""));
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      if (digits[index]?.trim()) {
+        setDigit(index, "");
+      } else if (index > 0) {
+        setDigit(index - 1, "");
+        inputRefs.current[index - 1]?.focus();
+      }
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === "ArrowRight" && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handleInput = (index, e) => {
+    const val = e.target.value;
+    const char = val.replace(/\D/g, "").slice(-1);
+    if (!char) return;
+    setDigit(index, char);
+    if (index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!pasted) return;
+    onChange(pasted.padEnd(length, "").slice(0, length).replace(/ /g, ""));
+    const focusIndex = Math.min(pasted.length, length - 1);
+    inputRefs.current[focusIndex]?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "block text-sm font-semibold text-muted-foreground", children: "Code OTP" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-center gap-3", onPaste: handlePaste, children: Array.from({ length }).map((_, i) => {
+      const filled = !!digits[i]?.trim();
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          ref: (el) => {
+            inputRefs.current[i] = el;
+          },
+          type: "text",
+          inputMode: "numeric",
+          maxLength: 1,
+          value: digits[i]?.trim() || "",
+          onKeyDown: (e) => handleKeyDown(i, e),
+          onInput: (e) => handleInput(i, e),
+          onFocus: (e) => e.target.select(),
+          disabled,
+          className: cn(
+            "h-13 w-13 rounded-md border-2 text-center text-xl font-bold outline-none transition-all",
+            "focus:border-primary focus:ring-2 focus:ring-primary/20 focus:scale-105",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            filled ? "border-primary/30 bg-primary/5" : "border-border bg-background"
+          )
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-center text-xs text-muted-foreground", children: [
+      "Faites ",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { className: "text-foreground", children: "#144*82#" }),
+      " pour recevoir le code"
+    ] })
+  ] });
+}
+
+// src/components/transaction-status.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Spinner({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    {
+      className: cn("animate-spin", className),
+      width: "56",
+      height: "56",
+      viewBox: "0 0 56 56",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "circle",
+          {
+            cx: "28",
+            cy: "28",
+            r: "24",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            className: "opacity-20"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M28 4a24 24 0 0 1 24 24",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            className: "text-primary"
+          }
+        )
+      ]
+    }
+  );
+}
+function TransactionStatus({
+  status,
+  elapsedSeconds = 0,
+  message,
+  errorMessage,
+  paymentUrl,
+  onRetry,
+  onClose,
+  onOpenPaymentUrl,
+  className
+}) {
+  if (status === "polling") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex flex-col items-center gap-4 py-8", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-base font-semibold text-foreground", children: paymentUrl ? "Finalisez le paiement dans l'onglet ouvert..." : "Confirmez le paiement sur votre telephone..." }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-muted-foreground", children: paymentUrl ? "Completez le paiement dans l'onglet, puis revenez ici." : "Veuillez valider la transaction sur votre telephone." }),
+        elapsedSeconds > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-xs text-muted-foreground/70", children: [
+          "Verification en cours... ",
+          elapsedSeconds,
+          "s"
+        ] })
+      ] }),
+      paymentUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: onOpenPaymentUrl,
+            className: "inline-flex items-center gap-2 rounded-md bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "path",
+                {
+                  d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) }),
+              "Ouvrir Wave pour payer"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "text-sm text-muted-foreground underline hover:text-foreground",
+            children: "Annuler"
+          }
+        )
+      ] })
+    ] });
+  }
+  if (status === "success") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex flex-col items-center gap-4 py-8", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500 animate-in zoom-in duration-500", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "path",
+        {
+          d: "M5 12l5 5L20 7",
+          stroke: "#fff",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2 text-center animate-in fade-in slide-in-from-bottom-4 duration-400 delay-150", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-lg font-bold text-foreground", children: "Paiement reussi !" }),
+        message && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-muted-foreground", children: message })
+      ] }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-md bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90",
+          children: "Fermer"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex flex-col items-center gap-4 py-8", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-500 animate-in zoom-in duration-500", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M6 18L18 6M6 6l12 12",
+        stroke: "#fff",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2 text-center animate-in fade-in slide-in-from-bottom-4 duration-400 delay-150", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-lg font-bold text-foreground", children: "Echec du paiement" }),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-muted-foreground", children: errorMessage })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-3", children: [
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-md border border-border bg-background px-5 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted",
+          children: "Fermer"
+        }
+      ),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onRetry,
+          className: "rounded-md bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90",
+          children: "Reessayer"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/utils/format.ts
+function formatCFA(n) {
+  return new Intl.NumberFormat("fr-FR").format(n);
+}
+
+// src/utils/validation.ts
+function getPhoneRegex(provider) {
+  switch (provider) {
+    case "OM_CI":
+      return /^(\+225)(07)[0-9]{8}$/;
+    case "MTN_CI":
+      return /^(\+225)(05)[0-9]{8}$/;
+    case "MOOV_CI":
+      return /^(\+225)(01)[0-9]{8}$/;
+    default:
+      return /^(\+225)(07|05|01)[0-9]{8}$/;
+  }
+}
+function validatePhone(phone, provider) {
+  if (!phone) return "Num\xE9ro de t\xE9l\xE9phone requis";
+  const intl = phone.startsWith("+225") ? phone : `+225${phone}`;
+  const cleaned = intl.replace(/\s/g, "");
+  if (!getPhoneRegex(provider).test(cleaned)) {
+    return "Num\xE9ro invalide pour ce provider";
+  }
+  return null;
+}
+function normalizePhone(phone) {
+  const cleaned = phone.replace(/\s/g, "");
+  return cleaned.startsWith("+225") ? cleaned : `+225${cleaned}`;
+}
+function needsOtp(provider) {
+  return provider === "OM_CI";
+}
+
+// src/components/payment-modal.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_PROVIDERS = [
+  "OM_CI",
+  "MTN_CI",
+  "MOOV_CI",
+  "WAVE_CI"
+];
+function DuticotacPaymentModal({
+  open,
+  onClose,
+  onSuccess,
+  sdk,
+  amount,
+  providers = DEFAULT_PROVIDERS,
+  getTransactionId,
+  productReference,
+  initialPhone = "",
+  name: customerName,
+  email: customerEmail,
+  customerId,
+  kolaboReference,
+  app,
+  platform,
+  successMessage,
+  title = "Paiement",
+  pollTimeout = 9e4,
+  className,
+  renderModal
+}) {
+  const [step, setStep] = React2.useState("form");
+  const [provider, setProvider] = React2.useState(providers[0]);
+  const [phone, setPhone] = React2.useState(initialPhone);
+  const [otp, setOtp] = React2.useState("");
+  const [phoneError, setPhoneError] = React2.useState(null);
+  const [errorMessage, setErrorMessage] = React2.useState("");
+  const [paymentUrl, setPaymentUrl] = React2.useState(null);
+  const [elapsedSeconds, setElapsedSeconds] = React2.useState(0);
+  const [lastTransaction, setLastTransaction] = React2.useState(null);
+  const abortRef = React2.useRef(null);
+  const elapsedRef = React2.useRef(null);
+  const cleanup = React2.useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    if (elapsedRef.current) {
+      clearInterval(elapsedRef.current);
+      elapsedRef.current = null;
+    }
+  }, []);
+  React2.useEffect(() => {
+    if (open) {
+      setStep("form");
+      setErrorMessage("");
+      setOtp("");
+      setPaymentUrl(null);
+      setElapsedSeconds(0);
+      setPhoneError(null);
+      setLastTransaction(null);
+    } else {
+      cleanup();
+    }
+  }, [open, cleanup]);
+  React2.useEffect(() => () => cleanup(), [cleanup]);
+  const isFormValid = phone.replace(/\s/g, "").length >= 8 && (needsOtp(provider) ? otp.length === 4 : true);
+  const handleSubmit = async () => {
+    const phoneErr = validatePhone(phone, provider);
+    if (phoneErr) {
+      setPhoneError(phoneErr);
+      return;
+    }
+    setPhoneError(null);
+    setStep("confirming");
+    setErrorMessage("");
+    cleanup();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    try {
+      const transactionId = await getTransactionId();
+      const result = await sdk.mobileMoney.cashout({
+        transactionId,
+        ref: productReference,
+        phone: normalizePhone(phone),
+        name: customerName ?? "Duticotac App",
+        email: customerEmail ?? "",
+        paymentMethod: provider,
+        amount,
+        otp: needsOtp(provider) ? otp : void 0,
+        customerId,
+        kolaboReference,
+        app,
+        plateform: platform
+      });
+      const tx = result.data;
+      if (tx?.paymentUrl) {
+        setPaymentUrl(tx.paymentUrl);
+        try {
+          window.open(tx.paymentUrl, "_blank");
+        } catch {
+        }
+      }
+      const startTime = Date.now();
+      setElapsedSeconds(0);
+      elapsedRef.current = setInterval(() => {
+        setElapsedSeconds(Math.floor((Date.now() - startTime) / 1e3));
+      }, 1e3);
+      const confirmed = await sdk.transaction.poll(tx.id ?? transactionId, {
+        timeoutMs: pollTimeout,
+        signal: controller.signal,
+        onPoll: () => {
+        }
+      });
+      setLastTransaction(confirmed.data);
+      setStep("success");
+      onSuccess?.(confirmed.data);
+    } catch (e) {
+      if (controller.signal.aborted) return;
+      if (e instanceof import_duticotac2.DuticotacError) {
+        setErrorMessage(e.message);
+      } else {
+        setErrorMessage(
+          (0, import_duticotac2.getErrorMessage)("unknown-error")
+        );
+      }
+      setStep("error");
+    }
+  };
+  const handleRetry = () => {
+    setStep("form");
+    setErrorMessage("");
+    setPaymentUrl(null);
+    setElapsedSeconds(0);
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("space-y-5", className), children: [
+    step === "form" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "rounded-lg border-l-4 border-l-primary bg-muted/50 p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-muted-foreground", children: "Montant" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-xl font-bold text-primary", children: [
+          formatCFA(amount),
+          " FCFA"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-semibold text-foreground", children: "Moyen de paiement" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ProviderSelector,
+          {
+            providers,
+            value: provider,
+            onChange: (p) => {
+              setProvider(p);
+              if (!needsOtp(p)) setOtp("");
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        PhoneInput,
+        {
+          value: phone,
+          onChange: (v) => {
+            setPhone(v);
+            setPhoneError(null);
+          },
+          error: phoneError,
+          autoFocus: true
+        }
+      ),
+      needsOtp(provider) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OtpInput, { value: otp, onChange: setOtp }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-end gap-3 pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "rounded-md border border-border bg-background px-5 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted",
+            children: "Annuler"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: handleSubmit,
+            disabled: !isFormValid,
+            className: "rounded-md bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:pointer-events-none disabled:opacity-50",
+            children: [
+              "Payer ",
+              formatCFA(amount),
+              " FCFA"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    step === "confirming" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      TransactionStatus,
+      {
+        status: "polling",
+        elapsedSeconds,
+        paymentUrl,
+        onOpenPaymentUrl: () => {
+          if (paymentUrl) window.open(paymentUrl, "_blank");
+        },
+        onClose
+      }
+    ),
+    step === "success" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      TransactionStatus,
+      {
+        status: "success",
+        message: successMessage ?? "Le paiement a ete effectue avec succes.",
+        onClose
+      }
+    ),
+    step === "error" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      TransactionStatus,
+      {
+        status: "error",
+        errorMessage,
+        onRetry: handleRetry,
+        onClose
+      }
+    )
+  ] });
+  if (renderModal) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: renderModal({ open, onClose, title, children: content }) });
+  }
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-background p-6 shadow-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "text-lg font-bold text-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "path",
+              {
+                d: "M6 18L18 6M6 6l12 12",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ] }),
+      content
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DuticotacPaymentModal,
+  OtpInput,
+  PhoneInput,
+  ProviderSelector,
+  TransactionStatus,
+  cn,
+  formatCFA,
+  getPhoneRegex,
+  needsOtp,
+  normalizePhone,
+  validatePhone
+});
+//# sourceMappingURL=index.js.map