@greatapps/common 1.1.699 → 1.1.700

package/src/components/modals/cards/DeleteCardModal.tsx

@@ -1,136 +1,136 @@
-'use client';
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from '../../ui/overlay/Dialog';
-import { Button } from '../../ui/buttons/Button';
-import { Separator } from '../../ui/data-display/Separator';
-import { Toast } from '../../ui/feedback/Toast';
-import { FormField } from '../../ui/form/FormField';
-import { IconTrash } from '@tabler/icons-react';
-import { toast } from 'sonner';
-import { useModalManager } from '../../../store/useModalManager';
-import { useDeleteConfirmation } from '../../../modules/cards/hooks/delete-confirmation.hook';
-import { useDeleteCard } from '../../../modules/cards/hooks/delete-card.hook';
-import { useCards } from '../../../modules/cards/hooks/cards.hook';
-import { useTranslations } from 'next-intl';
-
-export function DeleteCardModal() {
-  const translate = useTranslations();
-  const { activeModal, modalData, closeModal } = useModalManager();
-  const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation({
-    confirmWord: translate('common.cards.delete.confirmPlaceholder'),
-  });
-  const deleteCard = useDeleteCard();
-  const { data: cardsData } = useCards();
-
-  const isOpen = activeModal === 'deleteCardModal';
-  const cardId = modalData.cardId as string | undefined;
-  const onSuccess = modalData.onSuccess as (() => void) | undefined;
-
-  const card = cardsData?.data?.find((c) => c.id.toString() === cardId);
-  const cardLastDigits = (card?.number ?? '').replaceAll(/\D/g, '').slice(-4);
-
-  const handleClose = () => {
-    resetConfirmation();
-    closeModal();
-  };
-
-  const onSubmit = async () => {
-    if (!cardId) return;
-
-    try {
-      await deleteCard.mutateAsync(cardId);
-    } catch (error) {
-      toast.custom(
-        (t) => (
-          <Toast
-            toastId={t}
-            variant="error"
-            message={
-              error instanceof Error
-                ? error.message
-                : translate('common.cards.delete.errorToast')
-            }
-          />
-        ),
-        { duration: 5000 },
-      );
-      return;
-    }
-
-    onSuccess?.();
-    resetConfirmation();
-    closeModal();
-
-    toast.custom(
-      (t) => (
-        <Toast
-          variant="success"
-          message={translate('common.cards.delete.successToast', { digits: cardLastDigits })}
-          toastId={t}
-        />
-      ),
-      { duration: 5000 },
-    );
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
-      <DialogContent className="flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[410px]! rounded-lg border">
-        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col">
-          <DialogHeader className="gap-4 text-left p-4 lg:p-5 pb-0 lg:pb-0">
-            <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
-              <IconTrash size={20} className="text-red-500" />
-            </div>
-            <div className="flex flex-col gap-2">
-              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-                {translate('common.cards.delete.title')}
-              </DialogTitle>
-              <DialogDescription className="paragraph-small-regular text-zinc-600">
-                {translate('common.cards.delete.description')}{' '}
-                <span className="font-semibold text-zinc-950">
-                  •••• {cardLastDigits}
-                </span>
-                ?
-              </DialogDescription>
-            </div>
-          </DialogHeader>
-
-          <div className="px-4 lg:px-5 py-5">
-            <FormField
-              label={translate('common.cards.delete.confirmLabel')}
-              required
-              placeholder={translate('common.cards.delete.confirmPlaceholder')}
-              {...form.register('confirmText')}
-            />
-          </div>
-          <Separator />
-          <div className="flex flex-row items-center gap-2 p-4 lg:p-5">
-            <Button
-              type="submit"
-              disabled={!isValidConfirmation}
-              loading={form.formState.isSubmitting}
-              className="h-10!"
-            >
-              {form.formState.isSubmitting ? translate('common.cards.delete.deleting') : translate('common.actions.delete')}
-            </Button>
-            <Button
-              type="button"
-              variant="secondary"
-              className="h-10!"
-              onClick={handleClose}
-              disabled={form.formState.isSubmitting}
-            >
-              {translate('common.actions.cancel')}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '../../ui/overlay/Dialog';
+import { Button } from '../../ui/buttons/Button';
+import { Separator } from '../../ui/data-display/Separator';
+import { Toast } from '../../ui/feedback/Toast';
+import { FormField } from '../../ui/form/FormField';
+import { IconTrash } from '@tabler/icons-react';
+import { toast } from 'sonner';
+import { useModalManager } from '../../../store/useModalManager';
+import { useDeleteConfirmation } from '../../../modules/cards/hooks/delete-confirmation.hook';
+import { useDeleteCard } from '../../../modules/cards/hooks/delete-card.hook';
+import { useCards } from '../../../modules/cards/hooks/cards.hook';
+import { useTranslations } from 'next-intl';
+
+export function DeleteCardModal() {
+  const translate = useTranslations();
+  const { activeModal, modalData, closeModal } = useModalManager();
+  const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation({
+    confirmWord: translate('common.cards.delete.confirmPlaceholder'),
+  });
+  const deleteCard = useDeleteCard();
+  const { data: cardsData } = useCards();
+
+  const isOpen = activeModal === 'deleteCardModal';
+  const cardId = modalData.cardId as string | undefined;
+  const onSuccess = modalData.onSuccess as (() => void) | undefined;
+
+  const card = cardsData?.data?.find((c) => c.id.toString() === cardId);
+  const cardLastDigits = (card?.number ?? '').replaceAll(/\D/g, '').slice(-4);
+
+  const handleClose = () => {
+    resetConfirmation();
+    closeModal();
+  };
+
+  const onSubmit = async () => {
+    if (!cardId) return;
+
+    try {
+      await deleteCard.mutateAsync(cardId);
+    } catch (error) {
+      toast.custom(
+        (t) => (
+          <Toast
+            toastId={t}
+            variant="error"
+            message={
+              error instanceof Error
+                ? error.message
+                : translate('common.cards.delete.errorToast')
+            }
+          />
+        ),
+        { duration: 5000 },
+      );
+      return;
+    }
+
+    onSuccess?.();
+    resetConfirmation();
+    closeModal();
+
+    toast.custom(
+      (t) => (
+        <Toast
+          variant="success"
+          message={translate('common.cards.delete.successToast', { digits: cardLastDigits })}
+          toastId={t}
+        />
+      ),
+      { duration: 5000 },
+    );
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent className="flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[410px]! rounded-lg border">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col">
+          <DialogHeader className="gap-4 text-left p-4 lg:p-5 pb-0 lg:pb-0">
+            <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
+              <IconTrash size={20} className="text-red-500" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+                {translate('common.cards.delete.title')}
+              </DialogTitle>
+              <DialogDescription className="paragraph-small-regular text-zinc-600">
+                {translate('common.cards.delete.description')}{' '}
+                <span className="font-semibold text-zinc-950">
+                  •••• {cardLastDigits}
+                </span>
+                ?
+              </DialogDescription>
+            </div>
+          </DialogHeader>
+
+          <div className="px-4 lg:px-5 py-5">
+            <FormField
+              label={translate('common.cards.delete.confirmLabel')}
+              required
+              placeholder={translate('common.cards.delete.confirmPlaceholder')}
+              {...form.register('confirmText')}
+            />
+          </div>
+          <Separator />
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-5">
+            <Button
+              type="submit"
+              disabled={!isValidConfirmation}
+              loading={form.formState.isSubmitting}
+              className="h-10!"
+            >
+              {form.formState.isSubmitting ? translate('common.cards.delete.deleting') : translate('common.actions.delete')}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-10!"
+              onClick={handleClose}
+              disabled={form.formState.isSubmitting}
+            >
+              {translate('common.actions.cancel')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/navigation/CancelledSubscriptionBanner.tsx

@@ -1,62 +1,62 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { IconAlertOctagon, IconX } from '@tabler/icons-react';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-import { getSubscriptionCancellationState } from '../../modules/subscriptions/utils/get-subscription-cancellation-state';
-import { useTranslations } from 'next-intl';
-
-interface CancelledSubscriptionBannerProps {
-  onReactivate?: () => void;
-}
-
-export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {
-  const translate = useTranslations();
-  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
-  const [visible, setVisible] = useState(true);
-  const [animated, setAnimated] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setAnimated(true), 50);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const dismiss = useCallback(() => setVisible(false), []);
-
-  if (!visible) return null;
-  if (subscription?.type === 'free' || subscription?.type === 'trial') return null;
-
-  // Mesma fonte da verdade do SubscriptionBanner: páginas fora do ar quando a
-  // assinatura está inativa (ex.: baixa por falha de pagamento) OU o cancelamento
-  // explícito já passou do período (com grace, no caso de client).
-  if (getSubscriptionCancellationState(subscription) !== 'cancelled') return null;
-
-  return (
-    <div className="fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
-      <div
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
-      >
-        <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
-          <IconAlertOctagon size={16} className="text-white shrink-0" />
-          <span className="paragraph-xsmall-semibold text-white">
-            {translate('common.navigation.banners.cancelled.message')}
-          </span>
-        </div>
-        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
-          <button
-            type="button"
-            className="flex items-center justify-center p-1.5 cursor-pointer"
-            onClick={onReactivate}
-          >
-            <span className="paragraph-xsmall-semibold text-white underline">
-              {translate('common.navigation.banners.cancelled.choosePlan')}
-            </span>
-          </button>
-          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
-            <IconX size={18} className="text-red-200" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { IconAlertOctagon, IconX } from '@tabler/icons-react';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+import { getSubscriptionCancellationState } from '../../modules/subscriptions/utils/get-subscription-cancellation-state';
+import { useTranslations } from 'next-intl';
+
+interface CancelledSubscriptionBannerProps {
+  onReactivate?: () => void;
+}
+
+export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {
+  const translate = useTranslations();
+  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
+  const [visible, setVisible] = useState(true);
+  const [animated, setAnimated] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimated(true), 50);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const dismiss = useCallback(() => setVisible(false), []);
+
+  if (!visible) return null;
+  if (subscription?.type === 'free' || subscription?.type === 'trial') return null;
+
+  // Mesma fonte da verdade do SubscriptionBanner: páginas fora do ar quando a
+  // assinatura está inativa (ex.: baixa por falha de pagamento) OU o cancelamento
+  // explícito já passou do período (com grace, no caso de client).
+  if (getSubscriptionCancellationState(subscription) !== 'cancelled') return null;
+
+  return (
+    <div className="fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
+      <div
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
+      >
+        <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
+          <IconAlertOctagon size={16} className="text-white shrink-0" />
+          <span className="paragraph-xsmall-semibold text-white">
+            {translate('common.navigation.banners.cancelled.message')}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
+          <button
+            type="button"
+            className="flex items-center justify-center p-1.5 cursor-pointer"
+            onClick={onReactivate}
+          >
+            <span className="paragraph-xsmall-semibold text-white underline">
+              {translate('common.navigation.banners.cancelled.choosePlan')}
+            </span>
+          </button>
+          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
+            <IconX size={18} className="text-red-200" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/navigation/NavItemsContext.ts

@@ -1,20 +1,20 @@
-'use client';
-
-import { createContext, useContext } from 'react';
-import type { NavItemConfig } from './subcomponents/NavItems';
-
-interface NavItemsContextValue {
-  navItems: NavItemConfig[];
-  setNavItems: (items: NavItemConfig[]) => void;
-  mobileVariant: 'sheet' | 'tabs';
-}
-
-export const NavItemsContext = createContext<NavItemsContextValue>({
-  navItems: [],
-  setNavItems: () => {},
-  mobileVariant: 'sheet',
-});
-
-export function useNavItemsContext(): NavItemsContextValue {
-  return useContext(NavItemsContext);
-}
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { NavItemConfig } from './subcomponents/NavItems';
+
+interface NavItemsContextValue {
+  navItems: NavItemConfig[];
+  setNavItems: (items: NavItemConfig[]) => void;
+  mobileVariant: 'sheet' | 'tabs';
+}
+
+export const NavItemsContext = createContext<NavItemsContextValue>({
+  navItems: [],
+  setNavItems: () => {},
+  mobileVariant: 'sheet',
+});
+
+export function useNavItemsContext(): NavItemsContextValue {
+  return useContext(NavItemsContext);
+}

package/src/components/navigation/OverdueInvoiceBanner.tsx

@@ -1,51 +1,51 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { IconAlertTriangle, IconX } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-
-interface OverdueInvoiceBannerProps {
-  onDetails?: () => void;
-}
-
-export function OverdueInvoiceBanner({ onDetails }: OverdueInvoiceBannerProps) {
-  const translate = useTranslations();
-  const [visible, setVisible] = useState(true);
-  const [animated, setAnimated] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setAnimated(true), 50);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const dismiss = useCallback(() => setVisible(false), []);
-
-  if (!visible) return null;
-
-  return (
-    <div className="fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
-      <div
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-orange-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
-      >
-        <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
-          <IconAlertTriangle size={16} className="text-white shrink-0" />
-          <span className="paragraph-xsmall-semibold text-white">
-            {translate('common.navigation.banners.overdue.message')}
-          </span>
-        </div>
-        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
-          <button
-            type="button"
-            className="flex items-center justify-center p-1.5 cursor-pointer"
-            onClick={onDetails}
-          >
-            <span className="paragraph-xsmall-semibold text-white underline">{translate('common.navigation.banners.overdue.details')}</span>
-          </button>
-          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
-            <IconX size={18} className="text-orange-200" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { IconAlertTriangle, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+
+interface OverdueInvoiceBannerProps {
+  onDetails?: () => void;
+}
+
+export function OverdueInvoiceBanner({ onDetails }: OverdueInvoiceBannerProps) {
+  const translate = useTranslations();
+  const [visible, setVisible] = useState(true);
+  const [animated, setAnimated] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimated(true), 50);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const dismiss = useCallback(() => setVisible(false), []);
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
+      <div
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-orange-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
+      >
+        <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
+          <IconAlertTriangle size={16} className="text-white shrink-0" />
+          <span className="paragraph-xsmall-semibold text-white">
+            {translate('common.navigation.banners.overdue.message')}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
+          <button
+            type="button"
+            className="flex items-center justify-center p-1.5 cursor-pointer"
+            onClick={onDetails}
+          >
+            <span className="paragraph-xsmall-semibold text-white underline">{translate('common.navigation.banners.overdue.details')}</span>
+          </button>
+          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
+            <IconX size={18} className="text-orange-200" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}