@greatapps/common 1.1.695 → 1.1.697

package/src/components/layouts/NotificationsPopover.tsx

@@ -1,120 +1,120 @@
-"use client";
-
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { IconBell } from '@tabler/icons-react';
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Popover } from "../ui/overlay/Popover";
-import { Button } from "../ui/buttons/Button";
-import NotificationCard from "../widgets/notifications/NotificationCard";
-import { cn } from "../../infra/utils/clsx";
-import { useMessages, useMarkAllMessagesAsRead } from "../../modules/users/hooks/messages.hook";
-import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
-import { formatDistanceToNow } from "date-fns";
-import { ptBR } from "date-fns/locale";
-
-export interface NotificationsPopoverProps {
-  onViewAll?: () => void;
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  contentClassName?: string;
-  badgeClassName?: string;
-}
-
-function NotificationsPopover({
-  onViewAll,
-  side,
-  align,
-  contentClassName,
-  badgeClassName,
-}: NotificationsPopoverProps) {
-  const translate = useTranslations();
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? "bg-cyan-300" : "bg-zinc-300");
-  const [open, setOpen] = useState(false);
-  const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });
-  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();
-
-  const messages = messagesData?.data ?? [];
-  const totalUnread = messagesData?.totalUnread ?? 0;
-
-  const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen);
-    if (isOpen && totalUnread > 0) {
-      markAllAsRead();
-    }
-  };
-
-  return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverPrimitive.Trigger className="cursor-pointer">
-        <div
-          className={`relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`}
-        >
-          <IconBell size={20} className="text-gray-500" />
-          {totalUnread > 0 && (
-            <span
-              className={cn(
-                "absolute top-0.5 right-0.5 size-3.5 rounded-full border-2 border-white",
-                resolvedBadgeClassName,
-              )}
-            />
-          )}
-        </div>
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          className={cn(
-            "absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
-            contentClassName,
-          )}
-          side={side}
-          align={align}
-          sideOffset={8}
-        >
-          <span className="paragraph-small-semibold text-gray-950 px-4">
-            {translate('common.notifications.popover.title')}
-          </span>
-
-          {messages.length > 0 ? (
-            messages.map((message, index) => (
-              <NotificationCard
-                key={message.id}
-                icon={<IconBell size={16} />}
-                iconBgColor="bg-gray-100"
-                title={message.subject}
-                time={formatDistanceToNow(new Date(message.datetime_add), {
-                  addSuffix: true,
-                  locale: ptBR,
-                })}
-                gapPx={6}
-                showBorder={index < messages.length - 1}
-              />
-            ))
-          ) : (
-            <div className="flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]">
-              <div className="bg-gray-50 rounded-md p-2.5">
-                <IconBell size={20} color="var(--color-gray-950)" />
-              </div>
-              <span className="paragraph-small-medium text-gray-950">
-                {translate('common.notifications.popover.empty')}
-              </span>
-            </div>
-          )}
-
-          {onViewAll && (
-            <Button
-              variant="secondary"
-              className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
-              onClick={onViewAll}
-            >
-              {translate('common.notifications.popover.viewAll')}
-            </Button>
-          )}
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </Popover>
-  );
-}
-
-export { NotificationsPopover };
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { IconBell } from '@tabler/icons-react';
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+import NotificationCard from "../widgets/notifications/NotificationCard";
+import { cn } from "../../infra/utils/clsx";
+import { useMessages, useMarkAllMessagesAsRead } from "../../modules/users/hooks/messages.hook";
+import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+export interface NotificationsPopoverProps {
+  onViewAll?: () => void;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  contentClassName?: string;
+  badgeClassName?: string;
+}
+
+function NotificationsPopover({
+  onViewAll,
+  side,
+  align,
+  contentClassName,
+  badgeClassName,
+}: NotificationsPopoverProps) {
+  const translate = useTranslations();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? "bg-cyan-300" : "bg-zinc-300");
+  const [open, setOpen] = useState(false);
+  const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });
+  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();
+
+  const messages = messagesData?.data ?? [];
+  const totalUnread = messagesData?.totalUnread ?? 0;
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (isOpen && totalUnread > 0) {
+      markAllAsRead();
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverPrimitive.Trigger className="cursor-pointer">
+        <div
+          className={`relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`}
+        >
+          <IconBell size={20} className="text-gray-500" />
+          {totalUnread > 0 && (
+            <span
+              className={cn(
+                "absolute top-0.5 right-0.5 size-3.5 rounded-full border-2 border-white",
+                resolvedBadgeClassName,
+              )}
+            />
+          )}
+        </div>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          className={cn(
+            "absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
+            contentClassName,
+          )}
+          side={side}
+          align={align}
+          sideOffset={8}
+        >
+          <span className="paragraph-small-semibold text-gray-950 px-4">
+            {translate('common.notifications.popover.title')}
+          </span>
+
+          {messages.length > 0 ? (
+            messages.map((message, index) => (
+              <NotificationCard
+                key={message.id}
+                icon={<IconBell size={16} />}
+                iconBgColor="bg-gray-100"
+                title={message.subject}
+                time={formatDistanceToNow(new Date(message.datetime_add), {
+                  addSuffix: true,
+                  locale: ptBR,
+                })}
+                gapPx={6}
+                showBorder={index < messages.length - 1}
+              />
+            ))
+          ) : (
+            <div className="flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]">
+              <div className="bg-gray-50 rounded-md p-2.5">
+                <IconBell size={20} color="var(--color-gray-950)" />
+              </div>
+              <span className="paragraph-small-medium text-gray-950">
+                {translate('common.notifications.popover.empty')}
+              </span>
+            </div>
+          )}
+
+          {onViewAll && (
+            <Button
+              variant="secondary"
+              className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
+              onClick={onViewAll}
+            >
+              {translate('common.notifications.popover.viewAll')}
+            </Button>
+          )}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </Popover>
+  );
+}
+
+export { NotificationsPopover };

package/src/components/layouts/ProfilePopover.tsx

@@ -1,191 +1,191 @@
-"use client";
-
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Popover } from "../ui/overlay/Popover";
-import { Button } from "../ui/buttons/Button";
-import { Progress } from "../ui/feedback/Progress";
-import { Separator } from "../ui/data-display/Separator";
-import { NavBarItem } from "./NavBarItem";
-import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
-import { useBrandLoadingIcon } from "../../hooks/useBrandLoadingIcon";
-import { useAuth } from "../../providers/auth.provider";
-import { useIsDefaultWhitelabel, useWhitelabelUrls } from "../../providers/whitelabel.provider";
-import { cn } from "../../infra/utils/clsx";
-import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
-import { useBuyCreditsModal } from "../../store/useBuyCreditsModal";
-import { useCreditsDisabledModal } from "../../store/useCreditsDisabledModal";
-
-export interface ProfileMenuItem {
-  icon?: React.ReactNode;
-  label: string;
-  onClick: () => void;
-}
-
-export interface ProfilePopoverProps {
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  contentClassName?: string;
-  menuItems?: ProfileMenuItem[];
-}
-
-function ProfilePopover({
-  side = "top",
-  align = "start",
-  contentClassName = "absolute bottom-2 left-[26px]",
-  menuItems = [],
-}: ProfilePopoverProps) {
-  const translate = useTranslations();
-  const { user, logout } = useAuth();
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
-  const [popoverOpen, setPopoverOpen] = useState(false);
-
-  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
-    useIaCredits();
-  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
-  const { openModal: openCreditsDisabledModal } = useCreditsDisabledModal();
-  const canManage = user?.profile === 'owner' || user?.profile === 'admin';
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const { accountsUrl } = useWhitelabelUrls();
-  const brandLoadingIcon = useBrandLoadingIcon();
-  const router = useRouter();
-
-  const handleLogout = async () => {
-    setPopoverOpen(false);
-    setIsLoggingOut(true);
-    await logout();
-  };
-
-  const hasSubscription = !isSubscriptionLoading && subscription !== null;
-
-  const isApiPlan = hasSubscription && subscription.id_plan === 411;
-  const shouldShowCredits = hasSubscription && isDefaultWl && !isApiPlan;
-  const creditsPercentage =
-    shouldShowCredits && summary.totalCredits > 0
-      ? (summary.usedCredits / summary.totalCredits) * 100
-      : 0;
-
-  return (
-    <>
-      <LoadingOverlay
-        isLoading={isLoggingOut}
-        message={translate('common.layout.profile.loggingOut')}
-        icon={brandLoadingIcon}
-      />
-      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-        <PopoverPrimitive.Trigger className="cursor-pointer">
-          {user && (
-            <UserAvatar
-              key={user.id}
-              photo={user.photo}
-              name={user.name}
-              size={40}
-            />
-          )}
-        </PopoverPrimitive.Trigger>
-
-        <PopoverPrimitive.Portal>
-          <PopoverPrimitive.Content
-            className={cn(
-              "w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
-              contentClassName,
-            )}
-            side={side}
-            align={align}
-            sideOffset={8}
-          >
-            <div className="grid grid-cols-[32px_1fr_auto] items-center gap-3 p-3 w-full">
-              {user && (
-                <UserAvatar
-                  key={user.id}
-                  photo={user.photo}
-                  name={user.name}
-                  size={32}
-                />
-              )}
-
-              <div className="flex flex-col gap-0.5 min-w-0">
-                <span className="paragraph-small-semibold text-gray-950 truncate">
-                  {user?.name || ""}
-                </span>
-                <span className="paragraph-xsmall-medium text-gray-500 truncate">
-                  {user?.email || ""}
-                </span>
-              </div>
-
-              <Button
-                variant="secondary"
-                className="h-8! px-3! paragraph-xsmall-semibold"
-                onClick={() => {
-                  const isSameOrigin = accountsUrl.startsWith(window.location.origin);
-                  if (isSameOrigin) {
-                    setPopoverOpen(false);
-                    router.push(`${window.location.pathname}?openProfile=true`);
-                  } else {
-                    window.location.href = `${accountsUrl}?openProfile=true`;
-                  }
-                }}
-              >
-                {translate('common.actions.edit')}
-              </Button>
-            </div>
-
-            <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
-              {shouldShowCredits && (
-                <div
-                  className={cn(
-                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
-                    "cursor-pointer hover:bg-gray-950/90",
-                  )}
-                  onClick={() => {
-                    setPopoverOpen(false);
-                    if (canManage) {
-                      openBuyCreditsModal();
-                    } else {
-                      openCreditsDisabledModal();
-                    }
-                  }}
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="paragraph-xsmall-semibold text-white truncate">
-                      {translate('common.layout.profile.usedCredits')}
-                    </span>
-                    <span className="paragraph-xsmall-medium text-white/50">
-                      {summary.usedCredits.toLocaleString("pt-BR")}/
-                      {summary.totalCredits.toLocaleString("pt-BR")}
-                    </span>
-                  </div>
-                  <Progress
-                    className="bg-white/10"
-                    indicatorColor="bg-white"
-                    value={creditsPercentage}
-                  />
-                </div>
-              )}
-
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-col">
-                  {menuItems.map((item, index) => (
-                    <NavBarItem
-                      key={index}
-                      icon={item.icon}
-                      label={item.label}
-                      onClick={item.onClick}
-                    />
-                  ))}
-                </div>
-                <Separator />
-                <NavBarItem label={translate('common.layout.profile.logout')} onClick={handleLogout} />
-              </div>
-            </div>
-          </PopoverPrimitive.Content>
-        </PopoverPrimitive.Portal>
-      </Popover>
-    </>
-  );
-}
-
-export { ProfilePopover };
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+import { Progress } from "../ui/feedback/Progress";
+import { Separator } from "../ui/data-display/Separator";
+import { NavBarItem } from "./NavBarItem";
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
+import { useBrandLoadingIcon } from "../../hooks/useBrandLoadingIcon";
+import { useAuth } from "../../providers/auth.provider";
+import { useIsDefaultWhitelabel, useWhitelabelUrls } from "../../providers/whitelabel.provider";
+import { cn } from "../../infra/utils/clsx";
+import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
+import { useBuyCreditsModal } from "../../store/useBuyCreditsModal";
+import { useCreditsDisabledModal } from "../../store/useCreditsDisabledModal";
+
+export interface ProfileMenuItem {
+  icon?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+export interface ProfilePopoverProps {
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  contentClassName?: string;
+  menuItems?: ProfileMenuItem[];
+}
+
+function ProfilePopover({
+  side = "top",
+  align = "start",
+  contentClassName = "absolute bottom-2 left-[26px]",
+  menuItems = [],
+}: ProfilePopoverProps) {
+  const translate = useTranslations();
+  const { user, logout } = useAuth();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
+    useIaCredits();
+  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
+  const { openModal: openCreditsDisabledModal } = useCreditsDisabledModal();
+  const canManage = user?.profile === 'owner' || user?.profile === 'admin';
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const { accountsUrl } = useWhitelabelUrls();
+  const brandLoadingIcon = useBrandLoadingIcon();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    setPopoverOpen(false);
+    setIsLoggingOut(true);
+    await logout();
+  };
+
+  const hasSubscription = !isSubscriptionLoading && subscription !== null;
+
+  const isApiPlan = hasSubscription && subscription.id_plan === 411;
+  const shouldShowCredits = hasSubscription && isDefaultWl && !isApiPlan;
+  const creditsPercentage =
+    shouldShowCredits && summary.totalCredits > 0
+      ? (summary.usedCredits / summary.totalCredits) * 100
+      : 0;
+
+  return (
+    <>
+      <LoadingOverlay
+        isLoading={isLoggingOut}
+        message={translate('common.layout.profile.loggingOut')}
+        icon={brandLoadingIcon}
+      />
+      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+        <PopoverPrimitive.Trigger className="cursor-pointer">
+          {user && (
+            <UserAvatar
+              key={user.id}
+              photo={user.photo}
+              name={user.name}
+              size={40}
+            />
+          )}
+        </PopoverPrimitive.Trigger>
+
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            className={cn(
+              "w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
+              contentClassName,
+            )}
+            side={side}
+            align={align}
+            sideOffset={8}
+          >
+            <div className="grid grid-cols-[32px_1fr_auto] items-center gap-3 p-3 w-full">
+              {user && (
+                <UserAvatar
+                  key={user.id}
+                  photo={user.photo}
+                  name={user.name}
+                  size={32}
+                />
+              )}
+
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="paragraph-small-semibold text-gray-950 truncate">
+                  {user?.name || ""}
+                </span>
+                <span className="paragraph-xsmall-medium text-gray-500 truncate">
+                  {user?.email || ""}
+                </span>
+              </div>
+
+              <Button
+                variant="secondary"
+                className="h-8! px-3! paragraph-xsmall-semibold"
+                onClick={() => {
+                  const isSameOrigin = accountsUrl.startsWith(window.location.origin);
+                  if (isSameOrigin) {
+                    setPopoverOpen(false);
+                    router.push(`${window.location.pathname}?openProfile=true`);
+                  } else {
+                    window.location.href = `${accountsUrl}?openProfile=true`;
+                  }
+                }}
+              >
+                {translate('common.actions.edit')}
+              </Button>
+            </div>
+
+            <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
+              {shouldShowCredits && (
+                <div
+                  className={cn(
+                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
+                    "cursor-pointer hover:bg-gray-950/90",
+                  )}
+                  onClick={() => {
+                    setPopoverOpen(false);
+                    if (canManage) {
+                      openBuyCreditsModal();
+                    } else {
+                      openCreditsDisabledModal();
+                    }
+                  }}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="paragraph-xsmall-semibold text-white truncate">
+                      {translate('common.layout.profile.usedCredits')}
+                    </span>
+                    <span className="paragraph-xsmall-medium text-white/50">
+                      {summary.usedCredits.toLocaleString("pt-BR")}/
+                      {summary.totalCredits.toLocaleString("pt-BR")}
+                    </span>
+                  </div>
+                  <Progress
+                    className="bg-white/10"
+                    indicatorColor="bg-white"
+                    value={creditsPercentage}
+                  />
+                </div>
+              )}
+
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-col">
+                  {menuItems.map((item, index) => (
+                    <NavBarItem
+                      key={index}
+                      icon={item.icon}
+                      label={item.label}
+                      onClick={item.onClick}
+                    />
+                  ))}
+                </div>
+                <Separator />
+                <NavBarItem label={translate('common.layout.profile.logout')} onClick={handleLogout} />
+              </div>
+            </div>
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </Popover>
+    </>
+  );
+}
+
+export { ProfilePopover };