@greatapps/common 1.1.699 → 1.1.700

package/src/components/navigation/SubscriptionBanner.tsx

@@ -1,94 +1,94 @@
-"use client";
-
-import { useActiveSubscription } from "../../modules/subscriptions/hooks/find-active-subscription.hook";
-import { useCharges } from "../../modules/charges/hooks/charges.hook";
-import { SUBSCRIPTION_GRACE_PERIOD_DAYS } from "../../modules/subscriptions/constants/subscription.constants";
-import { getSubscriptionExpiryDate } from "../../modules/subscriptions/utils/get-subscription-expiry-date";
-import { getSubscriptionCancellationState } from "../../modules/subscriptions/utils/get-subscription-cancellation-state";
-import { toCalendarDate, daysBetween } from "../../infra/utils/date";
-import { OverdueInvoiceBanner } from "./OverdueInvoiceBanner";
-import { UpcomingInvoiceBanner } from "./UpcomingInvoiceBanner";
-import { CancelledSubscriptionBanner } from "./CancelledSubscriptionBanner";
-import { PendingCancellationBanner } from "./PendingCancellationBanner";
-import { TrialBanner } from "./TrialBanner";
-
-const UPCOMING_WINDOW_DAYS = 7;
-const PAYMENT_METHOD_BOLETO = 2;
-
-interface SubscriptionBannerProps {
-  onReactivate?: () => void;
-  onDetails?: () => void;
-}
-
-export function SubscriptionBanner({
-  onReactivate,
-  onDetails,
-}: SubscriptionBannerProps) {
-  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
-  const { data: pendingChargesData, isLoading: isLoadingCharges } = useCharges({
-    page: 1,
-    limit: 1,
-    status: [0],
-  });
-
-  if (!subscription?.date_due) return null;
-  if (subscription.type === "free") return null;
-
-  const dueDate = toCalendarDate(subscription.date_due);
-  const today = toCalendarDate(new Date());
-  if (!dueDate || !today) return null;
-
-  const daysSinceDue = daysBetween(dueDate, today);
-  const daysToDue = daysBetween(today, dueDate);
-  const hasPendingCharge = !!pendingChargesData?.data?.[0];
-  const isBoleto = subscription.payment_method === PAYMENT_METHOD_BOLETO;
-
-  // Estado de cancelamento (fonte da verdade única, compartilhada com o
-  // CancelledSubscriptionBanner). `active === false` tem prioridade e cai em
-  // "cancelled" mesmo com date_due no futuro — é o caso da baixa por falha de
-  // pagamento, onde date_due aponta pra uma fatura não paga.
-  const expiryDate = getSubscriptionExpiryDate(subscription);
-  const cancellationState = getSubscriptionCancellationState(subscription);
-
-  // Trial: `date_due` guarda o fim do período de teste (ver auth.service).
-  // Mostra a contagem regressiva enquanto o teste está vigente: `active` e não
-  // vencido (`daysToDue >= 0`). NÃO usar `cancellationState` aqui — num trial o
-  // `date_cancellation` é o agendamento padrão de não-renovação (o Stripe seta
-  // = `date_due`), então cairia sempre em "pending" e o banner nunca apareceria.
-  // Um trial encerrado de verdade vem com `active === false` (date_due placeholder).
-  if (subscription.type === "trial") {
-    if (!subscription.active || daysToDue < 0) return null;
-    return <TrialBanner daysRemaining={daysToDue} onReactivate={onReactivate} />;
-  }
-
-  if (cancellationState === "cancelled") {
-    return <CancelledSubscriptionBanner onReactivate={onReactivate} />;
-  }
-
-  if (cancellationState === "pending") {
-    return (
-      <PendingCancellationBanner
-        limitDate={expiryDate}
-        onReactivate={onReactivate}
-      />
-    );
-  }
-
-  if (subscription.type === "whitelabel") return null;
-
-  if (daysSinceDue > 0 && daysSinceDue <= SUBSCRIPTION_GRACE_PERIOD_DAYS) {
-    return <OverdueInvoiceBanner onDetails={onDetails} />;
-  }
-
-  if (
-    isBoleto &&
-    !isLoadingCharges &&
-    hasPendingCharge &&
-    daysToDue >= 0 &&
-    daysToDue <= UPCOMING_WINDOW_DAYS
-  ) {
-    return <UpcomingInvoiceBanner dueDate={dueDate} onDetails={onDetails} />;
-  }
-
-  return null;
-}
+"use client";
+
+import { useActiveSubscription } from "../../modules/subscriptions/hooks/find-active-subscription.hook";
+import { useCharges } from "../../modules/charges/hooks/charges.hook";
+import { SUBSCRIPTION_GRACE_PERIOD_DAYS } from "../../modules/subscriptions/constants/subscription.constants";
+import { getSubscriptionExpiryDate } from "../../modules/subscriptions/utils/get-subscription-expiry-date";
+import { getSubscriptionCancellationState } from "../../modules/subscriptions/utils/get-subscription-cancellation-state";
+import { toCalendarDate, daysBetween } from "../../infra/utils/date";
+import { OverdueInvoiceBanner } from "./OverdueInvoiceBanner";
+import { UpcomingInvoiceBanner } from "./UpcomingInvoiceBanner";
+import { CancelledSubscriptionBanner } from "./CancelledSubscriptionBanner";
+import { PendingCancellationBanner } from "./PendingCancellationBanner";
+import { TrialBanner } from "./TrialBanner";
+
+const UPCOMING_WINDOW_DAYS = 7;
+const PAYMENT_METHOD_BOLETO = 2;
+
+interface SubscriptionBannerProps {
+  onReactivate?: () => void;
+  onDetails?: () => void;
+}
+
+export function SubscriptionBanner({
+  onReactivate,
+  onDetails,
+}: SubscriptionBannerProps) {
+  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
+  const { data: pendingChargesData, isLoading: isLoadingCharges } = useCharges({
+    page: 1,
+    limit: 1,
+    status: [0],
+  });
+
+  if (!subscription?.date_due) return null;
+  if (subscription.type === "free") return null;
+
+  const dueDate = toCalendarDate(subscription.date_due);
+  const today = toCalendarDate(new Date());
+  if (!dueDate || !today) return null;
+
+  const daysSinceDue = daysBetween(dueDate, today);
+  const daysToDue = daysBetween(today, dueDate);
+  const hasPendingCharge = !!pendingChargesData?.data?.[0];
+  const isBoleto = subscription.payment_method === PAYMENT_METHOD_BOLETO;
+
+  // Estado de cancelamento (fonte da verdade única, compartilhada com o
+  // CancelledSubscriptionBanner). `active === false` tem prioridade e cai em
+  // "cancelled" mesmo com date_due no futuro — é o caso da baixa por falha de
+  // pagamento, onde date_due aponta pra uma fatura não paga.
+  const expiryDate = getSubscriptionExpiryDate(subscription);
+  const cancellationState = getSubscriptionCancellationState(subscription);
+
+  // Trial: `date_due` guarda o fim do período de teste (ver auth.service).
+  // Mostra a contagem regressiva enquanto o teste está vigente: `active` e não
+  // vencido (`daysToDue >= 0`). NÃO usar `cancellationState` aqui — num trial o
+  // `date_cancellation` é o agendamento padrão de não-renovação (o Stripe seta
+  // = `date_due`), então cairia sempre em "pending" e o banner nunca apareceria.
+  // Um trial encerrado de verdade vem com `active === false` (date_due placeholder).
+  if (subscription.type === "trial") {
+    if (!subscription.active || daysToDue < 0) return null;
+    return <TrialBanner daysRemaining={daysToDue} onReactivate={onReactivate} />;
+  }
+
+  if (cancellationState === "cancelled") {
+    return <CancelledSubscriptionBanner onReactivate={onReactivate} />;
+  }
+
+  if (cancellationState === "pending") {
+    return (
+      <PendingCancellationBanner
+        limitDate={expiryDate}
+        onReactivate={onReactivate}
+      />
+    );
+  }
+
+  if (subscription.type === "whitelabel") return null;
+
+  if (daysSinceDue > 0 && daysSinceDue <= SUBSCRIPTION_GRACE_PERIOD_DAYS) {
+    return <OverdueInvoiceBanner onDetails={onDetails} />;
+  }
+
+  if (
+    isBoleto &&
+    !isLoadingCharges &&
+    hasPendingCharge &&
+    daysToDue >= 0 &&
+    daysToDue <= UPCOMING_WINDOW_DAYS
+  ) {
+    return <UpcomingInvoiceBanner dueDate={dueDate} onDetails={onDetails} />;
+  }
+
+  return null;
+}

package/src/components/navigation/TrialBanner.tsx

@@ -1,54 +1,54 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { IconClock, IconX } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-
-interface TrialBannerProps {
-  daysRemaining: number;
-  onReactivate?: () => void;
-}
-
-export function TrialBanner({ daysRemaining, onReactivate }: TrialBannerProps) {
-  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-cyan-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">
-          <IconClock size={16} className="text-white shrink-0" />
-          <span className="paragraph-xsmall-semibold text-white">
-            {translate('common.navigation.banners.trial.message', { days: daysRemaining })}
-          </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.trial.choosePlan')}
-            </span>
-          </button>
-          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
-            <IconX size={18} className="text-cyan-100" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { IconClock, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+
+interface TrialBannerProps {
+  daysRemaining: number;
+  onReactivate?: () => void;
+}
+
+export function TrialBanner({ daysRemaining, onReactivate }: TrialBannerProps) {
+  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-cyan-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">
+          <IconClock size={16} className="text-white shrink-0" />
+          <span className="paragraph-xsmall-semibold text-white">
+            {translate('common.navigation.banners.trial.message', { days: daysRemaining })}
+          </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.trial.choosePlan')}
+            </span>
+          </button>
+          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
+            <IconX size={18} className="text-cyan-100" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/navigation/UpcomingInvoiceBanner.tsx

@@ -1,55 +1,55 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { IconAlertTriangle, IconX } from '@tabler/icons-react';
-import { formatShortDate } from '../../infra/utils/date';
-import { useTranslations } from 'next-intl';
-
-interface UpcomingInvoiceBannerProps {
-  dueDate?: Date | null;
-  onDetails?: () => void;
-}
-
-export function UpcomingInvoiceBanner({ dueDate, onDetails }: UpcomingInvoiceBannerProps) {
-  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;
-
-  const formattedDueDate = formatShortDate(dueDate);
-
-  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-yellow-400 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-zinc-950 shrink-0" />
-          <span className="paragraph-xsmall-semibold text-zinc-950">
-            {translate('common.navigation.banners.upcoming.message', { dueDate: formattedDueDate ?? '' })}
-          </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-zinc-950 underline">{translate('common.navigation.banners.upcoming.details')}</span>
-          </button>
-          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
-            <IconX size={18} className="text-zinc-700" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { IconAlertTriangle, IconX } from '@tabler/icons-react';
+import { formatShortDate } from '../../infra/utils/date';
+import { useTranslations } from 'next-intl';
+
+interface UpcomingInvoiceBannerProps {
+  dueDate?: Date | null;
+  onDetails?: () => void;
+}
+
+export function UpcomingInvoiceBanner({ dueDate, onDetails }: UpcomingInvoiceBannerProps) {
+  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;
+
+  const formattedDueDate = formatShortDate(dueDate);
+
+  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-yellow-400 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-zinc-950 shrink-0" />
+          <span className="paragraph-xsmall-semibold text-zinc-950">
+            {translate('common.navigation.banners.upcoming.message', { dueDate: formattedDueDate ?? '' })}
+          </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-zinc-950 underline">{translate('common.navigation.banners.upcoming.details')}</span>
+          </button>
+          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
+            <IconX size={18} className="text-zinc-700" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/navigation/shells/TabsMobileShell.tsx

@@ -1,74 +1,74 @@
-'use client';
-
-import { ReactNode, useRef, useEffect } from 'react';
-import Link from 'next/link';
-import { AppNavigationContext } from '../AppNavigationContext';
-import { useNavItemsContext } from '../NavItemsContext';
-
-function InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {
-  const { navItems } = useNavItemsContext();
-  const tabsListRef = useRef<HTMLDivElement>(null);
-  const activeTabRef = useRef<HTMLAnchorElement>(null);
-
-  const activeLabel = navItems.find((i) => i.isActive)?.label;
-
-  // Scroll active tab into center when active item changes
-  useEffect(() => {
-    if (activeTabRef.current && tabsListRef.current) {
-      const tabsList = tabsListRef.current;
-      const activeTabElement = activeTabRef.current;
-      const tabsListRect = tabsList.getBoundingClientRect();
-      const activeTabRect = activeTabElement.getBoundingClientRect();
-      const scrollLeft =
-        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
-      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });
-    }
-  }, [activeLabel]);
-
-  if (!navItems.length) return null;
-
-  return (
-    <div
-      ref={tabsListRef}
-      className="md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
-      style={{ top: topOffset }}
-    >
-      {navItems.map((item) => (
-        <Link
-          key={item.label}
-          ref={item.isActive ? activeTabRef : undefined}
-          href={item.href}
-          prefetch
-          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${
-            item.isActive
-              ? 'border-gray-950 text-gray-950'
-              : 'border-transparent text-gray-500 hover:text-gray-900'
-          }`}
-        >
-          {item.icon && <item.icon size={16} className="shrink-0" />}
-          <span
-            className={
-              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'
-            }
-          >
-            {item.label}
-          </span>
-        </Link>
-      ))}
-    </div>
-  );
-}
-
-export function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {
-  return (
-    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>
-      {/*
-        Children are hidden visually, but NavItems' useEffect still fires inside
-        display:none — React effects are tied to commit phase, not layout visibility.
-        This registers navItems in NavItemsContext so InternalTabsBar can read them.
-      */}
-      <div className="hidden">{children}</div>
-      <InternalTabsBar topOffset={topOffset} />
-    </AppNavigationContext.Provider>
-  );
-}
+'use client';
+
+import { ReactNode, useRef, useEffect } from 'react';
+import Link from 'next/link';
+import { AppNavigationContext } from '../AppNavigationContext';
+import { useNavItemsContext } from '../NavItemsContext';
+
+function InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {
+  const { navItems } = useNavItemsContext();
+  const tabsListRef = useRef<HTMLDivElement>(null);
+  const activeTabRef = useRef<HTMLAnchorElement>(null);
+
+  const activeLabel = navItems.find((i) => i.isActive)?.label;
+
+  // Scroll active tab into center when active item changes
+  useEffect(() => {
+    if (activeTabRef.current && tabsListRef.current) {
+      const tabsList = tabsListRef.current;
+      const activeTabElement = activeTabRef.current;
+      const tabsListRect = tabsList.getBoundingClientRect();
+      const activeTabRect = activeTabElement.getBoundingClientRect();
+      const scrollLeft =
+        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
+      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });
+    }
+  }, [activeLabel]);
+
+  if (!navItems.length) return null;
+
+  return (
+    <div
+      ref={tabsListRef}
+      className="md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
+      style={{ top: topOffset }}
+    >
+      {navItems.map((item) => (
+        <Link
+          key={item.label}
+          ref={item.isActive ? activeTabRef : undefined}
+          href={item.href}
+          prefetch
+          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${
+            item.isActive
+              ? 'border-gray-950 text-gray-950'
+              : 'border-transparent text-gray-500 hover:text-gray-900'
+          }`}
+        >
+          {item.icon && <item.icon size={16} className="shrink-0" />}
+          <span
+            className={
+              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'
+            }
+          >
+            {item.label}
+          </span>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {
+  return (
+    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>
+      {/*
+        Children are hidden visually, but NavItems' useEffect still fires inside
+        display:none — React effects are tied to commit phase, not layout visibility.
+        This registers navItems in NavItemsContext so InternalTabsBar can read them.
+      */}
+      <div className="hidden">{children}</div>
+      <InternalTabsBar topOffset={topOffset} />
+    </AppNavigationContext.Provider>
+  );
+}