@greatapps/common 1.1.791 → 1.1.792

package/src/components/account/AccountUnsavedChangesDialog.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { Button } from '../ui/buttons/Button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Separator } from '../ui/data-display/Separator';
+import { useAccountUnsavedChanges } from '../../store/useAccountUnsavedChanges';
+
+export default function AccountUnsavedChangesDialog() {
+  const translate = useTranslations();
+  const { pendingAction, save, discard, dismiss } = useAccountUnsavedChanges();
+
+  return (
+    <Dialog open={pendingAction !== null} onOpenChange={(nextOpen) => !nextOpen && dismiss()}>
+      <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
+        <DialogHeader className="sr-only">
+          <DialogTitle>{translate('common.account.unsavedChanges.title')}</DialogTitle>
+          <DialogDescription>{translate('common.account.unsavedChanges.description')}</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 p-5">
+          <div className="flex items-center justify-center bg-gray-50 rounded-lg size-10">
+            <IconAlertTriangle size={24} className="text-gray-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <span className="paragraph-medium-semibold text-gray-950">
+              {translate('common.account.unsavedChanges.title')}
+            </span>
+            <span className="paragraph-small-regular text-gray-600">
+              {translate('common.account.unsavedChanges.description')}
+            </span>
+          </div>
+        </div>
+
+        <Separator className="w-full" />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button onClick={save} className="h-10!">
+            {translate('common.actions.save')}
+          </Button>
+          <Button variant="secondary" onClick={discard} className="h-10!">
+            {translate('common.account.unsavedChanges.discard')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/MyAccountModal.tsx

@@ -29,9 +29,11 @@ import { ProjectsSection } from './sections/ProjectsSection';
 import { TeamSection } from './sections/TeamSection';
 import { AffiliatesSection } from './sections/AffiliatesSection';
 import useMyAccountModal from './hooks/useMyAccountModal';
+import AccountUnsavedChangesDialog from './AccountUnsavedChangesDialog';
 import { AccountSectionType } from '../../enums/AccountSectionType';
 import { WorkspaceSectionType } from '../../enums/WorkspaceSectionType';
 import { useAccountModals, type MyAccountSection } from '../../store/useAccountModals';
+import { useAccountUnsavedChanges } from '../../store/useAccountUnsavedChanges';
 import { useAuth } from '../../providers/auth.provider';
 import { useManagementPermissions } from '../../modules/auth/hooks/useManagementPermissions';
 import { useCurrentSubscription } from '../../modules/subscriptions/hooks/use-current-subscription.hook';
@@ -55,6 +57,7 @@ export default function MyAccountModal() {
   const { isExternalContracting } = useExternalContracting();
   const { whitelabel } = useWhitelabel();
   const { data: { data: [subscription] = [] } = {} } = useCurrentSubscription();
+  const guardUnsavedChanges = useAccountUnsavedChanges((state) => state.guard);
 
   const open = activeModal === 'account';
 
@@ -82,14 +85,14 @@ export default function MyAccountModal() {
       icon: IconUser,
       label: translate('common.account.profile.title'),
       visible: true,
-      content: <MyProfileSection onClose={close} />,
+      content: <MyProfileSection />,
     },
     {
       value: AccountSectionType.PREFERENCES,
       icon: IconSettings2,
       label: translate('common.preferences.title'),
       visible: true,
-      content: <PreferencesSection onClose={close} />,
+      content: <PreferencesSection />,
     },
     {
       value: AccountSectionType.TOKEN,
@@ -178,38 +181,42 @@ export default function MyAccountModal() {
     ));
 
   return (
-    <AccountModalLayout
-      open={open}
-      onClose={close}
-      title={translate('common.account.workspace.title')}
-      sectionTitle={sectionTitle}
-      activeSection={activeSection ?? ''}
-      onSectionChange={setActiveSection}
-      isLoading={isProfileLoading}
-      navigation={
-        <>
-          {visibleWorkspaceSections.length > 0 && (
-            <AccountModalNavGroup label={translate('common.account.workspace.groups.workspace')}>
-              {renderNavItems(visibleWorkspaceSections)}
+    <>
+      <AccountModalLayout
+        open={open}
+        onClose={() => guardUnsavedChanges(close)}
+        title={translate('common.account.workspace.title')}
+        sectionTitle={sectionTitle}
+        activeSection={activeSection ?? ''}
+        onSectionChange={(section) => guardUnsavedChanges(() => setActiveSection(section))}
+        isLoading={isProfileLoading}
+        navigation={
+          <>
+            {visibleWorkspaceSections.length > 0 && (
+              <AccountModalNavGroup label={translate('common.account.workspace.groups.workspace')}>
+                {renderNavItems(visibleWorkspaceSections)}
+              </AccountModalNavGroup>
+            )}
+            <AccountModalNavGroup label={translate('common.account.workspace.groups.account')}>
+              {renderNavItems(visibleAccountSections)}
             </AccountModalNavGroup>
-          )}
-          <AccountModalNavGroup label={translate('common.account.workspace.groups.account')}>
-            {renderNavItems(visibleAccountSections)}
-          </AccountModalNavGroup>
-        </>
-      }
-    >
-      {visibleSections.map((section) => (
-        <AccountModalSection key={section.value} value={section.value}>
-          {section.content}
-        </AccountModalSection>
-      ))}
-
-      {changePasswordSection.map((section) => (
-        <AccountModalSection key={section.value} value={section.value}>
-          {section.content}
-        </AccountModalSection>
-      ))}
-    </AccountModalLayout>
+          </>
+        }
+      >
+        {visibleSections.map((section) => (
+          <AccountModalSection key={section.value} value={section.value}>
+            {section.content}
+          </AccountModalSection>
+        ))}
+
+        {changePasswordSection.map((section) => (
+          <AccountModalSection key={section.value} value={section.value}>
+            {section.content}
+          </AccountModalSection>
+        ))}
+      </AccountModalLayout>
+
+      <AccountUnsavedChangesDialog />
+    </>
   );
 }

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

@@ -25,6 +25,7 @@ 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. */
@@ -40,11 +41,10 @@ const tabContentClasses = cn(
 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,
@@ -60,6 +60,9 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
   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);
 
   // Mesmo formulário do sheet da equipe: as abas Projetos e Notificações são os passos de lá.
   const profileFormSchema = useMemo(
@@ -82,7 +85,7 @@ 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.
@@ -134,7 +137,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
           toastId={toastId}
         />
       ));
-      onClose();
+      completeSave();
     } catch (error) {
       toast.custom((toastId) => (
         <Toast
@@ -143,9 +146,24 @@ 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 (
     <>
       <FormProvider {...form}>
@@ -311,22 +329,8 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
             </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-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}>
+          <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>

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

@@ -32,6 +32,7 @@ import {
 } from '../constants';
 import { useTimezones } from '../../../modules/accounts/hooks/useTimezones';
 import { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';
+import { useAccountUnsavedChanges } from '../../../store/useAccountUnsavedChanges';
 import { getCurrencyForGateway } from '../../../utils/format/currency';
 
 interface PreferencesFormValues {
@@ -44,11 +45,7 @@ interface PreferencesFormValues {
   receive_email: boolean;
 }
 
-interface PreferencesSectionProps {
-  onClose: () => void;
-}
-
-export function PreferencesSection({ onClose }: PreferencesSectionProps) {
+export function PreferencesSection() {
   // Padrão raiz: um único `translate` chamado pela chave inteira (`common.<modulo>.<chave>`).
   const translate = useTranslations();
   // Exceção: chave dinâmica (option.value) numa lista → namespace escopado.
@@ -80,8 +77,11 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
     accountFields: UpdateAccountRequest;
   } | null>(null);
   const [isSaving, setIsSaving] = useState(false);
+  const setDirtyForm = useAccountUnsavedChanges((state) => state.setDirtyForm);
+  const completeSave = useAccountUnsavedChanges((state) => state.completeSave);
+  const dismissUnsavedChanges = useAccountUnsavedChanges((state) => state.dismiss);
 
-  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } =
+  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields, isDirty } } =
     useForm<PreferencesFormValues>({
       defaultValues: {
         companyName: '',
@@ -129,7 +129,7 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
       toast.custom((toastId) => (
         <Toast variant="success" message={translate('common.preferences.savedSuccess')} toastId={toastId} />
       ));
-      onClose();
+      completeSave();
       if (data.language !== currentLocale) {
         setLocaleCookie(data.language, whitelabel?.domain);
         router.refresh();
@@ -142,6 +142,7 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
           toastId={toastId}
         />
       ));
+      dismissUnsavedChanges();
     } finally {
       setIsSaving(false);
     }
@@ -174,8 +175,15 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
   const handleCancelGlobal = () => {
     setConfirmGlobalOpen(false);
     setPendingSubmit(null);
+    dismissUnsavedChanges();
   };
 
+  useEffect(() => {
+    if (!isDirty) return;
+    setDirtyForm({ submit: handleSubmit(onSubmit), discard: () => reset() });
+    return () => setDirtyForm(null);
+  });
+
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col h-full">
@@ -254,20 +262,8 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
           </FormSection>
         </div>
 
-        <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-between bg-white z-10">
-          <Button
-            variant="secondary"
-            className="h-10!"
-            type="button"
-            disabled={isSaving}
-            onClick={() => {
-              reset();
-              onClose();
-            }}
-          >
-            {translate('common.actions.cancel')}
-          </Button>
-          <Button className="h-10!" type="submit" disabled={isSaving}>
+        <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!" type="submit" disabled={!isDirty || isSaving}>
             {isSaving ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
           </Button>
         </div>

package/src/i18n/messages/en-us.ts

@@ -59,6 +59,11 @@ const messages = {
   },
 
   account: {
+    unsavedChanges: {
+      title: 'Leave without saving?',
+      description: 'You have unsaved changes. Do you want to save before leaving?',
+      discard: 'Leave without saving',
+    },
     notificationTypes: {
       projectUpdates: 'Project updates',
       securityAlerts: 'Security alerts',

package/src/i18n/messages/es-es.ts

@@ -59,6 +59,11 @@ const messages = {
   },
 
   account: {
+    unsavedChanges: {
+      title: '¿Salir sin guardar?',
+      description: 'Tienes cambios sin guardar. ¿Deseas guardar antes de salir?',
+      discard: 'Salir sin guardar',
+    },
     notificationTypes: {
       projectUpdates: 'Actualizaciones de proyectos',
       securityAlerts: 'Alertas de seguridad',

package/src/i18n/messages/pt-br.ts

@@ -68,6 +68,11 @@ const messages = {
 
   // Conta — modais e seções. `<b>` = trecho em negrito (rich text); `{count}` = interpolação.
   account: {
+    unsavedChanges: {
+      title: 'Sair sem salvar?',
+      description: 'Você fez alterações que ainda não foram salvas. Deseja salvar antes de sair?',
+      discard: 'Sair sem salvar',
+    },
     notificationTypes: {
       projectUpdates: 'Atualizações de projetos',
       securityAlerts: 'Alertas de segurança',

package/src/middlewares/create-auth-middleware.ts

@@ -40,7 +40,7 @@ export function createAuthMiddleware(options?: CreateAuthMiddlewareOptions): Mid
         ? new URL('/login', accountsUrl)
         : new URL('/login', request.url);
 
-      if (pathname !== '/') {
+      if (pathname !== '/' || request.nextUrl.search) {
         // URL absoluta da página de origem — o login vive em outro domínio (accounts),
         // então só o pathname faria o redirect cair no host do accounts.
         const proto =

package/src/store/useAccountUnsavedChanges.ts

@@ -0,0 +1,52 @@
+'use client';
+
+import { create } from 'zustand';
+
+interface DirtyAccountForm {
+  submit: () => void;
+  discard: () => void;
+}
+
+interface AccountUnsavedChangesState {
+  dirtyForm: DirtyAccountForm | null;
+  pendingAction: (() => void) | null;
+
+  setDirtyForm: (form: DirtyAccountForm | null) => void;
+  guard: (action: () => void) => void;
+  save: () => void;
+  completeSave: () => void;
+  discard: () => void;
+  dismiss: () => void;
+}
+
+export const useAccountUnsavedChanges = create<AccountUnsavedChangesState>((set, get) => ({
+  dirtyForm: null,
+  pendingAction: null,
+
+  setDirtyForm: (dirtyForm) => set({ dirtyForm }),
+
+  guard: (action) => {
+    if (get().dirtyForm) {
+      set({ pendingAction: action });
+      return;
+    }
+    action();
+  },
+
+  save: () => get().dirtyForm?.submit(),
+
+  completeSave: () => {
+    const { pendingAction } = get();
+    set({ pendingAction: null });
+    pendingAction?.();
+  },
+
+  discard: () => {
+    const { dirtyForm, pendingAction } = get();
+    dirtyForm?.discard();
+    set({ dirtyForm: null, pendingAction: null });
+    pendingAction?.();
+  },
+
+  dismiss: () => set({ pendingAction: null }),
+}));