@greatapps/common 1.1.381 → 1.1.383

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -1,49 +1,49 @@
-'use client';
-
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { useAccountModals } from '../../store/useAccountModals';
-
-export default function IsntPossibleDeleteAccountModal() {
-  const { activeModal, close, config } = useAccountModals();
-  const { onGoToSubscription } = config;
-  const open = activeModal === 'isntPossibleDelete';
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent className="max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
-        <div className="flex flex-col gap-5">
-          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
-            <IconAlertTriangle size={20} className="text-red-500" />
-          </div>
-          <DialogHeader className="p-0 gap-2">
-            <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Não é possível excluir a conta
-            </DialogTitle>
-            <DialogDescription className="paragraph-small-regular text-gray-600">
-              Você tem uma assinatura ativa. Para excluir sua conta,{' '}
-              <span className="font-semibold text-gray-950">primeiro cancele a assinatura</span> na
-              página Assinatura e depois tente novamente.
-            </DialogDescription>
-          </DialogHeader>
-        </div>
-
-        <div className="h-px bg-gray-200 -mx-6" />
-
-        <div className="flex flex-row items-center gap-2">
-          <Button className="h-10 flex-1" onClick={close}>
-            Ok, entendi
-          </Button>
-          <Button
-            variant="secondary"
-            className="h-10 flex-1"
-            onClick={onGoToSubscription ?? close}
-          >
-            Ir para assinatura
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function IsntPossibleDeleteAccountModal() {
+  const { activeModal, close, config } = useAccountModals();
+  const { onGoToSubscription } = config;
+  const open = activeModal === 'isntPossibleDelete';
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent className="max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
+        <div className="flex flex-col gap-5">
+          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
+            <IconAlertTriangle size={20} className="text-red-500" />
+          </div>
+          <DialogHeader className="p-0 gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              Não é possível excluir a conta
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-gray-600">
+              Você tem uma assinatura ativa. Para excluir sua conta,{' '}
+              <span className="font-semibold text-gray-950">primeiro cancele a assinatura</span> na
+              página Assinatura e depois tente novamente.
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <div className="h-px bg-gray-200 -mx-6" />
+
+        <div className="flex flex-row items-center gap-2">
+          <Button className="h-10 flex-1" onClick={close}>
+            Ok, entendi
+          </Button>
+          <Button
+            variant="secondary"
+            className="h-10 flex-1"
+            onClick={onGoToSubscription ?? close}
+          >
+            Ir para assinatura
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/TwoFactorAuthModal.tsx

@@ -1,215 +1,215 @@
-'use client';
-
-import { 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 sm: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 sm: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">
-          <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 { 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 sm: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 sm: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">
+          <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>
+  );
+}