@greatapps/common 1.1.24 → 1.1.25

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

@@ -0,0 +1,337 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import Image from 'next/image';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { Upload, Trash } from 'lucide-react';
+import { Button } from '../../ui/buttons/Button';
+import { Separator } from '../../ui/data-display/Separator';
+import { Toast } from '../../ui/feedback/Toast';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
+import { FormField } from '../../ui/form/FormField';
+import { SelectField } from '../../ui/form/SelectField';
+import PhoneInput from '../../ui/form/PhoneInput';
+import { useAuth } from '../../../providers/auth.provider';
+import { UserProfile } from '../../../modules/users/schema';
+import { myProfileSchema, type MyProfileFormData } from '../../../utils/validators/account';
+import {
+  useUpdateAccountUser,
+  useDeleteAccount,
+  useDeleteAccountUser,
+} from '../../../modules/accounts/hooks/useAccountManagement';
+import { GENDER_OPTIONS } from '../constants';
+import { ChangePhoneModal } from './ChangePhoneModal';
+import { ChangeEmailModal } from './ChangeEmailModal';
+
+interface MyProfileSectionProps {
+  onClose: () => void;
+  storageUrl?: string;
+}
+
+export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps) {
+  const { user, logout } = useAuth();
+  const updateAccountUser = useUpdateAccountUser();
+  const deleteAccount = useDeleteAccount();
+  const deleteAccountUser = useDeleteAccountUser();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [selectedPhoto, setSelectedPhoto] = useState<File | null>(null);
+  const [photoRemoved, setPhotoRemoved] = useState(false);
+  const [changePhoneOpen, setChangePhoneOpen] = useState(false);
+  const [changeEmailOpen, setChangeEmailOpen] = useState(false);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+
+  const isOwner = user?.profile === UserProfile.owner;
+  const isDeleting = deleteAccount.isPending || deleteAccountUser.isPending;
+
+  const form = useForm<MyProfileFormData>({
+    resolver: zodResolver(myProfileSchema),
+    mode: 'onChange',
+    defaultValues: {
+      name: user?.name ?? '',
+      gender: GENDER_OPTIONS.find((g) => g.apiValue === user?.gender)?.value ?? '',
+    },
+  });
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = form;
+
+  const baseStorageUrl = storageUrl ?? process.env.NEXT_PUBLIC_STORAGE_URL ?? '';
+
+  const avatarPreview = selectedPhoto
+    ? URL.createObjectURL(selectedPhoto)
+    : !photoRemoved && user?.photo
+      ? `${baseStorageUrl}/${user.photo}`
+      : null;
+
+  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] ?? null;
+    if (file) {
+      setSelectedPhoto(file);
+      setPhotoRemoved(false);
+    }
+  };
+
+  const handleRemovePhoto = () => {
+    setSelectedPhoto(null);
+    setPhotoRemoved(true);
+  };
+
+  const handleDelete = async () => {
+    const result = isOwner
+      ? await deleteAccount.mutateAsync()
+      : await deleteAccountUser.mutateAsync(user!.id);
+
+    if (!result.success) {
+      toast.custom((t) => (
+        <Toast
+          variant="error"
+          message={result.error ?? 'Erro ao excluir. Tente novamente.'}
+          toastId={t}
+        />
+      ));
+      setDeleteConfirmOpen(false);
+      return;
+    }
+
+    await logout();
+  };
+
+  const onSubmit = async (data: MyProfileFormData) => {
+    const result = await updateAccountUser.mutateAsync({
+      name: data.name,
+      gender: GENDER_OPTIONS.find((g) => g.value === data.gender)?.apiValue,
+      ...(selectedPhoto ? { photo: selectedPhoto } : {}),
+      ...(photoRemoved ? { photo: '' } : {}),
+    });
+
+    if (!result.success) {
+      toast.custom((t) => (
+        <Toast variant="error" message={result.error ?? 'Erro ao atualizar perfil'} toastId={t} />
+      ));
+      return;
+    }
+
+    form.reset(data);
+    setSelectedPhoto(null);
+    setPhotoRemoved(false);
+    toast.custom((t) => (
+      <Toast variant="success" message="Perfil atualizado com sucesso" toastId={t} />
+    ));
+    onClose();
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className="lg:h-full lg:flex lg:flex-col">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handlePhotoChange}
+        />
+        <div className="absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-20 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 hidden lg:block">
+            Meu perfil
+          </span>
+          <div className="flex flex-col gap-5">
+            <div className="flex items-center gap-4">
+              {avatarPreview ? (
+                <Image
+                  src={avatarPreview}
+                  alt="Foto do usuário"
+                  width={48}
+                  height={48}
+                  className="size-12 rounded-full object-cover cursor-pointer"
+                  onClick={() => fileInputRef.current?.click()}
+                />
+              ) : (
+                <div
+                  className="size-12 rounded-full bg-gray-50 border border-dashed border-gray-200 flex items-center justify-center cursor-pointer"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <Upload size={20} className="text-gray-400" />
+                </div>
+              )}
+              {avatarPreview ? (
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="secondary"
+                    className="w-fit h-8!"
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                  >
+                    Alterar foto
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="h-8!"
+                    onClick={handleRemovePhoto}
+                  >
+                    <Trash size={16} className="text-gray-500" />
+                  </Button>
+                </div>
+              ) : (
+                <Button
+                  variant="secondary"
+                  className="w-fit h-8!"
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  Alterar foto
+                </Button>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-4">
+                <FormField
+                  label="Nome completo"
+                  placeholder="Digite seu nome"
+                  error={!!errors.name}
+                  errorMessage={errors.name?.message}
+                  {...register('name')}
+                />
+                <SelectField
+                  label="Gênero"
+                  placeholder="Selecione seu gênero"
+                  options={GENDER_OPTIONS}
+                  value={watch('gender')}
+                  className="h-10!"
+                  onChange={(value) => setValue('gender', value as string)}
+                />
+                <div className="relative">
+                  <PhoneInput
+                    label="Telefone"
+                    value={user?.phone ?? ''}
+                    disabled
+                    classnameContainer="bg-gray-50 border-0!"
+                  />
+                  <button
+                    type="button"
+                    className="absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer"
+                    onClick={() => setChangePhoneOpen(true)}
+                  >
+                    Alterar
+                  </button>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="flex flex-col gap-4">
+                <span className="paragraph-medium-semibold text-gray-600">Dados de acesso</span>
+                <div className="relative">
+                  <FormField
+                    label="E-mail"
+                    value={user?.email ?? ''}
+                    disabled
+                    classnameContainer="bg-gray-50 border-0!"
+                  />
+                  <button
+                    type="button"
+                    className="absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer"
+                    onClick={() => setChangeEmailOpen(true)}
+                  >
+                    Alterar
+                  </button>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="flex flex-col gap-3">
+                <span className="paragraph-medium-semibold text-gray-600">Zona de risco</span>
+                <div className="flex items-center justify-between">
+                  <div className="flex flex-col gap-0.5">
+                    <span className="paragraph-small-medium text-gray-950">
+                      {isOwner ? 'Excluir conta' : 'Excluir usuário'}
+                    </span>
+                    <span className="paragraph-xsmall-medium text-gray-500">
+                      {isOwner
+                        ? 'Esta ação é irreversível e apagará todos os dados.'
+                        : 'Você será removido permanentemente desta conta.'}
+                    </span>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="h-8! text-red-600 hover:text-red-700 hover:bg-red-50 shrink-0"
+                    onClick={() => setDeleteConfirmOpen(true)}
+                  >
+                    Excluir
+                  </Button>
+                </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={isSubmitting}
+            onClick={() => {
+              form.reset();
+              setSelectedPhoto(null);
+              setPhotoRemoved(false);
+              onClose();
+            }}
+          >
+            Cancelar
+          </Button>
+          <Button className="h-10! cursor-pointer" type="submit" disabled={isSubmitting}>
+            {isSubmitting ? 'Salvando...' : 'Salvar alterações'}
+          </Button>
+        </div>
+      </form>
+
+      <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />
+      <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />
+
+      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+        <DialogContent className="max-w-sm! gap-5">
+          <DialogHeader>
+            <DialogTitle className="paragraph-large-semibold text-gray-950">
+              {isOwner ? 'Excluir conta' : 'Excluir usuário'}
+            </DialogTitle>
+          </DialogHeader>
+          <p className="paragraph-small-regular text-gray-600">
+            {isOwner
+              ? 'Tem certeza que deseja excluir sua conta? Todos os dados serão apagados permanentemente e essa ação não pode ser desfeita.'
+              : 'Tem certeza que deseja excluir seu usuário? Você perderá acesso a esta conta permanentemente.'}
+          </p>
+          <div className="flex items-center gap-3 justify-end">
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-10!"
+              disabled={isDeleting}
+              onClick={() => setDeleteConfirmOpen(false)}
+            >
+              Cancelar
+            </Button>
+            <Button
+              type="button"
+              className="h-10! bg-red-600 hover:bg-red-700 text-white border-0!"
+              disabled={isDeleting}
+              onClick={handleDelete}
+            >
+              {isDeleting ? 'Excluindo...' : 'Confirmar exclusão'}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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

@@ -0,0 +1,277 @@
+'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, type ComboboxOption } 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,
+  TIMEZONE_OPTIONS,
+  TIME_FORMAT_OPTIONS,
+  NOTIFICATION_TYPES,
+} from '../constants';
+
+interface PreferencesFormValues {
+  language: string;
+  currency: string;
+  timezone: string;
+  timeFormat: string;
+  receive_sms: boolean;
+  receive_email: boolean;
+}
+
+interface PreferencesSectionProps {
+  onClose: () => void;
+  currencies?: ComboboxOption[];
+}
+
+export function PreferencesSection({ onClose, currencies = [] }: PreferencesSectionProps) {
+  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();
+      const userResult = await updateAccountUser.mutateAsync({
+        language: apiLanguage,
+        receive_sms: data.receive_sms,
+        receive_email: data.receive_email,
+      });
+
+      if (!userResult.success) {
+        toast.custom((t) => (
+          <Toast variant="error" message={userResult.error ?? 'Erro ao salvar preferências'} toastId={t} />
+        ));
+        return;
+      }
+
+      if (canEditPreferences && Object.keys(accountFields).length > 0) {
+        const accountResult = await updateAccount.mutateAsync(accountFields);
+
+        if (!accountResult.success) {
+          toast.custom((t) => (
+            <Toast variant="error" message={accountResult.error ?? 'Erro ao salvar preferências da conta'} toastId={t} />
+          ));
+          return;
+        }
+      }
+
+      reset(data);
+      toast.custom((t) => (
+        <Toast variant="success" message="Preferências salvas com sucesso" toastId={t} />
+      ));
+      onClose();
+    } 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={TIMEZONE_OPTIONS}
+                  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}
+      />
+    </>
+  );
+}