@opexa/portal-components 0.0.17 → 0.0.19

package/dist/components/SignIn/SignIn.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Portal as l } from "@ark-ui/react";
-import m from "next/image";
-import { useShallow as p } from "zustand/shallow";
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { Portal as p } from "@ark-ui/react";
+import e from "next/image";
+import { useShallow as n } from "zustand/shallow";
 import "@opexa/portal-sdk-core";
 import "@tanstack/react-query";
 import "tiny-invariant";
@@ -12,76 +12,69 @@ import "../../utils/parseDecimal.mjs";
 import "../../utils/getLocaleInfo.mjs";
 import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
+import "../../client/services/getSession.mjs";
 import "react";
 import "lodash-es";
 import "@opexa/portal-sdk-core/object-id";
-import { useGlobalStore as n } from "../../client/hooks/useGlobalStore.mjs";
+import { useGlobalStore as l } from "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
 import "usehooks-ts";
-import { XIcon as s } from "../../icons/XIcon.mjs";
+import { XIcon as a } from "../../icons/XIcon.mjs";
 import "../../ui/AlertDialog/AlertDialog.mjs";
 import "../../ui/Avatar/Avatar.mjs";
 import "../../ui/Badge/Badge.mjs";
 import "../../ui/Button/button.recipe.mjs";
 import "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
+import "../../ui/Collapsible/Collapsible.mjs";
+import "../../ui/Combobox/Combobox.mjs";
 import "../../ui/DatePicker/DatePicker.mjs";
-import { Root as a, Trigger as c, Backdrop as h, Positioner as u, Content as d, CloseTrigger as g } from "../../ui/Dialog/Dialog.mjs";
+import { Root as s, Trigger as c, Backdrop as u, Positioner as g, Content as h, CloseTrigger as d } from "../../ui/Dialog/Dialog.mjs";
 import "../../ui/Drawer/Drawer.mjs";
 import "../../ui/Field/Field.mjs";
 import "../../ui/IconButton/iconButton.recipe.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PasswordInput/PasswordInput.mjs";
 import "../../ui/PinInput/PinInput.mjs";
 import "../../ui/Popover/Popover.mjs";
 import "tailwind-merge";
+import "../../ui/Progress/Progress.mjs";
 import "../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../ui/Select/Select.mjs";
 import "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
 import { SignInForm as f } from "./SignInForm.mjs";
-function it(r) {
-  const e = n(p((i) => i.signIn));
-  return /* @__PURE__ */ o(
-    a,
+function lo(i) {
+  const m = l(n((t) => t.signIn));
+  return /* @__PURE__ */ r(
+    s,
     {
-      open: e.open,
-      onOpenChange: (i) => {
-        e.setOpen(i.open);
+      open: m.open,
+      onOpenChange: (t) => {
+        m.setOpen(t.open);
       },
       lazyMount: !0,
       unmountOnExit: !0,
       closeOnEscape: !1,
       closeOnInteractOutside: !1,
       children: [
-        /* @__PURE__ */ t(c, { asChild: !0, children: r.children ?? /* @__PURE__ */ t("button", { type: "button", className: "px-3.5 font-semibold", children: "Login" }) }),
-        /* @__PURE__ */ o(l, { children: [
-          /* @__PURE__ */ t(h, {}),
-          /* @__PURE__ */ t(u, { children: /* @__PURE__ */ o(d, { className: "mx-auto flex h-full w-full items-start lg:h-auto lg:w-fit", children: [
-            /* @__PURE__ */ t(
-              m,
+        /* @__PURE__ */ o(c, { asChild: !0, children: i.children ?? /* @__PURE__ */ o("button", { type: "button", className: "px-3.5 font-semibold", children: "Login" }) }),
+        /* @__PURE__ */ r(p, { children: [
+          /* @__PURE__ */ o(u, {}),
+          /* @__PURE__ */ o(g, { children: /* @__PURE__ */ r(h, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [
+            /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(a, {}) }),
+            /* @__PURE__ */ o(
+              e,
               {
-                src: r.banner,
-                alt: "h-auto w-[400px]",
-                width: 400,
-                height: 800,
-                className: "hidden rounded-l-xl lg:block"
+                src: i.logo,
+                alt: "",
+                width: 200,
+                height: 100,
+                className: "mx-auto h-auto w-[120px]",
+                draggable: !1
               }
             ),
-            /* @__PURE__ */ o("div", { className: "relative flex w-full flex-col items-start self-stretch bg-white p-3xl lg:w-[400px] lg:rounded-r-xl", children: [
-              /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(s, {}) }),
-              /* @__PURE__ */ t(
-                m,
-                {
-                  src: r.logo,
-                  alt: "",
-                  width: 200,
-                  height: 100,
-                  className: "mx-auto h-auto w-[120px]",
-                  draggable: !1
-                }
-              ),
-              /* @__PURE__ */ t(f, {})
-            ] })
+            /* @__PURE__ */ o(f, {})
           ] }) })
         ] })
       ]
@@ -89,5 +82,5 @@ function it(r) {
   );
 }
 export {
-  it as SignIn
+  lo as SignIn
 };

package/dist/components/SignIn/SignInForm.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("@ark-ui/react"),j=require("@hookform/resolvers/zod"),S=require("react"),m=require("react-hook-form"),o=require("zod"),w=require("zustand/shallow");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");const k=require("../../client/hooks/useCooldown.js");require("@opexa/portal-sdk-core/object-id");const z=require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");const F=require("../../client/hooks/useLocaleInfo.js"),R=require("../../client/hooks/useMobileNumberParser.js");require("usehooks-ts");const M=require("../../client/hooks/useSendVerificationCodeMutation.js"),P=require("../../client/hooks/useSignInMutation.js"),q=require("../../client/utils/toaster.js"),A=require("../../icons/ArrowLeftIcon.js"),V=require("../../icons/CheckIcon.js"),L=require("../../icons/FacebookIcon.js"),O=require("../../icons/GoogleIcon.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const d=require("../../ui/Button/Button.js"),c=require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");const x=require("../../ui/Field/Field.js");require("../../ui/IconButton/iconButton.recipe.js");require("../../ui/NumberInput/NumberInput.js");const n=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");function B(){var g;const[f,h]=S.useState(1),u=C.useDialogContext(),N=z.useGlobalStore(w.useShallow(t=>t.signUp)),v=P.useSignInMutation(),p=M.useSendVerificationCodeMutation(),b=F.useLocaleInfo(),a=R.useMobileNumberParser(),y=o.z.object({mobileNumber:o.z.string().superRefine((t,r)=>{a.validate(t)||r.addIssue({code:o.z.ZodIssueCode.custom,message:"Invalid mobile number"})}),termsAccepted:o.z.boolean().superRefine((t,r)=>{t||r.addIssue({code:o.z.ZodIssueCode.custom,message:"You must accept the terms and conditions"})})}),I=o.z.object({verificationCode:o.z.array(o.z.string().min(1).max(1).trim()).min(6).max(6)}),s=m.useForm({resolver:j.zodResolver(y),defaultValues:{mobileNumber:"",termsAccepted:!1}}),l=m.useForm({resolver:j.zodResolver(I),defaultValues:{verificationCode:Array.from({length:6}).fill("")}}),i=k.useCooldown({max:60,duration:1e3*60});return e.jsxs(e.Fragment,{children:[f===1&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"w-full grow",children:[e.jsx("h2",{className:"mt-xl text-center text-lg font-semibold",children:"Log in to your account"}),e.jsx("p",{className:"text-gray-600 mt-xs text-center text-sm",children:"Welcome back! Please enter your details."}),e.jsxs("form",{className:"mt-5",onSubmit:s.handleSubmit(async t=>{try{await p.mutateAsync({channel:"SMS",recipient:a.format(t.mobileNumber),strict:!0}),h(2),i.start()}catch(r){q.toaster.error({description:r instanceof Error?r.message:"Failed to send verification code"})}}),children:[e.jsxs(x.Root,{invalid:!!s.formState.errors.mobileNumber,children:[e.jsx(x.Label,{children:"Mobile Number"}),e.jsxs("div",{className:"relative",children:[e.jsx(b.country.flag,{className:"absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2"}),e.jsx(x.Input,{className:"pl-11",placeholder:`${b.mobileNumber.areaCode}${b.mobileNumber.example}`,...s.register("mobileNumber")})]}),e.jsx(x.ErrorText,{children:(g=s.formState.errors.mobileNumber)==null?void 0:g.message})]}),e.jsx(d.Button,{type:"submit",className:"mt-xl",disabled:s.formState.isSubmitting,children:"Log In"}),e.jsx(m.Controller,{control:s.control,name:"termsAccepted",render:t=>e.jsxs(c.Root,{className:"mt-xl",invalid:t.fieldState.invalid,checked:t.field.value,onCheckedChange:r=>{t.field.onChange(r.checked)},children:[e.jsx(c.Control,{children:e.jsx(c.Indicator,{asChild:!0,children:e.jsx(V.CheckIcon,{})})}),e.jsx(c.Label,{children:"I confirm that I am at least 21 years old, not listed in the PAGCOR NDRP, not a GEL license holder, government employee, or member of the Armed Forces of the Philippines. I am not playing in a public space and agree to the Terms of Use and Privacy Policy. Ineligible accounts will have their funds forfeited to the government."}),e.jsx(c.HiddenInput,{})]})})]}),e.jsxs("div",{className:"relative mt-5 text-center",children:[e.jsx("hr",{className:"-translte-y-1/2 text-gray-200 absolute top-1/2 w-full"}),e.jsx("span",{className:"text-gray-500 relative bg-white px-md text-center text-sm font-semibold",children:"OR"})]}),e.jsxs("div",{className:"mt-5",children:[e.jsxs(d.Button,{variant:"outline",colorScheme:"gray",onClick:()=>{u.setOpen(!1)},children:[e.jsx(O.GoogleIcon,{className:"size-6"}),"Continue with Google"]}),e.jsxs(d.Button,{variant:"outline",colorScheme:"gray",className:"mt-lg",onClick:()=>{u.setOpen(!1)},children:[e.jsx(L.FacebookIcon,{className:"size-6"}),"Continue with Facebook"]})]})]}),e.jsxs("div",{className:"flex w-full items-center justify-center gap-xs text-sm",children:[e.jsx("span",{className:"text-gray-500",children:"Don't have an account?"}),e.jsx("button",{type:"submit",className:"text-accent-700 font-semibold",onClick:()=>{u.setOpen(!1),N.setOpen(!0)},children:"Sign up"})]})]}),f===2&&e.jsxs("div",{className:"w-full grow",children:[e.jsx("h2",{className:"mt-xl text-center text-lg font-semibold",children:"Check your Phone"}),e.jsxs("p",{className:"text-gray-600 mt-xs text-center text-sm",children:["We’ve sent a verification code to your mobile number"," ",e.jsx("span",{className:"font-semibold",children:a.format(s.getValues("mobileNumber"))})," ","via text"]}),e.jsxs("form",{className:"mt-5",onSubmit:l.handleSubmit(async({verificationCode:t})=>{const{mobileNumber:r}=s.getValues();try{await v.mutateAsync({type:"MOBILE_NUMBER",mobileNumber:a.format(r),verificationCode:t.join("")}),u.setOpen(!1),s.reset(),l.reset(),h(1)}catch{q.toaster.error({description:"Invalid Verification Code"})}}),children:[e.jsx(m.Controller,{name:"verificationCode",control:l.control,render:t=>e.jsxs(n.Root,{placeholder:"0",invalid:t.fieldState.invalid,value:t.field.value,onValueChange:r=>{t.field.onChange(r.value)},children:[e.jsxs(n.Control,{children:[e.jsx(n.Input,{index:0}),e.jsx(n.Input,{index:1}),e.jsx(n.Input,{index:2}),e.jsx(n.Input,{index:3}),e.jsx(n.Input,{index:4}),e.jsx(n.Input,{index:5})]}),e.jsx(n.HiddenInput,{})]})}),e.jsx(d.Button,{type:"submit",className:"mt-5",disabled:l.formState.isSubmitting,children:"Verify and Play"}),e.jsxs("div",{className:"mt-5 flex w-full items-center justify-center gap-xs text-sm",children:[e.jsx("span",{className:"text-gray-500",children:"Didn't recieve the code?"}),e.jsx("button",{type:"button",className:"text-accent-700 font-semibold",disabled:i.cooling,onClick:async()=>{await p.mutateAsync({channel:"SMS",recipient:a.format(s.getValues("mobileNumber"))}),i.start()},children:i.cooling?`Resend in ${i.countdown}s`:"Resend"})]}),e.jsxs("button",{type:"button",className:"text-gray-600 mx-auto mt-5 flex w-fit items-center gap-1 text-sm font-semibold",onClick:()=>{h(1),l.reset(),i.stop()},children:[e.jsx(A.ArrowLeftIcon,{className:"size-5"}),"Back"]})]})]})]})}exports.SignInForm=B;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("@ark-ui/react"),j=require("@hookform/resolvers/zod"),S=require("react"),m=require("react-hook-form"),n=require("zod"),w=require("zustand/shallow");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../client/services/getSession.js");const k=require("../../client/hooks/useCooldown.js");require("@opexa/portal-sdk-core/object-id");const z=require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");const F=require("../../client/hooks/useLocaleInfo.js"),M=require("../../client/hooks/useMobileNumberParser.js");require("usehooks-ts");const R=require("../../client/hooks/useSendVerificationCodeMutation.js"),V=require("../../client/hooks/useSignInMutation.js"),q=require("../../client/utils/toaster.js"),L=require("../../icons/ArrowLeftIcon.js"),A=require("../../icons/CheckIcon.js"),B=require("../../icons/FacebookIcon.js"),O=require("../../icons/GoogleIcon.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const d=require("../../ui/Button/Button.js"),c=require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/Collapsible/Collapsible.js");require("../../ui/Combobox/Combobox.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");const x=require("../../ui/Field/Field.js");require("../../ui/IconButton/iconButton.recipe.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PasswordInput/PasswordInput.js");const i=require("../../ui/PinInput/PinInput.js");require("../../ui/Popover/Popover.js");require("tailwind-merge");require("../../ui/Progress/Progress.js");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");function P(){var g;const[h,b]=S.useState(1),u=C.useDialogContext(),N=z.useGlobalStore(w.useShallow(t=>t.signUp)),y=V.useSignInMutation(),p=R.useSendVerificationCodeMutation(),f=F.useLocaleInfo(),a=M.useMobileNumberParser(),v=n.z.object({mobileNumber:n.z.string().superRefine((t,r)=>{a.validate(t)||r.addIssue({code:n.z.ZodIssueCode.custom,message:"Invalid mobile number"})}),termsAccepted:n.z.boolean().superRefine((t,r)=>{t||r.addIssue({code:n.z.ZodIssueCode.custom,message:"You must accept the terms and conditions"})})}),I=n.z.object({verificationCode:n.z.array(n.z.string().min(1).max(1).trim()).min(6).max(6)}),s=m.useForm({resolver:j.zodResolver(v),defaultValues:{mobileNumber:"",termsAccepted:!1}}),l=m.useForm({resolver:j.zodResolver(I),defaultValues:{verificationCode:Array.from({length:6}).fill("")}}),o=k.useCooldown({max:60,duration:1e3*60});return e.jsxs(e.Fragment,{children:[h===1&&e.jsxs(e.Fragment,{children:[e.jsx("h2",{className:"mt-xl text-center text-lg font-semibold",children:"Log in to your account"}),e.jsx("p",{className:"text-text-secondary-700 mt-xs text-center text-sm",children:"Welcome back! Please enter your details."}),e.jsxs("form",{className:"mt-3xl",onSubmit:s.handleSubmit(async t=>{try{await p.mutateAsync({channel:"SMS",recipient:a.format(t.mobileNumber),strict:!0}),b(2),o.start()}catch(r){q.toaster.error({description:r instanceof Error?r.message:"Failed to send verification code"})}}),children:[e.jsxs(x.Root,{invalid:!!s.formState.errors.mobileNumber,children:[e.jsx(x.Label,{children:"Mobile Number"}),e.jsxs("div",{className:"relative",children:[e.jsx(f.country.flag,{className:"absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2"}),e.jsx(x.Input,{className:"pl-11",placeholder:`${f.mobileNumber.areaCode}${f.mobileNumber.example}`,...s.register("mobileNumber")})]}),e.jsx(x.ErrorText,{children:(g=s.formState.errors.mobileNumber)==null?void 0:g.message})]}),e.jsx(d.Button,{type:"submit",className:"mt-3xl",disabled:s.formState.isSubmitting,children:"Log In"}),e.jsx(m.Controller,{control:s.control,name:"termsAccepted",render:t=>e.jsxs(c.Root,{className:"mt-xl",invalid:t.fieldState.invalid,checked:t.field.value,onCheckedChange:r=>{t.field.onChange(r.checked)},children:[e.jsx(c.Control,{children:e.jsx(c.Indicator,{asChild:!0,children:e.jsx(A.CheckIcon,{})})}),e.jsxs(c.Label,{children:["I am at least 21 years of age and I accept the"," ",e.jsx("span",{className:"text-brand-400 whitespace-nowrap underline underline-offset-2",children:"Terms and Conditions."})]}),e.jsx(c.HiddenInput,{})]})})]}),e.jsxs("div",{className:"relative mt-6 text-center",children:[e.jsx("hr",{className:"-translte-y-1/2 text-text-tertiary-600/50 absolute top-1/2 w-full"}),e.jsx("span",{className:"text-text-tertiary-600 bg-bg-primary-alt relative px-md text-center text-sm font-semibold",children:"Log in directly with"})]}),e.jsxs("div",{className:"mt-6",children:[e.jsxs(d.Button,{variant:"outline",colorScheme:"gray",onClick:()=>{u.setOpen(!1)},className:"border-border-primary bg-bg-primary text-text-secondary-700",children:[e.jsx(O.GoogleIcon,{className:"size-6"}),"Continue with Google"]}),e.jsxs(d.Button,{variant:"outline",colorScheme:"gray",onClick:()=>{u.setOpen(!1)},className:"border-border-primary bg-bg-primary text-text-secondary-700 mt-lg",children:[e.jsx(B.FacebookIcon,{className:"size-6"}),"Continue with Facebook"]})]}),e.jsxs("div",{className:"mt-6 flex w-full items-center justify-center gap-xs text-sm",children:[e.jsx("span",{className:"text-text-tertiary-600",children:"Don't have an account?"}),e.jsx("button",{type:"submit",className:"text-button-tertiary-fg font-semibold",onClick:()=>{u.setOpen(!1),N.setOpen(!0)},children:"Sign up"})]})]}),h===2&&e.jsxs(e.Fragment,{children:[e.jsx("h2",{className:"mt-xl text-center text-lg font-semibold",children:"Check your Phone"}),e.jsxs("p",{className:"text-text-secondary-700 mt-xs text-center text-sm",children:["We’ve sent a verification code to your mobile number"," ",e.jsx("span",{className:"font-semibold",children:a.format(s.getValues("mobileNumber"))})," ","via text"]}),e.jsxs("form",{className:"mt-5",onSubmit:l.handleSubmit(async({verificationCode:t})=>{const{mobileNumber:r}=s.getValues();try{await y.mutateAsync({type:"MOBILE_NUMBER",mobileNumber:a.format(r),verificationCode:t.join("")}),u.setOpen(!1),s.reset(),l.reset(),b(1)}catch{q.toaster.error({description:"Invalid Verification Code"})}}),children:[e.jsx(m.Controller,{name:"verificationCode",control:l.control,render:t=>e.jsxs(i.Root,{placeholder:"0",invalid:t.fieldState.invalid,value:t.field.value,onValueChange:r=>{t.field.onChange(r.value)},children:[e.jsxs(i.Control,{className:"grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md",children:[e.jsx(i.Input,{index:0}),e.jsx(i.Input,{index:1}),e.jsx(i.Input,{index:2}),e.jsx("span",{className:"text-text-placeholder-subtle text-2xl font-medium",children:"–"}),e.jsx(i.Input,{index:3}),e.jsx(i.Input,{index:4}),e.jsx(i.Input,{index:5})]}),e.jsx(i.HiddenInput,{})]})}),e.jsx(d.Button,{type:"submit",className:"mt-4xl",disabled:l.formState.isSubmitting,children:"Verify"}),e.jsxs("div",{className:"mt-3 flex w-full items-center justify-center gap-xs text-sm",children:[e.jsx("span",{className:"text-text-secondary-700",children:"Didn't recieve the code?"}),e.jsx("button",{type:"button",className:"text-button-secondary-fg font-semibold",disabled:o.cooling,onClick:async()=>{await p.mutateAsync({channel:"SMS",recipient:a.format(s.getValues("mobileNumber"))}),o.start()},children:o.cooling?`Resend in ${o.countdown}s`:"Resend"})]}),e.jsxs("button",{type:"button",className:"text-text-tertiary-600 mx-auto mt-3xl flex w-fit items-center gap-1 text-sm font-semibold",onClick:()=>{b(1),l.reset(),o.stop()},children:[e.jsx(L.ArrowLeftIcon,{className:"size-5"}),"Back"]})]})]})]})}exports.SignInForm=P;

package/dist/components/SignIn/SignInForm.mjs

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs as t, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, Fragment as f, jsx as e } from "react/jsx-runtime";
 import { useDialogContext as k } from "@ark-ui/react";
-import { zodResolver as x } from "@hookform/resolvers/zod";
+import { zodResolver as g } from "@hookform/resolvers/zod";
 import { useState as R } from "react";
-import { useForm as N, Controller as v } from "react-hook-form";
+import { useForm as N, Controller as y } from "react-hook-form";
 import { z as n } from "zod";
-import { useShallow as A } from "zustand/shallow";
+import { useShallow as M } from "zustand/shallow";
 import "@opexa/portal-sdk-core";
 import "@tanstack/react-query";
 import "tiny-invariant";
@@ -15,187 +15,195 @@ import "../../utils/parseDecimal.mjs";
 import "../../utils/getLocaleInfo.mjs";
 import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
-import { useCooldown as M } from "../../client/hooks/useCooldown.mjs";
+import "../../client/services/getSession.mjs";
+import { useCooldown as V } from "../../client/hooks/useCooldown.mjs";
 import "@opexa/portal-sdk-core/object-id";
-import { useGlobalStore as P } from "../../client/hooks/useGlobalStore.mjs";
+import { useGlobalStore as L } from "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
-import { useLocaleInfo as V } from "../../client/hooks/useLocaleInfo.mjs";
-import { useMobileNumberParser as F } from "../../client/hooks/useMobileNumberParser.mjs";
+import { useLocaleInfo as $ } from "../../client/hooks/useLocaleInfo.mjs";
+import { useMobileNumberParser as A } from "../../client/hooks/useMobileNumberParser.mjs";
 import "usehooks-ts";
-import { useSendVerificationCodeMutation as L } from "../../client/hooks/useSendVerificationCodeMutation.mjs";
-import { useSignInMutation as $ } from "../../client/hooks/useSignInMutation.mjs";
-import { toaster as y } from "../../client/utils/toaster.mjs";
-import { ArrowLeftIcon as O } from "../../icons/ArrowLeftIcon.mjs";
-import { CheckIcon as j } from "../../icons/CheckIcon.mjs";
-import { FacebookIcon as z } from "../../icons/FacebookIcon.mjs";
+import { useSendVerificationCodeMutation as F } from "../../client/hooks/useSendVerificationCodeMutation.mjs";
+import { useSignInMutation as j } from "../../client/hooks/useSignInMutation.mjs";
+import { toaster as v } from "../../client/utils/toaster.mjs";
+import { ArrowLeftIcon as _ } from "../../icons/ArrowLeftIcon.mjs";
+import { CheckIcon as z } from "../../icons/CheckIcon.mjs";
+import { FacebookIcon as O } from "../../icons/FacebookIcon.mjs";
 import { GoogleIcon as D } from "../../icons/GoogleIcon.mjs";
 import "../../ui/AlertDialog/AlertDialog.mjs";
 import "../../ui/Avatar/Avatar.mjs";
 import "../../ui/Badge/Badge.mjs";
 import { Button as d } from "../../ui/Button/Button.mjs";
-import { Root as E, Control as G, Indicator as B, Label as U, HiddenInput as H } from "../../ui/Checkbox/Checkbox.mjs";
+import { Root as B, Control as E, Indicator as P, Label as G, HiddenInput as H } from "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
+import "../../ui/Collapsible/Collapsible.mjs";
+import "../../ui/Combobox/Combobox.mjs";
 import "../../ui/DatePicker/DatePicker.mjs";
 import "../../ui/Dialog/Dialog.mjs";
 import "../../ui/Drawer/Drawer.mjs";
-import { Root as T, Label as W, Input as Z, ErrorText as Y } from "../../ui/Field/Field.mjs";
+import { Root as U, Label as T, Input as W, ErrorText as Z } from "../../ui/Field/Field.mjs";
 import "../../ui/IconButton/iconButton.recipe.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
-import { Root as _, Control as q, Input as s, HiddenInput as J } from "../../ui/PinInput/PinInput.mjs";
+import "../../ui/PasswordInput/PasswordInput.mjs";
+import { Root as Y, Control as q, Input as s, HiddenInput as J } from "../../ui/PinInput/PinInput.mjs";
 import "../../ui/Popover/Popover.mjs";
 import "tailwind-merge";
+import "../../ui/Progress/Progress.mjs";
 import "../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../ui/Select/Select.mjs";
 import "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
-function Ze() {
-  var b;
-  const [f, u] = R(1), c = k(), C = P(A((o) => o.signUp)), S = $(), h = L(), p = V(), l = F(), I = n.object({
-    mobileNumber: n.string().superRefine((o, i) => {
-      l.validate(o) || i.addIssue({
+function Ke() {
+  var x;
+  const [b, p] = R(1), c = k(), C = L(M((o) => o.signUp)), S = j(), h = F(), u = $(), m = A(), I = n.object({
+    mobileNumber: n.string().superRefine((o, r) => {
+      m.validate(o) || r.addIssue({
         code: n.ZodIssueCode.custom,
         message: "Invalid mobile number"
       });
     }),
-    termsAccepted: n.boolean().superRefine((o, i) => {
-      o || i.addIssue({
+    termsAccepted: n.boolean().superRefine((o, r) => {
+      o || r.addIssue({
         code: n.ZodIssueCode.custom,
         message: "You must accept the terms and conditions"
       });
     })
   }), w = n.object({
     verificationCode: n.array(n.string().min(1).max(1).trim()).min(6).max(6)
-  }), r = N({
-    resolver: x(I),
+  }), i = N({
+    resolver: g(I),
     defaultValues: {
       mobileNumber: "",
       termsAccepted: !1
     }
-  }), m = N({
-    resolver: x(w),
+  }), l = N({
+    resolver: g(w),
     defaultValues: {
       verificationCode: Array.from({ length: 6 }).fill("")
     }
-  }), a = M({
+  }), a = V({
     max: 60,
     duration: 1e3 * 60
   });
-  return /* @__PURE__ */ t(g, { children: [
-    f === 1 && /* @__PURE__ */ t(g, { children: [
-      /* @__PURE__ */ t("div", { className: "w-full grow", children: [
-        /* @__PURE__ */ e("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }),
-        /* @__PURE__ */ e("p", { className: "text-gray-600 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." }),
+  return /* @__PURE__ */ t(f, { children: [
+    b === 1 && /* @__PURE__ */ t(f, { children: [
+      /* @__PURE__ */ e("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }),
+      /* @__PURE__ */ e("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." }),
+      /* @__PURE__ */ t(
+        "form",
+        {
+          className: "mt-3xl",
+          onSubmit: i.handleSubmit(async (o) => {
+            try {
+              await h.mutateAsync({
+                channel: "SMS",
+                recipient: m.format(o.mobileNumber),
+                strict: !0
+              }), p(2), a.start();
+            } catch (r) {
+              v.error({
+                description: r instanceof Error ? r.message : "Failed to send verification code"
+              });
+            }
+          }),
+          children: [
+            /* @__PURE__ */ t(U, { invalid: !!i.formState.errors.mobileNumber, children: [
+              /* @__PURE__ */ e(T, { children: "Mobile Number" }),
+              /* @__PURE__ */ t("div", { className: "relative", children: [
+                /* @__PURE__ */ e(u.country.flag, { className: "absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2" }),
+                /* @__PURE__ */ e(
+                  W,
+                  {
+                    className: "pl-11",
+                    placeholder: `${u.mobileNumber.areaCode}${u.mobileNumber.example}`,
+                    ...i.register("mobileNumber")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(Z, { children: (x = i.formState.errors.mobileNumber) == null ? void 0 : x.message })
+            ] }),
+            /* @__PURE__ */ e(
+              d,
+              {
+                type: "submit",
+                className: "mt-3xl",
+                disabled: i.formState.isSubmitting,
+                children: "Log In"
+              }
+            ),
+            /* @__PURE__ */ e(
+              y,
+              {
+                control: i.control,
+                name: "termsAccepted",
+                render: (o) => /* @__PURE__ */ t(
+                  B,
+                  {
+                    className: "mt-xl",
+                    invalid: o.fieldState.invalid,
+                    checked: o.field.value,
+                    onCheckedChange: (r) => {
+                      o.field.onChange(r.checked);
+                    },
+                    children: [
+                      /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(z, {}) }) }),
+                      /* @__PURE__ */ t(G, { children: [
+                        "I am at least 21 years of age and I accept the",
+                        " ",
+                        /* @__PURE__ */ e("span", { className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })
+                      ] }),
+                      /* @__PURE__ */ e(H, {})
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "relative mt-6 text-center", children: [
+        /* @__PURE__ */ e("hr", { className: "-translte-y-1/2 text-text-tertiary-600/50 absolute top-1/2 w-full" }),
+        /* @__PURE__ */ e("span", { className: "text-text-tertiary-600 bg-bg-primary-alt relative px-md text-center text-sm font-semibold", children: "Log in directly with" })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "mt-6", children: [
         /* @__PURE__ */ t(
-          "form",
+          d,
           {
-            className: "mt-5",
-            onSubmit: r.handleSubmit(async (o) => {
-              try {
-                await h.mutateAsync({
-                  channel: "SMS",
-                  recipient: l.format(o.mobileNumber),
-                  strict: !0
-                }), u(2), a.start();
-              } catch (i) {
-                y.error({
-                  description: i instanceof Error ? i.message : "Failed to send verification code"
-                });
-              }
-            }),
+            variant: "outline",
+            colorScheme: "gray",
+            onClick: () => {
+              c.setOpen(!1);
+            },
+            className: "border-border-primary bg-bg-primary text-text-secondary-700",
             children: [
-              /* @__PURE__ */ t(T, { invalid: !!r.formState.errors.mobileNumber, children: [
-                /* @__PURE__ */ e(W, { children: "Mobile Number" }),
-                /* @__PURE__ */ t("div", { className: "relative", children: [
-                  /* @__PURE__ */ e(p.country.flag, { className: "absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2" }),
-                  /* @__PURE__ */ e(
-                    Z,
-                    {
-                      className: "pl-11",
-                      placeholder: `${p.mobileNumber.areaCode}${p.mobileNumber.example}`,
-                      ...r.register("mobileNumber")
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ e(Y, { children: (b = r.formState.errors.mobileNumber) == null ? void 0 : b.message })
-              ] }),
-              /* @__PURE__ */ e(
-                d,
-                {
-                  type: "submit",
-                  className: "mt-xl",
-                  disabled: r.formState.isSubmitting,
-                  children: "Log In"
-                }
-              ),
-              /* @__PURE__ */ e(
-                v,
-                {
-                  control: r.control,
-                  name: "termsAccepted",
-                  render: (o) => /* @__PURE__ */ t(
-                    E,
-                    {
-                      className: "mt-xl",
-                      invalid: o.fieldState.invalid,
-                      checked: o.field.value,
-                      onCheckedChange: (i) => {
-                        o.field.onChange(i.checked);
-                      },
-                      children: [
-                        /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e(j, {}) }) }),
-                        /* @__PURE__ */ e(U, { children: "I confirm that I am at least 21 years old, not listed in the PAGCOR NDRP, not a GEL license holder, government employee, or member of the Armed Forces of the Philippines. I am not playing in a public space and agree to the Terms of Use and Privacy Policy. Ineligible accounts will have their funds forfeited to the government." }),
-                        /* @__PURE__ */ e(H, {})
-                      ]
-                    }
-                  )
-                }
-              )
+              /* @__PURE__ */ e(D, { className: "size-6" }),
+              "Continue with Google"
             ]
           }
         ),
-        /* @__PURE__ */ t("div", { className: "relative mt-5 text-center", children: [
-          /* @__PURE__ */ e("hr", { className: "-translte-y-1/2 text-gray-200 absolute top-1/2 w-full" }),
-          /* @__PURE__ */ e("span", { className: "text-gray-500 relative bg-white px-md text-center text-sm font-semibold", children: "OR" })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "mt-5", children: [
-          /* @__PURE__ */ t(
-            d,
-            {
-              variant: "outline",
-              colorScheme: "gray",
-              onClick: () => {
-                c.setOpen(!1);
-              },
-              children: [
-                /* @__PURE__ */ e(D, { className: "size-6" }),
-                "Continue with Google"
-              ]
-            }
-          ),
-          /* @__PURE__ */ t(
-            d,
-            {
-              variant: "outline",
-              colorScheme: "gray",
-              className: "mt-lg",
-              onClick: () => {
-                c.setOpen(!1);
-              },
-              children: [
-                /* @__PURE__ */ e(z, { className: "size-6" }),
-                "Continue with Facebook"
-              ]
-            }
-          )
-        ] })
+        /* @__PURE__ */ t(
+          d,
+          {
+            variant: "outline",
+            colorScheme: "gray",
+            onClick: () => {
+              c.setOpen(!1);
+            },
+            className: "border-border-primary bg-bg-primary text-text-secondary-700 mt-lg",
+            children: [
+              /* @__PURE__ */ e(O, { className: "size-6" }),
+              "Continue with Facebook"
+            ]
+          }
+        )
       ] }),
-      /* @__PURE__ */ t("div", { className: "flex w-full items-center justify-center gap-xs text-sm", children: [
-        /* @__PURE__ */ e("span", { className: "text-gray-500", children: "Don't have an account?" }),
+      /* @__PURE__ */ t("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [
+        /* @__PURE__ */ e("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }),
         /* @__PURE__ */ e(
           "button",
           {
             type: "submit",
-            className: "text-accent-700 font-semibold",
+            className: "text-button-tertiary-fg font-semibold",
             onClick: () => {
               c.setOpen(!1), C.setOpen(!0);
             },
@@ -204,12 +212,12 @@ function Ze() {
         )
       ] })
     ] }),
-    f === 2 && /* @__PURE__ */ t("div", { className: "w-full grow", children: [
+    b === 2 && /* @__PURE__ */ t(f, { children: [
       /* @__PURE__ */ e("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }),
-      /* @__PURE__ */ t("p", { className: "text-gray-600 mt-xs text-center text-sm", children: [
+      /* @__PURE__ */ t("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: [
         "We’ve sent a verification code to your mobile number",
         " ",
-        /* @__PURE__ */ e("span", { className: "font-semibold", children: l.format(r.getValues("mobileNumber")) }),
+        /* @__PURE__ */ e("span", { className: "font-semibold", children: m.format(i.getValues("mobileNumber")) }),
         " ",
         "via text"
       ] }),
@@ -217,40 +225,41 @@ function Ze() {
         "form",
         {
           className: "mt-5",
-          onSubmit: m.handleSubmit(async ({ verificationCode: o }) => {
-            const { mobileNumber: i } = r.getValues();
+          onSubmit: l.handleSubmit(async ({ verificationCode: o }) => {
+            const { mobileNumber: r } = i.getValues();
             try {
               await S.mutateAsync({
                 type: "MOBILE_NUMBER",
-                mobileNumber: l.format(i),
+                mobileNumber: m.format(r),
                 verificationCode: o.join("")
-              }), c.setOpen(!1), r.reset(), m.reset(), u(1);
+              }), c.setOpen(!1), i.reset(), l.reset(), p(1);
             } catch {
-              y.error({
+              v.error({
                 description: "Invalid Verification Code"
               });
             }
           }),
           children: [
             /* @__PURE__ */ e(
-              v,
+              y,
               {
                 name: "verificationCode",
-                control: m.control,
+                control: l.control,
                 render: (o) => /* @__PURE__ */ t(
-                  _,
+                  Y,
                   {
                     placeholder: "0",
                     invalid: o.fieldState.invalid,
                     value: o.field.value,
-                    onValueChange: (i) => {
-                      o.field.onChange(i.value);
+                    onValueChange: (r) => {
+                      o.field.onChange(r.value);
                     },
                     children: [
-                      /* @__PURE__ */ t(q, { children: [
+                      /* @__PURE__ */ t(q, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [
                         /* @__PURE__ */ e(s, { index: 0 }),
                         /* @__PURE__ */ e(s, { index: 1 }),
                         /* @__PURE__ */ e(s, { index: 2 }),
+                        /* @__PURE__ */ e("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "–" }),
                         /* @__PURE__ */ e(s, { index: 3 }),
                         /* @__PURE__ */ e(s, { index: 4 }),
                         /* @__PURE__ */ e(s, { index: 5 })
@@ -265,24 +274,24 @@ function Ze() {
               d,
               {
                 type: "submit",
-                className: "mt-5",
-                disabled: m.formState.isSubmitting,
-                children: "Verify and Play"
+                className: "mt-4xl",
+                disabled: l.formState.isSubmitting,
+                children: "Verify"
               }
             ),
-            /* @__PURE__ */ t("div", { className: "mt-5 flex w-full items-center justify-center gap-xs text-sm", children: [
-              /* @__PURE__ */ e("span", { className: "text-gray-500", children: "Didn't recieve the code?" }),
+            /* @__PURE__ */ t("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [
+              /* @__PURE__ */ e("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  className: "text-accent-700 font-semibold",
+                  className: "text-button-secondary-fg font-semibold",
                   disabled: a.cooling,
                   onClick: async () => {
                     await h.mutateAsync({
                       channel: "SMS",
-                      recipient: l.format(
-                        r.getValues("mobileNumber")
+                      recipient: m.format(
+                        i.getValues("mobileNumber")
                       )
                     }), a.start();
                   },
@@ -294,12 +303,12 @@ function Ze() {
               "button",
               {
                 type: "button",
-                className: "text-gray-600 mx-auto mt-5 flex w-fit items-center gap-1 text-sm font-semibold",
+                className: "text-text-tertiary-600 mx-auto mt-3xl flex w-fit items-center gap-1 text-sm font-semibold",
                 onClick: () => {
-                  u(1), m.reset(), a.stop();
+                  p(1), l.reset(), a.stop();
                 },
                 children: [
-                  /* @__PURE__ */ e(O, { className: "size-5" }),
+                  /* @__PURE__ */ e(_, { className: "size-5" }),
                   "Back"
                 ]
               }
@@ -311,5 +320,5 @@ function Ze() {
   ] });
 }
 export {
-  Ze as SignInForm
+  Ke as SignInForm
 };