@greatapps/common 1.1.260 → 1.1.262

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

@@ -1,160 +1,160 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { IconLock, IconTool } from '@tabler/icons-react';
-import { Badge } from '../../ui/data-display/Badge';
-import { Button } from '../../ui/buttons/Button';
-import { useAuth } from '../../../providers/auth.provider';
-import { useQueryClient } from '@tanstack/react-query';
-import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
-import { AccountSectionType } from '../../../enums/AccountSectionType';
-import TwoFactorAuthModal from '../TwoFactorAuthModal';
-import DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';
-
-interface SecuritySectionProps {
-  setActiveSection: (section: AccountSectionType) => void;
-  onClose: () => void;
-  hasActiveSubscription?: boolean;
-  onDeleteAccount?: () => void;
-}
-
-export function SecuritySection({
-  setActiveSection,
-  onClose,
-  hasActiveSubscription,
-  onDeleteAccount,
-}: SecuritySectionProps) {
-  const { user } = useAuth();
-  const queryClient = useQueryClient();
-
-  const twoFactorAuth = user?.two_factor_authentication ?? false;
-  const [twoFactorOpen, setTwoFactorOpen] = useState(false);
-  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
-
-  const handleToggleTwoFactor = useCallback(() => {
-    if (twoFactorAuth) {
-      setDisableTwoFactorOpen(true);
-    } else {
-      setTwoFactorOpen(true);
-    }
-  }, [twoFactorAuth]);
-
-  const handleDisableTwoFactorSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    setDisableTwoFactorOpen(false);
-  }, [queryClient]);
-
-  const handleEnableTwoFactorSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    setTwoFactorOpen(false);
-  }, [queryClient]);
-
-  const handleDeleteAccount = useCallback(() => {
-    onDeleteAccount?.();
-  }, [onDeleteAccount]);
-
-  return (
-    <>
-      <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
-        <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
-
-        <div className="border border-gray-200 rounded-lg overflow-hidden">
-          <div
-            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors"
-            onClick={handleToggleTwoFactor}
-          >
-            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
-              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
-                <IconTool size={20} className="text-gray-950" />
-              </div>
-              <div className="flex flex-col gap-1.5 flex-1">
-                <div className="flex flex-wrap items-center gap-2">
-                  <span className="paragraph-small-semibold text-gray-950">
-                    Autenticação de dois fatores
-                  </span>
-                  <Badge
-                    className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}
-                  >
-                    {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}
-                  </Badge>
-                </div>
-                <span className="paragraph-small-regular text-gray-600">
-                  Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema
-                </span>
-              </div>
-            </div>
-            <Button
-              variant="secondary"
-              className="h-10! shrink-0 w-full lg:w-auto"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleToggleTwoFactor();
-              }}
-            >
-              {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}
-            </Button>
-          </div>
-
-          <div
-            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors"
-            onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}
-          >
-            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
-              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
-                <IconLock size={20} className="text-gray-950" />
-              </div>
-              <div className="flex flex-col gap-1.5 flex-1">
-                <span className="paragraph-small-semibold text-gray-950">
-                  Alterar senha de acesso
-                </span>
-                <span className="paragraph-small-regular text-gray-600">
-                  Atualize sua senha sempre que necessário para manter sua conta segura.
-                </span>
-              </div>
-            </div>
-            <Button
-              variant="secondary"
-              className="h-10! shrink-0 w-full lg:w-auto"
-              onClick={(e) => {
-                e.stopPropagation();
-                setActiveSection(AccountSectionType.CHANGE_PASSWORD);
-              }}
-            >
-              Alterar senha
-            </Button>
-          </div>
-        </div>
-
-        {onDeleteAccount && (
-          <button
-            type="button"
-            className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
-            onClick={handleDeleteAccount}
-          >
-            Excluir minha conta
-          </button>
-        )}
-      </div>
-
-      <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10">
-        <Button variant="secondary" className="h-10!" type="button" onClick={onClose}>
-          Cancelar
-        </Button>
-        <Button className="h-10!" onClick={onClose}>
-          Salvar alterações
-        </Button>
-      </div>
-
-      <DisableTwoFactorAuthModal
-        open={disableTwoFactorOpen}
-        onClose={() => setDisableTwoFactorOpen(false)}
-        onSuccess={handleDisableTwoFactorSuccess}
-      />
-      <TwoFactorAuthModal
-        open={twoFactorOpen}
-        onClose={() => setTwoFactorOpen(false)}
-        onSuccess={handleEnableTwoFactorSuccess}
-      />
-    </>
-  );
-}
+'use client';
+
+import { useState, useCallback } from 'react';
+import { IconLock, IconTool } from '@tabler/icons-react';
+import { Badge } from '../../ui/data-display/Badge';
+import { Button } from '../../ui/buttons/Button';
+import { useAuth } from '../../../providers/auth.provider';
+import { useQueryClient } from '@tanstack/react-query';
+import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
+import { AccountSectionType } from '../../../enums/AccountSectionType';
+import TwoFactorAuthModal from '../TwoFactorAuthModal';
+import DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';
+
+interface SecuritySectionProps {
+  setActiveSection: (section: AccountSectionType) => void;
+  onClose: () => void;
+  hasActiveSubscription?: boolean;
+  onDeleteAccount?: () => void;
+}
+
+export function SecuritySection({
+  setActiveSection,
+  onClose,
+  hasActiveSubscription,
+  onDeleteAccount,
+}: SecuritySectionProps) {
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+
+  const twoFactorAuth = user?.two_factor_authentication ?? false;
+  const [twoFactorOpen, setTwoFactorOpen] = useState(false);
+  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
+
+  const handleToggleTwoFactor = useCallback(() => {
+    if (twoFactorAuth) {
+      setDisableTwoFactorOpen(true);
+    } else {
+      setTwoFactorOpen(true);
+    }
+  }, [twoFactorAuth]);
+
+  const handleDisableTwoFactorSuccess = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    setDisableTwoFactorOpen(false);
+  }, [queryClient]);
+
+  const handleEnableTwoFactorSuccess = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    setTwoFactorOpen(false);
+  }, [queryClient]);
+
+  const handleDeleteAccount = useCallback(() => {
+    onDeleteAccount?.();
+  }, [onDeleteAccount]);
+
+  return (
+    <>
+      <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
+        <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
+
+        <div className="border border-gray-200 rounded-lg overflow-hidden">
+          <div
+            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors"
+            onClick={handleToggleTwoFactor}
+          >
+            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
+              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
+                <IconTool size={20} className="text-gray-950" />
+              </div>
+              <div className="flex flex-col gap-1.5 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="paragraph-small-semibold text-gray-950">
+                    Autenticação de dois fatores
+                  </span>
+                  <Badge
+                    className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}
+                  >
+                    {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}
+                  </Badge>
+                </div>
+                <span className="paragraph-small-regular text-gray-600">
+                  Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema
+                </span>
+              </div>
+            </div>
+            <Button
+              variant="secondary"
+              className="h-10! shrink-0 w-full lg:w-auto"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggleTwoFactor();
+              }}
+            >
+              {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}
+            </Button>
+          </div>
+
+          <div
+            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors"
+            onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}
+          >
+            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
+              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
+                <IconLock size={20} className="text-gray-950" />
+              </div>
+              <div className="flex flex-col gap-1.5 flex-1">
+                <span className="paragraph-small-semibold text-gray-950">
+                  Alterar senha de acesso
+                </span>
+                <span className="paragraph-small-regular text-gray-600">
+                  Atualize sua senha sempre que necessário para manter sua conta segura.
+                </span>
+              </div>
+            </div>
+            <Button
+              variant="secondary"
+              className="h-10! shrink-0 w-full lg:w-auto"
+              onClick={(e) => {
+                e.stopPropagation();
+                setActiveSection(AccountSectionType.CHANGE_PASSWORD);
+              }}
+            >
+              Alterar senha
+            </Button>
+          </div>
+        </div>
+
+        {onDeleteAccount && (
+          <button
+            type="button"
+            className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
+            onClick={handleDeleteAccount}
+          >
+            Excluir minha conta
+          </button>
+        )}
+      </div>
+
+      <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10">
+        <Button variant="secondary" className="h-10!" type="button" onClick={onClose}>
+          Cancelar
+        </Button>
+        <Button className="h-10!" onClick={onClose}>
+          Salvar alterações
+        </Button>
+      </div>
+
+      <DisableTwoFactorAuthModal
+        open={disableTwoFactorOpen}
+        onClose={() => setDisableTwoFactorOpen(false)}
+        onSuccess={handleDisableTwoFactorSuccess}
+      />
+      <TwoFactorAuthModal
+        open={twoFactorOpen}
+        onClose={() => setTwoFactorOpen(false)}
+        onSuccess={handleEnableTwoFactorSuccess}
+      />
+    </>
+  );
+}

package/src/components/embeds/CrispEmbed.tsx

@@ -1,101 +1,101 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { useAuth } from '../../providers/auth.provider';
-import { useWhitelabel } from '../../providers/whitelabel.provider';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-
-const V4_WHITELABEL_ID = 367568;
-
-const CRISP_WEBSITE_ID = '3339a3ec-b4c6-4aac-8b86-45668fb7655c';
-const CRISP_SCRIPT_URL = 'https://client.crisp.chat/l.js';
-const CRISP_LOAD_DELAY = 800;
-
-function safeCrispPush(args: any[]) {
-  try {
-    const $crisp = (window as any)?.$crisp;
-    if ($crisp) $crisp.push(args);
-  } catch {}
-}
-
-export function openCrispHelpdesk() {
-  safeCrispPush(['do', 'helpdesk:search']);
-}
-
-export function hideCrisp() {
-  safeCrispPush(['do', 'chat:hide']);
-}
-
-export function showCrisp() {
-  safeCrispPush(['do', 'chat:show']);
-}
-
-export function CrispEmbed() {
-  const { user, account } = useAuth();
-  const { whitelabel } = useWhitelabel();
-  const { data: subscriptionData } = useActiveSubscription();
-  const scriptLoadedRef = useRef(false);
-
-  const subscription = subscriptionData?.data?.[0] ?? null;
-  const isV4 = whitelabel?.id === V4_WHITELABEL_ID;
-
-  // Load Crisp script (once, with 800ms delay)
-  useEffect(() => {
-    if (!user || scriptLoadedRef.current) return;
-
-    try {
-      const win = window as any;
-      win.$crisp = [];
-      win.CRISP_WEBSITE_ID = CRISP_WEBSITE_ID;
-      win.$crisp.push(['config', 'container:index', [100]]);
-
-      const timeout = setTimeout(() => {
-        try {
-          if (document.querySelector(`script[src="${CRISP_SCRIPT_URL}"]`)) return;
-          const s = document.createElement('script');
-          s.src = CRISP_SCRIPT_URL;
-          s.async = true;
-          document.head.appendChild(s);
-          scriptLoadedRef.current = true;
-        } catch {}
-      }, CRISP_LOAD_DELAY);
-
-      return () => clearTimeout(timeout);
-    } catch {}
-  }, [user]);
-
-  // Identify user
-  useEffect(() => {
-    try {
-      const $crisp = (window as any)?.$crisp;
-      if (!user || !$crisp) return;
-
-      if (user.email) $crisp.push(['set', 'user:email', user.email]);
-
-      const fullName = `${user.name ?? ''} ${user.last_name ?? ''}`.trim();
-      if (fullName) $crisp.push(['set', 'user:nickname', fullName]);
-
-      if (account?.name) $crisp.push(['set', 'user:company', account.name]);
-
-      const phone = `${user.ddi ?? ''}${user.phone ?? ''}`.trim();
-      if (phone) $crisp.push(['set', 'user:phone', phone]);
-
-      if (user.photo && user.photo.startsWith('http')) {
-        $crisp.push(['set', 'user:avatar', user.photo]);
-      }
-
-      if (isV4) {
-        $crisp.push(['set', 'session:segments', [['company_v4']]]);
-        $crisp.push(['set', 'session:data', [[['Company', 'V4']]]]);
-      } else {
-        const planName = subscription?.plan_name ?? '';
-        if (planName) $crisp.push(['set', 'session:segments', [[`plano_${planName}`]]]);
-        if (user.profile) $crisp.push(['set', 'session:segments', [[`usuario_${user.profile}`]]]);
-        if (planName) $crisp.push(['set', 'session:data', [[['Plano', planName]]]]);
-        if (user.profile) $crisp.push(['set', 'session:data', [[['Usuario', user.profile]]]]);
-      }
-    } catch {}
-  }, [user, account, isV4, subscription?.plan_name]);
-
-  return null;
-}
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useAuth } from '../../providers/auth.provider';
+import { useWhitelabel } from '../../providers/whitelabel.provider';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+
+const V4_WHITELABEL_ID = 367568;
+
+const CRISP_WEBSITE_ID = '3339a3ec-b4c6-4aac-8b86-45668fb7655c';
+const CRISP_SCRIPT_URL = 'https://client.crisp.chat/l.js';
+const CRISP_LOAD_DELAY = 800;
+
+function safeCrispPush(args: any[]) {
+  try {
+    const $crisp = (window as any)?.$crisp;
+    if ($crisp) $crisp.push(args);
+  } catch {}
+}
+
+export function openCrispHelpdesk() {
+  safeCrispPush(['do', 'helpdesk:search']);
+}
+
+export function hideCrisp() {
+  safeCrispPush(['do', 'chat:hide']);
+}
+
+export function showCrisp() {
+  safeCrispPush(['do', 'chat:show']);
+}
+
+export function CrispEmbed() {
+  const { user, account } = useAuth();
+  const { whitelabel } = useWhitelabel();
+  const { data: subscriptionData } = useActiveSubscription();
+  const scriptLoadedRef = useRef(false);
+
+  const subscription = subscriptionData?.data?.[0] ?? null;
+  const isV4 = whitelabel?.id === V4_WHITELABEL_ID;
+
+  // Load Crisp script (once, with 800ms delay)
+  useEffect(() => {
+    if (!user || scriptLoadedRef.current) return;
+
+    try {
+      const win = window as any;
+      win.$crisp = [];
+      win.CRISP_WEBSITE_ID = CRISP_WEBSITE_ID;
+      win.$crisp.push(['config', 'container:index', [100]]);
+
+      const timeout = setTimeout(() => {
+        try {
+          if (document.querySelector(`script[src="${CRISP_SCRIPT_URL}"]`)) return;
+          const s = document.createElement('script');
+          s.src = CRISP_SCRIPT_URL;
+          s.async = true;
+          document.head.appendChild(s);
+          scriptLoadedRef.current = true;
+        } catch {}
+      }, CRISP_LOAD_DELAY);
+
+      return () => clearTimeout(timeout);
+    } catch {}
+  }, [user]);
+
+  // Identify user
+  useEffect(() => {
+    try {
+      const $crisp = (window as any)?.$crisp;
+      if (!user || !$crisp) return;
+
+      if (user.email) $crisp.push(['set', 'user:email', user.email]);
+
+      const fullName = `${user.name ?? ''} ${user.last_name ?? ''}`.trim();
+      if (fullName) $crisp.push(['set', 'user:nickname', fullName]);
+
+      if (account?.name) $crisp.push(['set', 'user:company', account.name]);
+
+      const phone = `${user.ddi ?? ''}${user.phone ?? ''}`.trim();
+      if (phone) $crisp.push(['set', 'user:phone', phone]);
+
+      if (user.photo && user.photo.startsWith('http')) {
+        $crisp.push(['set', 'user:avatar', user.photo]);
+      }
+
+      if (isV4) {
+        $crisp.push(['set', 'session:segments', [['company_v4']]]);
+        $crisp.push(['set', 'session:data', [[['Company', 'V4']]]]);
+      } else {
+        const planName = subscription?.plan_name ?? '';
+        if (planName) $crisp.push(['set', 'session:segments', [[`plano_${planName}`]]]);
+        if (user.profile) $crisp.push(['set', 'session:segments', [[`usuario_${user.profile}`]]]);
+        if (planName) $crisp.push(['set', 'session:data', [[['Plano', planName]]]]);
+        if (user.profile) $crisp.push(['set', 'session:data', [[['Usuario', user.profile]]]]);
+      }
+    } catch {}
+  }, [user, account, isV4, subscription?.plan_name]);
+
+  return null;
+}