@greatapps/common 1.1.170 → 1.1.174

package/src/components/account/sections/ChangePhoneModal.tsx

@@ -1,229 +1,234 @@
-'use client';
-
-import { ChevronLeft, X, MessageSquare } from 'lucide-react';
-import { Button } from '../../ui/buttons/Button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
-import { Separator } from '../../ui/data-display/Separator';
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';
-import PhoneInput from '../../ui/form/PhoneInput';
-import { formatTimer, formatPhone } from '../../../utils/format/masks';
-import { OTP_CODE_LENGTH } from '../../../utils/validators/account';
-import { useAuth } from '../../../providers/auth.provider';
-import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
-import { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
-import useChangePhoneForm from '../hooks/useChangePhoneForm';
-import useOtpVerification from '../hooks/useOtpVerification';
-
-interface ChangePhoneModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
-  const { user } = useAuth();
-  const invalidateUser = useInvalidateUser();
-
-  const currentPhoneDisplay = user?.phone
-    ? formatPhone(
-        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone
-      )
-    : '';
-
-  const {
-    showVerification,
-    phoneValue,
-    isSubmitting,
-    errors,
-    handlePhoneChange,
-    handleContinue,
-    handleBack,
-    resetForm,
-  } = useChangePhoneForm();
-
-  const handleSuccess = () => {
-    invalidateUser();
-    resetForm();
-    onClose();
-  };
-
-  const {
-    code,
-    isLoading,
-    hasError,
-    timer,
-    canResend,
-    isValidLength,
-    handleCodeChange,
-    handleValidate,
-    handleResend,
-    reset: resetOtp,
-  } = useOtpVerification({
-    onSuccess: handleSuccess,
-    successMessage: 'Telefone alterado',
-    validateFn: async (token) => {
-      const result = await confirmPhoneChangeAction(token, phoneValue);
-      return result.success;
-    },
-    resendFn: async () => {
-      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
-      const result = await requestPhoneChangeAction(phoneValue);
-      if (!result.success) {
-        throw new Error(result.error);
-      }
-    },
-  });
-
-  const handleClose = () => {
-    resetForm();
-    resetOtp();
-    onClose();
-  };
-
-  const handleBackFromVerification = () => {
-    resetOtp();
-    handleBack();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        className="flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-125! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!"
-      >
-        {showVerification ? (
-          <DialogHeader className="flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0">
-            <Button variant="ghost" className="size-8! p-0" onClick={handleBackFromVerification}>
-              <ChevronLeft size={20} className="text-gray-950" />
-            </Button>
-            <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
-              Alterar telefone
-            </DialogTitle>
-            <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
-              <X size={18} className="text-gray-500" />
-            </Button>
-          </DialogHeader>
-        ) : (
-          <>
-            <DialogHeader className="sr-only">
-              <DialogTitle>Alterar telefone</DialogTitle>
-            </DialogHeader>
-            <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
-              <span className="paragraph-medium-semibold text-gray-950 text-center">
-                Alterar telefone
-              </span>
-              <Button
-                variant="ghost"
-                className="absolute right-2 size-8! p-0"
-                onClick={handleClose}
-              >
-                <X size={18} className="text-gray-500" />
-              </Button>
-            </div>
-          </>
-        )}
-
-        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />
-
-        {showVerification ? (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              handleValidate();
-            }}
-            className="flex flex-col flex-1 lg:flex-none"
-          >
-            <div className="px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none">
-              <div className="flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200">
-                <MessageSquare size={20} className="text-gray-950" />
-              </div>
-
-              <div className="flex flex-col gap-1">
-                <h3 className="paragraph-medium-semibold text-gray-950">Código de validação</h3>
-                <p className="paragraph-small-regular text-gray-600">
-                  Enviamos um código de validação para o número atual{' '}
-                  <span className="font-semibold text-gray-950">{currentPhoneDisplay}.</span>
-                </p>
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>
-                  <InputOTPGroup className="flex flex-row gap-2">
-                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (
-                      <InputOTPSlot
-                        key={i}
-                        index={i}
-                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}
-                      />
-                    ))}
-                  </InputOTPGroup>
-                </InputOTP>
-                {hasError && (
-                  <p className="paragraph-small-regular text-red-500">Código incorreto</p>
-                )}
-              </div>
-
-              {canResend ? (
-                <button
-                  type="button"
-                  onClick={handleResend}
-                  className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
-                >
-                  Reenviar código
-                </button>
-              ) : (
-                <p className="paragraph-small-regular text-gray-500">
-                  Reenviar em{' '}
-                  <span className="paragraph-small-semibold text-gray-950">
-                    {formatTimer(timer)}
-                  </span>
-                </p>
-              )}
-            </div>
-
-            <Separator />
-
-            <div className="flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
-              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                Cancelar
-              </Button>
-              <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
-                {isLoading ? 'Validando...' : 'Alterar telefone'}
-              </Button>
-            </div>
-          </form>
-        ) : (
-          <form onSubmit={handleContinue} className="flex flex-col flex-1 lg:flex-none">
-            <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
-              <div className="flex flex-col gap-1">
-                <span className="paragraph-medium-semibold text-gray-950">
-                  Atualizar telefone de contato
-                </span>
-                <span className="paragraph-small-regular text-gray-600">
-                  Informe o novo número para manter seu contato atualizado.
-                </span>
-              </div>
-
-              <PhoneInput
-                label="Novo número"
-                placeholder="(00) 0 0000-0000"
-                value={phoneValue}
-                onChange={handlePhoneChange}
-                error={!!errors.phone}
-                errorMessage={errors.phone?.message}
-              />
-            </div>
-
-            <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
-              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                Cancelar
-              </Button>
-              <Button className="h-10!" type="submit" disabled={isSubmitting}>
-                {isSubmitting ? 'Enviando...' : 'Continuar'}
-              </Button>
-            </div>
-          </form>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { ChevronLeft, X, MessageSquare } from 'lucide-react';
+import { Button } from '../../ui/buttons/Button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
+import { Separator } from '../../ui/data-display/Separator';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';
+import PhoneInput from '../../ui/form/PhoneInput';
+import { formatTimer, formatPhone } from '../../../utils/format/masks';
+import { OTP_CODE_LENGTH } from '../../../utils/validators/account';
+import { useAuth } from '../../../providers/auth.provider';
+import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
+import { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
+import useChangePhoneForm from '../hooks/useChangePhoneForm';
+import useOtpVerification from '../hooks/useOtpVerification';
+
+interface ChangePhoneModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
+  const { user } = useAuth();
+  const invalidateUser = useInvalidateUser();
+
+  const currentPhoneDisplay = user?.phone
+    ? formatPhone(
+        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone
+      )
+    : '';
+
+  const {
+    showVerification,
+    phoneValue,
+    isSubmitting,
+    errors,
+    selectedCountry,
+    handlePhoneChange,
+    handleCountryChange,
+    handleContinue,
+    handleBack,
+    resetForm,
+  } = useChangePhoneForm();
+
+  const handleSuccess = () => {
+    invalidateUser();
+    resetForm();
+    onClose();
+  };
+
+  const {
+    code,
+    isLoading,
+    hasError,
+    timer,
+    canResend,
+    isValidLength,
+    handleCodeChange,
+    handleValidate,
+    handleResend,
+    reset: resetOtp,
+  } = useOtpVerification({
+    onSuccess: handleSuccess,
+    successMessage: 'Telefone alterado',
+    validateFn: async (token) => {
+      const result = await confirmPhoneChangeAction(token, phoneValue, selectedCountry.code);
+      return result.success;
+    },
+    resendFn: async () => {
+      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
+      const result = await requestPhoneChangeAction(phoneValue, selectedCountry.code);
+      if (!result.success) {
+        throw new Error(result.error);
+      }
+    },
+  });
+
+  const handleClose = () => {
+    resetForm();
+    resetOtp();
+    onClose();
+  };
+
+  const handleBackFromVerification = () => {
+    resetOtp();
+    handleBack();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="z-[1002]"
+        className="flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-125! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]! z-[1003]!"
+      >
+        {showVerification ? (
+          <DialogHeader className="flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0">
+            <Button variant="ghost" className="size-8! p-0" onClick={handleBackFromVerification}>
+              <ChevronLeft size={20} className="text-gray-950" />
+            </Button>
+            <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
+              Alterar telefone
+            </DialogTitle>
+            <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
+              <X size={18} className="text-gray-500" />
+            </Button>
+          </DialogHeader>
+        ) : (
+          <>
+            <DialogHeader className="sr-only">
+              <DialogTitle>Alterar telefone</DialogTitle>
+            </DialogHeader>
+            <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+              <span className="paragraph-medium-semibold text-gray-950 text-center">
+                Alterar telefone
+              </span>
+              <Button
+                variant="ghost"
+                className="absolute right-2 size-8! p-0"
+                onClick={handleClose}
+              >
+                <X size={18} className="text-gray-500" />
+              </Button>
+            </div>
+          </>
+        )}
+
+        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />
+
+        {showVerification ? (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleValidate();
+            }}
+            className="flex flex-col flex-1 lg:flex-none"
+          >
+            <div className="px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none">
+              <div className="flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200">
+                <MessageSquare size={20} className="text-gray-950" />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h3 className="paragraph-medium-semibold text-gray-950">Código de validação</h3>
+                <p className="paragraph-small-regular text-gray-600">
+                  Enviamos um código de validação para o número atual{' '}
+                  <span className="font-semibold text-gray-950">{currentPhoneDisplay}.</span>
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>
+                  <InputOTPGroup className="flex flex-row gap-2">
+                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (
+                      <InputOTPSlot
+                        key={i}
+                        index={i}
+                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}
+                      />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+                {hasError && (
+                  <p className="paragraph-small-regular text-red-500">Código incorreto</p>
+                )}
+              </div>
+
+              {canResend ? (
+                <button
+                  type="button"
+                  onClick={handleResend}
+                  className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
+                >
+                  Reenviar código
+                </button>
+              ) : (
+                <p className="paragraph-small-regular text-gray-500">
+                  Reenviar em{' '}
+                  <span className="paragraph-small-semibold text-gray-950">
+                    {formatTimer(timer)}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <Separator />
+
+            <div className="flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                Cancelar
+              </Button>
+              <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
+                {isLoading ? 'Validando...' : 'Alterar telefone'}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <form onSubmit={handleContinue} className="flex flex-col flex-1 lg:flex-none">
+            <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
+              <div className="flex flex-col gap-1">
+                <span className="paragraph-medium-semibold text-gray-950">
+                  Atualizar telefone de contato
+                </span>
+                <span className="paragraph-small-regular text-gray-600">
+                  Informe o novo número para manter seu contato atualizado.
+                </span>
+              </div>
+
+              <PhoneInput
+                label="Novo número"
+                placeholder="(00) 0 0000-0000"
+                value={phoneValue}
+                onChange={handlePhoneChange}
+                error={!!errors.phone}
+                errorMessage={errors.phone?.message}
+                selectedCountry={selectedCountry}
+                onCountryChange={handleCountryChange}
+              />
+            </div>
+
+            <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                Cancelar
+              </Button>
+              <Button className="h-10!" type="submit" disabled={isSubmitting}>
+                {isSubmitting ? 'Enviando...' : 'Continuar'}
+              </Button>
+            </div>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}