@greatapps/common 1.1.155 → 1.1.156

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -1,49 +1,49 @@
-'use client';
-
-import { TriangleAlert } from 'lucide-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">
-            <TriangleAlert 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 { TriangleAlert } from 'lucide-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">
+            <TriangleAlert 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/hooks/useTwoFactorAuthForm.tsx

@@ -1,101 +1,101 @@
-'use client';
-
-import { useState, useCallback, useEffect } from 'react';
-import { useMutation } from '@tanstack/react-query';
-import { toast } from 'sonner';
-import { Toast } from '../../ui/feedback/Toast';
-import { copyToClipboard } from '../../../utils/browser/clipboard';
-import {
-  generateTwoFactorAction,
-  confirmTwoFactorAction,
-} from '../../../modules/accounts/actions/account-management.action';
-import { withAction } from '../../../utils/withAction';
-
-type Step = 'code' | 'recovery';
-
-interface UseTwoFactorAuthFormProps {
-  onSuccess?: () => void;
-  open?: boolean;
-}
-
-export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {
-  const [code, setCode] = useState('');
-  const [step, setStep] = useState<Step>('code');
-
-  const generateMutation = useMutation({
-    mutationFn: withAction(generateTwoFactorAction),
-    onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao gerar QR Code. Tente novamente." toastId={t} />
-      ));
-    },
-  });
-
-  const confirmMutation = useMutation({
-    mutationFn: withAction(confirmTwoFactorAction),
-    onSuccess: () => {
-      setStep('recovery');
-    },
-    onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao confirmar código. Tente novamente." toastId={t} />
-      ));
-    },
-  });
-
-  const { mutate: triggerGenerate } = generateMutation;
-
-  useEffect(() => {
-    if (open) {
-      triggerGenerate();
-    }
-  }, [open, triggerGenerate]);
-
-  const generateFailed = generateMutation.isError;
-
-  const isCodeComplete = code.length === 6;
-
-  const handleSubmit = () => {
-    if (!isCodeComplete) return;
-    confirmMutation.mutate(code);
-  };
-
-  const handleFinalize = () => {
-    onSuccess?.();
-    setTimeout(resetForm, 300);
-  };
-
-  const handleCopyCodes = useCallback(async () => {
-    const codes = generateMutation.data?.backupCodes ?? [];
-    const success = await copyToClipboard(codes.join('\n'));
-    if (success) {
-      toast.custom((t) => (
-        <Toast variant="success" message="Códigos copiados com sucesso" toastId={t} />
-      ));
-    }
-  }, [generateMutation.data]);
-
-  const resetForm = () => {
-    setCode('');
-    setStep('code');
-    generateMutation.reset();
-    confirmMutation.reset();
-  };
-
-  return {
-    code,
-    setCode,
-    isCodeComplete,
-    isGenerating: generateMutation.isPending,
-    isConfirming: confirmMutation.isPending,
-    generateFailed,
-    retryGenerate: triggerGenerate,
-    qrcode: generateMutation.data?.qrcode,
-    backupCodes: generateMutation.data?.backupCodes ?? [],
-    step,
-    handleSubmit,
-    handleFinalize,
-    handleCopyCodes,
-    resetForm,
-  };
-}
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { copyToClipboard } from '../../../utils/browser/clipboard';
+import {
+  generateTwoFactorAction,
+  confirmTwoFactorAction,
+} from '../../../modules/accounts/actions/account-management.action';
+import { withAction } from '../../../utils/withAction';
+
+type Step = 'code' | 'recovery';
+
+interface UseTwoFactorAuthFormProps {
+  onSuccess?: () => void;
+  open?: boolean;
+}
+
+export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {
+  const [code, setCode] = useState('');
+  const [step, setStep] = useState<Step>('code');
+
+  const generateMutation = useMutation({
+    mutationFn: withAction(generateTwoFactorAction),
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao gerar QR Code. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const confirmMutation = useMutation({
+    mutationFn: withAction(confirmTwoFactorAction),
+    onSuccess: () => {
+      setStep('recovery');
+    },
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao confirmar código. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const { mutate: triggerGenerate } = generateMutation;
+
+  useEffect(() => {
+    if (open) {
+      triggerGenerate();
+    }
+  }, [open, triggerGenerate]);
+
+  const generateFailed = generateMutation.isError;
+
+  const isCodeComplete = code.length === 6;
+
+  const handleSubmit = () => {
+    if (!isCodeComplete) return;
+    confirmMutation.mutate(code);
+  };
+
+  const handleFinalize = () => {
+    onSuccess?.();
+    setTimeout(resetForm, 300);
+  };
+
+  const handleCopyCodes = useCallback(async () => {
+    const codes = generateMutation.data?.backupCodes ?? [];
+    const success = await copyToClipboard(codes.join('\n'));
+    if (success) {
+      toast.custom((t) => (
+        <Toast variant="success" message="Códigos copiados com sucesso" toastId={t} />
+      ));
+    }
+  }, [generateMutation.data]);
+
+  const resetForm = () => {
+    setCode('');
+    setStep('code');
+    generateMutation.reset();
+    confirmMutation.reset();
+  };
+
+  return {
+    code,
+    setCode,
+    isCodeComplete,
+    isGenerating: generateMutation.isPending,
+    isConfirming: confirmMutation.isPending,
+    generateFailed,
+    retryGenerate: triggerGenerate,
+    qrcode: generateMutation.data?.qrcode,
+    backupCodes: generateMutation.data?.backupCodes ?? [],
+    step,
+    handleSubmit,
+    handleFinalize,
+    handleCopyCodes,
+    resetForm,
+  };
+}

package/src/components/layouts/AppMobileNavBar.tsx

@@ -1,125 +1,125 @@
-"use client";
-
-import { ReactNode } from "react";
-import Image from "next/image";
-import { ProfilePopover } from "./ProfilePopover";
-import { useAccountModals } from "../../store/useAccountModals";
-import type { ProfileMenuItem } from "./ProfilePopover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-
-export interface AppMobileNavBarProps {
-  /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages";
-  /** Called when the GreatApps logo is clicked */
-  onLogoClick?: () => void;
-  /** Called when the app icon (e.g. GreatPages) is clicked */
-  onAppIconClick?: () => void;
-  /** Extra slot rendered after the app icon (e.g. project selector) */
-  extraLeftSlot?: ReactNode;
-  /** Required: the right-side action element (toggle button, sheet button, etc.) */
-  rightActionSlot: ReactNode;
-  menuItems?: ProfileMenuItem[];
-  onCreditsClick?: () => void;
-}
-
-export function AppMobileNavBar({
-  activeApp,
-  onLogoClick,
-  onAppIconClick,
-  extraLeftSlot,
-  rightActionSlot,
-  menuItems = [],
-  onCreditsClick,
-}: AppMobileNavBarProps) {
-  const { openConfigurations } = useAccountModals();
-
-  const isGpagesActive = activeApp === "gpages";
-  const isGappsActive = activeApp === "gapps";
-
-  return (
-    <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
-      <div className="flex items-center gap-1.5">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div
-              className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`}
-              onClick={onLogoClick}
-            >
-              <Image
-                src="/icons/great-icon.svg"
-                alt="GreatApps"
-                width={28}
-                height={28}
-              />
-              {isGappsActive && (
-                <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
-              )}
-            </div>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">GreatApps</TooltipContent>
-        </Tooltip>
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              {isGpagesActive ? (
-                <div
-                  className="size-10 rounded-xl cursor-pointer p-[2px]"
-                  style={{
-                    border: "1.5px solid rgba(153,234,255,0.75)",
-                    background: "white",
-                    boxShadow:
-                      "0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)",
-                  }}
-                  onClick={onAppIconClick}
-                >
-                  <div
-                    className="w-full h-full rounded-lg flex items-center justify-center"
-                    style={{
-                      background:
-                        "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)",
-                    }}
-                  >
-                    <Image
-                      src="/icons/icon-navbar.svg"
-                      alt="GreatPages"
-                      width={24}
-                      height={24}
-                    />
-                  </div>
-                </div>
-              ) : (
-                <div
-                  className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-gray-100 ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`}
-                  onClick={onAppIconClick}
-                >
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                </div>
-              )}
-            </TooltipTrigger>
-            <TooltipContent side="bottom">GreatPages</TooltipContent>
-          </Tooltip>
-          {isGpagesActive && (
-            <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl" style={{ backgroundColor: "#6ADCFF" }} />
-          )}
-        </div>
-        {extraLeftSlot}
-      </div>
-      <div className="flex items-center gap-1.5">
-        <ProfilePopover
-          side="bottom"
-          align="end"
-          contentClassName=""
-          onEditProfile={() => openConfigurations()}
-          onCreditsClick={onCreditsClick}
-          menuItems={menuItems}
-        />
-        {rightActionSlot}
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { ReactNode } from "react";
+import Image from "next/image";
+import { ProfilePopover } from "./ProfilePopover";
+import { useAccountModals } from "../../store/useAccountModals";
+import type { ProfileMenuItem } from "./ProfilePopover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+
+export interface AppMobileNavBarProps {
+  /** Which app is currently active — controls which icon gets the indicator */
+  activeApp?: "gapps" | "gpages";
+  /** Called when the GreatApps logo is clicked */
+  onLogoClick?: () => void;
+  /** Called when the app icon (e.g. GreatPages) is clicked */
+  onAppIconClick?: () => void;
+  /** Extra slot rendered after the app icon (e.g. project selector) */
+  extraLeftSlot?: ReactNode;
+  /** Required: the right-side action element (toggle button, sheet button, etc.) */
+  rightActionSlot: ReactNode;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+}
+
+export function AppMobileNavBar({
+  activeApp,
+  onLogoClick,
+  onAppIconClick,
+  extraLeftSlot,
+  rightActionSlot,
+  menuItems = [],
+  onCreditsClick,
+}: AppMobileNavBarProps) {
+  const { openConfigurations } = useAccountModals();
+
+  const isGpagesActive = activeApp === "gpages";
+  const isGappsActive = activeApp === "gapps";
+
+  return (
+    <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
+      <div className="flex items-center gap-1.5">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`}
+              onClick={onLogoClick}
+            >
+              <Image
+                src="/icons/great-icon.svg"
+                alt="GreatApps"
+                width={28}
+                height={28}
+              />
+              {isGappsActive && (
+                <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
+              )}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">GreatApps</TooltipContent>
+        </Tooltip>
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              {isGpagesActive ? (
+                <div
+                  className="size-10 rounded-xl cursor-pointer p-[2px]"
+                  style={{
+                    border: "1.5px solid rgba(153,234,255,0.75)",
+                    background: "white",
+                    boxShadow:
+                      "0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)",
+                  }}
+                  onClick={onAppIconClick}
+                >
+                  <div
+                    className="w-full h-full rounded-lg flex items-center justify-center"
+                    style={{
+                      background:
+                        "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)",
+                    }}
+                  >
+                    <Image
+                      src="/icons/icon-navbar.svg"
+                      alt="GreatPages"
+                      width={24}
+                      height={24}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div
+                  className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-gray-100 ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`}
+                  onClick={onAppIconClick}
+                >
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                </div>
+              )}
+            </TooltipTrigger>
+            <TooltipContent side="bottom">GreatPages</TooltipContent>
+          </Tooltip>
+          {isGpagesActive && (
+            <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl" style={{ backgroundColor: "#6ADCFF" }} />
+          )}
+        </div>
+        {extraLeftSlot}
+      </div>
+      <div className="flex items-center gap-1.5">
+        <ProfilePopover
+          side="bottom"
+          align="end"
+          contentClassName=""
+          onEditProfile={() => openConfigurations()}
+          onCreditsClick={onCreditsClick}
+          menuItems={menuItems}
+        />
+        {rightActionSlot}
+      </div>
+    </div>
+  );
+}

package/src/components/layouts/AppNavBar.tsx

@@ -1,57 +1,57 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { NavBar } from "./NavBar";
-import { ProfilePopover } from "./ProfilePopover";
-import { NotificationsPopover } from "./NotificationsPopover";
-import { useAccountModals } from "../../store/useAccountModals";
-import type { ProfileMenuItem } from "./ProfilePopover";
-
-export interface AppNavBarProps {
-  onLogoClick?: () => void;
-  /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages";
-  appIconHref?: string;
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  menuItems?: ProfileMenuItem[];
-  onCreditsClick?: () => void;
-  onNotificationsViewAll?: () => void;
-  logoutRedirect?: string;
-}
-
-export function AppNavBar({
-  onLogoClick,
-  activeApp,
-  appIconHref = "/",
-  showExpandButton = false,
-  onExpandClick,
-  menuItems = [],
-  onCreditsClick,
-  onNotificationsViewAll,
-  logoutRedirect,
-}: AppNavBarProps) {
-  const router = useRouter();
-  const { openConfigurations } = useAccountModals();
-
-  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
-  const handleAppIconClick = () => router.push(appIconHref);
-
-  return (
-    <NavBar
-      onLogoClick={handleLogoClick}
-      onAppIconClick={handleAppIconClick}
-      activeApp={activeApp}
-      showExpandButton={showExpandButton}
-      onExpandClick={onExpandClick}
-    >
-      <NotificationsPopover onViewAll={onNotificationsViewAll} />
-      <ProfilePopover
-        onEditProfile={() => openConfigurations()}
-        onCreditsClick={onCreditsClick}
-        menuItems={menuItems}
-        logoutRedirect={logoutRedirect}
-      />
-    </NavBar>
-  );
-}
+"use client";
+
+import { useRouter } from "next/navigation";
+import { NavBar } from "./NavBar";
+import { ProfilePopover } from "./ProfilePopover";
+import { NotificationsPopover } from "./NotificationsPopover";
+import { useAccountModals } from "../../store/useAccountModals";
+import type { ProfileMenuItem } from "./ProfilePopover";
+
+export interface AppNavBarProps {
+  onLogoClick?: () => void;
+  /** Which app is currently active — controls which icon gets the indicator */
+  activeApp?: "gapps" | "gpages";
+  appIconHref?: string;
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+  onNotificationsViewAll?: () => void;
+  logoutRedirect?: string;
+}
+
+export function AppNavBar({
+  onLogoClick,
+  activeApp,
+  appIconHref = "/",
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onCreditsClick,
+  onNotificationsViewAll,
+  logoutRedirect,
+}: AppNavBarProps) {
+  const router = useRouter();
+  const { openConfigurations } = useAccountModals();
+
+  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
+  const handleAppIconClick = () => router.push(appIconHref);
+
+  return (
+    <NavBar
+      onLogoClick={handleLogoClick}
+      onAppIconClick={handleAppIconClick}
+      activeApp={activeApp}
+      showExpandButton={showExpandButton}
+      onExpandClick={onExpandClick}
+    >
+      <NotificationsPopover onViewAll={onNotificationsViewAll} />
+      <ProfilePopover
+        onEditProfile={() => openConfigurations()}
+        onCreditsClick={onCreditsClick}
+        menuItems={menuItems}
+        logoutRedirect={logoutRedirect}
+      />
+    </NavBar>
+  );
+}