@greatapps/common 1.1.790 → 1.1.792

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

@@ -17,6 +17,7 @@ import { FormField } from '../../ui/form/FormField';
 import { ComboboxField } from '../../ui/form/ComboboxField';
 import { SelectField } from '../../ui/form/SelectField';
 import ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';
+import { FormSection } from './shared/FormSection';
 import { useAuth } from '../../../providers/auth.provider';
 import { useWhitelabel } from '../../../providers/whitelabel.provider';
 import { UserProfile } from '../../../modules/users/schema';
@@ -31,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 {
@@ -43,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.
@@ -79,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: '',
@@ -128,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();
@@ -141,6 +142,7 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
           toastId={toastId}
         />
       ));
+      dismissUnsavedChanges();
     } finally {
       setIsSaving(false);
     }
@@ -173,15 +175,24 @@ 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">
-        <div className="overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6 flex-1">
-          <span className="paragraph-medium-semibold text-gray-950">{translate('common.preferences.title')}</span>
-          <div className="flex flex-col gap-8">
-            <div className="flex flex-col lg:flex-row items-center gap-3">
+        <div className="overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 overscroll-contain px-4 py-5 pb-24 lg:px-8 lg:py-6 lg:pb-28 flex flex-col gap-6 lg:gap-8 flex-1">
+          <FormSection
+            title={translate('common.preferences.general')}
+            description={translate('common.preferences.generalDescription')}
+          >
+            <div className="flex flex-col gap-4">
               <FormField
                 label={translate('common.preferences.companyName')}
                 placeholder={translate('common.preferences.companyNamePlaceholder')}
@@ -190,80 +201,69 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
                 onChange={(e) => setValue('companyName', e.target.value, { shouldDirty: true })}
                 disabled={!isOwner}
               />
-            </div>
 
-            <div className="flex flex-col lg:flex-row items-center gap-3">
-              <ComboboxField
-                label={translate('common.preferences.language')}
-                placeholder={translate('common.preferences.languagePlaceholder')}
-                searchPlaceholder={translate('common.preferences.languageSearch')}
-                containerClassName="w-full"
-                options={languageOptions}
-                value={watch('language')}
-                onChange={(value) => setValue('language', value, { shouldDirty: true })}
-              />
-              <ComboboxField
-                label={translate('common.preferences.currency')}
-                placeholder={translate('common.preferences.currencyPlaceholder')}
-                searchPlaceholder={translate('common.preferences.currencySearch')}
-                containerClassName="w-full"
-                options={currencies}
-                value={watch('currency')}
-                onChange={() => undefined}
-                icon={<IconLock className="size-4 text-gray-400" />}
-                disabled
-              />
-            </div>
-
-            <Separator />
-
-            <div className="flex flex-col gap-4">
-              <span className="paragraph-medium-semibold text-gray-950">{translate('common.preferences.timeDisplay')}</span>
               <div className="flex flex-col lg:flex-row items-center gap-3">
                 <ComboboxField
-                  label={translate('common.preferences.timezone')}
-                  placeholder={translate('common.preferences.timezonePlaceholder')}
-                  searchPlaceholder={translate('common.preferences.timezoneSearch')}
+                  label={translate('common.preferences.language')}
+                  placeholder={translate('common.preferences.languagePlaceholder')}
+                  searchPlaceholder={translate('common.preferences.languageSearch')}
                   containerClassName="w-full"
-                  options={timezones}
-                  value={watch('timezone')}
-                  onChange={(value) => setValue('timezone', value, { shouldDirty: true })}
-                  icon={!canEditPreferences ? <IconLock className="size-4 text-gray-400" /> : undefined}
-                  disabled={!canEditPreferences}
+                  options={languageOptions}
+                  value={watch('language')}
+                  onChange={(value) => setValue('language', value, { shouldDirty: true })}
                 />
-                <SelectField
-                  label={translate('common.preferences.timeFormat')}
-                  placeholder={translate('common.preferences.timeFormatPlaceholder')}
-                  className="h-10!"
+                <ComboboxField
+                  label={translate('common.preferences.currency')}
+                  placeholder={translate('common.preferences.currencyPlaceholder')}
+                  searchPlaceholder={translate('common.preferences.currencySearch')}
                   containerClassName="w-full"
-                  options={timeFormatOptions}
-                  value={watch('timeFormat')}
-                  onChange={(value) =>
-                    setValue('timeFormat', value as string, { shouldDirty: true })
-                  }
+                  options={currencies}
+                  value={watch('currency')}
+                  onChange={() => undefined}
                   icon={<IconLock className="size-4 text-gray-400" />}
                   disabled
                 />
               </div>
             </div>
+          </FormSection>
 
-          </div>
-        </div>
+          <Separator />
 
-        <div className="fixed bottom-0 left-0 right-0 lg:absolute 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={isSaving}
-            onClick={() => {
-              reset();
-              onClose();
-            }}
+          <FormSection
+            title={translate('common.preferences.timeDisplay')}
+            description={translate('common.preferences.timeDisplayDescription')}
           >
-            {translate('common.actions.cancel')}
-          </Button>
-          <Button className="h-10!" type="submit" disabled={isSaving}>
+            <div className="flex flex-col lg:flex-row items-center gap-3">
+              <ComboboxField
+                label={translate('common.preferences.timezone')}
+                placeholder={translate('common.preferences.timezonePlaceholder')}
+                searchPlaceholder={translate('common.preferences.timezoneSearch')}
+                containerClassName="w-full"
+                options={timezones}
+                value={watch('timezone')}
+                onChange={(value) => setValue('timezone', value, { shouldDirty: true })}
+                icon={!canEditPreferences ? <IconLock className="size-4 text-gray-400" /> : undefined}
+                disabled={!canEditPreferences}
+              />
+              <SelectField
+                label={translate('common.preferences.timeFormat')}
+                placeholder={translate('common.preferences.timeFormatPlaceholder')}
+                className="h-10!"
+                containerClassName="w-full"
+                options={timeFormatOptions}
+                value={watch('timeFormat')}
+                onChange={(value) =>
+                  setValue('timeFormat', value as string, { shouldDirty: true })
+                }
+                icon={<IconLock className="size-4 text-gray-400" />}
+                disabled
+              />
+            </div>
+          </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-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/ProjectsSection.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import { IconPlus, IconSearch } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../ui/buttons/Button';
+import { Skeleton } from '../../ui/feedback/Skeleton';
+import { FormField } from '../../ui/form/FormField';
+import { useDebounce } from '../../../hooks/useDebounce';
+import { useManagementPermissions } from '../../../modules/auth/hooks/useManagementPermissions';
+import { useProjects } from '../../../modules/projects/hooks/list-projects.hook';
+import useProjectsActions from '../hooks/useProjectsActions';
+import { ListPagination } from './shared/ListPagination';
+import { SectionLoadError } from './shared/SectionLoadError';
+import { WorkspaceSection } from './shared/WorkspaceSection';
+import { ProjectCard, ProjectRow } from './projects/ProjectRow';
+import { ProjectFlows } from './projects/ProjectFlows';
+
+const PROJECTS_PAGE_SIZE = 10;
+
+function ProjectsSkeleton() {
+  return (
+    <div className="border border-zinc-200 rounded-lg bg-white divide-y divide-zinc-200 overflow-hidden">
+      {Array.from({ length: PROJECTS_PAGE_SIZE }).map((_, index) => (
+        <div key={index} className="flex items-center gap-4 px-5 py-4">
+          <Skeleton className="size-8 rounded-lg" />
+          <Skeleton className="h-4 w-48" />
+          <Skeleton className="hidden lg:block h-8 w-24 rounded-full ml-auto" />
+          <Skeleton className="hidden lg:block h-10 w-[88px] rounded-lg" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ProjectsSection() {
+  const translate = useTranslations();
+  const { isOwnerOrAdmin: canManage } = useManagementPermissions();
+  const actions = useProjectsActions();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const debouncedSearch = useDebounce(searchQuery, 400, () => setCurrentPage(1));
+
+  const { data, isPending, isFetching, isPlaceholderData, isError, refetch } = useProjects({
+    page: currentPage,
+    limit: PROJECTS_PAGE_SIZE,
+    sort: 'title',
+    search: debouncedSearch || undefined,
+    deleted: 0,
+  });
+
+  const projects = data?.data ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.ceil(total / PROJECTS_PAGE_SIZE);
+  const showSkeleton = (isPending && !data) || (isPlaceholderData && isFetching);
+
+  const rowProps = { canManage, onOpen: actions.openProject, onDelete: actions.deleteProject };
+
+  return (
+    <WorkspaceSection count={data ? total : undefined}>
+      <div className="flex items-center justify-between gap-3">
+        <FormField
+          leftIcon={IconSearch}
+          placeholder={translate('common.account.workspace.projects.searchPlaceholder')}
+          value={searchQuery}
+          onChange={(event) => setSearchQuery(event.target.value)}
+          classnameContainer="w-full lg:w-75"
+        />
+        {canManage && (
+          <Button className="h-10! shrink-0" onClick={actions.createProject}>
+            <IconPlus className="size-5!" />
+            {translate('common.account.workspace.projects.newProject')}
+          </Button>
+        )}
+      </div>
+
+      {showSkeleton && <ProjectsSkeleton />}
+
+      {!showSkeleton && isError && (
+        <SectionLoadError message={translate('common.account.workspace.loadFailed')} onRetry={() => refetch()} />
+      )}
+
+      {!showSkeleton && !isError && projects.length === 0 && (
+        <div className="flex items-center justify-center py-12 border border-zinc-200 rounded-lg bg-white">
+          <p className="paragraph-small-medium text-zinc-500">{translate('common.account.workspace.projects.empty')}</p>
+        </div>
+      )}
+
+      {!showSkeleton && !isError && projects.length > 0 && (
+        <>
+          <div className="hidden lg:block border border-zinc-200 rounded-lg bg-white divide-y divide-zinc-200 overflow-hidden">
+            {projects.map((project) => (
+              <ProjectRow key={project.id} project={project} {...rowProps} />
+            ))}
+          </div>
+          <div className="lg:hidden flex flex-col gap-3">
+            {projects.map((project) => (
+              <ProjectCard key={project.id} project={project} {...rowProps} />
+            ))}
+          </div>
+        </>
+      )}
+
+      <ListPagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
+
+      <ProjectFlows />
+    </WorkspaceSection>
+  );
+}

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

@@ -1,5 +1,6 @@
 'use client';
 
+import type { ReactNode } from 'react';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
@@ -9,8 +10,11 @@ import { AccountSectionType } from '../../../enums/AccountSectionType';
 import { useUnlinkGoogle } from '../../../modules/auth/hooks/unlink-google.hook';
 import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
 import { Button } from '../../ui/buttons/Button';
+import { Separator } from '../../ui/data-display/Separator';
 import { Toast } from '../../ui/feedback/Toast';
 import { GoogleIcon } from '../../ui/data-display/GoogleIcon';
+import { cn } from '../../../infra/utils/clsx';
+import { WorkspaceSection } from './shared/WorkspaceSection';
 
 interface SecuritySectionProps {
   setActiveSection: (section: AccountSectionType) => void;
@@ -18,9 +22,32 @@ interface SecuritySectionProps {
   onDeleteAccount?: () => void;
 }
 
-export function SecuritySection({
-  onDeleteAccount,
-}: SecuritySectionProps) {
+type SecurityBlockProps = {
+  icon: ReactNode;
+  iconClassName?: string;
+  title: string;
+  description: string;
+  action?: ReactNode;
+};
+
+/** Ícone em cima e, abaixo, texto à esquerda com a ação à direita. */
+function SecurityBlock({ icon, iconClassName, title, description, action }: SecurityBlockProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className={cn('size-10 rounded-lg flex items-center justify-center', iconClassName)}>{icon}</div>
+
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+        <div className="flex flex-col gap-2 max-w-125">
+          <span className="paragraph-medium-semibold text-gray-950">{title}</span>
+          <span className="paragraph-small-regular text-gray-600">{description}</span>
+        </div>
+        {action && <div className="shrink-0">{action}</div>}
+      </div>
+    </div>
+  );
+}
+
+export function SecuritySection({ onDeleteAccount }: SecuritySectionProps) {
   const translate = useTranslations();
   const { user } = useAuth();
   const queryClient = useQueryClient();
@@ -30,9 +57,7 @@ export function SecuritySection({
   const handleUnlinkGoogle = async () => {
     try {
       const result = await unlinkGoogle();
-      toast.custom((t) => (
-        <Toast variant="success" message={result.message} toastId={t} />
-      ));
+      toast.custom((t) => <Toast variant="success" message={result.message} toastId={t} />);
       queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
     } catch (error) {
       const message =
@@ -42,64 +67,49 @@ export function SecuritySection({
   };
 
   return (
-    <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
-      <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">
-        {translate('common.account.security.title')}
-      </span>
-
+    <WorkspaceSection>
       {hasGoogleLinked && (
-        <div className="flex flex-col items-center lg:items-start gap-4">
-          <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center">
-            <GoogleIcon size={20} />
-          </div>
-
-          <div className="flex flex-col gap-2">
-            <span className="paragraph-medium-semibold text-gray-950">
-              {translate('common.account.security.googleLinkedTitle')}
-            </span>
-            <span className="paragraph-small-regular text-gray-600">
-              {translate('common.account.security.googleLinkedDescription')}
-            </span>
-          </div>
-
-          <Button
-            variant="secondary"
-            className="h-10! w-fit"
-            type="button"
-            disabled={isUnlinking}
-            onClick={handleUnlinkGoogle}
-          >
-            {isUnlinking
-              ? translate('common.account.security.unlinking')
-              : translate('common.account.security.unlinkGoogle')}
-          </Button>
-        </div>
+        <>
+          <SecurityBlock
+            icon={<GoogleIcon size={20} />}
+            iconClassName="bg-gray-50"
+            title={translate('common.account.security.googleLinkedTitle')}
+            description={translate('common.account.security.googleLinkedDescription')}
+            action={
+              <Button
+                variant="secondary"
+                className="h-10! w-fit"
+                type="button"
+                disabled={isUnlinking}
+                onClick={handleUnlinkGoogle}
+              >
+                {isUnlinking
+                  ? translate('common.account.security.unlinking')
+                  : translate('common.account.security.unlinkGoogle')}
+              </Button>
+            }
+          />
+          <Separator />
+        </>
       )}
 
-      <div className="flex flex-col items-center lg:items-start gap-4">
-        <div className="size-10 rounded-lg bg-red-50 flex items-center justify-center">
-          <IconAlertTriangle size={20} className="text-red-500" />
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <span className="paragraph-medium-semibold text-gray-950">
-            {translate('common.account.deleteAccount.title')}
-          </span>
-          <span className="paragraph-small-regular text-gray-600">
-            {translate('common.account.security.deleteAccountDescription')}
-          </span>
-        </div>
-
-        {onDeleteAccount && (
-          <button
-            type="button"
-            className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
-            onClick={onDeleteAccount}
-          >
-            {translate('common.account.security.deleteMyAccount')}
-          </button>
-        )}
-      </div>
-    </div>
+      <SecurityBlock
+        icon={<IconAlertTriangle size={20} className="text-red-500" />}
+        iconClassName="bg-red-50"
+        title={translate('common.account.deleteAccount.title')}
+        description={translate('common.account.security.deleteAccountDescription')}
+        action={
+          onDeleteAccount && (
+            <button
+              type="button"
+              className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg h-10 px-3 cursor-pointer hover:bg-red-100 transition-colors w-fit"
+              onClick={onDeleteAccount}
+            >
+              {translate('common.account.security.deleteMyAccount')}
+            </button>
+          )
+        }
+      />
+    </WorkspaceSection>
   );
 }

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

@@ -0,0 +1,36 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Separator } from '../../ui/data-display/Separator';
+import { useCurrentSubscription } from '../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import { isFreeSubscription } from '../../../modules/subscriptions/utils/is-free-subscription';
+import { SubscriptionPlanCard } from './subscription/SubscriptionPlanCard';
+import { PaymentMethodsCard } from './subscription/PaymentMethodsCard';
+import { ChargesList } from './subscription/ChargesList';
+import { SubscriptionFlows } from './subscription/SubscriptionFlows';
+import { WorkspaceSection } from './shared/WorkspaceSection';
+
+export function SubscriptionSection() {
+  const translate = useTranslations();
+  const { data: { data: [subscription] = [] } = {}, isPending } = useCurrentSubscription();
+
+  // Mesma regra da tela de assinatura: free, trial e sem assinatura não têm cobrança a gerir.
+  const hasBilling =
+    !isPending && !!subscription && !isFreeSubscription(subscription) && subscription.type !== 'trial';
+
+  return (
+    <WorkspaceSection>
+      <SubscriptionPlanCard />
+
+      {hasBilling && (
+        <>
+          <PaymentMethodsCard />
+          <Separator />
+          <ChargesList />
+        </>
+      )}
+
+      <SubscriptionFlows />
+    </WorkspaceSection>
+  );
+}