@greatapps/common 1.1.219 → 1.1.221

package/src/components/account/TwoFactorAuthModal.tsx

@@ -1,223 +1,223 @@
-'use client';
-
-import { IconArrowLeft, IconX, IconCopy, IconRefresh } from '@tabler/icons-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 useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';
-
-interface TwoFactorAuthModalProps {
-  open: boolean;
-  onClose: () => void;
-  onSuccess?: () => void;
-}
-
-export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {
-  const {
-    code,
-    setCode,
-    isCodeComplete,
-    isGenerating,
-    isConfirming,
-    generateFailed,
-    retryGenerate,
-    qrcode,
-    backupCodes,
-    step,
-    handleSubmit,
-    handleFinalize,
-    handleCopyCodes,
-    resetForm,
-  } = useTwoFactorAuthForm({ onSuccess, open });
-
-  const handleClose = () => {
-    resetForm();
-    onClose();
-  };
-
-  if (step === 'recovery') {
-    return (
-      <Dialog open={open} onOpenChange={handleClose}>
-        <DialogContent
-          showCloseButton={false}
-          overlayClassName="z-[1010]"
-          className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! 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%]!"
-        >
-          <DialogHeader className="sr-only">
-            <DialogTitle>Códigos de segurança</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">
-              Códigos de segurança
-            </span>
-            <Button
-              type="button"
-              variant="ghost"
-              className="size-8! p-0 absolute right-4"
-              onClick={handleClose}
-            >
-              <IconX size={18} />
-            </Button>
-          </div>
-
-          <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-2">
-              <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
-                Salve estes códigos de recuperação de emergência
-              </h3>
-              <div className="paragraph-small-regular text-gray-600">
-                <p>
-                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta
-                  sem um código de dois fatores.
-                </p>
-                <br />
-                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>
-              </div>
-            </div>
-
-            <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
-              <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
-                {backupCodes.map((backupCode, i) => (
-                  <p key={i}>{backupCode}</p>
-                ))}
-              </div>
-              <Button
-                type="button"
-                variant="secondary"
-                className="h-8! w-fit"
-                onClick={handleCopyCodes}
-              >
-                <IconCopy size={16} />
-                Copiar códigos
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
-            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              Cancelar
-            </Button>
-            <Button className="h-10!" type="button" onClick={handleFinalize}>
-              Finalizar
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        overlayClassName="z-[1010]"
-        className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] 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%]!"
-      >
-        <DialogHeader className="sr-only">
-          <DialogTitle>Autenticação de dois fatores</DialogTitle>
-        </DialogHeader>
-        <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
-          <Button
-            type="button"
-            variant="ghost"
-            className="size-8! p-0 absolute left-4"
-            onClick={handleClose}
-          >
-            <IconArrowLeft size={20} />
-          </Button>
-          <span className="paragraph-medium-semibold text-gray-950 text-center">
-            Autenticação de dois fatores
-          </span>
-          <Button
-            type="button"
-            variant="ghost"
-            className="size-8! p-0 absolute right-4"
-            onClick={handleClose}
-          >
-            <IconX size={18} />
-          </Button>
-        </div>
-
-        <form
-          className="flex-1 min-h-0 flex flex-col"
-          onSubmit={(e) => {
-            e.preventDefault();
-            if (isCodeComplete) handleSubmit();
-          }}
-        >
-          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
-            <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
-              <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
-                Instale um aplicativo autenticador no seu celular (ex.:{' '}
-                <a
-                  href="https://support.google.com/accounts/answer/1066447"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="paragraph-small-medium underline"
-                >
-                  Google Authenticator
-                </a>
-                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o
-                código de 6 dígitos gerado para continuar.
-              </p>
-
-              <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
-                {generateFailed ? (
-                  <button
-                    type="button"
-                    onClick={() => retryGenerate()}
-                    className="flex flex-col items-center gap-1.5 text-center"
-                  >
-                    <IconRefresh size={20} className="text-gray-400" />
-                    <span className="paragraph-xsmall-medium text-gray-500">Tentar novamente</span>
-                  </button>
-                ) : isGenerating || !qrcode ? (
-                  <div className="skeleton w-full h-full rounded" />
-                ) : (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    src={qrcode}
-                    alt="QR Code para autenticação de dois fatores"
-                    className="w-full h-full"
-                  />
-                )}
-              </div>
-
-              <div className="flex items-center gap-3 w-full">
-                <Separator className="flex-1" />
-                <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
-                  Cole os 6 dígitos abaixo
-                </span>
-                <Separator className="flex-1" />
-              </div>
-
-              <div className="scroll-mt-20">
-                <InputOTP maxLength={6} value={code} onChange={setCode}>
-                  <InputOTPGroup className="gap-2">
-                    {Array.from({ length: 6 }).map((_, i) => (
-                      <InputOTPSlot
-                        key={i}
-                        index={i}
-                        className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
-                      />
-                    ))}
-                  </InputOTPGroup>
-                </InputOTP>
-              </div>
-            </div>
-          </div>
-
-          <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
-            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              Cancelar
-            </Button>
-            <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
-              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconArrowLeft, IconX, IconCopy, IconRefresh } from '@tabler/icons-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 useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';
+
+interface TwoFactorAuthModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {
+  const {
+    code,
+    setCode,
+    isCodeComplete,
+    isGenerating,
+    isConfirming,
+    generateFailed,
+    retryGenerate,
+    qrcode,
+    backupCodes,
+    step,
+    handleSubmit,
+    handleFinalize,
+    handleCopyCodes,
+    resetForm,
+  } = useTwoFactorAuthForm({ onSuccess, open });
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  if (step === 'recovery') {
+    return (
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent
+          showCloseButton={false}
+          overlayClassName="z-[1010]"
+          className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! 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%]!"
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>Códigos de segurança</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">
+              Códigos de segurança
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              className="size-8! p-0 absolute right-4"
+              onClick={handleClose}
+            >
+              <IconX size={18} />
+            </Button>
+          </div>
+
+          <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-2">
+              <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
+                Salve estes códigos de recuperação de emergência
+              </h3>
+              <div className="paragraph-small-regular text-gray-600">
+                <p>
+                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta
+                  sem um código de dois fatores.
+                </p>
+                <br />
+                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
+              <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
+                {backupCodes.map((backupCode, i) => (
+                  <p key={i}>{backupCode}</p>
+                ))}
+              </div>
+              <Button
+                type="button"
+                variant="secondary"
+                className="h-8! w-fit"
+                onClick={handleCopyCodes}
+              >
+                <IconCopy size={16} />
+                Copiar códigos
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              Cancelar
+            </Button>
+            <Button className="h-10!" type="button" onClick={handleFinalize}>
+              Finalizar
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="z-[1010]"
+        className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] 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%]!"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Autenticação de dois fatores</DialogTitle>
+        </DialogHeader>
+        <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-8! p-0 absolute left-4"
+            onClick={handleClose}
+          >
+            <IconArrowLeft size={20} />
+          </Button>
+          <span className="paragraph-medium-semibold text-gray-950 text-center">
+            Autenticação de dois fatores
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-8! p-0 absolute right-4"
+            onClick={handleClose}
+          >
+            <IconX size={18} />
+          </Button>
+        </div>
+
+        <form
+          className="flex-1 min-h-0 flex flex-col"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (isCodeComplete) handleSubmit();
+          }}
+        >
+          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
+            <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
+              <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
+                Instale um aplicativo autenticador no seu celular (ex.:{' '}
+                <a
+                  href="https://support.google.com/accounts/answer/1066447"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="paragraph-small-medium underline"
+                >
+                  Google Authenticator
+                </a>
+                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o
+                código de 6 dígitos gerado para continuar.
+              </p>
+
+              <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
+                {generateFailed ? (
+                  <button
+                    type="button"
+                    onClick={() => retryGenerate()}
+                    className="flex flex-col items-center gap-1.5 text-center"
+                  >
+                    <IconRefresh size={20} className="text-gray-400" />
+                    <span className="paragraph-xsmall-medium text-gray-500">Tentar novamente</span>
+                  </button>
+                ) : isGenerating || !qrcode ? (
+                  <div className="skeleton w-full h-full rounded" />
+                ) : (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={qrcode}
+                    alt="QR Code para autenticação de dois fatores"
+                    className="w-full h-full"
+                  />
+                )}
+              </div>
+
+              <div className="flex items-center gap-3 w-full">
+                <Separator className="flex-1" />
+                <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
+                  Cole os 6 dígitos abaixo
+                </span>
+                <Separator className="flex-1" />
+              </div>
+
+              <div className="scroll-mt-20">
+                <InputOTP maxLength={6} value={code} onChange={setCode}>
+                  <InputOTPGroup className="gap-2">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <InputOTPSlot
+                        key={i}
+                        index={i}
+                        className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                      />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+              </div>
+            </div>
+          </div>
+
+          <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              Cancelar
+            </Button>
+            <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
+              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/hooks/useChangePhoneForm.tsx

@@ -1,81 +1,81 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { toast } from 'sonner';
-import { Toast } from '../../ui/feedback/Toast';
-import { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
-
-function splitPhoneValue(fullValue: string): { ddi: string; local: string } {
-  const trimmed = fullValue.trim();
-  const spaceIdx = trimmed.indexOf(' ');
-  if (spaceIdx === -1) return { ddi: '+55', local: trimmed };
-  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };
-}
-
-export default function useChangePhoneForm() {
-  const [showVerification, setShowVerification] = useState(false);
-  const [phoneValue, setPhoneValue] = useState('');
-  const [phoneError, setPhoneError] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submittedPhone, setSubmittedPhone] = useState({ ddi: '+55', local: '' });
-
-  const handlePhoneChange = useCallback((value: string) => {
-    setPhoneValue(value);
-    if (phoneError) setPhoneError('');
-  }, [phoneError]);
-
-  const handleContinue = useCallback(async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    const { ddi, local } = splitPhoneValue(phoneValue);
-
-    if (!local || local.replace(/\D/g, '').length < 8) {
-      setPhoneError('Número de telefone inválido');
-      return;
-    }
-
-    setIsSubmitting(true);
-    try {
-      const result = await requestPhoneChangeAction(local, ddi);
-
-      if (!result.success) {
-        toast.custom((t) => (
-          <Toast
-            variant="error"
-            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
-            toastId={t}
-          />
-        ));
-        return;
-      }
-
-      setSubmittedPhone({ ddi, local });
-      setShowVerification(true);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [phoneValue]);
-
-  const handleBack = useCallback(() => {
-    setShowVerification(false);
-  }, []);
-
-  const resetForm = useCallback(() => {
-    setPhoneValue('');
-    setPhoneError('');
-    setSubmittedPhone({ ddi: '+55', local: '' });
-    setShowVerification(false);
-  }, []);
-
-  return {
-    showVerification,
-    phoneValue,
-    phoneError,
-    isSubmitting,
-    submittedPhone,
-    handlePhoneChange,
-    handleContinue,
-    handleBack,
-    resetForm,
-  };
-}
+'use client';
+
+import { useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
+
+function splitPhoneValue(fullValue: string): { ddi: string; local: string } {
+  const trimmed = fullValue.trim();
+  const spaceIdx = trimmed.indexOf(' ');
+  if (spaceIdx === -1) return { ddi: '+55', local: trimmed };
+  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };
+}
+
+export default function useChangePhoneForm() {
+  const [showVerification, setShowVerification] = useState(false);
+  const [phoneValue, setPhoneValue] = useState('');
+  const [phoneError, setPhoneError] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submittedPhone, setSubmittedPhone] = useState({ ddi: '+55', local: '' });
+
+  const handlePhoneChange = useCallback((value: string) => {
+    setPhoneValue(value);
+    if (phoneError) setPhoneError('');
+  }, [phoneError]);
+
+  const handleContinue = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const { ddi, local } = splitPhoneValue(phoneValue);
+
+    if (!local || local.replace(/\D/g, '').length < 8) {
+      setPhoneError('Número de telefone inválido');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const result = await requestPhoneChangeAction(local, ddi);
+
+      if (!result.success) {
+        toast.custom((t) => (
+          <Toast
+            variant="error"
+            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
+            toastId={t}
+          />
+        ));
+        return;
+      }
+
+      setSubmittedPhone({ ddi, local });
+      setShowVerification(true);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [phoneValue]);
+
+  const handleBack = useCallback(() => {
+    setShowVerification(false);
+  }, []);
+
+  const resetForm = useCallback(() => {
+    setPhoneValue('');
+    setPhoneError('');
+    setSubmittedPhone({ ddi: '+55', local: '' });
+    setShowVerification(false);
+  }, []);
+
+  return {
+    showVerification,
+    phoneValue,
+    phoneError,
+    isSubmitting,
+    submittedPhone,
+    handlePhoneChange,
+    handleContinue,
+    handleBack,
+    resetForm,
+  };
+}