@greatapps/common 1.1.230 → 1.1.232

package/src/components/navigation/subcomponents/ProjectSelector.tsx

@@ -1,149 +1,155 @@
-'use client';
-
-import { useState, useRef, useEffect, RefObject } from 'react';
-import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
-import { useAppNavigationContext } from '../AppNavigationContext';
-import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
-import { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';
-import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
-import { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';
-import type { NavigationProject } from '../types';
-
-export interface ProjectSelectorProps {
-  projects: NavigationProject[];
-  selectedProject: NavigationProject | null;
-  isLoading?: boolean;
-  onSelectProject: (project: NavigationProject) => void;
-  onAddProject: () => void;
-  onManageProjects: () => void;
-}
-
-function ProjectItemSkeleton() {
-  return (
-    <div className="flex items-center gap-2 p-2">
-      <div className="skeleton size-8 rounded-lg shrink-0" />
-      <div className="skeleton h-3.5 w-32 rounded" />
-    </div>
-  );
-}
-
-export function ProjectSelector({
-  projects,
-  selectedProject,
-  isLoading,
-  onSelectProject,
-  onAddProject,
-  onManageProjects,
-}: ProjectSelectorProps) {
-  const { breakpoint } = useAppNavigationContext();
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
-  const titleRef = useRef<HTMLDivElement>(null);
-  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
-
-  useEffect(() => {
-    if (openProjectList && breakpoint === 'mobile') {
-      setActiveSection('projects');
-      clearProjectList();
-    }
-  }, [openProjectList, breakpoint, clearProjectList]);
-
-  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)
-  if (breakpoint === 'desktop' || breakpoint === 'md') {
-    return (
-      <div className="flex items-center justify-between">
-        <ProjectSelectorPopover
-          open={isPopoverOpen}
-          setOpen={setIsPopoverOpen}
-          titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
-          projects={projects}
-          selectedProject={selectedProject}
-          onSelectProject={onSelectProject}
-          onAddProject={onAddProject}
-          onManageProjects={onManageProjects}
-        >
-          <div className="flex items-center gap-2 truncate select-none cursor-pointer" ref={titleRef}>
-            {isLoading ? (
-              <div className="skeleton h-4 w-32 rounded" />
-            ) : (
-              <span className="paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block">
-                {selectedProject?.title}
-              </span>
-            )}
-            <IconChevronDown
-              size={20}
-              className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
-            />
-          </div>
-        </ProjectSelectorPopover>
-        <div className="flex items-center gap-2">
-          <UsersSelectorPopover projectId={selectedProject?.id} />
-        </div>
-      </div>
-    );
-  }
-
-  // Mobile: inline collapsible accordion
-  return (
-    <div className="flex flex-col gap-2.5">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-1">
-          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
-          <IconChevronDown
-            size={20}
-            onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}
-            className={`transition-transform duration-200 cursor-pointer ${
-              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
-            }`}
-          />
-        </div>
-        <UsersSelectorPopover projectId={selectedProject?.id} />
-      </div>
-      {activeSection === 'projects' && (
-        <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
-          <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Projetos</span>
-            <div className="flex items-center gap-1.5">
-              <Button variant="secondary" className="h-8! paragraph-small-semibold text-gray-950" onClick={onAddProject}>
-                <IconPlus size={16} />
-                Adicionar
-              </Button>
-              <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
-                <IconSettings size={18} />
-              </Button>
-            </div>
-          </div>
-          <Command className="gap-2">
-            <CommandInput placeholder="Busque aqui" />
-            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
-              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-              {isLoading ? (
-                <>
-                  <ProjectItemSkeleton />
-                  <ProjectItemSkeleton />
-                </>
-              ) : (
-                projects.map((project) => (
-                  <CommandItem
-                    key={project.id}
-                    value={`${project.title}-${project.id}`}
-                    keywords={[project.title]}
-                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
-                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}
-                  >
-                    <UserAvatar
-                      photo={project.photo}
-                      name={project.title}
-                      size={32}
-                    />
-                    {project.title}
-                  </CommandItem>
-                ))
-              )}
-            </CommandList>
-          </Command>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useRef, useEffect, RefObject } from 'react';
+import { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';
+import { useHasPlanAddon } from '../../../modules/subscriptions/hooks/use-has-plan-addon.hook';
+import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
+import { useAppNavigationContext } from '../AppNavigationContext';
+import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
+import { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';
+import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
+import { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';
+import type { NavigationProject } from '../types';
+
+export interface ProjectSelectorProps {
+  projects: NavigationProject[];
+  selectedProject: NavigationProject | null;
+  isLoading?: boolean;
+  onSelectProject: (project: NavigationProject) => void;
+  onAddProject: () => void;
+  onManageProjects: () => void;
+}
+
+function ProjectItemSkeleton() {
+  return (
+    <div className="flex items-center gap-2 p-2">
+      <div className="skeleton size-8 rounded-lg shrink-0" />
+      <div className="skeleton h-3.5 w-32 rounded" />
+    </div>
+  );
+}
+
+export function ProjectSelector({
+  projects,
+  selectedProject,
+  isLoading,
+  onSelectProject,
+  onAddProject,
+  onManageProjects,
+}: ProjectSelectorProps) {
+  const { breakpoint } = useAppNavigationContext();
+  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
+  const titleRef = useRef<HTMLDivElement>(null);
+  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
+
+  useEffect(() => {
+    if (openProjectList && breakpoint === 'mobile') {
+      setActiveSection('projects');
+      clearProjectList();
+    }
+  }, [openProjectList, breakpoint, clearProjectList]);
+
+  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)
+  if (breakpoint === 'desktop' || breakpoint === 'md') {
+    return (
+      <div className="flex items-center justify-between">
+        <ProjectSelectorPopover
+          open={isPopoverOpen}
+          setOpen={setIsPopoverOpen}
+          titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
+          projects={projects}
+          selectedProject={selectedProject}
+          onSelectProject={onSelectProject}
+          onAddProject={onAddProject}
+          onManageProjects={onManageProjects}
+          canAddProject={canAddProject}
+        >
+          <div className="flex items-center gap-2 truncate select-none cursor-pointer" ref={titleRef}>
+            {isLoading ? (
+              <div className="skeleton h-4 w-32 rounded" />
+            ) : (
+              <span className="paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block">
+                {selectedProject?.title}
+              </span>
+            )}
+            <IconChevronDown
+              size={20}
+              className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
+            />
+          </div>
+        </ProjectSelectorPopover>
+        <div className="flex items-center gap-2">
+          <UsersSelectorPopover projectId={selectedProject?.id} />
+        </div>
+      </div>
+    );
+  }
+
+  // Mobile: inline collapsible accordion
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
+          <IconChevronDown
+            size={20}
+            onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}
+            className={`transition-transform duration-200 cursor-pointer ${
+              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
+            }`}
+          />
+        </div>
+        <UsersSelectorPopover projectId={selectedProject?.id} />
+      </div>
+      {activeSection === 'projects' && (
+        <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">Projetos</span>
+            <div className="flex items-center gap-1.5">
+              {canAddProject && (
+                <Button variant="secondary" className="h-8! paragraph-small-semibold text-gray-950" onClick={onAddProject}>
+                  <IconPlus size={16} />
+                  Adicionar
+                </Button>
+              )}
+              <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
+                <IconSettings size={18} />
+              </Button>
+            </div>
+          </div>
+          <Command className="gap-2">
+            <CommandInput placeholder="Busque aqui" />
+            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
+              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+              {isLoading ? (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              ) : (
+                projects.map((project) => (
+                  <CommandItem
+                    key={project.id}
+                    value={`${project.title}-${project.id}`}
+                    keywords={[project.title]}
+                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
+                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}
+                  >
+                    <UserAvatar
+                      photo={project.photo}
+                      name={project.title}
+                      size={32}
+                    />
+                    {project.title}
+                  </CommandItem>
+                ))
+              )}
+            </CommandList>
+          </Command>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,160 +1,160 @@
-'use client';
-
-import { IconBell, IconCheck, IconLoader2 } from '@tabler/icons-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={<IconBell size={20} className="text-pages-600" />}
-          iconBgColor="bg-pages-100"
-          title={notification.subject}
-          description={notification.message}
-          gapPx={8}
-          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">
-          <IconLoader2 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-8">
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex flex-col gap-2">
-          <h1 className="title-large-semibold text-gray-950">
-            Notificações
-          </h1>
-          <p className="paragraph-small-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 ? <IconLoader2 size={20} className="animate-spin" /> : <IconCheck 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 { IconBell, IconCheck, IconLoader2 } from '@tabler/icons-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={<IconBell size={20} className="text-pages-600" />}
+          iconBgColor="bg-pages-100"
+          title={notification.subject}
+          description={notification.message}
+          gapPx={8}
+          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">
+          <IconLoader2 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-8">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex flex-col gap-2">
+          <h1 className="title-large-semibold text-gray-950">
+            Notificações
+          </h1>
+          <p className="paragraph-small-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 ? <IconLoader2 size={20} className="animate-spin" /> : <IconCheck 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>
+  );
+}