@opexa/portal-components 0.0.8 → 0.0.10

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.mjs

@@ -1,23 +1,24 @@
-import { Portal as b } from "@ark-ui/react";
-import { zodResolver as I } from "../../../../node_modules/.pnpm/@hookform_resolvers@5.0.1_react-hook-form@7.56.4_react@19.1.0_/node_modules/@hookform/resolvers/zod/dist/zod.mjs";
-import { useEffect as A } from "react";
-import { useForm as S, Controller as C } from "react-hook-form";
-import { z as a } from "zod";
+import { j as o } from "../../../../_virtual/jsx-runtime.mjs";
+import { Portal as A } from "@ark-ui/react";
+import { zodResolver as S } from "../../../../node_modules/.pnpm/@hookform_resolvers@5.0.1_react-hook-form@7.56.4_react@19.1.0_/node_modules/@hookform/resolvers/zod/dist/zod.mjs";
+import { useEffect as Q } from "react";
+import { useForm as R, Controller as y } from "react-hook-form";
+import { z as m } from "zod";
 import "@opexa/portal-sdk-core";
 import "@tanstack/react-query";
 import "tiny-invariant";
 import "../../../../constants/index.mjs";
 import "../../../../utils/capitalize.mjs";
-import { parseDecimal as m } from "../../../../utils/parseDecimal.mjs";
+import { parseDecimal as n } from "../../../../utils/parseDecimal.mjs";
 import "../../../../utils/getLocaleInfo.mjs";
 import "../../../../utils/getQueryClient.mjs";
 import "../../../../utils/isMobile.mjs";
 import "../../../../utils/toaster.mjs";
-import { useAvailablePromosQuery as Q } from "../../../../hooks/useAvailablePromosQuery.mjs";
+import { useAvailablePromosQuery as O } from "../../../../hooks/useAvailablePromosQuery.mjs";
 import "lodash-es";
-import "../../../../_virtual/index.cjs.mjs";
-import { useDepositsCountQuery as O } from "../../../../hooks/useDepositsCountQuery.mjs";
-import { useDisclosure as P } from "../../../../hooks/useDisclosure.mjs";
+import "../../../../node_modules/.pnpm/@opexa_portal-sdk-core@0.0.22/node_modules/@opexa/portal-sdk-core/dist/object-id.mjs";
+import { useDepositsCountQuery as P } from "../../../../hooks/useDepositsCountQuery.mjs";
+import { useDisclosure as E } from "../../../../hooks/useDisclosure.mjs";
 import "../../../../hooks/useGlobalStore.mjs";
 import "../../../../hooks/useInfiniteQueryHelper.mjs";
 import "usehooks-ts";
@@ -26,18 +27,18 @@ import { AlertCircleIcon as M } from "../../../../icons/AlertCircleIcon.mjs";
 import { ChevronDownIcon as N } from "../../../../icons/ChevronDownIcon.mjs";
 import { ChevronUpIcon as k } from "../../../../icons/ChevronUpIcon.mjs";
 import { XIcon as F } from "../../../../icons/XIcon.mjs";
-import { Root as T, Backdrop as w, Positioner as V, Content as $, Header as L, CloseTrigger as Z, Body as B, Title as H, Description as U, Footer as j } from "../../../../ui/AlertDialog/AlertDialog.mjs";
+import { Root as T, Backdrop as w, Positioner as V, Content as $, Header as L, CloseTrigger as Z, Body as B, Title as H, Description as U, Footer as q } from "../../../../ui/AlertDialog/AlertDialog.mjs";
 import "../../../../ui/Avatar/Avatar.mjs";
 import "../../../../ui/Badge/Badge.mjs";
-import { Button as c } from "../../../../ui/Button/Button.mjs";
+import { Button as p } from "../../../../ui/Button/Button.mjs";
 import "../../../../ui/Checkbox/Checkbox.mjs";
 import "../../../../ui/Clipboard/Clipboard.mjs";
 import "../../../../ui/DatePicker/DatePicker.mjs";
 import "../../../../ui/Dialog/Dialog.mjs";
 import "../../../../ui/Drawer/Drawer.mjs";
-import { Root as q, ErrorText as _ } from "../../../../ui/Field/Field.mjs";
+import { Root as _, ErrorText as G } from "../../../../ui/Field/Field.mjs";
 import "../../../../ui/IconButton/iconButton.recipe.mjs";
-import { Root as G, Label as W, Control as X, Input as Y, IncrementTrigger as J, DecrementTrigger as K } from "../../../../ui/NumberInput/NumberInput.mjs";
+import { Root as W, Label as X, Control as Y, Input as J, IncrementTrigger as K, DecrementTrigger as oo } from "../../../../ui/NumberInput/NumberInput.mjs";
 import "../../../../ui/PinInput/PinInput.mjs";
 import "../../../../ui/Popover/Popover.mjs";
 import "tailwind-merge";
@@ -45,167 +46,204 @@ import "../../../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../../../ui/Select/Select.mjs";
 import "../../../../ui/Table/Table.mjs";
 import "../../../../ui/Tabs/Tabs.mjs";
-import { AmountChoices as ee } from "../../AmountChoices.mjs";
-import { AvailablePromos as te } from "../../AvailablePromos.mjs";
-import { useQRPHDepositContext as oe } from "./QRPHDepositContext.mjs";
-function tt() {
-  var R;
-  const y = oe(), l = P(), v = O().data ?? 0, p = z(), u = p.data, i = u == null ? void 0 : u.qrphDepositGatewaySettings, s = m(i == null ? void 0 : i.maximumAmount, 0), n = v <= 0 ? m((R = p.data) == null ? void 0 : R.minimumFirstDepositAmount, 0) : m(i == null ? void 0 : i.minimumAmount, 0), d = Q().data ?? [], x = a.object({
-    amount: a.string().superRefine((e, r) => {
-      const t = m(e, 0);
-      t < n && r.addIssue({
+import { AmountChoices as eo } from "../../AmountChoices.mjs";
+import { AvailablePromos as to } from "../../AvailablePromos.mjs";
+import { useQRPHDepositContext as ro } from "./QRPHDepositContext.mjs";
+function ie() {
+  var h;
+  const v = ro(), a = E(), D = P().data ?? 0, d = z(), c = d.data, u = c == null ? void 0 : c.qrphDepositGatewaySettings, l = n(u == null ? void 0 : u.maximumAmount, 0), s = D <= 0 ? n((h = d.data) == null ? void 0 : h.minimumFirstDepositAmount, 0) : n(u == null ? void 0 : u.minimumAmount, 0), f = O().data ?? [], b = m.object({
+    amount: m.string().superRefine((e, i) => {
+      const t = n(e, 0);
+      t < s && i.addIssue({
         type: "number",
-        code: a.ZodIssueCode.too_small,
+        code: m.ZodIssueCode.too_small,
         inclusive: !0,
-        minimum: n,
-        message: `Minimum amount is ${n.toLocaleString()}`
-      }), t > s && r.addIssue({
+        minimum: s,
+        message: `Minimum amount is ${s.toLocaleString()}`
+      }), t > l && i.addIssue({
         type: "number",
-        code: a.ZodIssueCode.too_big,
+        code: m.ZodIssueCode.too_big,
         inclusive: !0,
-        maximum: s,
-        message: `Maximum amount is ${s.toLocaleString()}`
+        maximum: l,
+        message: `Maximum amount is ${l.toLocaleString()}`
       });
     }),
-    promo: a.string().optional().nullable()
-  }).superRefine((e, r) => {
-    const t = d.find((D) => D.id === e.promo), E = m(t == null ? void 0 : t.minimumDepositAmount, 0), g = m(t == null ? void 0 : t.maximumDepositAmount, 0), h = m(e.amount, 0);
-    t && h < E && r.addIssue({
+    promo: m.string().optional().nullable()
+  }).superRefine((e, i) => {
+    const t = f.find((I) => I.id === e.promo), j = n(t == null ? void 0 : t.minimumDepositAmount, 0), g = n(t == null ? void 0 : t.maximumDepositAmount, 0), C = n(e.amount, 0);
+    t && C < j && i.addIssue({
       path: ["amount"],
-      code: a.ZodIssueCode.custom,
-      message: `Minimum amount for this promo is ${E.toLocaleString()}`
-    }), t && h > g && r.addIssue({
+      code: m.ZodIssueCode.custom,
+      message: `Minimum amount for this promo is ${j.toLocaleString()}`
+    }), t && C > g && i.addIssue({
       path: ["amount"],
-      code: a.ZodIssueCode.custom,
+      code: m.ZodIssueCode.custom,
       message: `Maximum amount for this promo is ${g}`
     });
-  }), o = S({
+  }), r = R({
     mode: "all",
-    resolver: I(x),
+    resolver: S(b),
     defaultValues: {
       amount: "0",
       promo: null
     }
   });
-  A(() => {
-    n && o.reset({
-      amount: n.toString(),
+  Q(() => {
+    s && r.reset({
+      amount: s.toString(),
       promo: null
     });
-  }, [o, n]);
-  const f = o.handleSubmit(async (e) => {
-    y.generateQrCode(
+  }, [r, s]);
+  const x = r.handleSubmit(async (e) => {
+    v.generateQrCode(
       {
         amount: e.amount.toString(),
         promo: e.promo ?? void 0
       },
       {
         onSuccess() {
-          o.reset();
+          r.reset();
         }
       }
     );
   });
-  return /* @__PURE__ */ React.createElement("form", { onSubmit: f, noValidate: !0 }, /* @__PURE__ */ React.createElement(
-    C,
-    {
-      control: o.control,
-      name: "amount",
-      render: (e) => {
-        var r;
-        return /* @__PURE__ */ React.createElement(q, { invalid: !!o.formState.errors.amount }, /* @__PURE__ */ React.createElement(
-          G,
+  return /* @__PURE__ */ o.jsxs("form", { onSubmit: x, noValidate: !0, children: [
+    /* @__PURE__ */ o.jsx(
+      y,
+      {
+        control: r.control,
+        name: "amount",
+        render: (e) => {
+          var i;
+          return /* @__PURE__ */ o.jsxs(_, { invalid: !!r.formState.errors.amount, children: [
+            /* @__PURE__ */ o.jsxs(
+              W,
+              {
+                min: 0,
+                step: 1,
+                value: e.field.value,
+                onValueChange: (t) => {
+                  e.field.onChange(t.value);
+                },
+                formatOptions: {
+                  maximumFractionDigits: 2,
+                  minimumFractionDigits: 0
+                },
+                allowMouseWheel: !0,
+                children: [
+                  /* @__PURE__ */ o.jsx(X, { children: "Enter amount you want to deposit" }),
+                  /* @__PURE__ */ o.jsxs(Y, { children: [
+                    /* @__PURE__ */ o.jsx(J, {}),
+                    /* @__PURE__ */ o.jsx(K, { children: /* @__PURE__ */ o.jsx(k, {}) }),
+                    /* @__PURE__ */ o.jsx(oo, { children: /* @__PURE__ */ o.jsx(N, {}) })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ o.jsx(G, { children: (i = r.formState.errors.amount) == null ? void 0 : i.message })
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      eo,
+      {
+        value: n(r.watch("amount"), 0),
+        onChange: (e) => {
+          r.setValue("amount", e.toString(), {
+            shouldTouch: !0,
+            shouldDirty: !0,
+            shouldValidate: !0
+          });
+        },
+        min: s,
+        max: l,
+        className: "mt-xl"
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      y,
+      {
+        control: r.control,
+        name: "promo",
+        render: (e) => /* @__PURE__ */ o.jsx(
+          to,
           {
-            min: 0,
-            step: 1,
+            className: "mt-4xl",
             value: e.field.value,
-            onValueChange: (t) => {
-              e.field.onChange(t.value);
-            },
-            formatOptions: {
-              maximumFractionDigits: 2,
-              minimumFractionDigits: 0
-            },
-            allowMouseWheel: !0
-          },
-          /* @__PURE__ */ React.createElement(W, null, "Enter amount you want to deposit"),
-          /* @__PURE__ */ React.createElement(X, null, /* @__PURE__ */ React.createElement(Y, null), /* @__PURE__ */ React.createElement(J, null, /* @__PURE__ */ React.createElement(k, null)), /* @__PURE__ */ React.createElement(K, null, /* @__PURE__ */ React.createElement(N, null)))
-        ), /* @__PURE__ */ React.createElement(_, null, (r = o.formState.errors.amount) == null ? void 0 : r.message));
+            onChange: e.field.onChange
+          }
+        )
       }
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ee,
-    {
-      value: m(o.watch("amount"), 0),
-      onChange: (e) => {
-        o.setValue("amount", e.toString(), {
-          shouldTouch: !0,
-          shouldDirty: !0,
-          shouldValidate: !0
-        });
-      },
-      min: n,
-      max: s,
-      className: "mt-xl"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    C,
-    {
-      control: o.control,
-      name: "promo",
-      render: (e) => /* @__PURE__ */ React.createElement(
-        te,
-        {
-          className: "mt-4xl",
-          value: e.field.value,
-          onChange: e.field.onChange
-        }
-      )
-    }
-  ), /* @__PURE__ */ React.createElement("p", { className: "mt-4xl text-xs" }, "Upon clicking the deposit button, you agree to the", " ", /* @__PURE__ */ React.createElement("button", { type: "button", className: "underline underline-offset-2" }, "Terms of Use and Privacy Policy"), "."), /* @__PURE__ */ React.createElement(
-    c,
-    {
-      type: "submit",
-      className: "mt-4.5",
-      onClick: async (e) => {
-        await o.trigger("amount") && (d.length <= 0 || o.getValues("promo") || (e.preventDefault(), l.setOpen(!0)));
-      }
-    },
-    "Deposit"
-  ), /* @__PURE__ */ React.createElement(
-    T,
-    {
-      role: "alertdialog",
-      open: l.open,
-      onOpenChange: (e) => {
-        l.setOpen(e.open);
-      },
-      lazyMount: !0,
-      unmountOnExit: !0,
-      closeOnEscape: !1,
-      closeOnInteractOutside: !1
-    },
-    /* @__PURE__ */ React.createElement(b, null, /* @__PURE__ */ React.createElement(w, { className: "!z-[calc(var(--z-dialog)+10)]" }), /* @__PURE__ */ React.createElement(V, { className: "!z-[calc(var(--z-dialog)+25)]" }, /* @__PURE__ */ React.createElement($, null, /* @__PURE__ */ React.createElement(L, null, /* @__PURE__ */ React.createElement("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]" }, /* @__PURE__ */ React.createElement(M, null)), /* @__PURE__ */ React.createElement(Z, null, /* @__PURE__ */ React.createElement(F, null))), /* @__PURE__ */ React.createElement(B, null, /* @__PURE__ */ React.createElement(H, null, "Submit deposit request without promo?"), /* @__PURE__ */ React.createElement(U, null, "You haven’t selected a promo. Are you sure you want to proceed without one?")), /* @__PURE__ */ React.createElement(j, null, /* @__PURE__ */ React.createElement(
-      c,
+    ),
+    /* @__PURE__ */ o.jsxs("p", { className: "mt-4xl text-xs", children: [
+      "Upon clicking the deposit button, you agree to the",
+      " ",
+      /* @__PURE__ */ o.jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }),
+      "."
+    ] }),
+    /* @__PURE__ */ o.jsx(
+      p,
       {
-        variant: "outline",
-        colorScheme: "gray",
-        onClick: () => {
-          l.setOpen(!1);
-        }
-      },
-      "Cancel"
-    ), /* @__PURE__ */ React.createElement(
-      c,
+        type: "submit",
+        className: "mt-4.5",
+        onClick: async (e) => {
+          await r.trigger("amount") && (f.length <= 0 || r.getValues("promo") || (e.preventDefault(), a.setOpen(!0)));
+        },
+        children: "Deposit"
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      T,
       {
-        onClick: () => {
-          f(), l.setOpen(!1);
-        }
-      },
-      "Proceed"
-    )))))
-  ));
+        role: "alertdialog",
+        open: a.open,
+        onOpenChange: (e) => {
+          a.setOpen(e.open);
+        },
+        lazyMount: !0,
+        unmountOnExit: !0,
+        closeOnEscape: !1,
+        closeOnInteractOutside: !1,
+        children: /* @__PURE__ */ o.jsxs(A, { children: [
+          /* @__PURE__ */ o.jsx(w, { className: "!z-[calc(var(--z-dialog)+10)]" }),
+          /* @__PURE__ */ o.jsx(V, { className: "!z-[calc(var(--z-dialog)+25)]", children: /* @__PURE__ */ o.jsxs($, { children: [
+            /* @__PURE__ */ o.jsxs(L, { children: [
+              /* @__PURE__ */ o.jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]", children: /* @__PURE__ */ o.jsx(M, {}) }),
+              /* @__PURE__ */ o.jsx(Z, { children: /* @__PURE__ */ o.jsx(F, {}) })
+            ] }),
+            /* @__PURE__ */ o.jsxs(B, { children: [
+              /* @__PURE__ */ o.jsx(H, { children: "Submit deposit request without promo?" }),
+              /* @__PURE__ */ o.jsx(U, { children: "You haven’t selected a promo. Are you sure you want to proceed without one?" })
+            ] }),
+            /* @__PURE__ */ o.jsxs(q, { children: [
+              /* @__PURE__ */ o.jsx(
+                p,
+                {
+                  variant: "outline",
+                  colorScheme: "gray",
+                  onClick: () => {
+                    a.setOpen(!1);
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ o.jsx(
+                p,
+                {
+                  onClick: () => {
+                    x(), a.setOpen(!1);
+                  },
+                  children: "Proceed"
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      }
+    )
+  ] });
 }
 export {
-  tt as QRPHDepositForm
+  ie as QRPHDepositForm
 };

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositLoading.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../icons/SpinnerIcon.js");function t(){return React.createElement("div",{className:"bg-gray-50 rounded-lg px-10 py-12 lg:p-16"},React.createElement(e.SpinnerIcon,{className:"mx-auto size-8 lg:size-10"}),React.createElement("p",{className:"mt-5 text-center text-lg font-semibold lg:text-xl"},"Generating QR Code"),React.createElement("p",{className:"text-gray-700 mt-3 text-center text-sm lg:text-base"},"Please hold tight as we verify the account details and amount. Once verified, a QRPH code will be displayed for you to scan and complete the transaction."))}exports.QRPHDepositLoading=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.js"),t=require("../../../../icons/SpinnerIcon.js");function s(){return e.jsxRuntimeExports.jsxs("div",{className:"bg-gray-50 rounded-lg px-10 py-12 lg:p-16",children:[e.jsxRuntimeExports.jsx(t.SpinnerIcon,{className:"mx-auto size-8 lg:size-10"}),e.jsxRuntimeExports.jsx("p",{className:"mt-5 text-center text-lg font-semibold lg:text-xl",children:"Generating QR Code"}),e.jsxRuntimeExports.jsx("p",{className:"text-gray-700 mt-3 text-center text-sm lg:text-base",children:"Please hold tight as we verify the account details and amount. Once verified, a QRPH code will be displayed for you to scan and complete the transaction."})]})}exports.QRPHDepositLoading=s;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositLoading.mjs

@@ -1,7 +1,12 @@
-import { SpinnerIcon as e } from "../../../../icons/SpinnerIcon.mjs";
-function a() {
-  return /* @__PURE__ */ React.createElement("div", { className: "bg-gray-50 rounded-lg px-10 py-12 lg:p-16" }, /* @__PURE__ */ React.createElement(e, { className: "mx-auto size-8 lg:size-10" }), /* @__PURE__ */ React.createElement("p", { className: "mt-5 text-center text-lg font-semibold lg:text-xl" }, "Generating QR Code"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-700 mt-3 text-center text-sm lg:text-base" }, "Please hold tight as we verify the account details and amount. Once verified, a QRPH code will be displayed for you to scan and complete the transaction."));
+import { j as e } from "../../../../_virtual/jsx-runtime.mjs";
+import { SpinnerIcon as t } from "../../../../icons/SpinnerIcon.mjs";
+function n() {
+  return /* @__PURE__ */ e.jsxs("div", { className: "bg-gray-50 rounded-lg px-10 py-12 lg:p-16", children: [
+    /* @__PURE__ */ e.jsx(t, { className: "mx-auto size-8 lg:size-10" }),
+    /* @__PURE__ */ e.jsx("p", { className: "mt-5 text-center text-lg font-semibold lg:text-xl", children: "Generating QR Code" }),
+    /* @__PURE__ */ e.jsx("p", { className: "text-gray-700 mt-3 text-center text-sm lg:text-base", children: "Please hold tight as we verify the account details and amount. Once verified, a QRPH code will be displayed for you to scan and complete the transaction." })
+  ] });
 }
 export {
-  a as QRPHDepositLoading
+  n as QRPHDepositLoading
 };

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositQrCode.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ark-ui/react"),c=require("../../../../_virtual/image.js"),l=require("../../../../icons/QrCode02Icon.js"),n=require("../../../../icons/SpinnerIcon.js"),o=require("../../../../icons/XIcon.js"),i=require("../../../../images/qrph-icon.png.js");require("../../../../ui/AlertDialog/AlertDialog.js");require("../../../../ui/Avatar/Avatar.js");require("../../../../ui/Badge/Badge.js");const a=require("../../../../ui/Button/Button.js");require("../../../../ui/Checkbox/Checkbox.js");require("../../../../ui/Clipboard/Clipboard.js");require("../../../../ui/DatePicker/DatePicker.js");const e=require("../../../../ui/Dialog/Dialog.js");require("../../../../ui/Drawer/Drawer.js");require("../../../../ui/Field/Field.js");require("../../../../utils/capitalize.js");require("react");require("../../../../utils/parseDecimal.js");require("../../../../constants/index.js");require("../../../../utils/getLocaleInfo.js");require("../../../../utils/getQueryClient.js");require("../../../../utils/isMobile.js");require("../../../../utils/toaster.js");require("../../../../ui/IconButton/iconButton.recipe.js");require("../../../../ui/NumberInput/NumberInput.js");require("../../../../ui/PinInput/PinInput.js");require("../../../../ui/Popover/Popover.js");require("tailwind-merge");require("../../../../ui/SegmentGroup/SegmentGroup.js");require("../../../../ui/Select/Select.js");require("../../../../ui/Table/Table.js");require("../../../../ui/Tabs/Tabs.js");const s=require("./QRPHDepositContext.js");function m(){const r=s.useQRPHDepositContext();return React.createElement("div",{className:"bg-gray-50 rounded-lg px-10 py-12 lg:p-16"},React.createElement("p",{className:"mt-5 text-center text-lg font-semibold lg:text-xl"},"QR Code"),React.createElement("p",{className:"text-gray-700 mt-3 text-center text-sm lg:text-base"},"Scan the QR code below with your banking app, or upload it to complete your deposit."),React.createElement(t.QrCode.Root,{value:r.qrCode??"",className:"border-gray-200 mx-auto mt-6 w-[12.5rem] rounded-lg border bg-white p-5 lg:w-[13rem] lg:p-6"},React.createElement("div",{className:"relative"},React.createElement(t.QrCode.Frame,{className:"border-gray-200 mx-auto size-[10rem] rounded-[0.25rem] border"},React.createElement(t.QrCode.Pattern,null)),React.createElement(t.QrCode.Overlay,{className:"bg-white p-0.5"},React.createElement(c,{src:i,alt:"",className:"size-8",width:40,height:40}))),React.createElement(t.QrCode.DownloadTrigger,{fileName:`qrcode-${new Date().getTime()}`,mimeType:"image/png",className:"text-gray-900 mt-5 block w-full text-center text-sm font-semibold"},"Download QR Code")),r.view==="QR_CODE"&&React.createElement("div",{className:"mt-6 flex flex-col gap-4 lg:flex-row"},React.createElement(a.Button,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>{r.reset()}},"Generate New QR Code"),React.createElement(a.Button,{size:"sm",onClick:()=>{r.verify()}},"Confirm Deposit")),r.view==="VERIFYING"&&React.createElement("div",{className:"border-gray-200 mt-6 rounded-lg border bg-white p-4 lg:p-6"},React.createElement(n.SpinnerIcon,{className:"mx-auto size-6 lg:size-8"}),React.createElement("p",{className:"mt-5 text-center font-semibold lg:text-lg"},"Processing your deposit"),React.createElement("p",{className:"text-gray-700 mx-auto mt-2 text-center text-xs lg:text-sm"},"Your deposit is being processed. ",React.createElement("br",null),"Please hold tight as we verify the account details and amount.")),React.createElement(u,null))}function u(){return React.createElement("p",{className:"text-gray-500 mt-6 text-center text-xs"},"Need help using the QR Code?"," ",React.createElement(e.Root,{lazyMount:!0,unmountOnExit:!0},React.createElement(e.Trigger,{className:"text-blue-500"},"See instructions"),React.createElement(t.Portal,null,React.createElement(e.Backdrop,{className:"!z-[calc(var(--z-dialog)+2)]"}),React.createElement(e.Positioner,{className:"!z-[calc(var(--z-dialog)+3)] flex items-center justify-center"},React.createElement(e.Content,{className:"mx-auto w-[calc(100%-2rem)] rounded-lg bg-white p-4xl lg:w-[33.625rem]"},React.createElement(e.CloseTrigger,null,React.createElement(o.XIcon,null)),React.createElement(e.Body,null,React.createElement("div",{className:"flex items-center gap-xl"},React.createElement("div",{className:"border-gray-200 flex size-11 items-center justify-center rounded-lg border"},React.createElement(l.QrCode02Icon,{className:"text-gray-600 size-6"})),React.createElement(e.Title,{className:"text-lg font-semibold"},"How to Use the QR Code for Payment")),React.createElement(e.Description,{className:"mt-5"},"Follow these simple steps to complete your transaction:"),React.createElement("ol",{className:"mt-3 list-inside list-decimal space-y-3"},React.createElement("li",null,"Open your preferred banking or EMI mobile app and select 'Transfer Money' or 'Pay via QR'"),React.createElement("li",null,"Scan or upload the generated QR Ph code. If prompted by the app, enter the amount to be sent."),React.createElement("li",null,"Proceed with the transfer or payment."))))))))}exports.QRPHDepositQrCode=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.js"),r=require("@ark-ui/react"),o=require("../../../../_virtual/image.js"),n=require("../../../../icons/QrCode02Icon.js"),x=require("../../../../icons/SpinnerIcon.js"),l=require("../../../../icons/XIcon.js"),a=require("../../../../images/qrph-icon.png.js");require("../../../../ui/AlertDialog/AlertDialog.js");require("../../../../ui/Avatar/Avatar.js");require("../../../../ui/Badge/Badge.js");const i=require("../../../../ui/Button/Button.js");require("../../../../ui/Checkbox/Checkbox.js");require("../../../../ui/Clipboard/Clipboard.js");require("../../../../ui/DatePicker/DatePicker.js");const t=require("../../../../ui/Dialog/Dialog.js");require("../../../../ui/Drawer/Drawer.js");require("../../../../ui/Field/Field.js");require("../../../../utils/capitalize.js");require("react");require("../../../../utils/parseDecimal.js");require("../../../../constants/index.js");require("../../../../utils/getLocaleInfo.js");require("../../../../utils/getQueryClient.js");require("../../../../utils/isMobile.js");require("../../../../utils/toaster.js");require("../../../../ui/IconButton/iconButton.recipe.js");require("../../../../ui/NumberInput/NumberInput.js");require("../../../../ui/PinInput/PinInput.js");require("../../../../ui/Popover/Popover.js");require("tailwind-merge");require("../../../../ui/SegmentGroup/SegmentGroup.js");require("../../../../ui/Select/Select.js");require("../../../../ui/Table/Table.js");require("../../../../ui/Tabs/Tabs.js");const c=require("./QRPHDepositContext.js");function u(){const s=c.useQRPHDepositContext();return e.jsxRuntimeExports.jsxs("div",{className:"bg-gray-50 rounded-lg px-10 py-12 lg:p-16",children:[e.jsxRuntimeExports.jsx("p",{className:"mt-5 text-center text-lg font-semibold lg:text-xl",children:"QR Code"}),e.jsxRuntimeExports.jsx("p",{className:"text-gray-700 mt-3 text-center text-sm lg:text-base",children:"Scan the QR code below with your banking app, or upload it to complete your deposit."}),e.jsxRuntimeExports.jsxs(r.QrCode.Root,{value:s.qrCode??"",className:"border-gray-200 mx-auto mt-6 w-[12.5rem] rounded-lg border bg-white p-5 lg:w-[13rem] lg:p-6",children:[e.jsxRuntimeExports.jsxs("div",{className:"relative",children:[e.jsxRuntimeExports.jsx(r.QrCode.Frame,{className:"border-gray-200 mx-auto size-[10rem] rounded-[0.25rem] border",children:e.jsxRuntimeExports.jsx(r.QrCode.Pattern,{})}),e.jsxRuntimeExports.jsx(r.QrCode.Overlay,{className:"bg-white p-0.5",children:e.jsxRuntimeExports.jsx(o,{src:a,alt:"",className:"size-8",width:40,height:40})})]}),e.jsxRuntimeExports.jsx(r.QrCode.DownloadTrigger,{fileName:`qrcode-${new Date().getTime()}`,mimeType:"image/png",className:"text-gray-900 mt-5 block w-full text-center text-sm font-semibold",children:"Download QR Code"})]}),s.view==="QR_CODE"&&e.jsxRuntimeExports.jsxs("div",{className:"mt-6 flex flex-col gap-4 lg:flex-row",children:[e.jsxRuntimeExports.jsx(i.Button,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>{s.reset()},children:"Generate New QR Code"}),e.jsxRuntimeExports.jsx(i.Button,{size:"sm",onClick:()=>{s.verify()},children:"Confirm Deposit"})]}),s.view==="VERIFYING"&&e.jsxRuntimeExports.jsxs("div",{className:"border-gray-200 mt-6 rounded-lg border bg-white p-4 lg:p-6",children:[e.jsxRuntimeExports.jsx(x.SpinnerIcon,{className:"mx-auto size-6 lg:size-8"}),e.jsxRuntimeExports.jsx("p",{className:"mt-5 text-center font-semibold lg:text-lg",children:"Processing your deposit"}),e.jsxRuntimeExports.jsxs("p",{className:"text-gray-700 mx-auto mt-2 text-center text-xs lg:text-sm",children:["Your deposit is being processed. ",e.jsxRuntimeExports.jsx("br",{}),"Please hold tight as we verify the account details and amount."]})]}),e.jsxRuntimeExports.jsx(m,{})]})}function m(){return e.jsxRuntimeExports.jsxs("p",{className:"text-gray-500 mt-6 text-center text-xs",children:["Need help using the QR Code?"," ",e.jsxRuntimeExports.jsxs(t.Root,{lazyMount:!0,unmountOnExit:!0,children:[e.jsxRuntimeExports.jsx(t.Trigger,{className:"text-blue-500",children:"See instructions"}),e.jsxRuntimeExports.jsxs(r.Portal,{children:[e.jsxRuntimeExports.jsx(t.Backdrop,{className:"!z-[calc(var(--z-dialog)+2)]"}),e.jsxRuntimeExports.jsx(t.Positioner,{className:"!z-[calc(var(--z-dialog)+3)] flex items-center justify-center",children:e.jsxRuntimeExports.jsxs(t.Content,{className:"mx-auto w-[calc(100%-2rem)] rounded-lg bg-white p-4xl lg:w-[33.625rem]",children:[e.jsxRuntimeExports.jsx(t.CloseTrigger,{children:e.jsxRuntimeExports.jsx(l.XIcon,{})}),e.jsxRuntimeExports.jsxs(t.Body,{children:[e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-xl",children:[e.jsxRuntimeExports.jsx("div",{className:"border-gray-200 flex size-11 items-center justify-center rounded-lg border",children:e.jsxRuntimeExports.jsx(n.QrCode02Icon,{className:"text-gray-600 size-6"})}),e.jsxRuntimeExports.jsx(t.Title,{className:"text-lg font-semibold",children:"How to Use the QR Code for Payment"})]}),e.jsxRuntimeExports.jsx(t.Description,{className:"mt-5",children:"Follow these simple steps to complete your transaction:"}),e.jsxRuntimeExports.jsxs("ol",{className:"mt-3 list-inside list-decimal space-y-3",children:[e.jsxRuntimeExports.jsx("li",{children:"Open your preferred banking or EMI mobile app and select 'Transfer Money' or 'Pay via QR'"}),e.jsxRuntimeExports.jsx("li",{children:"Scan or upload the generated QR Ph code. If prompted by the app, enter the amount to be sent."}),e.jsxRuntimeExports.jsx("li",{children:"Proceed with the transfer or payment."})]})]})]})})]})]})]})}exports.QRPHDepositQrCode=u;