@greatapps/common 1.1.154 → 1.1.156

package/src/components/navigation/AppNavigation.tsx

@@ -5,6 +5,7 @@ import { DesktopShell } from './shells/DesktopShell';
 import { MdShell } from './shells/MdShell';
 import { MobileShell } from './shells/MobileShell';
 import { TabsMobileShell } from './shells/TabsMobileShell';
+import { CancelledSubscriptionBanner } from './CancelledSubscriptionBanner';
 import { NavItems } from './subcomponents/NavItems';
 import { ProjectSelector } from './subcomponents/ProjectSelector';
 import { PlanCard } from './subcomponents/PlanCard';
@@ -21,13 +22,15 @@ interface AppNavigationProps {
   children: ReactNode;
   mobileVariant?: 'sheet' | 'tabs';
   mobileTabsOffset?: string;
+  onCancelledReactivate?: () => void;
 }
 
-function AppNavigationRoot({ children, mobileVariant = 'sheet', mobileTabsOffset }: AppNavigationProps) {
+function AppNavigationRoot({ children, mobileVariant = 'sheet', mobileTabsOffset, onCancelledReactivate }: AppNavigationProps) {
   const [navItems, setNavItems] = useState<NavItemConfig[]>([]);
 
   return (
     <NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>
+      <CancelledSubscriptionBanner onReactivate={onCancelledReactivate} />
       <DesktopShell>{children}</DesktopShell>
       <MdShell>{children}</MdShell>
       {mobileVariant === 'sheet' ? (

package/src/components/navigation/CancelledSubscriptionBanner.tsx

@@ -0,0 +1,69 @@
+'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';
+
+function daysBetween(a: Date, b: Date): number {
+  const msPerDay = 24 * 60 * 60 * 1000;
+  const da = new Date(a.getFullYear(), a.getMonth(), a.getDate());
+  const db = new Date(b.getFullYear(), b.getMonth(), b.getDate());
+  return Math.round((db.getTime() - da.getTime()) / msPerDay);
+}
+
+interface CancelledSubscriptionBannerProps {
+  onReactivate?: () => void;
+}
+
+export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {
+  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), []);
+
+  const cancellationDate = subscription?.date_cancellation;
+  if (!cancellationDate || !visible) return null;
+
+  const today = new Date();
+  const daysSinceCancellation = daysBetween(new Date(cancellationDate), today);
+  if (daysSinceCancellation < 0 || daysSinceCancellation > 5) return null;
+
+  const daysRemaining = Math.max(0, 5 - daysSinceCancellation);
+
+  return (
+    <div className="fixed top-0 lg:left-[273px] left-0 right-0 z-50 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-9' : '-translate-y-full'}`}
+      >
+        {daysRemaining > 0 && (
+          <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">
+              Assinatura cancelada! Em {daysRemaining} dias suas páginas serão tiradas do ar!
+            </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">
+              Reativar assinatura
+            </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/shells/DesktopShell.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { ReactNode } from 'react';
-import Image from 'next/image';
 import { SideBarNavigation } from '../../layouts/SideBarNavigation';
 import { AppNavigationContext } from '../AppNavigationContext';
 
@@ -9,12 +8,6 @@ export function DesktopShell({ children }: { children: ReactNode }) {
   return (
     <AppNavigationContext.Provider value={{ breakpoint: 'desktop' }}>
       <SideBarNavigation className="justify-between gap-5">
-        <Image
-          src="/icons/great-icon.svg"
-          alt="GreatPages"
-          width={28}
-          height={28}
-        />
         {children}
       </SideBarNavigation>
     </AppNavigationContext.Provider>

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

@@ -9,12 +9,6 @@ export function MdShell({ children }: { children: ReactNode }) {
   return (
     <AppNavigationContext.Provider value={{ breakpoint: 'md' }}>
       <MdSideBarNavigation className="justify-between gap-5">
-        <Image
-          src="/icons/great-icon.svg"
-          alt="GreatPages"
-          width={28}
-          height={28}
-        />
         {children}
       </MdSideBarNavigation>
     </AppNavigationContext.Provider>

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

@@ -1,72 +1,72 @@
-'use client';
-
-import { ReactNode, useRef, useEffect } from 'react';
-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<HTMLButtonElement>(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) => (
-        <button
-          key={item.label}
-          ref={item.isActive ? activeTabRef : undefined}
-          onClick={item.onClick}
-          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>
-        </button>
-      ))}
-    </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 { AppNavigationContext } from '../AppNavigationContext';
+import { useNavItemsContext } from '../NavItemsContext';
+
+function InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {
+  const { navItems } = useNavItemsContext();
+  const tabsListRef = useRef<HTMLDivElement>(null);
+  const activeTabRef = useRef<HTMLButtonElement>(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) => (
+        <button
+          key={item.label}
+          ref={item.isActive ? activeTabRef : undefined}
+          onClick={item.onClick}
+          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>
+        </button>
+      ))}
+    </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>
+  );
+}

package/src/components/pages/notifications/Notifications.tsx

@@ -1,160 +1,160 @@
-'use client';
-
-import { Bell, Check, Loader2 } from "lucide-react";
-import { Button } from "../../ui/buttons/Button";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../ui/data-display/Tabs";
-import { useInfiniteMessages, useMarkAllMessagesAsRead } from "../../../modules/users/hooks/messages.hook";
-import NotificationCard from "../../widgets/notifications/NotificationCard";
-import { Toast } from "../../ui/feedback/Toast";
-import { formatDistanceToNow } from "date-fns";
-import { ptBR } from "date-fns/locale";
-import { toast } from "sonner";
-import React from "react";
-
-function NotificationsList({
-  pages,
-  isFetchingNextPage,
-  hasNextPage,
-  fetchNextPage,
-}: {
-  pages: ReturnType<typeof useInfiniteMessages>["data"];
-  isFetchingNextPage: boolean;
-  hasNextPage: boolean;
-  fetchNextPage: () => void;
-}) {
-  const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const target = e.currentTarget;
-    const nearBottom =
-      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
-    if (!nearBottom) return;
-    if (hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  };
-
-  return (
-    <div
-      className="flex flex-col border border-gray-200 rounded-lg w-full bg-white max-h-[70vh] overflow-y-auto custom-scrollbar"
-      onScroll={handleScroll}
-    >
-      {notifications.map((notification, index) => (
-        <NotificationCard
-          key={notification.id}
-          icon={<Bell size={20} className="text-pages-600" />}
-          iconBgColor="bg-pages-100"
-          title={notification.subject}
-          description={notification.message}
-          gapPx={16}
-          time={formatDistanceToNow(new Date(notification.datetime_add), {
-            addSuffix: true,
-            locale: ptBR,
-          })}
-          isUnread={notification.status === 1}
-          showBorder={index < notifications.length - 1}
-        />
-      ))}
-      {isFetchingNextPage && (
-        <div className="flex items-center justify-center py-4">
-          <Loader2 size={20} className="animate-spin text-gray-400" />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function NotificationPageContent() {
-  const unreadNotifications = useInfiniteMessages({
-    readed: false,
-    type: "notification",
-    order: "desc",
-  });
-  const allNotifications = useInfiniteMessages({
-    type: "notification",
-    order: "desc",
-  });
-
-  const totalAll = allNotifications.data?.pages[0]?.total ?? 0;
-  const totalUnread = unreadNotifications.data?.pages[0]?.total ?? 0;
-
-  const { mutate: markAllAsRead, isPending: isMarkingAll } = useMarkAllMessagesAsRead();
-
-  const handleMarkAllAsRead = () => {
-    markAllAsRead(undefined, {
-      onSuccess: () => {
-        toast.custom((t) => (
-          <Toast variant="success" message="Todas as notificações foram marcadas como lidas" toastId={t} />
-        ));
-      },
-      onError: () => {
-        toast.custom((t) => (
-          <Toast variant="error" message="Erro ao marcar notificações como lidas" toastId={t} />
-        ));
-      },
-    });
-  };
-
-  return (
-    <div className="flex flex-col gap-6 lg:gap-10 px-4 py-6 lg:px-20 lg:py-14">
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex flex-col gap-2">
-          <h1 className="paragraph-xlarge-semibold lg:title-large-semibold text-gray-950">
-            Notificações
-          </h1>
-          <p className="paragraph-medium-regular text-gray-600 hidden lg:block">
-            Tenha controle total sobre páginas, experiências e conversões.
-          </p>
-        </div>
-        <Button
-          variant={"secondary"}
-          className="h-10! lg:h-12! shrink-0"
-          onClick={handleMarkAllAsRead}
-          disabled={isMarkingAll || totalUnread === 0}
-        >
-          {isMarkingAll ? <Loader2 size={20} className="animate-spin" /> : <Check size={20} />}
-          <span className="lg:block hidden">Marcar todos como lidos</span>
-          <span className="lg:hidden">Marcar como lidos</span>
-        </Button>
-      </div>
-      <Tabs
-        defaultValue="all"
-        className="flex flex-col w-full bg-transparent gap-6 lg:gap-8"
-      >
-        <TabsList className="h-auto pb-0 bg-transparent">
-          <TabsTrigger className="gap-2" value="all">
-            Todas as notificações{" "}
-            <span className="text-gray-500">({totalAll})</span>
-          </TabsTrigger>
-          <TabsTrigger className="gap-2" value="unreads" disabled={totalUnread === 0}>
-            Não lidas{" "}
-            <span className="text-gray-500">({totalUnread})</span>
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="all">
-          <NotificationsList
-            pages={allNotifications.data}
-            isFetchingNextPage={allNotifications.isFetchingNextPage}
-            hasNextPage={allNotifications.hasNextPage}
-            fetchNextPage={allNotifications.fetchNextPage}
-          />
-        </TabsContent>
-
-        <TabsContent value="unreads">
-          <NotificationsList
-            pages={unreadNotifications.data}
-            isFetchingNextPage={unreadNotifications.isFetchingNextPage}
-            hasNextPage={unreadNotifications.hasNextPage}
-            fetchNextPage={unreadNotifications.fetchNextPage}
-          />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}
+'use client';
+
+import { Bell, Check, Loader2 } from "lucide-react";
+import { Button } from "../../ui/buttons/Button";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../ui/data-display/Tabs";
+import { useInfiniteMessages, useMarkAllMessagesAsRead } from "../../../modules/users/hooks/messages.hook";
+import NotificationCard from "../../widgets/notifications/NotificationCard";
+import { Toast } from "../../ui/feedback/Toast";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { toast } from "sonner";
+import React from "react";
+
+function NotificationsList({
+  pages,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage,
+}: {
+  pages: ReturnType<typeof useInfiniteMessages>["data"];
+  isFetchingNextPage: boolean;
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
+}) {
+  const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    const nearBottom =
+      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
+    if (!nearBottom) return;
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  };
+
+  return (
+    <div
+      className="flex flex-col border border-gray-200 rounded-lg w-full bg-white max-h-[70vh] overflow-y-auto custom-scrollbar"
+      onScroll={handleScroll}
+    >
+      {notifications.map((notification, index) => (
+        <NotificationCard
+          key={notification.id}
+          icon={<Bell size={20} className="text-pages-600" />}
+          iconBgColor="bg-pages-100"
+          title={notification.subject}
+          description={notification.message}
+          gapPx={16}
+          time={formatDistanceToNow(new Date(notification.datetime_add), {
+            addSuffix: true,
+            locale: ptBR,
+          })}
+          isUnread={notification.status === 1}
+          showBorder={index < notifications.length - 1}
+        />
+      ))}
+      {isFetchingNextPage && (
+        <div className="flex items-center justify-center py-4">
+          <Loader2 size={20} className="animate-spin text-gray-400" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function NotificationPageContent() {
+  const unreadNotifications = useInfiniteMessages({
+    readed: false,
+    type: "notification",
+    order: "desc",
+  });
+  const allNotifications = useInfiniteMessages({
+    type: "notification",
+    order: "desc",
+  });
+
+  const totalAll = allNotifications.data?.pages[0]?.total ?? 0;
+  const totalUnread = unreadNotifications.data?.pages[0]?.total ?? 0;
+
+  const { mutate: markAllAsRead, isPending: isMarkingAll } = useMarkAllMessagesAsRead();
+
+  const handleMarkAllAsRead = () => {
+    markAllAsRead(undefined, {
+      onSuccess: () => {
+        toast.custom((t) => (
+          <Toast variant="success" message="Todas as notificações foram marcadas como lidas" toastId={t} />
+        ));
+      },
+      onError: () => {
+        toast.custom((t) => (
+          <Toast variant="error" message="Erro ao marcar notificações como lidas" toastId={t} />
+        ));
+      },
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6 lg:gap-10 px-4 py-6 lg:px-20 lg:py-14">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex flex-col gap-2">
+          <h1 className="paragraph-xlarge-semibold lg:title-large-semibold text-gray-950">
+            Notificações
+          </h1>
+          <p className="paragraph-medium-regular text-gray-600 hidden lg:block">
+            Tenha controle total sobre páginas, experiências e conversões.
+          </p>
+        </div>
+        <Button
+          variant={"secondary"}
+          className="h-10! lg:h-12! shrink-0"
+          onClick={handleMarkAllAsRead}
+          disabled={isMarkingAll || totalUnread === 0}
+        >
+          {isMarkingAll ? <Loader2 size={20} className="animate-spin" /> : <Check size={20} />}
+          <span className="lg:block hidden">Marcar todos como lidos</span>
+          <span className="lg:hidden">Marcar como lidos</span>
+        </Button>
+      </div>
+      <Tabs
+        defaultValue="all"
+        className="flex flex-col w-full bg-transparent gap-6 lg:gap-8"
+      >
+        <TabsList className="h-auto pb-0 bg-transparent">
+          <TabsTrigger className="gap-2" value="all">
+            Todas as notificações{" "}
+            <span className="text-gray-500">({totalAll})</span>
+          </TabsTrigger>
+          <TabsTrigger className="gap-2" value="unreads" disabled={totalUnread === 0}>
+            Não lidas{" "}
+            <span className="text-gray-500">({totalUnread})</span>
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="all">
+          <NotificationsList
+            pages={allNotifications.data}
+            isFetchingNextPage={allNotifications.isFetchingNextPage}
+            hasNextPage={allNotifications.hasNextPage}
+            fetchNextPage={allNotifications.fetchNextPage}
+          />
+        </TabsContent>
+
+        <TabsContent value="unreads">
+          <NotificationsList
+            pages={unreadNotifications.data}
+            isFetchingNextPage={unreadNotifications.isFetchingNextPage}
+            hasNextPage={unreadNotifications.hasNextPage}
+            fetchNextPage={unreadNotifications.fetchNextPage}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}