@greatapps/common 1.1.782 → 1.1.785

package/src/components/layouts/AppMobileNavBar.tsx

@@ -2,10 +2,8 @@
 
 import { ReactNode } from "react";
 import Image from "next/image";
-import { useTranslations } from "next-intl";
 import { IconMenu2, IconX } from "@tabler/icons-react";
 import { ProfilePopover } from "./ProfilePopover";
-import { GreatDomainIcon } from "./GreatDomainIcon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
 import {
@@ -17,13 +15,11 @@ import type { ProfileMenuItem } from "./ProfilePopover";
 
 export interface AppMobileNavBarProps {
   /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages" | "gdomain";
+  activeApp?: "gapps" | "gpages";
   /** Called when the GreatApps logo is clicked */
   onLogoClick?: () => void;
   /** Called when the app icon (e.g. GreatPages) is clicked */
   onAppIconClick?: () => void;
-  /** Called when the GreatDomain icon is clicked; without it the icon is not rendered (app flag) */
-  onDomainIconClick?: () => void;
   /** Extra slot rendered after the app icon (e.g. project selector) */
   extraLeftSlot?: ReactNode;
   menuItems?: ProfileMenuItem[];
@@ -34,12 +30,10 @@ export function AppMobileNavBar({
   activeApp,
   onLogoClick,
   onAppIconClick,
-  onDomainIconClick,
   extraLeftSlot,
   menuItems = [],
   showMenuToggle = true,
 }: AppMobileNavBarProps) {
-  const translate = useTranslations();
   const { isOpen, toggle } = useMobileNavbarSheet();
   const { whitelabel } = useWhitelabel();
   const isDefaultWl = useIsDefaultWhitelabel();
@@ -48,7 +42,6 @@ export function AppMobileNavBar({
 
   const isGappsActive = activeApp === "gapps";
   const isGpagesActive = activeApp === "gpages";
-  const isGdomainActive = activeApp === "gdomain";
 
   const wlIcon = whitelabel?.secondary_logo ? (
     <Image
@@ -87,9 +80,9 @@ export function AppMobileNavBar({
 
   return (
     <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
-      <div className="flex items-center gap-1.5 min-w-0">
+      <div className="flex items-center gap-1.5">
         {/* GreatApps logo */}
-        <div className="relative shrink-0">
+        <div className="relative">
           <Tooltip>
             <TooltipTrigger asChild>
               <div
@@ -126,7 +119,7 @@ export function AppMobileNavBar({
         </div>
 
         {/* GreatPages icon */}
-        <div className="relative shrink-0">
+        <div className="relative">
           <Tooltip>
             <TooltipTrigger asChild>
               <div
@@ -194,86 +187,9 @@ export function AppMobileNavBar({
           />
         </div>
 
-        {/* GreatDomain icon */}
-        {onDomainIconClick ? (
-          <div className="relative shrink-0">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div
-                  aria-label={
-                    isDefaultWl
-                      ? translate("common.layout.navbar.greatDomain")
-                      : translate("common.layout.navbar.domains")
-                  }
-                  className={cn(
-                    "size-10 rounded-[10px] flex items-center justify-center border-2 ring-2 transition-colors duration-300",
-                    isGdomainActive
-                      ? isDefaultWl
-                        ? "bg-[#EDE9FE] border-white ring-[#C092FF]"
-                        : "border-white ring-transparent"
-                      : isDefaultWl
-                        ? "hover:bg-gray-100 border-transparent ring-transparent"
-                        : "border-transparent ring-transparent",
-                    "cursor-pointer",
-                  )}
-                  style={
-                    !isDefaultWl
-                      ? {
-                          backgroundColor: primaryColor,
-                          boxShadow: isGdomainActive
-                            ? `0 0 0 2px ${primaryColor}40`
-                            : undefined,
-                          opacity: !isGdomainActive ? 0.2 : undefined,
-                        }
-                      : undefined
-                  }
-                  onClick={onDomainIconClick}
-                >
-                  {isDefaultWl ? (
-                    <GreatDomainIcon active={isGdomainActive} />
-                  ) : (
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="white"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
-                      <path d="M3.6 9h16.8" />
-                      <path d="M3.6 15h16.8" />
-                      <path d="M11.5 3a17 17 0 0 0 0 18" />
-                      <path d="M12.5 3a17 17 0 0 1 0 18" />
-                    </svg>
-                  )}
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                {isDefaultWl
-                  ? translate("common.layout.navbar.greatDomain")
-                  : translate("common.layout.navbar.domains")}
-              </TooltipContent>
-            </Tooltip>
-            <div
-              className={cn(
-                "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300",
-                isDefaultWl ? "bg-[#984DFF]" : "",
-                isGdomainActive ? "opacity-100" : "opacity-0",
-              )}
-              style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-            />
-          </div>
-        ) : null}
-
-        {extraLeftSlot ? (
-          <div className="min-w-0 shrink [&>*]:max-w-full">{extraLeftSlot}</div>
-        ) : null}
+        {extraLeftSlot}
       </div>
-      <div className="flex items-center gap-1.5 shrink-0">
+      <div className="flex items-center gap-1.5">
         <ProfilePopover
           side="bottom"
           align="end"

package/src/components/layouts/AppNavBar.tsx

@@ -8,10 +8,8 @@ import type { ProfileMenuItem } from "./ProfilePopover";
 export interface AppNavBarProps {
   logoHref: string;
   appIconHref: string;
-  /** Sem href o ícone do GreatDomain não é renderizado: é a flag do app. */
-  domainIconHref?: string;
   /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages" | "gdomain";
+  activeApp?: "gapps" | "gpages";
   showExpandButton?: boolean;
   onExpandClick?: () => void;
   menuItems?: ProfileMenuItem[];
@@ -21,7 +19,6 @@ export interface AppNavBarProps {
 export function AppNavBar({
   logoHref,
   appIconHref,
-  domainIconHref,
   activeApp,
   showExpandButton = false,
   onExpandClick,
@@ -32,7 +29,6 @@ export function AppNavBar({
     <NavBar
       logoHref={logoHref}
       appIconHref={appIconHref}
-      domainIconHref={domainIconHref}
       activeApp={activeApp}
       showExpandButton={showExpandButton}
       onExpandClick={onExpandClick}

package/src/components/layouts/NavBar.tsx

@@ -6,7 +6,6 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Separator } from "../ui/data-display/Separator";
-import { GreatDomainIcon } from "./GreatDomainIcon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import {
   useDesktopSidebarStore,
@@ -21,9 +20,7 @@ import { cn } from "../../infra/utils/clsx";
 type NavBarProps = {
   logoHref: string;
   appIconHref: string;
-  /** Sem href o ícone do GreatDomain não é renderizado: é a flag do app. */
-  domainIconHref?: string;
-  activeApp?: "gapps" | "gpages" | "gdomain";
+  activeApp?: "gapps" | "gpages";
   showExpandButton?: boolean;
   onExpandClick?: () => void;
   children?: React.ReactNode;
@@ -33,7 +30,6 @@ type NavBarProps = {
 function NavBar({
   logoHref,
   appIconHref,
-  domainIconHref,
   activeApp,
   showExpandButton = false,
   onExpandClick,
@@ -134,9 +130,7 @@ function NavBar({
                   <IconChevronRight size={16} className="text-gray-500" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">
-                {translate("common.layout.navbar.expandMenu")}
-              </TooltipContent>
+              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
             </Tooltip>
           )}
           {/* Desktop expand button */}
@@ -150,164 +144,78 @@ function NavBar({
                   <IconChevronRight size={16} className="text-gray-500" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">
-                {translate("common.layout.navbar.expandMenu")}
-              </TooltipContent>
+              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
             </Tooltip>
           )}
         </div>
 
-        {/* Ícones de app — 8px entre eles (Figma 5929:2676) */}
-        <div className="flex flex-col gap-2 items-center">
-          {/* GreatPages icon */}
-          <div className="relative">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  href={appIconHref}
-                  className={cn(
-                    "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
-                    activeApp === "gpages"
-                      ? isDefaultWl
-                        ? "bg-cyan-100 border-white ring-cyan-300"
-                        : "border-white ring-transparent"
-                      : isDefaultWl
-                        ? "hover:bg-gray-100 border-transparent ring-transparent"
-                        : "border-transparent ring-transparent",
-                  )}
-                  style={
-                    !isDefaultWl
-                      ? {
-                          backgroundColor: primaryColor,
-                          boxShadow:
-                            activeApp === "gpages"
-                              ? `0 0 0 2px ${primaryColor}40`
-                              : undefined,
-                          opacity: activeApp !== "gpages" ? 0.2 : undefined,
-                        }
-                      : undefined
-                  }
-                >
-                  {isDefaultWl ? (
-                    <Image
-                      src="/icons/icon-navbar.svg"
-                      alt="GreatPages"
-                      width={24}
-                      height={24}
-                    />
-                  ) : (
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="white"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path d="M4 8h16" />
-                      <path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" />
-                      <path d="M8 4v4" />
-                    </svg>
-                  )}
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right">
-                {isDefaultWl
-                  ? translate("common.layout.navbar.greatPages")
-                  : translate("common.layout.navbar.pages")}
-              </TooltipContent>
-            </Tooltip>
-            <div
-              className={cn(
-                "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
-                isDefaultWl ? "bg-cyan-300" : "",
-                activeApp === "gpages" ? "opacity-100" : "opacity-0",
-              )}
-              style={
-                !isDefaultWl ? { backgroundColor: primaryColor } : undefined
-              }
-            />
-          </div>
-
-          {/* GreatDomain icon */}
-          {domainIconHref ? (
-            <div className="relative">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Link
-                    href={domainIconHref}
-                    aria-label={
-                      isDefaultWl
-                        ? translate("common.layout.navbar.greatDomain")
-                        : translate("common.layout.navbar.domains")
-                    }
-                    className={cn(
-                      "size-10 rounded-[10px] cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
-                      activeApp === "gdomain"
-                        ? isDefaultWl
-                          ? "bg-[#EDE9FE] border-white ring-[#C092FF]"
-                          : "border-white ring-transparent"
-                        : isDefaultWl
-                          ? "hover:bg-gray-100 border-transparent ring-transparent"
-                          : "border-transparent ring-transparent",
-                    )}
-                    style={
-                      !isDefaultWl
-                        ? {
-                            backgroundColor: primaryColor,
-                            boxShadow:
-                              activeApp === "gdomain"
-                                ? `0 0 0 2px ${primaryColor}40`
-                                : undefined,
-                            opacity: activeApp !== "gdomain" ? 0.2 : undefined,
-                          }
-                        : undefined
-                    }
-                  >
-                    {isDefaultWl ? (
-                      <GreatDomainIcon active={activeApp === "gdomain"} />
-                    ) : (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="white"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      >
-                        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
-                        <path d="M3.6 9h16.8" />
-                        <path d="M3.6 15h16.8" />
-                        <path d="M11.5 3a17 17 0 0 0 0 18" />
-                        <path d="M12.5 3a17 17 0 0 1 0 18" />
-                      </svg>
-                    )}
-                  </Link>
-                </TooltipTrigger>
-                <TooltipContent side="right">
-                  {isDefaultWl
-                    ? translate("common.layout.navbar.greatDomain")
-                    : translate("common.layout.navbar.domains")}
-                </TooltipContent>
-              </Tooltip>
-              <div
+        {/* GreatPages icon */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Link
+                href={appIconHref}
                 className={cn(
-                  "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
-                  isDefaultWl ? "bg-[#984DFF]" : "",
-                  activeApp === "gdomain" ? "opacity-100" : "opacity-0",
+                  "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
+                  activeApp === "gpages"
+                    ? isDefaultWl
+                      ? "bg-cyan-100 border-white ring-cyan-300"
+                      : "border-white ring-transparent"
+                    : isDefaultWl
+                      ? "hover:bg-gray-100 border-transparent ring-transparent"
+                      : "border-transparent ring-transparent",
                 )}
                 style={
-                  !isDefaultWl ? { backgroundColor: primaryColor } : undefined
+                  !isDefaultWl
+                    ? {
+                        backgroundColor: primaryColor,
+                        boxShadow:
+                          activeApp === "gpages"
+                            ? `0 0 0 2px ${primaryColor}40`
+                            : undefined,
+                        opacity: activeApp !== "gpages" ? 0.2 : undefined,
+                      }
+                    : undefined
                 }
-              />
-            </div>
-          ) : null}
+              >
+                {isDefaultWl ? (
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                ) : (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="white"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M4 8h16" />
+                    <path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" />
+                    <path d="M8 4v4" />
+                  </svg>
+                )}
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {isDefaultWl ? translate('common.layout.navbar.greatPages') : translate('common.layout.navbar.pages')}
+            </TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+              isDefaultWl ? "bg-cyan-300" : "",
+              activeApp === "gpages" ? "opacity-100" : "opacity-0",
+            )}
+            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
+          />
         </div>
       </div>
 

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

@@ -87,6 +87,15 @@ export default function AddCardModal() {
   const [isAuthenticating, setIsAuthenticating] = useState(false);
 
   const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;
+  /* `set_default` continua true por omissão — todo chamador que só quer cadastrar um cartão segue
+   * com o comportamento de sempre. Quem passa `false` é quem vai perguntar ao usuário, logo depois
+   * do cadastro, se a assinatura deve migrar para este cartão.
+   *
+   * Sem esse controle a pergunta seria decorativa: o backend, ao receber `set_default: true`, já
+   * grava o padrão do customer E reaponta as assinaturas cobráveis (`#propagateDefaultPm` em
+   * cards/services.js), então quando o modal abrisse a troca já teria acontecido e "Recusar" não
+   * teria nada para recusar. */
+  const setAsDefault = modalData.setAsDefault !== false;
 
   const createSetupIntentMutation = useCreateSetupIntent();
   const createCardMutation = useCreateCard();
@@ -232,7 +241,7 @@ export default function AddCardModal() {
       const cardResult = await createCardMutation.mutateAsync({
         setup_intent_id: intent.setup_intent_id,
         name: data.name,
-        set_default: true,
+        set_default: setAsDefault,
         ...(isInternational
           ? {}
           : {
@@ -250,6 +259,11 @@ export default function AddCardModal() {
         country: data.country,
       });
 
+      /* Fecha ANTES de avisar quem chamou. `closeModal()` remove o topo da pilha do
+       * useModalManager, então um modal aberto de dentro do `onCardAdded` seria justamente o topo
+       * e sairia junto — abriria e fecharia no mesmo tick, sem o usuário ver nada. */
+      handleClose();
+
       if (cardResult.success && cardResult.data?.id != null) {
         onCardAdded?.(cardResult.data.id.toString());
       }
@@ -258,7 +272,6 @@ export default function AddCardModal() {
         (t) => <Toast variant="success" message={translate('common.cards.add.successToast')} toastId={t} />,
         { duration: 5000 }
       );
-      handleClose();
     } catch (error) {
       /* O backend fail-closed devolve a razão exata da recusa (ex.: "CPF do pagador inválido —
        * confira os dígitos verificadores"), e o withAction relança como Error com essa mensagem.

package/src/i18n/messages/en-us.ts

@@ -540,8 +540,6 @@ const messages = {
       expandMenu: 'Expand menu',
       greatPages: 'GreatPages',
       pages: 'Pages',
-      greatDomain: 'GreatDomain',
-      domains: 'Domains',
     },
     profile: {
       usedCredits: 'Credits used',

package/src/i18n/messages/es-es.ts

@@ -541,8 +541,6 @@ const messages = {
       expandMenu: 'Expandir menú',
       greatPages: 'GreatPages',
       pages: 'Páginas',
-      greatDomain: 'GreatDomain',
-      domains: 'Dominios',
     },
     profile: {
       usedCredits: 'Créditos utilizados',

package/src/i18n/messages/pt-br.ts

@@ -620,8 +620,6 @@ const messages = {
       expandMenu: 'Expandir menu',
       greatPages: 'GreatPages',
       pages: 'Páginas',
-      greatDomain: 'GreatDomain',
-      domains: 'Domínios',
     },
     profile: {
       usedCredits: 'Créditos usados',

package/src/index.ts

@@ -140,6 +140,7 @@ export type {
   Subscription,
   SubscriptionItem,
   FindSubscriptionsParams,
+  ChargeNowResult,
 } from "./modules/subscriptions/types/subscription.type";
 export {
   SubscriptionSchema,

package/src/modules/plans/hooks/use-plan-by-id.hook.ts

@@ -11,7 +11,7 @@ export function usePlanById(idPlan?: number | string | null) {
   const queryClient = useQueryClient();
   const plansKey = useAuthQueryKey([...PLANS_QUERY_KEY]);
 
-  return useQuery<SuccessResult<Plan>>({
+  return useQuery({
     queryKey: [...plansKey, idPlan],
     queryFn: ({ signal }) =>
       apiFetch<SuccessResult<Plan>>(`/api/plans/${idPlan}`, { signal }),

package/src/modules/subscriptions/actions/update-subscription-payment.action.ts

@@ -5,7 +5,12 @@ import { subscriptionsService } from "../services/subscriptions.service";
 
 export async function updateSubscriptionPaymentAction(
   subscriptionId: number | string,
-  data: { id_card?: string; payment_method_id?: string; payment_method: number },
+  data: {
+    id_card?: string;
+    payment_method_id?: string;
+    payment_method: number;
+    charge_now?: boolean;
+  },
 ) {
   return safeMutationAction(async () => {
     return subscriptionsService.updateSubscriptionPayment(subscriptionId, data);

package/src/modules/subscriptions/hooks/update-subscription-payment.hook.ts

@@ -3,12 +3,15 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { withAction } from '../../../utils/withAction';
 import { updateSubscriptionPaymentAction } from '../actions/update-subscription-payment.action';
-import { SUBSCRIPTIONS_QUERY_KEY } from '../constants/query-keys.constants';
+import { SUBSCRIPTIONS_QUERY_KEY, CHARGES_QUERY_KEY } from '../constants/query-keys.constants';
 import { useAuthQueryKey } from '../../../hooks/useAuthQueryKey';
+import { CARDS_QUERY_KEY } from '../../cards/hooks/cards.hook';
 
 export function useUpdateSubscriptionPayment() {
   const queryClient = useQueryClient();
   const subscriptionsKey = useAuthQueryKey([...SUBSCRIPTIONS_QUERY_KEY]);
+  const cardsKey = useAuthQueryKey([...CARDS_QUERY_KEY]);
+  const chargesKey = useAuthQueryKey([...CHARGES_QUERY_KEY]);
 
   return useMutation({
     mutationFn: ({
@@ -16,10 +19,25 @@ export function useUpdateSubscriptionPayment() {
       data,
     }: {
       subscriptionId: number | string;
-      data: { id_card?: string; payment_method_id?: string; payment_method: number };
+      data: {
+        id_card?: string;
+        payment_method_id?: string;
+        payment_method: number;
+        charge_now?: boolean;
+      };
     }) => withAction(updateSubscriptionPaymentAction)(subscriptionId, data),
-    onSuccess: () => {
+    /* `onSettled`, e não `onSuccess`, pelo mesmo motivo do irmão `updateSubscriptionPlan`: a troca
+     * é aplicada no backend ANTES do 3DS, então a falha de autenticação também precisa refletir na
+     * tela. */
+    onSettled: () => {
       queryClient.invalidateQueries({ queryKey: subscriptionsKey });
+      /* A troca reaponta o cartão padrão da conta na mesma operação, então sem esta invalidação o
+       * selo "padrão" continuaria no cartão antigo depois de uma troca que já aconteceu. */
+      queryClient.invalidateQueries({ queryKey: cardsKey });
+      /* A operação passou a mutar um TERCEIRO estado: com `charge_now`, ela paga a fatura. A mesma
+       * tela lê isso por `useCharges`, e com `refetchOnWindowFocus: false` nada refaz a busca —
+       * a fatura recém-paga seguiria com selo "pendente" e botão "Pagar". */
+      queryClient.invalidateQueries({ queryKey: chargesKey });
     },
   });
 }