@greatapps/common 1.1.375 → 1.1.376

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

@@ -1,248 +1,248 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { IconLock } from '@tabler/icons-react';
-import { cn } from '../../../infra/utils/clsx';
-import { Button } from '../../ui/buttons/Button';
-import { Separator } from '../../ui/data-display/Separator';
-import { Toast } from '../../ui/feedback/Toast';
-import { FormField } from '../../ui/form/FormField';
-import { ComboboxField } from '../../ui/form/ComboboxField';
-import { SelectField } from '../../ui/form/SelectField';
-import ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';
-import { useAuth } from '../../../providers/auth.provider';
-import { UserProfile } from '../../../modules/users/schema';
-import type { UpdateAccountRequest } from '../../../modules/accounts/types';
-import {
-  useUpdateAccountUser,
-  useUpdateAccount,
-} from '../../../modules/accounts/hooks/useAccountManagement';
-import {
-  LANGUAGE_OPTIONS,
-  TIME_FORMAT_OPTIONS,
-} from '../constants';
-import { useTimezones } from '../../../modules/accounts/hooks/useTimezones';
-import { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';
-
-interface PreferencesFormValues {
-  companyName: string;
-  language: string;
-  currency: string;
-  timezone: string;
-  timeFormat: string;
-  receive_sms: boolean;
-  receive_email: boolean;
-}
-
-interface PreferencesSectionProps {
-  onClose: () => void;
-}
-
-export function PreferencesSection({ onClose }: PreferencesSectionProps) {
-  const { data: timezones = [] } = useTimezones();
-  const { data: currencies = [] } = useCurrencies();
-  const { user, account } = useAuth();
-  const isOwner = user?.profile === UserProfile.owner;
-  const canEditPreferences = isOwner || user?.profile === UserProfile.admin;
-  const updateAccountUser = useUpdateAccountUser();
-  const updateAccount = useUpdateAccount();
-  const [confirmGlobalOpen, setConfirmGlobalOpen] = useState(false);
-  const [pendingSubmit, setPendingSubmit] = useState<{
-    data: PreferencesFormValues;
-    accountFields: UpdateAccountRequest;
-  } | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } =
-    useForm<PreferencesFormValues>({
-      defaultValues: {
-        companyName: '',
-        language: '',
-        currency: '',
-        timezone: '',
-        timeFormat: '24h',
-        receive_sms: false,
-        receive_email: false,
-      },
-    });
-
-  useEffect(() => {
-    if (!user || !account) return;
-    reset({
-      companyName: account.name ?? '',
-      language: LANGUAGE_OPTIONS.find(
-        (o) => o.apiValue === user.language?.toLowerCase()
-      )?.value ?? 'pt-BR',
-      currency: account.currency,
-      timezone: account.timezone,
-      timeFormat: '24h',
-      receive_sms: user.receive_sms ?? false,
-      receive_email: user.receive_email ?? false,
-    });
-  }, [user, account, reset]);
-
-  const doSave = async (data: PreferencesFormValues, accountFields: UpdateAccountRequest) => {
-    setIsSaving(true);
-    try {
-      const apiLanguage = LANGUAGE_OPTIONS.find((o) => o.value === data.language)?.apiValue ?? data.language.toLowerCase();
-      await updateAccountUser.mutateAsync({
-        language: apiLanguage,
-        receive_sms: data.receive_sms,
-        receive_email: data.receive_email,
-      });
-
-      if (canEditPreferences && Object.keys(accountFields).length > 0) {
-        await updateAccount.mutateAsync(accountFields);
-      }
-
-      reset(data);
-      toast.custom((t) => (
-        <Toast variant="success" message="Preferências salvas com sucesso" toastId={t} />
-      ));
-      onClose();
-    } catch (error) {
-      toast.custom((t) => (
-        <Toast
-          variant="error"
-          message={error instanceof Error ? error.message : 'Erro ao salvar preferências'}
-          toastId={t}
-        />
-      ));
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const onSubmit = (data: PreferencesFormValues) => {
-    const accountFields: UpdateAccountRequest = {
-      ...(isOwner && dirtyFields.companyName && { name: data.companyName }),
-      ...(canEditPreferences && dirtyFields.currency && { currency: data.currency }),
-      ...(canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }),
-    };
-    const globalFieldChanged = Object.keys(accountFields).length > 0;
-
-    if (globalFieldChanged) {
-      setPendingSubmit({ data, accountFields });
-      setConfirmGlobalOpen(true);
-    } else {
-      doSave(data, accountFields);
-    }
-  };
-
-  const handleConfirmGlobal = () => {
-    setConfirmGlobalOpen(false);
-    if (pendingSubmit) {
-      doSave(pendingSubmit.data, pendingSubmit.accountFields);
-      setPendingSubmit(null);
-    }
-  };
-
-  const handleCancelGlobal = () => {
-    setConfirmGlobalOpen(false);
-    setPendingSubmit(null);
-  };
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col h-full">
-        <div className="overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6 flex-1">
-          <span className="paragraph-medium-semibold text-gray-950">Preferências</span>
-          <div className="flex flex-col gap-8">
-            <div className="flex flex-col lg:flex-row items-center gap-3">
-              <FormField
-                label="Nome da empresa"
-                placeholder="Digite o nome da empresa"
-                classnameContainer={cn('w-full', !isOwner && 'cursor-not-allowed opacity-50')}
-                value={watch('companyName')}
-                onChange={(e) => setValue('companyName', e.target.value, { shouldDirty: true })}
-                disabled={!isOwner}
-              />
-            </div>
-
-            <div className="flex flex-col lg:flex-row items-center gap-3">
-              <ComboboxField
-                label="Idioma"
-                placeholder="Selecione o idioma"
-                searchPlaceholder="Buscar idioma..."
-                containerClassName="w-full"
-                options={LANGUAGE_OPTIONS}
-                value={watch('language')}
-                onChange={(value) => setValue('language', value, { shouldDirty: true })}
-              />
-              <ComboboxField
-                label="Moeda"
-                placeholder="Selecione a moeda"
-                searchPlaceholder="Buscar moeda..."
-                containerClassName="w-full"
-                options={currencies}
-                value={watch('currency')}
-                onChange={(value) => setValue('currency', value, { shouldDirty: true })}
-                icon={!canEditPreferences ? <IconLock className="size-4 text-gray-400" /> : undefined}
-                disabled={!canEditPreferences}
-              />
-            </div>
-
-            <Separator />
-
-            <div className="flex flex-col gap-4">
-              <span className="paragraph-medium-semibold text-gray-950">Exibição hora</span>
-              <div className="flex flex-col lg:flex-row items-center gap-3">
-                <ComboboxField
-                  label="Fuso horário"
-                  placeholder="Selecione o fuso horário"
-                  searchPlaceholder="Buscar fuso horário..."
-                  containerClassName="w-full"
-                  options={timezones}
-                  value={watch('timezone')}
-                  onChange={(value) => setValue('timezone', value, { shouldDirty: true })}
-                  icon={!canEditPreferences ? <IconLock className="size-4 text-gray-400" /> : undefined}
-                  disabled={!canEditPreferences}
-                />
-                <SelectField
-                  label="Formato hora"
-                  placeholder="Selecione o formato"
-                  className="h-10!"
-                  containerClassName="w-full"
-                  options={TIME_FORMAT_OPTIONS}
-                  value={watch('timeFormat')}
-                  onChange={(value) =>
-                    setValue('timeFormat', value as string, { shouldDirty: true })
-                  }
-                  icon={<IconLock className="size-4 text-gray-400" />}
-                  disabled
-                />
-              </div>
-            </div>
-
-          </div>
-        </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"
-            disabled={isSaving}
-            onClick={() => {
-              reset();
-              onClose();
-            }}
-          >
-            Cancelar
-          </Button>
-          <Button className="h-10!" type="submit" disabled={isSaving}>
-            {isSaving ? 'Salvando...' : 'Salvar alterações'}
-          </Button>
-        </div>
-      </form>
-
-      <ConfirmGlobalPreferencesModal
-        open={confirmGlobalOpen}
-        onConfirm={handleConfirmGlobal}
-        onCancel={handleCancelGlobal}
-      />
-    </>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { IconLock } from '@tabler/icons-react';
+import { cn } from '../../../infra/utils/clsx';
+import { Button } from '../../ui/buttons/Button';
+import { Separator } from '../../ui/data-display/Separator';
+import { Toast } from '../../ui/feedback/Toast';
+import { FormField } from '../../ui/form/FormField';
+import { ComboboxField } from '../../ui/form/ComboboxField';
+import { SelectField } from '../../ui/form/SelectField';
+import ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';
+import { useAuth } from '../../../providers/auth.provider';
+import { UserProfile } from '../../../modules/users/schema';
+import type { UpdateAccountRequest } from '../../../modules/accounts/types';
+import {
+  useUpdateAccountUser,
+  useUpdateAccount,
+} from '../../../modules/accounts/hooks/useAccountManagement';
+import {
+  LANGUAGE_OPTIONS,
+  TIME_FORMAT_OPTIONS,
+} from '../constants';
+import { useTimezones } from '../../../modules/accounts/hooks/useTimezones';
+import { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';
+
+interface PreferencesFormValues {
+  companyName: string;
+  language: string;
+  currency: string;
+  timezone: string;
+  timeFormat: string;
+  receive_sms: boolean;
+  receive_email: boolean;
+}
+
+interface PreferencesSectionProps {
+  onClose: () => void;
+}
+
+export function PreferencesSection({ onClose }: PreferencesSectionProps) {
+  const { data: timezones = [] } = useTimezones();
+  const { data: currencies = [] } = useCurrencies();
+  const { user, account } = useAuth();
+  const isOwner = user?.profile === UserProfile.owner;
+  const canEditPreferences = isOwner || user?.profile === UserProfile.admin;
+  const updateAccountUser = useUpdateAccountUser();
+  const updateAccount = useUpdateAccount();
+  const [confirmGlobalOpen, setConfirmGlobalOpen] = useState(false);
+  const [pendingSubmit, setPendingSubmit] = useState<{
+    data: PreferencesFormValues;
+    accountFields: UpdateAccountRequest;
+  } | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } =
+    useForm<PreferencesFormValues>({
+      defaultValues: {
+        companyName: '',
+        language: '',
+        currency: '',
+        timezone: '',
+        timeFormat: '24h',
+        receive_sms: false,
+        receive_email: false,
+      },
+    });
+
+  useEffect(() => {
+    if (!user || !account) return;
+    reset({
+      companyName: account.name ?? '',
+      language: LANGUAGE_OPTIONS.find(
+        (o) => o.apiValue === user.language?.toLowerCase()
+      )?.value ?? 'pt-BR',
+      currency: account.currency,
+      timezone: account.timezone,
+      timeFormat: '24h',
+      receive_sms: user.receive_sms ?? false,
+      receive_email: user.receive_email ?? false,
+    });
+  }, [user, account, reset]);
+
+  const doSave = async (data: PreferencesFormValues, accountFields: UpdateAccountRequest) => {
+    setIsSaving(true);
+    try {
+      const apiLanguage = LANGUAGE_OPTIONS.find((o) => o.value === data.language)?.apiValue ?? data.language.toLowerCase();
+      await updateAccountUser.mutateAsync({
+        language: apiLanguage,
+        receive_sms: data.receive_sms,
+        receive_email: data.receive_email,
+      });
+
+      if (canEditPreferences && Object.keys(accountFields).length > 0) {
+        await updateAccount.mutateAsync(accountFields);
+      }
+
+      reset(data);
+      toast.custom((t) => (
+        <Toast variant="success" message="Preferências salvas com sucesso" toastId={t} />
+      ));
+      onClose();
+    } catch (error) {
+      toast.custom((t) => (
+        <Toast
+          variant="error"
+          message={error instanceof Error ? error.message : 'Erro ao salvar preferências'}
+          toastId={t}
+        />
+      ));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const onSubmit = (data: PreferencesFormValues) => {
+    const accountFields: UpdateAccountRequest = {
+      ...(isOwner && dirtyFields.companyName && { name: data.companyName }),
+      ...(canEditPreferences && dirtyFields.currency && { currency: data.currency }),
+      ...(canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }),
+    };
+    const globalFieldChanged = Object.keys(accountFields).length > 0;
+
+    if (globalFieldChanged) {
+      setPendingSubmit({ data, accountFields });
+      setConfirmGlobalOpen(true);
+    } else {
+      doSave(data, accountFields);
+    }
+  };
+
+  const handleConfirmGlobal = () => {
+    setConfirmGlobalOpen(false);
+    if (pendingSubmit) {
+      doSave(pendingSubmit.data, pendingSubmit.accountFields);
+      setPendingSubmit(null);
+    }
+  };
+
+  const handleCancelGlobal = () => {
+    setConfirmGlobalOpen(false);
+    setPendingSubmit(null);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col h-full">
+        <div className="overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6 flex-1">
+          <span className="paragraph-medium-semibold text-gray-950">Preferências</span>
+          <div className="flex flex-col gap-8">
+            <div className="flex flex-col lg:flex-row items-center gap-3">
+              <FormField
+                label="Nome da empresa"
+                placeholder="Digite o nome da empresa"
+                classnameContainer={cn('w-full', !isOwner && 'cursor-not-allowed opacity-50')}
+                value={watch('companyName')}
+                onChange={(e) => setValue('companyName', e.target.value, { shouldDirty: true })}
+                disabled={!isOwner}
+              />
+            </div>
+
+            <div className="flex flex-col lg:flex-row items-center gap-3">
+              <ComboboxField
+                label="Idioma"
+                placeholder="Selecione o idioma"
+                searchPlaceholder="Buscar idioma..."
+                containerClassName="w-full"
+                options={LANGUAGE_OPTIONS}
+                value={watch('language')}
+                onChange={(value) => setValue('language', value, { shouldDirty: true })}
+              />
+              <ComboboxField
+                label="Moeda"
+                placeholder="Selecione a moeda"
+                searchPlaceholder="Buscar moeda..."
+                containerClassName="w-full"
+                options={currencies}
+                value={watch('currency')}
+                onChange={(value) => setValue('currency', value, { shouldDirty: true })}
+                icon={!canEditPreferences ? <IconLock className="size-4 text-gray-400" /> : undefined}
+                disabled={!canEditPreferences}
+              />
+            </div>
+
+            <Separator />
+
+            <div className="flex flex-col gap-4">
+              <span className="paragraph-medium-semibold text-gray-950">Exibição hora</span>
+              <div className="flex flex-col lg:flex-row items-center gap-3">
+                <ComboboxField
+                  label="Fuso horário"
+                  placeholder="Selecione o fuso horário"
+                  searchPlaceholder="Buscar fuso horário..."
+                  containerClassName="w-full"
+                  options={timezones}
+                  value={watch('timezone')}
+                  onChange={(value) => setValue('timezone', value, { shouldDirty: true })}
+                  icon={!canEditPreferences ? <IconLock className="size-4 text-gray-400" /> : undefined}
+                  disabled={!canEditPreferences}
+                />
+                <SelectField
+                  label="Formato hora"
+                  placeholder="Selecione o formato"
+                  className="h-10!"
+                  containerClassName="w-full"
+                  options={TIME_FORMAT_OPTIONS}
+                  value={watch('timeFormat')}
+                  onChange={(value) =>
+                    setValue('timeFormat', value as string, { shouldDirty: true })
+                  }
+                  icon={<IconLock className="size-4 text-gray-400" />}
+                  disabled
+                />
+              </div>
+            </div>
+
+          </div>
+        </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"
+            disabled={isSaving}
+            onClick={() => {
+              reset();
+              onClose();
+            }}
+          >
+            Cancelar
+          </Button>
+          <Button className="h-10!" type="submit" disabled={isSaving}>
+            {isSaving ? 'Salvando...' : 'Salvar alterações'}
+          </Button>
+        </div>
+      </form>
+
+      <ConfirmGlobalPreferencesModal
+        open={confirmGlobalOpen}
+        onConfirm={handleConfirmGlobal}
+        onCancel={handleCancelGlobal}
+      />
+    </>
+  );
+}

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

@@ -1,46 +1,46 @@
-'use client';
-
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { Button } from '../../ui/buttons/Button';
-import { useAuth } from '../../../providers/auth.provider';
-import { AccountSectionType } from '../../../enums/AccountSectionType';
-
-interface SecuritySectionProps {
-  setActiveSection: (section: AccountSectionType) => void;
-  onClose: () => void;
-  onDeleteAccount?: () => void;
-}
-
-export function SecuritySection({
-  onClose,
-  onDeleteAccount,
-}: SecuritySectionProps) {
-  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="flex flex-col items-center lg:items-start gap-4">
-        <div className="size-10 rounded-lg bg-red-50 flex items-center justify-center">
-          <IconAlertTriangle size={20} className="text-red-500" />
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <span className="paragraph-medium-semibold text-gray-950">Excluir conta</span>
-          <span className="paragraph-small-regular text-gray-600">
-            Esta ação é permanente e não pode ser desfeita. Todos os seus dados, projetos e configurações serão removidos definitivamente.
-          </span>
-        </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={onDeleteAccount}
-          >
-            Excluir minha conta
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { Button } from '../../ui/buttons/Button';
+import { useAuth } from '../../../providers/auth.provider';
+import { AccountSectionType } from '../../../enums/AccountSectionType';
+
+interface SecuritySectionProps {
+  setActiveSection: (section: AccountSectionType) => void;
+  onClose: () => void;
+  onDeleteAccount?: () => void;
+}
+
+export function SecuritySection({
+  onClose,
+  onDeleteAccount,
+}: SecuritySectionProps) {
+  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="flex flex-col items-center lg:items-start gap-4">
+        <div className="size-10 rounded-lg bg-red-50 flex items-center justify-center">
+          <IconAlertTriangle size={20} className="text-red-500" />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <span className="paragraph-medium-semibold text-gray-950">Excluir conta</span>
+          <span className="paragraph-small-regular text-gray-600">
+            Esta ação é permanente e não pode ser desfeita. Todos os seus dados, projetos e configurações serão removidos definitivamente.
+          </span>
+        </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={onDeleteAccount}
+          >
+            Excluir minha conta
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}