@greatapps/common 1.1.489 → 1.1.490

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -27,7 +27,8 @@ export default function ConfigurationsMyAccountModal() {
   const { hasActiveSubscription } = config;
 
   const { user } = useAuth();
-  const isOwnerOrAdmin = user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;
+  const isOwner = user?.profile === UserProfile.owner;
+
   const isMobile = useIsMobile();
   const { activeSection, setActiveSection } = useConfigurationsModal({
     isOpen: open,
@@ -109,7 +110,7 @@ export default function ConfigurationsMyAccountModal() {
                 <span className="paragraph-small-medium">Preferências</span>
               </TabsTrigger>
 
-              {isOwnerOrAdmin && (
+              {isOwner && (
                 <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
                   <IconLock size={20} className="shrink-0" />
                   <span className="paragraph-small-medium">Segurança</span>
@@ -123,7 +124,7 @@ export default function ConfigurationsMyAccountModal() {
               <PreferencesSection onClose={close} />
             </TabsContent>
 
-            {isOwnerOrAdmin && (
+            {isOwner && (
               <>
                 <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
                   <SecuritySection

package/src/components/account/sections/ChangeEmailModal.tsx

@@ -9,6 +9,7 @@ import { FormField } from '../../ui/form/FormField';
 import { formatTimer } from '../../../utils/format/masks';
 import { OTP_CODE_LENGTH } from '../../../utils/validators/account';
 import { useAuth } from '../../../providers/auth.provider';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
 import { confirmEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';
 import useChangeEmailForm from '../hooks/useChangeEmailForm';
@@ -21,6 +22,7 @@ interface ChangeEmailModalProps {
 
 export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
   const { user } = useAuth();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const invalidateUser = useInvalidateUser();
 
   const {
@@ -117,7 +119,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
           </>
         )}
 
-        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-cyan-300`} />
+        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 ${isDefaultWl ? 'bg-cyan-300' : 'bg-zinc-300'}`} />
 
         {showVerification ? (
           <form

package/src/components/account/sections/ChangePhoneModal.tsx

@@ -9,6 +9,7 @@ import PhoneInput from '../../ui/form/PhoneInput';
 import { formatTimer, formatPhone } from '../../../utils/format/masks';
 import { OTP_CODE_LENGTH } from '../../../utils/validators/account';
 import { useAuth } from '../../../providers/auth.provider';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
 import { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
 import useChangePhoneForm from '../hooks/useChangePhoneForm';
@@ -21,6 +22,7 @@ interface ChangePhoneModalProps {
 
 export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
   const { user } = useAuth();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const invalidateUser = useInvalidateUser();
 
   const hasExistingPhone = !!user?.phone;
@@ -134,7 +136,7 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
           </>
         )}
 
-        <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 bg-cyan-300`} />
+        <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 ${isDefaultWl ? 'bg-cyan-300' : 'bg-zinc-300'}`} />
 
         {showVerification ? (
           <form

package/src/components/layouts/AppMobileNavBar.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { IconMenu2, IconX } from "@tabler/icons-react";
 import { ProfilePopover } from "./ProfilePopover";
 import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
+import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import type { ProfileMenuItem } from "./ProfilePopover";
 
 export interface AppMobileNavBarProps {
@@ -26,6 +27,7 @@ export function AppMobileNavBar({
   showMenuToggle = true,
 }: AppMobileNavBarProps) {
   const { isOpen, toggle } = useMobileNavbarSheet();
+  const isDefaultWl = useIsDefaultWhitelabel();
 
   const isGpagesActive = activeApp === "gpages";
 
@@ -36,7 +38,9 @@ export function AppMobileNavBar({
           <div
             className={`size-10 rounded-lg flex items-center justify-center transition-colors ${
               isGpagesActive
-                ? "bg-cyan-100 border-2 border-white ring-2 ring-cyan-300"
+                ? isDefaultWl
+                  ? "bg-cyan-100 border-2 border-white ring-2 ring-cyan-300"
+                  : "border-2 border-white ring-2 ring-zinc-300 bg-zinc-100"
                 : onAppIconClick ? "cursor-pointer hover:bg-gray-100" : ""
             }`}
             onClick={onAppIconClick}

package/src/components/layouts/NavBar.tsx

@@ -6,7 +6,7 @@ import { IconChevronRight } from "@tabler/icons-react";
 import { Separator } from "../ui/data-display/Separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { useDesktopSidebarStore, useDesktopSidebarHydration } from "../../store/useDesktopSidebarStore";
-import { useWhitelabel } from "../../providers/whitelabel.provider";
+import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import { cn } from "../../infra/utils/clsx";
 
 type NavBarProps = {
@@ -32,7 +32,7 @@ function NavBar({
     useDesktopSidebarStore();
   useDesktopSidebarHydration();
   const { whitelabel } = useWhitelabel();
-  const isDefaultWl = !whitelabel || whitelabel.id === 1;
+  const isDefaultWl = useIsDefaultWhitelabel();
   const primaryColor = whitelabel?.general?.primary_color;
   const wlName = whitelabel?.name || 'Great';
 

package/src/components/layouts/NotificationsPopover.tsx

@@ -8,6 +8,7 @@ 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";
 
@@ -24,8 +25,10 @@ function NotificationsPopover({
   side,
   align,
   contentClassName,
-  badgeClassName = "bg-cyan-300",
+  badgeClassName,
 }: NotificationsPopoverProps) {
+  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();
@@ -51,7 +54,7 @@ function NotificationsPopover({
             <span
               className={cn(
                 "absolute top-0.5 right-0.5 size-3.5 rounded-full border-2 border-white",
-                badgeClassName,
+                resolvedBadgeClassName,
               )}
             />
           )}

package/src/components/layouts/ProfilePopover.tsx

@@ -11,7 +11,7 @@ import { NavBarItem } from "./NavBarItem";
 import { UserAvatar } from "../ui/data-display/UserAvatar";
 import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
 import { useAuth } from "../../providers/auth.provider";
-import { useWhitelabelUrls } from "../../providers/whitelabel.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";
@@ -42,6 +42,7 @@ function ProfilePopover({
   const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
     useIaCredits();
   const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const { accountsUrl } = useWhitelabelUrls();
   const router = useRouter();
 
@@ -54,7 +55,7 @@ function ProfilePopover({
   const hasSubscription = !isSubscriptionLoading && subscription !== null;
 
   const isApiPlan = hasSubscription && subscription.id_plan === 411;
-  const shouldShowCredits = hasSubscription && subscription.id_wl === 1 && !isApiPlan;
+  const shouldShowCredits = hasSubscription && isDefaultWl && !isApiPlan;
   const creditsPercentage =
     shouldShowCredits && summary.totalCredits > 0
       ? (summary.usedCredits / summary.totalCredits) * 100

package/src/components/modals/BuyCreditsModal.tsx

@@ -24,6 +24,7 @@ import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-ac
 import { useCalculateSubscription } from '../../modules/subscriptions/hooks/calculate-subscription.hook';
 import { useUpdateSubscriptionPlan } from '../../modules/subscriptions/hooks/update-subscription-plan.hook';
 import { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';
+import { useIsDefaultWhitelabel } from '../../providers/whitelabel.provider';
 import { IconInfoCircle, IconX, IconLoader2 } from '@tabler/icons-react';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useForm } from 'react-hook-form';
@@ -43,6 +44,7 @@ type BuyCreditFormData = z.infer<typeof buyCreditSchema>;
 export default function BuyCreditsModal() {
   const { open, closeModal } = useBuyCreditsModal();
   const { openModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const { data: cardsData } = useCards();
   const { data: subscriptionData } = useActiveSubscription();
   const subscription = subscriptionData?.data?.[0] ?? null;
@@ -279,7 +281,7 @@ export default function BuyCreditsModal() {
               />
 
               {hasChanged && (
-                <div className="flex items-center gap-3 p-4 bg-cyan-50 rounded-lg">
+                <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>
                   <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
                   <span className="paragraph-small-regular text-zinc-950">
                     {isIncreasingCredits

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

@@ -9,6 +9,7 @@ import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
 import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
 import { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';
 import type { CardFormData, StripeElementsStatus } from './CardFormFields';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import { IconLoader2, IconX } from '@tabler/icons-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -23,6 +24,7 @@ const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
 
 export default function AddCardModal() {
   const { activeModal, modalData, closeModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const isOpen = activeModal === 'addCardModal';
   const [currentStep, setCurrentStep] = useState(1);
   const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);
@@ -209,7 +211,7 @@ export default function AddCardModal() {
         {/* Progress bar */}
         <div className="h-1 bg-zinc-100 w-full">
           <div
-            className="h-full bg-cyan-400 transition-all duration-300 ease-in-out"
+            className={`h-full transition-all duration-300 ease-in-out ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`}
             style={{ width: currentStep === 1 ? '50%' : '100%' }}
           />
         </div>

package/src/components/pages/NotFoundPage.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useWhitelabel } from "../../providers/whitelabel.provider";
+import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import { Button } from "../ui/buttons/Button";
 
 function GreatAppsLogo() {
@@ -18,7 +18,7 @@ function GreatAppsLogo() {
 export function NotFoundPage() {
   const router = useRouter();
   const { whitelabel } = useWhitelabel();
-  const isGreatApps = !whitelabel || whitelabel.id === 1;
+  const isGreatApps = useIsDefaultWhitelabel();
   const whitelabelLogo = whitelabel?.logo
     ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.logo}`
     : null;

package/src/components/ui/buttons/Button.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../../infra/utils/clsx"
+import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider"
 
 const buttonVariants = cva(
   "paragraph-small-semibold cursor-pointer flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -15,7 +16,7 @@ const buttonVariants = cva(
           "bg-white text-gray-950 border-gray-200 hover:border-gray-400 border",
         ghost:
           "text-gray-600 hover:bg-accent hover:text-gray-950 dark:hover:bg-accent/50",
-        brand: "bg-cyan-300 hover:bg-cyan-200 text-gray-950",
+        brand: "text-gray-950",
       },
       size: {
         default: "h-12 px-4 py-2 has-[>svg]:px-3",
@@ -43,12 +44,16 @@ function Button({
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
   }) {
+  const isDefaultWl = useIsDefaultWhitelabel();
   const Comp = asChild ? Slot : "button"
 
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(
+        buttonVariants({ variant, size, className }),
+        variant === "brand" && (isDefaultWl ? "bg-cyan-300 hover:bg-cyan-200" : "bg-zinc-300 hover:bg-zinc-200")
+      )}
       {...props}
     />
   )

package/src/components/ui/data-display/PaymentInfoCard.tsx

@@ -7,6 +7,7 @@ import useIsMobile from '../../../hooks/useIsMobile';
 import { useCards } from '../../../modules/cards/hooks/cards.hook';
 import { useCallback, useState } from 'react';
 import { useModalManager } from '../../../store/useModalManager';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import type { Card } from '../../../modules/cards/types';
 
 type PaymentInfoCardProps = {
@@ -26,6 +27,7 @@ export function PaymentInfoCard({
 }: PaymentInfoCardProps) {
   const isMobile = useIsMobile();
   const { openModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
 
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -163,7 +165,11 @@ export function PaymentInfoCard({
             <button
               type="button"
               onClick={onManageCards}
-              className="flex items-center justify-center h-10 px-4 paragraph-small-semibold text-cyan-600 border border-cyan-200 rounded-lg hover:bg-cyan-50 transition-colors cursor-pointer mt-2"
+              className={`flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${
+                isDefaultWl
+                  ? 'text-cyan-600 border border-cyan-200 hover:bg-cyan-50'
+                  : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'
+              }`}
             >
               Gerenciar cartões
             </button>

package/src/components/ui/feedback/DefaultCircularProgress.tsx

@@ -1,9 +1,12 @@
+'use client';
+
 import {
   calculateRadius,
   calculateCircumference,
   calculatePercentage,
   calculateCircularProgressOffset,
 } from "../../../infra/utils/percentage";
+import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
 
 interface CircularProgressProps {
   current: number;
@@ -18,6 +21,7 @@ export default function DefaultCircularProgress({
   size = 62,
   strokeWidth = 3,
 }: CircularProgressProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
   const radius = calculateRadius(size, strokeWidth);
   const circumference = calculateCircumference(radius);
   const percentage = calculatePercentage(current, total);
@@ -46,7 +50,7 @@ export default function DefaultCircularProgress({
           cx={size / 2}
           cy={size / 2}
           r={radius}
-          stroke="var(--color-cyan-300)"
+          stroke={isDefaultWl ? "var(--color-cyan-300)" : "var(--color-zinc-300)"}
           strokeWidth={strokeWidth}
           fill="none"
           strokeDasharray={circumference}

package/src/components/ui/feedback/Toast.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-"use client"
-
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { IconCircleCheck, IconCircleX, IconAlertCircle, IconInfoCircle, IconCircle, IconX } from "@tabler/icons-react"
 import { toast } from "sonner"
 import { cn } from "../../../infra/utils/clsx"
+import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider"
 import { Button } from "../buttons/Button"
 
 const toastVariants = cva(
@@ -35,7 +34,7 @@ const toastIconContainerVariants = cva(
         success: "bg-green-50 text-green-500",
         error: "bg-red-50 text-red-500",
         warning: "bg-yellow-50 text-yellow-400",
-        info: "bg-cyan-50 text-pages-500",
+        info: "",
         default: "bg-gray-50 text-gray-950",
       },
     },
@@ -69,6 +68,7 @@ function Toast({
   className,
   toastId,
 }: ToastProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
   const Icon = variant ? TOAST_ICONS[variant] : null
 
   return (
@@ -77,7 +77,10 @@ function Toast({
         children
       ) : (
         <div className="flex items-center gap-3 flex-1 min-w-0">
-          <div className={cn(toastIconContainerVariants({ variant }))}>
+          <div className={cn(
+            toastIconContainerVariants({ variant }),
+            variant === "info" && (isDefaultWl ? "bg-cyan-50 text-pages-500" : "bg-zinc-50 text-zinc-500")
+          )}>
             {icon || (Icon && <Icon size={16} />)}
           </div>
 

package/src/components/widgets/notifications/NotificationCard.tsx

@@ -1,6 +1,9 @@
+'use client';
+
 import { IconClock } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 import { cn } from '../../../infra/utils/clsx';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 
 type NotificationCardProps = {
   icon: ReactNode;
@@ -27,6 +30,8 @@ export default function NotificationCard({
   className,
   gapPx = 16
 }: NotificationCardProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
+
   return (
     <div
       className={cn(
@@ -60,7 +65,7 @@ export default function NotificationCard({
         {actions && <div className="flex items-center gap-2">{actions}</div>}
       </div>
 
-      {isUnread && <div className="size-2 bg-cyan-400 rounded-full shrink-0 mt-1" />}
+      {isUnread && <div className={`size-2 rounded-full shrink-0 mt-1 ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`} />}
     </div>
   );
 }

package/src/providers/whitelabel.provider.tsx

@@ -43,6 +43,11 @@ export function useWhitelabelStyles() {
   };
 }
 
+export function useIsDefaultWhitelabel(): boolean {
+  const context = useContext(WhitelabelContext);
+  return !context?.whitelabel || context.whitelabel.id === 1;
+}
+
 export function useWhitelabelUrls() {
   const { whitelabel } = useWhitelabel();
   return {