@greatapps/common 1.1.790 → 1.1.792

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

@@ -1,32 +1,50 @@
 'use client';
 
-import { useState, useRef } from 'react';
+import { useEffect, useMemo, useState, useRef } from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
-import { IconUpload, IconTrash } from '@tabler/icons-react';
+import { IconBell, IconStack2, IconTrash, IconUpload, IconUser } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/data-display/Tabs';
 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 { useManagementPermissions } from '../../../modules/auth/hooks/useManagementPermissions';
 import { useUpdateAccountUser } from '../../../modules/accounts/hooks/useAccountManagement';
+import { cn } from '../../../infra/utils/clsx';
 import { GENDER_OPTIONS } from '../constants';
 import { ChangePhoneModal } from './ChangePhoneModal';
 import { ChangeEmailModal } from './ChangeEmailModal';
+import { NotificationsStep } from './team/steps/NotificationsStep';
+import { ProjectSelectionStep } from './team/steps/ProjectSelectionStep';
+import { FormSection } from './shared/FormSection';
+import { useAccountUnsavedChanges } from '../../../store/useAccountUnsavedChanges';
+import { buildUserFormDefaults, buildUserFormSchema, type UserFormData } from './team/user-form.schema';
+
+/** Espaçamento das seções do modal, aplicado dentro de cada aba. */
+const TAB_PADDING = 'px-4 py-5 lg:px-8 lg:py-6';
+
+/** Cada aba rola sozinha: a barra de abas fica fixa no topo e o rodapé de ações no fim. */
+const tabContentClasses = cn(
+  'flex-1 min-h-0 overflow-y-auto overscroll-contain pb-24 lg:pb-28',
+  '[scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent',
+  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300'
+);
+
+const tabTriggerClasses = 'cursor-pointer gap-2 px-3 py-4';
 
 interface MyProfileSectionProps {
-  onClose: () => void;
   storageUrl?: string;
 }
 
-export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps) {
+export function MyProfileSection({ storageUrl }: MyProfileSectionProps) {
   const translate = useTranslations();
   const genderOptions = GENDER_OPTIONS.map((option) => ({
     ...option,
@@ -35,21 +53,31 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
     ),
   }));
   const { user } = useAuth();
+  const { isOwnerOrAdmin } = useManagementPermissions();
   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 setDirtyForm = useAccountUnsavedChanges((state) => state.setDirtyForm);
+  const completeSave = useAccountUnsavedChanges((state) => state.completeSave);
+  const dismissUnsavedChanges = useAccountUnsavedChanges((state) => state.dismiss);
 
-  const form = useForm<MyProfileFormData>({
-    resolver: zodResolver(myProfileSchema),
+  // Mesmo formulário do sheet da equipe: as abas Projetos e Notificações são os passos de lá.
+  const profileFormSchema = useMemo(
+    () =>
+      buildUserFormSchema({
+        required: translate('common.validations.required'),
+        invalidEmail: translate('common.validations.invalidEmail'),
+      }),
+    [translate]
+  );
+
+  const form = useForm<UserFormData>({
+    resolver: zodResolver(profileFormSchema),
     mode: 'onChange',
-    defaultValues: {
-      name: user?.name ?? '',
-      last_name: user?.last_name ?? '',
-      gender: GENDER_OPTIONS.find((g) => g.apiValue === user?.gender)?.value ?? '',
-    },
+    defaultValues: buildUserFormDefaults(user ?? undefined),
   });
 
   const {
@@ -57,9 +85,15 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
     handleSubmit,
     watch,
     setValue,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isDirty },
   } = form;
 
+  // O usuário autenticado chega por query: repõe os valores quando ele carrega depois da montagem.
+  useEffect(() => {
+    if (user) form.reset(buildUserFormDefaults(user));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.id]);
+
   const baseStorageUrl = storageUrl ?? process.env.NEXT_PUBLIC_STORAGE_URL ?? '';
 
   const avatarPreview = selectedPhoto
@@ -81,12 +115,14 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
     setPhotoRemoved(true);
   };
 
-  const onSubmit = async (data: MyProfileFormData) => {
+  const onSubmit = async (data: UserFormData) => {
     try {
       await updateAccountUser.mutateAsync({
         name: data.name,
-        last_name: data.last_name,
-        gender: GENDER_OPTIONS.find((g) => g.value === data.gender)?.apiValue,
+        last_name: data.lastName,
+        gender: data.gender,
+        receive_sms: data.receiveSms,
+        receive_email: data.receiveEmail,
         ...(selectedPhoto ? { photo: selectedPhoto } : {}),
         ...(photoRemoved ? { photo: '' } : {}),
       });
@@ -101,7 +137,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
           toastId={toastId}
         />
       ));
-      onClose();
+      completeSave();
     } catch (error) {
       toast.custom((toastId) => (
         <Toast
@@ -110,124 +146,161 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
           toastId={toastId}
         />
       ));
+      dismissUnsavedChanges();
     }
   };
 
+  const hasChanges = isDirty || selectedPhoto !== null || photoRemoved;
+
+  const discardChanges = () => {
+    form.reset();
+    setSelectedPhoto(null);
+    setPhotoRemoved(false);
+  };
+
+  useEffect(() => {
+    if (!hasChanges) return;
+    setDirtyForm({ submit: handleSubmit(onSubmit), discard: discardChanges });
+    return () => setDirtyForm(null);
+  });
+
   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>
+      <FormProvider {...form}>
+        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col h-full">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={ACCEPTED_IMAGE_FORMATS_STRING}
+            className="hidden"
+            onChange={handlePhotoChange}
+          />
 
-            <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')}
-                  />
+          <Tabs defaultValue="information" className="flex flex-col flex-1 min-h-0 gap-0">
+            {/* `px-1 lg:px-5` + `px-3` do gatilho: o primeiro rótulo alinha com o conteúdo das abas. */}
+            <TabsList className="shrink-0 mt-1.5 px-1 lg:px-5 overflow-x-auto scrollbar-hide">
+              <TabsTrigger className={tabTriggerClasses} value="information">
+                <IconUser size={16} />
+                {translate('common.account.workspace.team.sheet.tabInformation')}
+              </TabsTrigger>
+              <TabsTrigger className={tabTriggerClasses} value="projects">
+                <IconStack2 size={16} />
+                {translate('common.account.workspace.team.sheet.tabProjects')}
+              </TabsTrigger>
+              <TabsTrigger className={tabTriggerClasses} value="notifications">
+                <IconBell size={16} />
+                {translate('common.account.workspace.team.sheet.tabNotifications')}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent
+              value="information"
+              className={cn(tabContentClasses, TAB_PADDING, 'flex flex-col gap-6 lg:gap-8')}
+            >
+              <FormSection
+                title={translate('common.account.profile.yourData')}
+                description={translate('common.account.profile.yourDataDescription')}
+              >
+                <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-1">
+                      <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="size-8! p-0" 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>
-                <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!"
+                <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.lastName}
+                      errorMessage={errors.lastName?.message}
+                      {...register('lastName')}
+                    />
+                  </div>
+                  <SelectField
+                    label={translate('common.account.profile.gender')}
+                    placeholder={translate('common.account.profile.genderPlaceholder')}
+                    options={genderOptions}
+                    value={GENDER_OPTIONS.find((option) => option.apiValue === watch('gender'))?.value ?? ''}
+                    className="h-10!"
+                    onChange={(value) =>
+                      setValue(
+                        'gender',
+                        GENDER_OPTIONS.find((option) => option.value === value)?.apiValue ?? 1,
+                        { shouldDirty: true }
+                      )
+                    }
                   />
-                  <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 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>
-              </div>
+              </FormSection>
 
               <Separator />
 
-              <div className="flex flex-col gap-4">
-                <span className="paragraph-medium-semibold text-gray-600">
-                  {translate('common.account.profile.accessData')}
-                </span>
+              <FormSection
+                title={translate('common.account.profile.accessData')}
+                description={translate('common.account.profile.accessDataDescription')}
+              >
                 <div className="relative">
-                  <div className='cursor-not-allowed'>
+                  <div className="cursor-not-allowed">
                     <FormField
                       label={translate('common.account.profile.email')}
                       value={user?.email ?? ''}
@@ -243,31 +316,26 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                     {translate('common.account.profile.change')}
                   </button>
                 </div>
-              </div>
-            </div>
-          </div>
-        </div>
+              </FormSection>
+            </TabsContent>
+
+            {/* Só proprietário e administrador mudam vínculos de projeto — e ambos já veem todos. */}
+            <TabsContent value="projects" className={tabContentClasses}>
+              <ProjectSelectionStep mode="edit" readOnly={!isOwnerOrAdmin} className={TAB_PADDING} />
+            </TabsContent>
 
-        <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>
+            <TabsContent value="notifications" className={tabContentClasses}>
+              <NotificationsStep className={TAB_PADDING} />
+            </TabsContent>
+          </Tabs>
+
+          <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-8 border-t border-gray-200 justify-end bg-white z-10">
+            <Button className="h-10! cursor-pointer" type="submit" disabled={!hasChanges || isSubmitting}>
+              {isSubmitting ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
+            </Button>
+          </div>
+        </form>
+      </FormProvider>
 
       <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />
       <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />