@applite/duticotac-react 0.0.1 → 0.0.2

package/README.md

@@ -11,9 +11,11 @@ Ce package fournit une experience de paiement complete : selection du provider,
 - [Installation](#installation)
 - [Prerequis](#prerequis)
 - [Demarrage rapide](#demarrage-rapide)
+- [Hook useDuticotac](#hook-useduticotac)
 - [Flux de paiement](#flux-de-paiement)
 - [Composants](#composants)
   - [DuticotacPaymentModal](#duticotacpaymentmodal)
+  - [ResponsiveDialog](#responsivedialog)
   - [ProviderSelector](#providerselector)
   - [PhoneInput](#phoneinput)
   - [OtpInput](#otpinput)
@@ -48,51 +50,140 @@ Les deux packages sont necessaires : `@applite/duticotac` contient le SDK (logiq
 
 ## Demarrage rapide
 
+La maniere recommandee d'utiliser ce package est le hook **`useDuticotac`**. Il fournit un dialog responsive integre (modal sur desktop, bottom sheet sur mobile) et une API imperative simple :
+
 ```tsx
-import { useState } from "react";
 import { DuticotacSDK } from "@applite/duticotac";
-import { DuticotacPaymentModal } from "@applite/duticotac-react";
+import { useDuticotac } from "@applite/duticotac-react";
 
-// Creez l'instance SDK une seule fois (en dehors du composant)
-const sdk = new DuticotacSDK({
-  apiKey: "your_api_key",
-  appId: "your_app_id", // optionnel
-});
+const sdk = new DuticotacSDK({ apiKey: "your_api_key" });
 
 function CheckoutPage() {
-  const [paymentOpen, setPaymentOpen] = useState(false);
+  const { pay, Dialog } = useDuticotac({
+    sdk,
+    getTransactionId: async () => {
+      const res = await fetch("/api/create-transaction", { method: "POST" });
+      const data = await res.json();
+      return data.transactionId;
+    },
+  });
 
   return (
     <>
-      <button onClick={() => setPaymentOpen(true)}>
+      <button onClick={() => pay({
+        amount: 5000,
+        onSuccess: (tx) => console.log("Paiement confirme :", tx),
+      })}>
         Acheter — 5 000 FCFA
       </button>
+      {Dialog}
+    </>
+  );
+}
+```
 
-      <DuticotacPaymentModal
-        open={paymentOpen}
-        onClose={() => setPaymentOpen(false)}
-        sdk={sdk}
-        amount={5000}
-        providers={["OM_CI", "MTN_CI", "MOOV_CI", "WAVE_CI"]}
-        getTransactionId={async () => {
-          // Appelez votre backend pour generer un ID unique
-          const res = await fetch("/api/create-transaction", { method: "POST" });
-          const data = await res.json();
-          return data.transactionId;
-        }}
-        productReference="premium-monthly"
-        name="Jean Dupont"
-        email="jean@example.com"
-        onSuccess={(transaction) => {
-          console.log("Paiement confirme :", transaction);
-          // Rafraichir le solde, rediriger, etc.
-        }}
-      />
+> Pour un controle plus fin (modal custom, Shadcn Dialog, etc.), utilisez directement le composant [`DuticotacPaymentModal`](#duticotacpaymentmodal) avec sa prop `renderModal`.
+
+---
+
+## Hook `useDuticotac`
+
+La maniere la plus simple d'integrer Duticotac. Le hook retourne une fonction `pay()` et un element `Dialog` avec un dialog responsive integre (modal centre sur desktop, bottom sheet sur mobile).
+
+```tsx
+import { DuticotacSDK } from "@applite/duticotac";
+import { useDuticotac } from "@applite/duticotac-react";
+
+const sdk = new DuticotacSDK({ apiKey: "your_api_key" });
+
+function CheckoutPage() {
+  const { pay, Dialog } = useDuticotac({
+    sdk,
+    providers: ["OM_CI", "MTN_CI", "MOOV_CI", "WAVE_CI"],
+    getTransactionId: async () => {
+      const res = await fetch("/api/create-transaction", { method: "POST" });
+      const data = await res.json();
+      return data.transactionId;
+    },
+    name: "Jean Dupont",
+    email: "jean@example.com",
+  });
+
+  return (
+    <>
+      <button onClick={() => pay({
+        amount: 5000,
+        productReference: "premium-monthly",
+        onSuccess: (tx) => {
+          console.log("Paiement confirme :", tx);
+        },
+      })}>
+        Acheter — 5 000 FCFA
+      </button>
+      {Dialog}
     </>
   );
 }
 ```
 
+### API du hook
+
+```ts
+const { pay, Dialog, isOpen, close } = useDuticotac(config);
+```
+
+**`config` (UseDuticotacConfig)**
+
+| Champ | Type | Requis | Description |
+|-------|------|--------|-------------|
+| `sdk` | `DuticotacSDK` | Oui | Instance du SDK |
+| `getTransactionId` | `() => Promise<string>` | Oui | Generateur d'ID transaction |
+| `providers` | `PaymentProvider[]` | Non | Providers disponibles (defaut: OM, MTN, MOOV, WAVE) |
+| `productReference` | `string` | Non | Reference produit par defaut |
+| `name` | `string` | Non | Nom du client par defaut |
+| `email` | `string` | Non | Email du client par defaut |
+| `customerId` | `string` | Non | ID du client |
+| `kolaboReference` | `string` | Non | Reference Kolabo |
+| `app` | `CoreApp` | Non | Application source |
+| `platform` | `PlatformType` | Non | Plateforme |
+| `initialPhone` | `string` | Non | Pre-remplir le telephone |
+| `pollTimeout` | `number` | Non | Timeout polling en ms (defaut: 90000) |
+| `title` | `string` | Non | Titre du dialog (defaut: "Paiement") |
+
+**Retour**
+
+| Champ | Type | Description |
+|-------|------|-------------|
+| `pay` | `(options: PayOptions) => void` | Ouvre le dialog de paiement |
+| `Dialog` | `ReactNode` | Element JSX a rendre une fois dans l'arbre |
+| `isOpen` | `boolean` | Etat du dialog |
+| `close` | `() => void` | Fermer le dialog programmatiquement |
+
+**`PayOptions`** (argument de `pay()`)
+
+| Champ | Type | Requis | Description |
+|-------|------|--------|-------------|
+| `amount` | `number` | Oui | Montant en FCFA |
+| `providers` | `PaymentProvider[]` | Non | Override les providers |
+| `productReference` | `string` | Non | Override la reference produit |
+| `name` | `string` | Non | Override le nom |
+| `email` | `string` | Non | Override l'email |
+| `customerId` | `string` | Non | Override l'ID client |
+| `successMessage` | `string` | Non | Message de succes personnalise |
+| `onSuccess` | `(tx: TransactionModel) => void` | Non | Callback de succes |
+| `onClose` | `() => void` | Non | Callback de fermeture |
+
+### Comportement responsive
+
+Le dialog s'adapte automatiquement :
+
+| Ecran | Comportement |
+|-------|-------------|
+| Desktop (> 640px) | Modal centre, max-width 440px, animation scale |
+| Mobile (<= 640px) | Bottom sheet, glisse depuis le bas, coins arrondis en haut, poignee de drag |
+
+Les deux modes incluent : fermeture par backdrop click, touche Escape, verrouillage du scroll, et transitions CSS fluides.
+
 ---
 
 ## Flux de paiement
@@ -162,6 +253,43 @@ import { DuticotacPaymentModal } from "@applite/duticotac-react";
 
 ---
 
+### `ResponsiveDialog`
+
+Dialog responsive qui s'adapte automatiquement : modal centre sur desktop, bottom sheet sur mobile. Utilise en interne par `useDuticotac`, mais peut etre utilise independamment.
+
+```tsx
+import { ResponsiveDialog } from "@applite/duticotac-react";
+
+<ResponsiveDialog
+  open={isOpen}
+  onClose={() => setOpen(false)}
+  title="Mon dialog"
+>
+  <p>Contenu du dialog</p>
+</ResponsiveDialog>
+```
+
+#### Props
+
+| Prop | Type | Requis | Description |
+|------|------|--------|-------------|
+| `open` | `boolean` | Oui | Visibilite du dialog |
+| `onClose` | `() => void` | Oui | Callback de fermeture |
+| `title` | `string` | Oui | Titre affiche dans le header |
+| `children` | `ReactNode` | Oui | Contenu du dialog |
+| `className` | `string` | Non | Classes CSS additionnelles |
+
+#### Fonctionnalites
+
+- **Desktop** (> 640px) : Modal centre, max-width 440px, animation d'echelle
+- **Mobile** (<= 640px) : Bottom sheet, slide-up, coins arrondis en haut, poignee de drag
+- Rendu via `createPortal` dans `document.body`
+- Fermeture : backdrop click, touche Escape
+- Verrouillage du scroll body quand ouvert
+- Transitions CSS fluides (250ms)
+
+---
+
 ### `ProviderSelector`
 
 Grille de selection des providers de paiement avec logos et indicateur de selection.
@@ -493,8 +621,13 @@ import type {
 ### Exports de `@applite/duticotac-react`
 
 ```ts
+// Hook (recommande)
+export { useDuticotac } from "@applite/duticotac-react";
+export type { UseDuticotacConfig, UseDuticotacReturn, PayOptions } from "@applite/duticotac-react";
+
 // Composants
 export { DuticotacPaymentModal } from "@applite/duticotac-react";
+export { ResponsiveDialog } from "@applite/duticotac-react";
 export { ProviderSelector } from "@applite/duticotac-react";
 export { PhoneInput } from "@applite/duticotac-react";
 export { OtpInput } from "@applite/duticotac-react";
@@ -502,6 +635,7 @@ export { TransactionStatus } from "@applite/duticotac-react";
 
 // Types des props
 export type { DuticotacPaymentModalProps } from "@applite/duticotac-react";
+export type { ResponsiveDialogProps } from "@applite/duticotac-react";
 export type { ProviderSelectorProps } from "@applite/duticotac-react";
 export type { PhoneInputProps } from "@applite/duticotac-react";
 export type { OtpInputProps } from "@applite/duticotac-react";

package/dist/index.d.mts

@@ -90,6 +90,69 @@ interface TransactionStatusProps {
 }
 declare function TransactionStatus({ status, elapsedSeconds, message, errorMessage, paymentUrl, onRetry, onClose, onOpenPaymentUrl, className, }: TransactionStatusProps): react_jsx_runtime.JSX.Element;
 
+interface ResponsiveDialogProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function ResponsiveDialog({ open, onClose, title, children, className, }: ResponsiveDialogProps): React.ReactPortal | null;
+
+interface UseDuticotacConfig {
+    /** DuticotacSDK instance. */
+    sdk: DuticotacSDK;
+    /** Available payment providers. */
+    providers?: PaymentProvider[];
+    /** Called to get a unique transaction ID before cashout. */
+    getTransactionId: () => Promise<string>;
+    /** Shared defaults — can be overridden per pay() call. */
+    productReference?: string;
+    name?: string;
+    email?: string;
+    customerId?: string;
+    kolaboReference?: string;
+    app?: CoreApp;
+    platform?: PlatformType;
+    initialPhone?: string;
+    /** Polling timeout in ms (default: 90000). */
+    pollTimeout?: number;
+    /** Dialog title (default: "Paiement"). */
+    title?: string;
+}
+interface PayOptions {
+    /** Amount in FCFA. */
+    amount: number;
+    /** Override providers for this payment. */
+    providers?: PaymentProvider[];
+    /** Override product reference. */
+    productReference?: string;
+    /** Override customer details. */
+    name?: string;
+    email?: string;
+    customerId?: string;
+    /** Custom success message. */
+    successMessage?: string;
+    /** Called when payment is confirmed. */
+    onSuccess?: (transaction: TransactionModel) => void;
+    /** Called when the dialog closes (success or cancel). */
+    onClose?: () => void;
+}
+interface UseDuticotacReturn {
+    /** Open the payment dialog with the given options. */
+    pay: (options: PayOptions) => void;
+    /** Whether the dialog is currently open. */
+    isOpen: boolean;
+    /** Close the dialog programmatically. */
+    close: () => void;
+    /**
+     * The dialog JSX element. Render this once somewhere in your component tree.
+     * @example return <>{Dialog}</>
+     */
+    Dialog: React.ReactNode;
+}
+declare function useDuticotac(config: UseDuticotacConfig): UseDuticotacReturn;
+
 declare function cn(...inputs: ClassValue[]): string;
 
 declare function formatCFA(n: number): string;
@@ -99,4 +162,4 @@ declare function validatePhone(phone: string, provider: PaymentProvider): string
 declare function normalizePhone(phone: string): string;
 declare function needsOtp(provider: PaymentProvider): boolean;
 
-export { DuticotacPaymentModal, type DuticotacPaymentModalProps, OtpInput, type OtpInputProps, PhoneInput, type PhoneInputProps, ProviderSelector, type ProviderSelectorProps, TransactionStatus, type TransactionStatusProps, cn, formatCFA, getPhoneRegex, needsOtp, normalizePhone, validatePhone };
+export { DuticotacPaymentModal, type DuticotacPaymentModalProps, OtpInput, type OtpInputProps, type PayOptions, PhoneInput, type PhoneInputProps, ProviderSelector, type ProviderSelectorProps, ResponsiveDialog, type ResponsiveDialogProps, TransactionStatus, type TransactionStatusProps, type UseDuticotacConfig, type UseDuticotacReturn, cn, formatCFA, getPhoneRegex, needsOtp, normalizePhone, useDuticotac, validatePhone };

package/dist/index.d.ts

@@ -90,6 +90,69 @@ interface TransactionStatusProps {
 }
 declare function TransactionStatus({ status, elapsedSeconds, message, errorMessage, paymentUrl, onRetry, onClose, onOpenPaymentUrl, className, }: TransactionStatusProps): react_jsx_runtime.JSX.Element;
 
+interface ResponsiveDialogProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function ResponsiveDialog({ open, onClose, title, children, className, }: ResponsiveDialogProps): React.ReactPortal | null;
+
+interface UseDuticotacConfig {
+    /** DuticotacSDK instance. */
+    sdk: DuticotacSDK;
+    /** Available payment providers. */
+    providers?: PaymentProvider[];
+    /** Called to get a unique transaction ID before cashout. */
+    getTransactionId: () => Promise<string>;
+    /** Shared defaults — can be overridden per pay() call. */
+    productReference?: string;
+    name?: string;
+    email?: string;
+    customerId?: string;
+    kolaboReference?: string;
+    app?: CoreApp;
+    platform?: PlatformType;
+    initialPhone?: string;
+    /** Polling timeout in ms (default: 90000). */
+    pollTimeout?: number;
+    /** Dialog title (default: "Paiement"). */
+    title?: string;
+}
+interface PayOptions {
+    /** Amount in FCFA. */
+    amount: number;
+    /** Override providers for this payment. */
+    providers?: PaymentProvider[];
+    /** Override product reference. */
+    productReference?: string;
+    /** Override customer details. */
+    name?: string;
+    email?: string;
+    customerId?: string;
+    /** Custom success message. */
+    successMessage?: string;
+    /** Called when payment is confirmed. */
+    onSuccess?: (transaction: TransactionModel) => void;
+    /** Called when the dialog closes (success or cancel). */
+    onClose?: () => void;
+}
+interface UseDuticotacReturn {
+    /** Open the payment dialog with the given options. */
+    pay: (options: PayOptions) => void;
+    /** Whether the dialog is currently open. */
+    isOpen: boolean;
+    /** Close the dialog programmatically. */
+    close: () => void;
+    /**
+     * The dialog JSX element. Render this once somewhere in your component tree.
+     * @example return <>{Dialog}</>
+     */
+    Dialog: React.ReactNode;
+}
+declare function useDuticotac(config: UseDuticotacConfig): UseDuticotacReturn;
+
 declare function cn(...inputs: ClassValue[]): string;
 
 declare function formatCFA(n: number): string;
@@ -99,4 +162,4 @@ declare function validatePhone(phone: string, provider: PaymentProvider): string
 declare function normalizePhone(phone: string): string;
 declare function needsOtp(provider: PaymentProvider): boolean;
 
-export { DuticotacPaymentModal, type DuticotacPaymentModalProps, OtpInput, type OtpInputProps, PhoneInput, type PhoneInputProps, ProviderSelector, type ProviderSelectorProps, TransactionStatus, type TransactionStatusProps, cn, formatCFA, getPhoneRegex, needsOtp, normalizePhone, validatePhone };
+export { DuticotacPaymentModal, type DuticotacPaymentModalProps, OtpInput, type OtpInputProps, type PayOptions, PhoneInput, type PhoneInputProps, ProviderSelector, type ProviderSelectorProps, ResponsiveDialog, type ResponsiveDialogProps, TransactionStatus, type TransactionStatusProps, type UseDuticotacConfig, type UseDuticotacReturn, cn, formatCFA, getPhoneRegex, needsOtp, normalizePhone, useDuticotac, validatePhone };

package/dist/index.js

@@ -35,12 +35,14 @@ __export(index_exports, {
   OtpInput: () => OtpInput,
   PhoneInput: () => PhoneInput,
   ProviderSelector: () => ProviderSelector,
+  ResponsiveDialog: () => ResponsiveDialog,
   TransactionStatus: () => TransactionStatus,
   cn: () => cn,
   formatCFA: () => formatCFA,
   getPhoneRegex: () => getPhoneRegex,
   needsOtp: () => needsOtp,
   normalizePhone: () => normalizePhone,
+  useDuticotac: () => useDuticotac,
   validatePhone: () => validatePhone
 });
 module.exports = __toCommonJS(index_exports);
@@ -703,18 +705,276 @@ function DuticotacPaymentModal({
     ] })
   ] });
 }
+
+// src/components/responsive-dialog.tsx
+var React3 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ANIMATION_MS = 250;
+function ResponsiveDialog({
+  open,
+  onClose,
+  title,
+  children,
+  className
+}) {
+  const [mounted, setMounted] = React3.useState(false);
+  const [visible, setVisible] = React3.useState(false);
+  const panelRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setVisible(true));
+      });
+    } else if (mounted) {
+      setVisible(false);
+      const timer = setTimeout(() => setMounted(false), ANIMATION_MS);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+  React3.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  React3.useEffect(() => {
+    if (!mounted) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [mounted]);
+  if (!mounted) return null;
+  const dialog = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
+        .dtc-dialog-backdrop {
+          position: fixed;
+          inset: 0;
+          z-index: 9998;
+          background: rgba(0,0,0,0);
+          transition: background ${ANIMATION_MS}ms ease;
+        }
+        .dtc-dialog-backdrop.dtc-visible {
+          background: rgba(0,0,0,0.5);
+        }
+
+        /* \u2500\u2500 Desktop: centered modal \u2500\u2500 */
+        .dtc-dialog-panel {
+          position: fixed;
+          z-index: 9999;
+          background: var(--background, #fff);
+          border: 1px solid var(--border, #e5e7eb);
+          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
+
+          /* Desktop default */
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%) scale(0.95);
+          opacity: 0;
+          width: calc(100% - 32px);
+          max-width: 440px;
+          max-height: calc(100vh - 64px);
+          border-radius: 16px;
+          overflow-y: auto;
+
+          transition:
+            transform ${ANIMATION_MS}ms cubic-bezier(0.22, 1, 0.36, 1),
+            opacity ${ANIMATION_MS}ms ease;
+        }
+        .dtc-dialog-panel.dtc-visible {
+          transform: translate(-50%, -50%) scale(1);
+          opacity: 1;
+        }
+
+        /* \u2500\u2500 Mobile: bottom sheet \u2500\u2500 */
+        @media (max-width: 640px) {
+          .dtc-dialog-panel {
+            top: auto;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            transform: translateY(100%);
+            opacity: 1;
+            width: 100%;
+            max-width: 100%;
+            max-height: 90vh;
+            border-radius: 20px 20px 0 0;
+            border-bottom: none;
+          }
+          .dtc-dialog-panel.dtc-visible {
+            transform: translateY(0);
+          }
+        }
+      ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: cn("dtc-dialog-backdrop", visible && "dtc-visible"),
+        onClick: onClose,
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        ref: panelRef,
+        className: cn("dtc-dialog-panel", visible && "dtc-visible", className),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "dtc-mobile-handle", style: {
+            display: "none",
+            justifyContent: "center",
+            paddingTop: 12,
+            paddingBottom: 4
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+            width: 36,
+            height: 4,
+            borderRadius: 2,
+            background: "var(--border, #d1d5db)"
+          } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
+          @media (max-width: 640px) {
+            .dtc-mobile-handle { display: flex !important; }
+          }
+        ` }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "16px 20px 0"
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { style: {
+              fontSize: 18,
+              fontWeight: 700,
+              color: "var(--foreground, #111)",
+              margin: 0
+            }, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                style: {
+                  background: "none",
+                  border: "none",
+                  padding: 4,
+                  cursor: "pointer",
+                  borderRadius: 6,
+                  color: "var(--muted-foreground, #6b7280)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "path",
+                  {
+                    d: "M6 18L18 6M6 6l12 12",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round"
+                  }
+                ) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "16px 20px 20px" }, children })
+        ]
+      }
+    )
+  ] });
+  if (typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(dialog, document.body);
+}
+
+// src/hooks/use-duticotac.tsx
+var React4 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function useDuticotac(config) {
+  const [open, setOpen] = React4.useState(false);
+  const [payOptions, setPayOptions] = React4.useState(null);
+  const configRef = React4.useRef(config);
+  configRef.current = config;
+  const pay = React4.useCallback((options) => {
+    setPayOptions(options);
+    setOpen(true);
+  }, []);
+  const close = React4.useCallback(() => {
+    setOpen(false);
+  }, []);
+  const handleClose = React4.useCallback(() => {
+    setOpen(false);
+    payOptions?.onClose?.();
+  }, [payOptions]);
+  const handleSuccess = React4.useCallback(
+    (tx) => {
+      payOptions?.onSuccess?.(tx);
+    },
+    [payOptions]
+  );
+  const DialogElement = React4.useMemo(() => {
+    if (!payOptions) return null;
+    const cfg = configRef.current;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      DuticotacPaymentModal,
+      {
+        open,
+        onClose: handleClose,
+        onSuccess: handleSuccess,
+        sdk: cfg.sdk,
+        amount: payOptions.amount,
+        providers: payOptions.providers ?? cfg.providers,
+        getTransactionId: cfg.getTransactionId,
+        productReference: payOptions.productReference ?? cfg.productReference,
+        initialPhone: cfg.initialPhone,
+        name: payOptions.name ?? cfg.name,
+        email: payOptions.email ?? cfg.email,
+        customerId: payOptions.customerId ?? cfg.customerId,
+        kolaboReference: cfg.kolaboReference,
+        app: cfg.app,
+        platform: cfg.platform,
+        pollTimeout: cfg.pollTimeout,
+        title: cfg.title,
+        successMessage: payOptions.successMessage,
+        renderModal: ({ open: isOpen, onClose: modalClose, title: modalTitle, children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ResponsiveDialog,
+          {
+            open: isOpen,
+            onClose: modalClose,
+            title: modalTitle,
+            children
+          }
+        )
+      }
+    );
+  }, [open, payOptions, handleClose, handleSuccess]);
+  return {
+    pay,
+    isOpen: open,
+    close,
+    Dialog: DialogElement
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DuticotacPaymentModal,
   OtpInput,
   PhoneInput,
   ProviderSelector,
+  ResponsiveDialog,
   TransactionStatus,
   cn,
   formatCFA,
   getPhoneRegex,
   needsOtp,
   normalizePhone,
+  useDuticotac,
   validatePhone
 });
 //# sourceMappingURL=index.js.map