@greatapps/common 1.1.791 → 1.1.793

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/hooks/useAccountHubActions.ts

@@ -2,9 +2,11 @@
 
 import { AccountHubFlow } from '../../../enums/AccountHubFlow';
 import { WorkspaceSectionType } from '../../../enums/WorkspaceSectionType';
+import { useTranslations } from 'next-intl';
 import { useCouponByCode } from '../../../modules/coupons/hooks/use-coupon-by-code.hook';
 import { isAccountSectionType } from '../../../modules/accounts/utils/is-account-section';
-import type { AccountHubLink } from '../../../modules/accounts/types/account-hub-link.type';
+import type { AccountHubLink, AccountHubPurchase } from '../../../modules/accounts/types/account-hub-link.type';
+import { getBillingPeriodSuffix } from '../../../modules/subscriptions/utils/periodicity';
 import { useExternalContracting } from '../../../providers/whitelabel.provider';
 import { useAccountModals, type MyAccountSection } from '../../../store/useAccountModals';
 import { useProjectFlows } from '../../../store/useProjectFlows';
@@ -19,7 +21,9 @@ export default function useAccountHubActions() {
   const requestOverdueReceipt = useSubscriptionFlows((state) => state.requestOverdueReceipt);
   const openCreateProjectFlow = useProjectFlows((state) => state.openCreateProject);
   const openAddUserFlow = useTeamFlows((state) => state.openAddUser);
+  const openPaymentConfirmationFlow = useSubscriptionFlows((state) => state.openPaymentConfirmation);
   const { redirectToExternal } = useExternalContracting();
+  const translate = useTranslations();
   const { mutate: findCouponByCode } = useCouponByCode();
 
   const openSection = (section: MyAccountSection) => {
@@ -72,6 +76,16 @@ export default function useAccountHubActions() {
     openAddUserFlow();
   };
 
+  const openPaymentConfirmation = (purchase: AccountHubPurchase) => {
+    openWorkspace(WorkspaceSectionType.SUBSCRIPTION);
+    openPaymentConfirmationFlow({
+      planName: purchase.planName,
+      total: purchase.total,
+      periodLabel: getBillingPeriodSuffix(purchase.billingPeriod, translate),
+      immediateChargeTotal: purchase.immediateChargeTotal,
+    });
+  };
+
   const openLink = (link: AccountHubLink) => {
     if (link.flow === AccountHubFlow.PLANS) return openPlansCatalog(link.couponCode);
     if (link.flow === AccountHubFlow.ADDONS) return openAddons();
@@ -79,6 +93,7 @@ export default function useAccountHubActions() {
     if (link.flow === AccountHubFlow.RECEIPT) return openOverdueReceipt();
     if (link.flow === AccountHubFlow.CREATE_PROJECT) return openCreateProject();
     if (link.flow === AccountHubFlow.ADD_USER) return openAddUser();
+    if (link.flow === AccountHubFlow.CONFIRMATION && link.purchase) return openPaymentConfirmation(link.purchase);
     openSection(link.section);
   };
 
@@ -90,6 +105,7 @@ export default function useAccountHubActions() {
     openOverdueReceipt,
     openCreateProject,
     openAddUser,
+    openPaymentConfirmation,
     openLink,
   };
 }

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/components/account/sections/subscription/PaymentConfirmationDialog.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { IconCircleCheckFilled, IconInfoCircle } from '@tabler/icons-react';
+import { IconInfoCircle } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { Dialog, DialogContent, DialogTitle } from '../../../ui/overlay/Dialog';
+import { SuccessConfettiIcon } from '../../../ui/data-display/SuccessConfettiIcon';
 import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
 import { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';
 import { cn } from '../../../../infra/utils/clsx';
@@ -27,7 +28,7 @@ export function PaymentConfirmationDialog() {
   return (
     <Dialog open={!!confirmation} onOpenChange={(nextOpen) => !nextOpen && close()}>
       <DialogContent className="flex flex-col p-4 lg:p-6 gap-4 items-center max-w-[calc(100%-32px)]! h-auto! rounded-lg border top-[50%]! left-[50%]! right-auto! bottom-auto! translate-x-[-50%]! translate-y-[-50%]! lg:max-w-[386px]!">
-        <IconCircleCheckFilled size={56} className="text-green-500" />
+        <SuccessConfettiIcon />
 
         <div className="flex flex-col gap-2 text-center">
           <DialogTitle className="paragraph-medium-semibold text-zinc-950">

package/src/components/ui/data-display/SuccessConfettiIcon.tsx

@@ -0,0 +1,33 @@
+export function SuccessConfettiIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="149"
+      height="83"
+      viewBox="0 0 149 83"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden
+    >
+      <path opacity="0.4" d="M18.6348 28.4102C18.6348 30.574 19.9096 30.8716 21.7838 31.1393" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M109.117 41.4266C110.106 41.3745 110.639 40.9023 110.797 39.957" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M64.6035 75.1963C62.2234 77.2378 61.7986 79.4524 63.2302 82.1283" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M108.953 6.33984C106.531 6.40444 105.075 7.59006 104.965 10.072C104.898 11.5735 105.114 12.692 103.285 13.0577" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M131.021 51.2682C130.631 53.6598 129.26 54.9429 126.786 54.7178C125.289 54.5817 124.21 54.217 123.601 55.9798" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M34.1753 59.0104C33.2963 61.0245 32.8213 61.1372 30.7893 61.1213C29.7394 61.1131 28.0011 61.8028 27.5653 62.8448" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path d="M112.314 25.2715L113.514 24.7026" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path d="M51.492 49.2344C51.0065 49.3838 50.6337 49.7823 50.2324 50.0741" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M77.8867 9.72656C77.4011 9.87596 77.3223 10.0019 77.3223 10.0019" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M10.7246 56.0059C10.239 56.1553 10.1602 56.2812 10.1602 56.2812" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M28.3302 80.1108C28.6726 79.7356 28.6766 79.587 28.6766 79.587" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M128.043 49.0421C127.77 48.6138 127.627 48.5713 127.627 48.5713" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M135.461 29.4915C134.972 29.6314 134.891 29.7558 134.891 29.7558" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.4" d="M52.3396 22.1222C52.0664 21.6939 51.924 21.6514 51.924 21.6514" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path d="M45.9383 40.1115L45.1508 39.1744" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path opacity="0.8" d="M97.7421 69.0733C97.1523 69.9712 97.989 71.6124 98.5913 72.3132C99.7005 73.6036 100.945 73.8145 102.199 73.9149C103.234 73.9977 105.21 73.5621 105.476 72.3174C105.948 71.1367 104.935 69.8432 103.934 70.3872C102.571 71.1277 103.112 72.7192 103.73 73.7787C104.604 75.2776 105.879 76.6545 107.249 77.7108C108.333 78.5474 109.732 79.029 110.308 79.0142" stroke="#12B76A" strokeWidth="1.41098" strokeLinecap="round"/>
+      <path d="M55.1022 11.4613C55.7297 11.187 55.8499 9.89737 55.7699 9.24592C55.6225 8.04626 55.0286 7.4129 54.3908 6.83895C53.8646 6.36537 52.6539 5.803 52.0797 6.41026C51.4175 6.89618 51.5122 8.05793 52.2377 8.15673C53.2253 8.2912 53.4868 7.15184 53.5227 6.28731C53.5734 5.06421 53.367 3.74644 52.9989 2.5746C52.7073 1.64647 52.1242 0.793399 51.8104 0.565035" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M58.1139 44.0572L60.4163 47.0706L60.9134 50.8219C61.1889 52.9028 62.8247 54.5405 64.9056 54.818L68.6666 55.3208L71.678 57.6214C73.3446 58.8949 75.6548 58.8949 77.3214 57.6214L80.3348 55.3189H80.3309L84.0842 54.8218C86.1651 54.5463 87.8028 52.9105 88.0802 50.8297L88.5812 47.0687C88.5812 47.0706 89.7449 45.5466 90.8836 44.0572C92.1572 42.3906 92.1553 40.0805 90.8836 38.4138L88.585 35.3985L88.0879 31.6472C87.8124 29.5663 86.1766 27.9286 84.0958 27.6512L80.3329 27.1502L77.3214 24.8497C75.6548 23.5761 73.3446 23.5761 71.678 24.8497L68.6646 27.1502H68.6685L64.9152 27.6492C62.8344 27.9248 61.1966 29.5605 60.9192 31.6414L60.4163 35.4024C60.4163 35.4004 59.2526 36.9245 58.1139 38.4138C56.8422 40.0785 56.8422 42.3906 58.1139 44.0572V44.0572Z" stroke="#12B76A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M79.9009 38.541L73.1554 45.2865L69.1035 41.2384" stroke="#12B76A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/enums/AccountHubFlow.ts

@@ -5,4 +5,5 @@ export enum AccountHubFlow {
   RECEIPT = 'receipt',
   CREATE_PROJECT = 'create-project',
   ADD_USER = 'add-user',
+  CONFIRMATION = 'confirmation',
 }

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/index.ts

@@ -659,9 +659,13 @@ export {
   ACCOUNT_HUB_SECTION_PARAM,
   ACCOUNT_HUB_FLOW_PARAM,
   ACCOUNT_HUB_COUPON_PARAM,
+  ACCOUNT_HUB_PLAN_PARAM,
+  ACCOUNT_HUB_TOTAL_PARAM,
+  ACCOUNT_HUB_PERIOD_PARAM,
+  ACCOUNT_HUB_CHARGE_PARAM,
 } from "./modules/accounts/constants/account-hub-link.constants";
 export { LEGACY_ACCOUNT_ROUTES } from "./modules/accounts/constants/legacy-account-routes.constants";
-export type { AccountHubLink, LegacyAccountRouteTarget } from "./modules/accounts/types/account-hub-link.type";
+export type { AccountHubLink, AccountHubPurchase, LegacyAccountRouteTarget } from "./modules/accounts/types/account-hub-link.type";
 export { parseAccountHubLink } from "./modules/accounts/utils/parse-account-hub-link";
 export { buildAccountHubUrl } from "./modules/accounts/utils/build-account-hub-url";
 export { mapLegacyAccountRoute } from "./modules/accounts/utils/map-legacy-account-route";

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/modules/accounts/constants/account-hub-link.constants.ts

@@ -1,3 +1,7 @@
 export const ACCOUNT_HUB_SECTION_PARAM = 'account';
 export const ACCOUNT_HUB_FLOW_PARAM = 'flow';
 export const ACCOUNT_HUB_COUPON_PARAM = 'coupon';
+export const ACCOUNT_HUB_PLAN_PARAM = 'plan';
+export const ACCOUNT_HUB_TOTAL_PARAM = 'total';
+export const ACCOUNT_HUB_PERIOD_PARAM = 'period';
+export const ACCOUNT_HUB_CHARGE_PARAM = 'charge';

package/src/modules/accounts/types/account-hub-link.type.ts

@@ -1,10 +1,19 @@
 import type { AccountHubFlow } from '../../../enums/AccountHubFlow';
+import type { BillingPeriod } from '../../subscriptions/types/billing-period.type';
 import type { MyAccountSection } from '../../../store/useAccountModals';
 
+export interface AccountHubPurchase {
+  planName: string;
+  total: number;
+  billingPeriod: BillingPeriod;
+  immediateChargeTotal: number | null;
+}
+
 export interface AccountHubLink {
   section: MyAccountSection;
   flow?: AccountHubFlow;
   couponCode?: string;
+  purchase?: AccountHubPurchase;
 }
 
 export interface LegacyAccountRouteTarget {

package/src/modules/accounts/utils/build-account-hub-url.ts

@@ -1,7 +1,11 @@
 import {
+  ACCOUNT_HUB_CHARGE_PARAM,
   ACCOUNT_HUB_COUPON_PARAM,
   ACCOUNT_HUB_FLOW_PARAM,
+  ACCOUNT_HUB_PERIOD_PARAM,
+  ACCOUNT_HUB_PLAN_PARAM,
   ACCOUNT_HUB_SECTION_PARAM,
+  ACCOUNT_HUB_TOTAL_PARAM,
 } from '../constants/account-hub-link.constants';
 import type { AccountHubLink } from '../types/account-hub-link.type';
 
@@ -10,5 +14,15 @@ export function buildAccountHubUrl(baseUrl: string, link: AccountHubLink, pathna
   url.searchParams.set(ACCOUNT_HUB_SECTION_PARAM, link.section);
   if (link.flow) url.searchParams.set(ACCOUNT_HUB_FLOW_PARAM, link.flow);
   if (link.couponCode) url.searchParams.set(ACCOUNT_HUB_COUPON_PARAM, link.couponCode);
+
+  if (link.purchase) {
+    url.searchParams.set(ACCOUNT_HUB_PLAN_PARAM, link.purchase.planName);
+    url.searchParams.set(ACCOUNT_HUB_TOTAL_PARAM, String(link.purchase.total));
+    url.searchParams.set(ACCOUNT_HUB_PERIOD_PARAM, link.purchase.billingPeriod);
+    if (link.purchase.immediateChargeTotal != null) {
+      url.searchParams.set(ACCOUNT_HUB_CHARGE_PARAM, String(link.purchase.immediateChargeTotal));
+    }
+  }
+
   return url.toString();
 }

package/src/modules/accounts/utils/is-billing-period.ts

@@ -0,0 +1,7 @@
+import type { BillingPeriod } from '../../subscriptions/types/billing-period.type';
+
+const BILLING_PERIODS: string[] = ['monthly', 'semiannual', 'annual'];
+
+export function isBillingPeriod(value: string): value is BillingPeriod {
+  return BILLING_PERIODS.includes(value);
+}

package/src/modules/accounts/utils/parse-account-hub-link.ts

@@ -1,13 +1,36 @@
 import { AccountHubFlow } from '../../../enums/AccountHubFlow';
 import {
+  ACCOUNT_HUB_CHARGE_PARAM,
   ACCOUNT_HUB_COUPON_PARAM,
   ACCOUNT_HUB_FLOW_PARAM,
+  ACCOUNT_HUB_PERIOD_PARAM,
+  ACCOUNT_HUB_PLAN_PARAM,
   ACCOUNT_HUB_SECTION_PARAM,
+  ACCOUNT_HUB_TOTAL_PARAM,
 } from '../constants/account-hub-link.constants';
-import type { AccountHubLink } from '../types/account-hub-link.type';
+import type { AccountHubLink, AccountHubPurchase } from '../types/account-hub-link.type';
 import { isAccountHubFlow } from './is-account-hub-flow';
+import { isBillingPeriod } from './is-billing-period';
 import { isMyAccountSection } from './is-my-account-section';
 
+function readPurchase(searchParams: URLSearchParams, flow?: AccountHubFlow): AccountHubPurchase | undefined {
+  if (flow !== AccountHubFlow.CONFIRMATION) return undefined;
+
+  const planName = searchParams.get(ACCOUNT_HUB_PLAN_PARAM);
+  const total = Number(searchParams.get(ACCOUNT_HUB_TOTAL_PARAM));
+  const period = searchParams.get(ACCOUNT_HUB_PERIOD_PARAM);
+  if (!planName || !Number.isFinite(total) || !period || !isBillingPeriod(period)) return undefined;
+
+  const charge = Number(searchParams.get(ACCOUNT_HUB_CHARGE_PARAM));
+
+  return {
+    planName,
+    total,
+    billingPeriod: period,
+    immediateChargeTotal: Number.isFinite(charge) && charge > 0 ? charge : null,
+  };
+}
+
 export function parseAccountHubLink(searchParams: URLSearchParams): AccountHubLink | null {
   const section = searchParams.get(ACCOUNT_HUB_SECTION_PARAM);
   if (!section || !isMyAccountSection(section)) return null;
@@ -17,5 +40,5 @@ export function parseAccountHubLink(searchParams: URLSearchParams): AccountHubLi
   const couponCode =
     resolvedFlow === AccountHubFlow.PLANS ? (searchParams.get(ACCOUNT_HUB_COUPON_PARAM) ?? undefined) : undefined;
 
-  return { section, flow: resolvedFlow, couponCode };
+  return { section, flow: resolvedFlow, couponCode, purchase: readPurchase(searchParams, resolvedFlow) };
 }

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 }),
+}));