@greatapps/common 1.1.218 → 1.1.221

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

@@ -1,273 +1,273 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { Lock, Mail, MessageCircle } from 'lucide-react';
-import { Button } from '../../ui/buttons/Button';
-import { Separator } from '../../ui/data-display/Separator';
-import { Toast } from '../../ui/feedback/Toast';
-import { ComboboxField } from '../../ui/form/ComboboxField';
-import { SelectField } from '../../ui/form/SelectField';
-import SwitchOptionFieldWithIcon from '../../ui/form/SwitchOptionFieldWithIcon';
-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,
-  NOTIFICATION_TYPES,
-} from '../constants';
-import { useTimezones } from '../../../modules/accounts/hooks/useTimezones';
-import { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';
-
-interface PreferencesFormValues {
-  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 canEditPreferences =
-    user?.profile === UserProfile.owner || 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: {
-        language: '',
-        currency: '',
-        timezone: '',
-        timeFormat: '24h',
-        receive_sms: false,
-        receive_email: false,
-      },
-    });
-
-  useEffect(() => {
-    if (!user || !account) return;
-    reset({
-      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 receiveSms = watch('receive_sms');
-  const receiveEmail = watch('receive_email');
-
-  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 = {
-      ...(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="lg:h-full lg:flex lg:flex-col">
-        <div className="absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-36 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6">
-          <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">
-              <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 ? <Lock 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-600">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 ? <Lock 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={<Lock className="size-4 text-gray-400" />}
-                  disabled
-                />
-              </div>
-            </div>
-
-            <Separator />
-
-            <div className="flex flex-col gap-4">
-              <span className="paragraph-medium-semibold text-gray-600">Notificações</span>
-              <div className="flex flex-col gap-3">
-                <div className="flex flex-col border border-gray-200 rounded-lg">
-                  <SwitchOptionFieldWithIcon
-                    icon={MessageCircle}
-                    label="WhatsApp"
-                    description="Receber notificações importantes por WhatsApp"
-                    checked={receiveSms}
-                    onCheckedChange={(val: boolean) => setValue('receive_sms', val, { shouldDirty: true })}
-                  />
-                  <SwitchOptionFieldWithIcon
-                    icon={Mail}
-                    label="E-mail"
-                    description="Receber notificações e atualizações por email"
-                    checked={receiveEmail}
-                    onCheckedChange={(val: boolean) => setValue('receive_email', val, { shouldDirty: true })}
-                    hideBorderBottom={true}
-                  />
-                </div>
-                <div className="flex flex-col gap-4 p-5 pb-6 rounded-lg bg-gray-50">
-                  <span className="paragraph-small-semibold text-gray-950">
-                    Tipos de notificações incluem:
-                  </span>
-                  <div className="flex flex-col">
-                    {NOTIFICATION_TYPES.map((type) => (
-                      <div key={type} className="flex items-center gap-2">
-                        <div className="size-1 rounded-full bg-gray-600" />
-                        <span className="paragraph-small-medium text-gray-600">{type}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="fixed bottom-0 left-0 right-0 lg:static 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, IconMail, IconMessageCircle } from '@tabler/icons-react';
+import { Button } from '../../ui/buttons/Button';
+import { Separator } from '../../ui/data-display/Separator';
+import { Toast } from '../../ui/feedback/Toast';
+import { ComboboxField } from '../../ui/form/ComboboxField';
+import { SelectField } from '../../ui/form/SelectField';
+import SwitchOptionFieldWithIcon from '../../ui/form/SwitchOptionFieldWithIcon';
+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,
+  NOTIFICATION_TYPES,
+} from '../constants';
+import { useTimezones } from '../../../modules/accounts/hooks/useTimezones';
+import { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';
+
+interface PreferencesFormValues {
+  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 canEditPreferences =
+    user?.profile === UserProfile.owner || 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: {
+        language: '',
+        currency: '',
+        timezone: '',
+        timeFormat: '24h',
+        receive_sms: false,
+        receive_email: false,
+      },
+    });
+
+  useEffect(() => {
+    if (!user || !account) return;
+    reset({
+      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 receiveSms = watch('receive_sms');
+  const receiveEmail = watch('receive_email');
+
+  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 = {
+      ...(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="lg:h-full lg:flex lg:flex-col">
+        <div className="absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-36 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6">
+          <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">
+              <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-600">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>
+
+            <Separator />
+
+            <div className="flex flex-col gap-4">
+              <span className="paragraph-medium-semibold text-gray-600">Notificações</span>
+              <div className="flex flex-col gap-3">
+                <div className="flex flex-col border border-gray-200 rounded-lg">
+                  <SwitchOptionFieldWithIcon
+                    icon={IconMessageCircle}
+                    label="WhatsApp"
+                    description="Receber notificações importantes por WhatsApp"
+                    checked={receiveSms}
+                    onCheckedChange={(val: boolean) => setValue('receive_sms', val, { shouldDirty: true })}
+                  />
+                  <SwitchOptionFieldWithIcon
+                    icon={IconMail}
+                    label="E-mail"
+                    description="Receber notificações e atualizações por email"
+                    checked={receiveEmail}
+                    onCheckedChange={(val: boolean) => setValue('receive_email', val, { shouldDirty: true })}
+                    hideBorderBottom={true}
+                  />
+                </div>
+                <div className="flex flex-col gap-4 p-5 pb-6 rounded-lg bg-gray-50">
+                  <span className="paragraph-small-semibold text-gray-950">
+                    Tipos de notificações incluem:
+                  </span>
+                  <div className="flex flex-col">
+                    {NOTIFICATION_TYPES.map((type) => (
+                      <div key={type} className="flex items-center gap-2">
+                        <div className="size-1 rounded-full bg-gray-600" />
+                        <span className="paragraph-small-medium text-gray-600">{type}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="fixed bottom-0 left-0 right-0 lg:static 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}
+      />
+    </>
+  );
+}