@greatapps/common 1.1.698 → 1.1.700

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

@@ -1,276 +1,276 @@
-'use client';
-
-import { useState, useRef } from 'react';
-import Image from 'next/image';
-import { useTranslations } from 'next-intl';
-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 { FormField } from '../../ui/form/FormField';
-import { SelectField } from '../../ui/form/SelectField';
-import PhoneInput from '../../ui/form/PhoneInput';
-import { useAuth } from '../../../providers/auth.provider';
-import { myProfileSchema, type MyProfileFormData } from '../../../utils/validators/account';
-import { useUpdateAccountUser } 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 translate = useTranslations();
-  const genderOptions = GENDER_OPTIONS.map((option) => ({
-    ...option,
-    label: translate(
-      `common.account.profile.genderOptions.${option.value === 'masculino' ? 'male' : 'female'}`,
-    ),
-  }));
-  const { user } = useAuth();
-  const updateAccountUser = useUpdateAccountUser();
-  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 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 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((toastId) => (
-        <Toast
-          variant="success"
-          message={translate('common.account.profile.savedSuccess')}
-          toastId={toastId}
-        />
-      ));
-      onClose();
-    } catch (error) {
-      toast.custom((toastId) => (
-        <Toast
-          variant="error"
-          message={error instanceof Error ? error.message : translate('common.account.profile.saveError')}
-          toastId={toastId}
-        />
-      ));
-    }
-  };
-
-  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">
-            {translate('common.account.profile.title')}
-          </span>
-          <div className="flex flex-col gap-5">
-            <div className="flex items-center gap-4">
-              {avatarPreview ? (
-                <Image
-                  src={avatarPreview}
-                  alt={translate('common.account.profile.avatarAlt')}
-                  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()}
-                  >
-                    {translate('common.account.profile.changePhoto')}
-                  </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()}
-                >
-                  {translate('common.account.profile.changePhoto')}
-                </Button>
-              )}
-            </div>
-
-            <div className="flex flex-col gap-8">
-              <div className="flex flex-col gap-4">
-                <div className="flex gap-4">
-                  <FormField
-                    label={translate('common.account.profile.name')}
-                    placeholder={translate('common.account.profile.namePlaceholder')}
-                    error={!!errors.name}
-                    errorMessage={errors.name?.message}
-                    {...register('name')}
-                  />
-                  <FormField
-                    label={translate('common.account.profile.lastName')}
-                    placeholder={translate('common.account.profile.lastNamePlaceholder')}
-                    error={!!errors.last_name}
-                    errorMessage={errors.last_name?.message}
-                    {...register('last_name')}
-                  />
-                </div>
-                <SelectField
-                  label={translate('common.account.profile.gender')}
-                  placeholder={translate('common.account.profile.genderPlaceholder')}
-                  options={genderOptions}
-                  value={watch('gender')}
-                  className="h-10!"
-                  onChange={(value) => setValue('gender', value as string)}
-                />
-                <div className="relative">
-                  <PhoneInput
-                    label={translate('common.account.profile.phone')}
-                    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)}
-                  >
-                    {translate('common.account.profile.change')}
-                  </button>
-                </div>
-              </div>
-
-              <Separator />
-
-              <div className="flex flex-col gap-4">
-                <span className="paragraph-medium-semibold text-gray-600">
-                  {translate('common.account.profile.accessData')}
-                </span>
-                <div className="relative">
-                  <div className='cursor-not-allowed'>
-                    <FormField
-                      label={translate('common.account.profile.email')}
-                      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)}
-                  >
-                    {translate('common.account.profile.change')}
-                  </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();
-            }}
-          >
-            {translate('common.actions.cancel')}
-          </Button>
-          <Button className="h-10! cursor-pointer" type="submit" disabled={isSubmitting}>
-            {isSubmitting ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
-          </Button>
-        </div>
-      </form>
-
-      <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />
-      <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />
-    </>
-  );
-}
+'use client';
+
+import { useState, useRef } from 'react';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+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 { FormField } from '../../ui/form/FormField';
+import { SelectField } from '../../ui/form/SelectField';
+import PhoneInput from '../../ui/form/PhoneInput';
+import { useAuth } from '../../../providers/auth.provider';
+import { myProfileSchema, type MyProfileFormData } from '../../../utils/validators/account';
+import { useUpdateAccountUser } 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 translate = useTranslations();
+  const genderOptions = GENDER_OPTIONS.map((option) => ({
+    ...option,
+    label: translate(
+      `common.account.profile.genderOptions.${option.value === 'masculino' ? 'male' : 'female'}`,
+    ),
+  }));
+  const { user } = useAuth();
+  const updateAccountUser = useUpdateAccountUser();
+  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 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 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((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.profile.savedSuccess')}
+          toastId={toastId}
+        />
+      ));
+      onClose();
+    } catch (error) {
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={error instanceof Error ? error.message : translate('common.account.profile.saveError')}
+          toastId={toastId}
+        />
+      ));
+    }
+  };
+
+  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">
+            {translate('common.account.profile.title')}
+          </span>
+          <div className="flex flex-col gap-5">
+            <div className="flex items-center gap-4">
+              {avatarPreview ? (
+                <Image
+                  src={avatarPreview}
+                  alt={translate('common.account.profile.avatarAlt')}
+                  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()}
+                  >
+                    {translate('common.account.profile.changePhoto')}
+                  </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()}
+                >
+                  {translate('common.account.profile.changePhoto')}
+                </Button>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-4">
+                <div className="flex gap-4">
+                  <FormField
+                    label={translate('common.account.profile.name')}
+                    placeholder={translate('common.account.profile.namePlaceholder')}
+                    error={!!errors.name}
+                    errorMessage={errors.name?.message}
+                    {...register('name')}
+                  />
+                  <FormField
+                    label={translate('common.account.profile.lastName')}
+                    placeholder={translate('common.account.profile.lastNamePlaceholder')}
+                    error={!!errors.last_name}
+                    errorMessage={errors.last_name?.message}
+                    {...register('last_name')}
+                  />
+                </div>
+                <SelectField
+                  label={translate('common.account.profile.gender')}
+                  placeholder={translate('common.account.profile.genderPlaceholder')}
+                  options={genderOptions}
+                  value={watch('gender')}
+                  className="h-10!"
+                  onChange={(value) => setValue('gender', value as string)}
+                />
+                <div className="relative">
+                  <PhoneInput
+                    label={translate('common.account.profile.phone')}
+                    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)}
+                  >
+                    {translate('common.account.profile.change')}
+                  </button>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="flex flex-col gap-4">
+                <span className="paragraph-medium-semibold text-gray-600">
+                  {translate('common.account.profile.accessData')}
+                </span>
+                <div className="relative">
+                  <div className='cursor-not-allowed'>
+                    <FormField
+                      label={translate('common.account.profile.email')}
+                      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)}
+                  >
+                    {translate('common.account.profile.change')}
+                  </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();
+            }}
+          >
+            {translate('common.actions.cancel')}
+          </Button>
+          <Button className="h-10! cursor-pointer" type="submit" disabled={isSubmitting}>
+            {isSubmitting ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
+          </Button>
+        </div>
+      </form>
+
+      <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />
+      <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />
+    </>
+  );
+}