@greatapps/common 1.1.700 → 1.1.701

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

@@ -1,278 +1,278 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslations, useLocale } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-import { IconLock } from '@tabler/icons-react';
-import { cn } from '../../../infra/utils/clsx';
-import type { Locale } from '../../../i18n/config';
-import { setLocaleCookie } from '../../../utils/intl/locale-cookie';
-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 { useWhitelabel } from '../../../providers/whitelabel.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';
-import { getCurrencyForGateway } from '../../../utils/format/currency';
-
-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) {
-  // Padrão raiz: um único `translate` chamado pela chave inteira (`common.<modulo>.<chave>`).
-  const translate = useTranslations();
-  // Exceção: chave dinâmica (option.value) numa lista → namespace escopado.
-  const translateLanguage = useTranslations('common.languages');
-  const currentLocale = useLocale();
-  const router = useRouter();
-  const { data: timezones = [] } = useTimezones();
-  const { data: currencies = [] } = useCurrencies();
-  const { user, account } = useAuth();
-  const { whitelabel } = useWhitelabel();
-  const languageOptions = LANGUAGE_OPTIONS.map((option) => ({
-    ...option,
-    label: translateLanguage(option.value as Locale),
-    displayValue: translateLanguage(option.value as Locale),
-  }));
-  const timeFormatOptions = TIME_FORMAT_OPTIONS.map((option) => ({
-    ...option,
-    label: translate(
-      `common.preferences.timeFormatOptions.${option.value === '24h' ? 'h24' : 'h12'}`,
-    ),
-  }));
-  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',
-      // A moeda é derivada do gateway da conta (read-only para o usuário) —
-      // espelha o que useCurrencyFormatter usa no display de preços.
-      currency: getCurrencyForGateway(account.gateway).toUpperCase(),
-      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((toastId) => (
-        <Toast variant="success" message={translate('common.preferences.savedSuccess')} toastId={toastId} />
-      ));
-      onClose();
-      if (data.language !== currentLocale) {
-        setLocaleCookie(data.language, whitelabel?.domain);
-        router.refresh();
-      }
-    } catch (error) {
-      toast.custom((toastId) => (
-        <Toast
-          variant="error"
-          message={error instanceof Error ? error.message : translate('common.preferences.saveError')}
-          toastId={toastId}
-        />
-      ));
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const onSubmit = (data: PreferencesFormValues) => {
-    const accountFields: UpdateAccountRequest = {
-      ...(isOwner && dirtyFields.companyName && { name: data.companyName }),
-      // currency é read-only (derivada do gateway) — não enviada no update.
-      ...(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">{translate('common.preferences.title')}</span>
-          <div className="flex flex-col gap-8">
-            <div className="flex flex-col lg:flex-row items-center gap-3">
-              <FormField
-                label={translate('common.preferences.companyName')}
-                placeholder={translate('common.preferences.companyNamePlaceholder')}
-                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={translate('common.preferences.language')}
-                placeholder={translate('common.preferences.languagePlaceholder')}
-                searchPlaceholder={translate('common.preferences.languageSearch')}
-                containerClassName="w-full"
-                options={languageOptions}
-                value={watch('language')}
-                onChange={(value) => setValue('language', value, { shouldDirty: true })}
-              />
-              <ComboboxField
-                label={translate('common.preferences.currency')}
-                placeholder={translate('common.preferences.currencyPlaceholder')}
-                searchPlaceholder={translate('common.preferences.currencySearch')}
-                containerClassName="w-full"
-                options={currencies}
-                value={watch('currency')}
-                onChange={() => undefined}
-                icon={<IconLock className="size-4 text-gray-400" />}
-                disabled
-              />
-            </div>
-
-            <Separator />
-
-            <div className="flex flex-col gap-4">
-              <span className="paragraph-medium-semibold text-gray-950">{translate('common.preferences.timeDisplay')}</span>
-              <div className="flex flex-col lg:flex-row items-center gap-3">
-                <ComboboxField
-                  label={translate('common.preferences.timezone')}
-                  placeholder={translate('common.preferences.timezonePlaceholder')}
-                  searchPlaceholder={translate('common.preferences.timezoneSearch')}
-                  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={translate('common.preferences.timeFormat')}
-                  placeholder={translate('common.preferences.timeFormatPlaceholder')}
-                  className="h-10!"
-                  containerClassName="w-full"
-                  options={timeFormatOptions}
-                  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();
-            }}
-          >
-            {translate('common.actions.cancel')}
-          </Button>
-          <Button className="h-10!" type="submit" disabled={isSaving}>
-            {isSaving ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
-          </Button>
-        </div>
-      </form>
-
-      <ConfirmGlobalPreferencesModal
-        open={confirmGlobalOpen}
-        onConfirm={handleConfirmGlobal}
-        onCancel={handleCancelGlobal}
-      />
-    </>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslations, useLocale } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { IconLock } from '@tabler/icons-react';
+import { cn } from '../../../infra/utils/clsx';
+import type { Locale } from '../../../i18n/config';
+import { setLocaleCookie } from '../../../utils/intl/locale-cookie';
+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 { useWhitelabel } from '../../../providers/whitelabel.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';
+import { getCurrencyForGateway } from '../../../utils/format/currency';
+
+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) {
+  // Padrão raiz: um único `translate` chamado pela chave inteira (`common.<modulo>.<chave>`).
+  const translate = useTranslations();
+  // Exceção: chave dinâmica (option.value) numa lista → namespace escopado.
+  const translateLanguage = useTranslations('common.languages');
+  const currentLocale = useLocale();
+  const router = useRouter();
+  const { data: timezones = [] } = useTimezones();
+  const { data: currencies = [] } = useCurrencies();
+  const { user, account } = useAuth();
+  const { whitelabel } = useWhitelabel();
+  const languageOptions = LANGUAGE_OPTIONS.map((option) => ({
+    ...option,
+    label: translateLanguage(option.value as Locale),
+    displayValue: translateLanguage(option.value as Locale),
+  }));
+  const timeFormatOptions = TIME_FORMAT_OPTIONS.map((option) => ({
+    ...option,
+    label: translate(
+      `common.preferences.timeFormatOptions.${option.value === '24h' ? 'h24' : 'h12'}`,
+    ),
+  }));
+  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',
+      // A moeda é derivada do gateway da conta (read-only para o usuário) —
+      // espelha o que useCurrencyFormatter usa no display de preços.
+      currency: getCurrencyForGateway(account.gateway).toUpperCase(),
+      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((toastId) => (
+        <Toast variant="success" message={translate('common.preferences.savedSuccess')} toastId={toastId} />
+      ));
+      onClose();
+      if (data.language !== currentLocale) {
+        setLocaleCookie(data.language, whitelabel?.domain);
+        router.refresh();
+      }
+    } catch (error) {
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={error instanceof Error ? error.message : translate('common.preferences.saveError')}
+          toastId={toastId}
+        />
+      ));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const onSubmit = (data: PreferencesFormValues) => {
+    const accountFields: UpdateAccountRequest = {
+      ...(isOwner && dirtyFields.companyName && { name: data.companyName }),
+      // currency é read-only (derivada do gateway) — não enviada no update.
+      ...(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">{translate('common.preferences.title')}</span>
+          <div className="flex flex-col gap-8">
+            <div className="flex flex-col lg:flex-row items-center gap-3">
+              <FormField
+                label={translate('common.preferences.companyName')}
+                placeholder={translate('common.preferences.companyNamePlaceholder')}
+                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={translate('common.preferences.language')}
+                placeholder={translate('common.preferences.languagePlaceholder')}
+                searchPlaceholder={translate('common.preferences.languageSearch')}
+                containerClassName="w-full"
+                options={languageOptions}
+                value={watch('language')}
+                onChange={(value) => setValue('language', value, { shouldDirty: true })}
+              />
+              <ComboboxField
+                label={translate('common.preferences.currency')}
+                placeholder={translate('common.preferences.currencyPlaceholder')}
+                searchPlaceholder={translate('common.preferences.currencySearch')}
+                containerClassName="w-full"
+                options={currencies}
+                value={watch('currency')}
+                onChange={() => undefined}
+                icon={<IconLock className="size-4 text-gray-400" />}
+                disabled
+              />
+            </div>
+
+            <Separator />
+
+            <div className="flex flex-col gap-4">
+              <span className="paragraph-medium-semibold text-gray-950">{translate('common.preferences.timeDisplay')}</span>
+              <div className="flex flex-col lg:flex-row items-center gap-3">
+                <ComboboxField
+                  label={translate('common.preferences.timezone')}
+                  placeholder={translate('common.preferences.timezonePlaceholder')}
+                  searchPlaceholder={translate('common.preferences.timezoneSearch')}
+                  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={translate('common.preferences.timeFormat')}
+                  placeholder={translate('common.preferences.timeFormatPlaceholder')}
+                  className="h-10!"
+                  containerClassName="w-full"
+                  options={timeFormatOptions}
+                  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();
+            }}
+          >
+            {translate('common.actions.cancel')}
+          </Button>
+          <Button className="h-10!" type="submit" disabled={isSaving}>
+            {isSaving ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
+          </Button>
+        </div>
+      </form>
+
+      <ConfirmGlobalPreferencesModal
+        open={confirmGlobalOpen}
+        onConfirm={handleConfirmGlobal}
+        onCancel={handleCancelGlobal}
+      />
+    </>
+  );
+}