@greatapps/common 1.1.516 → 1.1.517

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

@@ -1,328 +1,328 @@
-'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 { IconUpload, IconTrash } from '@tabler/icons-react';
-import { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../modules/images/constants/image.constants';
-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 ?? '',
-      last_name: user?.last_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 () => {
-    try {
-      if (isOwner) {
-        await deleteAccount.mutateAsync();
-      } else {
-        await deleteAccountUser.mutateAsync(user!.id);
-      }
-      await logout();
-    } catch (error) {
-      toast.custom((t) => (
-        <Toast
-          variant="error"
-          message={error instanceof Error ? error.message : 'Erro ao excluir. Tente novamente.'}
-          toastId={t}
-        />
-      ));
-      setDeleteConfirmOpen(false);
-    }
-  };
-
-  const onSubmit = async (data: MyProfileFormData) => {
-    try {
-      await updateAccountUser.mutateAsync({
-        name: data.name,
-        last_name: data.last_name,
-        gender: GENDER_OPTIONS.find((g) => g.value === data.gender)?.apiValue,
-        ...(selectedPhoto ? { photo: selectedPhoto } : {}),
-        ...(photoRemoved ? { photo: '' } : {}),
-      });
-
-      form.reset(data);
-      setSelectedPhoto(null);
-      setPhotoRemoved(false);
-      toast.custom((t) => (
-        <Toast variant="success" message="Perfil atualizado com sucesso" toastId={t} />
-      ));
-      onClose();
-    } catch (error) {
-      toast.custom((t) => (
-        <Toast
-          variant="error"
-          message={error instanceof Error ? error.message : 'Erro ao atualizar perfil'}
-          toastId={t}
-        />
-      ));
-    }
-  };
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)} className="lg:h-full lg:flex lg:flex-col">
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept={ACCEPTED_IMAGE_FORMATS_STRING}
-          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()}
-                >
-                  <IconUpload 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}
-                  >
-                    <IconTrash 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">
-                <div className="flex gap-4">
-                  <FormField
-                    label="Nome"
-                    placeholder="Digite seu nome"
-                    error={!!errors.name}
-                    errorMessage={errors.name?.message}
-                    {...register('name')}
-                  />
-                  <FormField
-                    label="Sobrenome"
-                    placeholder="Digite seu sobrenome"
-                    error={!!errors.last_name}
-                    errorMessage={errors.last_name?.message}
-                    {...register('last_name')}
-                  />
-                </div>
-                <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">
-                  <div className='cursor-not-allowed'>
-                    <FormField
-                      label="E-mail"
-                      value={user?.email ?? ''}
-                      disabled
-                      classnameContainer="bg-gray-50 border-0!"
-                    />
-                  </div>
-                  <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>
-            </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>
-    </>
-  );
-}
+'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 { IconUpload, IconTrash } from '@tabler/icons-react';
+import { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../modules/images/constants/image.constants';
+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 ?? '',
+      last_name: user?.last_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 () => {
+    try {
+      if (isOwner) {
+        await deleteAccount.mutateAsync();
+      } else {
+        await deleteAccountUser.mutateAsync(user!.id);
+      }
+      await logout();
+    } catch (error) {
+      toast.custom((t) => (
+        <Toast
+          variant="error"
+          message={error instanceof Error ? error.message : 'Erro ao excluir. Tente novamente.'}
+          toastId={t}
+        />
+      ));
+      setDeleteConfirmOpen(false);
+    }
+  };
+
+  const onSubmit = async (data: MyProfileFormData) => {
+    try {
+      await updateAccountUser.mutateAsync({
+        name: data.name,
+        last_name: data.last_name,
+        gender: GENDER_OPTIONS.find((g) => g.value === data.gender)?.apiValue,
+        ...(selectedPhoto ? { photo: selectedPhoto } : {}),
+        ...(photoRemoved ? { photo: '' } : {}),
+      });
+
+      form.reset(data);
+      setSelectedPhoto(null);
+      setPhotoRemoved(false);
+      toast.custom((t) => (
+        <Toast variant="success" message="Perfil atualizado com sucesso" toastId={t} />
+      ));
+      onClose();
+    } catch (error) {
+      toast.custom((t) => (
+        <Toast
+          variant="error"
+          message={error instanceof Error ? error.message : 'Erro ao atualizar perfil'}
+          toastId={t}
+        />
+      ));
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className="lg:h-full lg:flex lg:flex-col">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={ACCEPTED_IMAGE_FORMATS_STRING}
+          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()}
+                >
+                  <IconUpload 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}
+                  >
+                    <IconTrash 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">
+                <div className="flex gap-4">
+                  <FormField
+                    label="Nome"
+                    placeholder="Digite seu nome"
+                    error={!!errors.name}
+                    errorMessage={errors.name?.message}
+                    {...register('name')}
+                  />
+                  <FormField
+                    label="Sobrenome"
+                    placeholder="Digite seu sobrenome"
+                    error={!!errors.last_name}
+                    errorMessage={errors.last_name?.message}
+                    {...register('last_name')}
+                  />
+                </div>
+                <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">
+                  <div className='cursor-not-allowed'>
+                    <FormField
+                      label="E-mail"
+                      value={user?.email ?? ''}
+                      disabled
+                      classnameContainer="bg-gray-50 border-0!"
+                    />
+                  </div>
+                  <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>
+            </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>
+    </>
+  );
+}