@greatapps/common 1.1.779 → 1.1.781

package/src/components/layouts/NavBar.tsx

@@ -6,6 +6,7 @@ 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,
@@ -20,7 +21,9 @@ import { cn } from "../../infra/utils/clsx";
 type NavBarProps = {
   logoHref: string;
   appIconHref: string;
-  activeApp?: "gapps" | "gpages";
+  /** Sem href o ícone do GreatDomain não é renderizado: é a flag do app. */
+  domainIconHref?: string;
+  activeApp?: "gapps" | "gpages" | "gdomain";
   showExpandButton?: boolean;
   onExpandClick?: () => void;
   children?: React.ReactNode;
@@ -30,6 +33,7 @@ type NavBarProps = {
 function NavBar({
   logoHref,
   appIconHref,
+  domainIconHref,
   activeApp,
   showExpandButton = false,
   onExpandClick,
@@ -130,7 +134,9 @@ 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 */}
@@ -144,78 +150,164 @@ 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>
 
-        {/* GreatPages icon */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href={appIconHref}
+        {/* Í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
                 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",
+                  "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",
                 )}
                 style={
-                  !isDefaultWl
-                    ? {
-                        backgroundColor: primaryColor,
-                        boxShadow:
-                          activeApp === "gpages"
-                            ? `0 0 0 2px ${primaryColor}40`
-                            : undefined,
-                        opacity: activeApp !== "gpages" ? 0.2 : undefined,
-                      }
-                    : undefined
+                  !isDefaultWl ? { backgroundColor: primaryColor } : 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>
+          ) : null}
         </div>
       </div>
 

package/src/hooks/useDomMutationGuardHit.ts

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export type DomMutationGuardHit = {
+  kind: 'removeChild' | 'insertBefore';
+  language: string;
+  languages: string;
+  documentLang: string;
+  translatedNodes: number;
+  path: string;
+}
+
+/**
+ * Reporta quando a guarda de mutação de DOM (`DOM_MUTATION_GUARD_SCRIPT`) entra em ação.
+ *
+ * Sem isso a correção fica cega: o app para de cair, mas ninguém descobre quantos clientes estão
+ * navegando com o tradutor do navegador ligado. Reporta UMA vez por sessão — o objetivo é medir
+ * quantas sessões são afetadas, não quantas operações de DOM foram salvas.
+ */
+export function useDomMutationGuardHit(onHit: (hit: DomMutationGuardHit) => void): void {
+  const onHitRef = useRef(onHit);
+  onHitRef.current = onHit;
+
+  useEffect(() => {
+    let reported = false;
+
+    const report = (kind: 'removeChild' | 'insertBefore') => {
+      if (reported) return;
+      reported = true;
+      window.__gpDomGuardOnHit = null;
+      onHitRef.current({
+        kind,
+        language: navigator.language,
+        languages: navigator.languages?.join(',') ?? '',
+        documentLang: document.documentElement.lang,
+        // <font> sem classe é a assinatura do Google Tradutor
+        translatedNodes: document.querySelectorAll('font[style]').length,
+        path: window.location.pathname,
+      });
+    };
+
+    // Disparos que aconteceram antes deste componente montar.
+    const already = window.__gpDomGuard;
+    if (already && (already.removeChild > 0 || already.insertBefore > 0)) {
+      report(already.insertBefore > 0 ? 'insertBefore' : 'removeChild');
+      return;
+    }
+
+    window.__gpDomGuardOnHit = report;
+    return () => {
+      window.__gpDomGuardOnHit = null;
+    };
+  }, []);
+}

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

@@ -540,6 +540,8 @@ 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,6 +541,8 @@ 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,6 +620,8 @@ const messages = {
       expandMenu: 'Expandir menu',
       greatPages: 'GreatPages',
       pages: 'Páginas',
+      greatDomain: 'GreatDomain',
+      domains: 'Domínios',
     },
     profile: {
       usedCredits: 'Créditos usados',

package/src/i18n/resolve-locale.ts

@@ -39,14 +39,24 @@ export interface ResolveLocaleOptions {
   userLanguage?: string | null;
 }
 
+function localeFromAcceptLanguage(header: string | null): Locale | null {
+  if (!header) return null;
+  for (const entry of header.split(',')) {
+    const locale = normalizeLocale(entry.split(';')[0].trim());
+    if (locale) return locale;
+  }
+  return null;
+}
+
 /**
  * Resolve o locale da requisição (server-side). Ordem de prioridade:
  *
  * 1. **Whitelabel não-padrão** (`id_wl != 1`) → `pt` (por enquanto, whitelabels não são localizadas).
  * 2. **Preferência da conta** (`userLanguage`), quando fornecida.
  * 3. **Cookie `NEXT_LOCALE`** — cache da preferência ou escolha manual do visitante.
- * 4. **Inferência por país** — JWT (`session.location.country`) ou header `CF-IPCountry`.
- * 5. **Fallback** → {@link DEFAULT_LOCALE}.
+ * 4. **Header `Accept-Language`** do navegador.
+ * 5. **Inferência por país** — JWT (`session.location.country`) ou header `CF-IPCountry`.
+ * 6. **Fallback** → {@link DEFAULT_LOCALE}.
  */
 export async function resolveLocale(options: ResolveLocaleOptions = {}): Promise<Locale> {
   const cookieStore = await cookies();
@@ -67,12 +77,17 @@ export async function resolveLocale(options: ResolveLocaleOptions = {}): Promise
   const fromCookie = normalizeLocale(cookieStore.get(LOCALE_COOKIE)?.value);
   if (fromCookie) return fromCookie;
 
-  // 4. Inferência por país (geo)
   const headersList = await headers();
+
+  // 4. Header Accept-Language do navegador
+  const fromAcceptLanguage = localeFromAcceptLanguage(headersList.get('accept-language'));
+  if (fromAcceptLanguage) return fromAcceptLanguage;
+
+  // 5. Inferência por país (geo)
   const country = jwt?.country ?? headersList.get(GEO_HEADER);
   const fromGeo = localeFromCountry(country);
   if (fromGeo) return fromGeo;
 
-  // 5. Fallback
+  // 6. Fallback
   return DEFAULT_LOCALE;
 }

package/src/index.ts

@@ -515,6 +515,9 @@ export { default as usePasswordVisibility } from "./hooks/usePasswordVisibility"
 export { default as useCountdownTimer } from "./hooks/useCountdownTimer";
 export { default as useIsMobile } from "./hooks/useIsMobile";
 export { useDebounce } from "./hooks/useDebounce";
+export { useDomMutationGuardHit } from "./hooks/useDomMutationGuardHit";
+export type { DomMutationGuardHit } from "./hooks/useDomMutationGuardHit";
+export { DOM_MUTATION_GUARD_SCRIPT } from "./utils/dom/dom-mutation-guard";
 export { useDebouncedEffect } from "./hooks/useDebouncedEffect";
 export { useDebounceState } from "./hooks/useDebounceState";
 

package/src/modules/auth/services/auth.service.ts

@@ -41,6 +41,8 @@ import {
   VerifyEmailResponse,
 } from "../schema";
 import { findWhitelabel } from "../../../server";
+import { resolveLocale } from "../../../i18n/resolve-locale";
+import { localeToApiLanguage } from "../../../utils/intl/locales";
 
 const AUTH_COOKIE_NAME = "greatapps";
 const COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
@@ -295,12 +297,15 @@ class AuthService {
 
     const idPlan = await this.resolvePlanId(data.idPlan);
 
+    const whitelabel = await findWhitelabel().catch(() => null);
+    const language = localeToApiLanguage(await resolveLocale({ whitelabelId: whitelabel?.id ?? null }));
+
     const payload = {
       onboarding_token: data.onboardingToken,
       name: data.user.name,
       bussiness_type: data.businessType ?? 0,
-      language: "pt-br",
-      timezone: "America/Sao_Paulo",
+      language,
+      timezone: clientInfo.timezone,
       currency: "BRL",
       location: clientInfo.location,
       ip: clientInfo.ip,
@@ -317,7 +322,7 @@ class AuthService {
         ddi: data.user.ddi || "55",
         phone: data.user.phone || "",
         profile: "owner",
-        language: "pt-br",
+        language,
       },
       subscription:
         isFreePlan(idPlan)
@@ -411,11 +416,14 @@ class AuthService {
 
     const idPlan = await this.resolvePlanId(data.idPlan);
 
+    const whitelabel = await findWhitelabel().catch(() => null);
+    const language = localeToApiLanguage(await resolveLocale({ whitelabelId: whitelabel?.id ?? null }));
+
     const payload: RegisterApiRequest = {
       name: data.accountName,
       bussiness_type: data.businessType ?? 0,
-      language: "pt-br",
-      timezone: "America/Sao_Paulo",
+      language,
+      timezone: clientInfo.timezone,
       currency: "BRL",
       location: clientInfo.location,
       ip: clientInfo.ip,
@@ -433,7 +441,7 @@ class AuthService {
         phone: data.phone,
         password: data.password,
         profile: "owner",
-        language: "pt-br",
+        language,
       },
       subscription:
         isFreePlan(idPlan)

package/src/utils/dom/dom-mutation-guard.ts

@@ -0,0 +1,46 @@
+/**
+ * Guarda contra mutação externa do DOM (tradutor do navegador, extensões).
+ *
+ * PROBLEMA: o Google Tradutor do Chrome substitui cada text node por `<font><font>…</font></font>`.
+ * O React continua guardando a referência do text node ORIGINAL no fiber. No commit seguinte ele
+ * chama `parent.insertBefore(novo, textNodeAntigo)` ou `parent.removeChild(textNodeAntigo)` — e o nó
+ * já não é mais filho daquele pai. O DOM levanta `NotFoundError`, o erro sobe até o root e o app
+ * inteiro cai no `global-error.tsx` (evento `render.root_crashed` no Sentry).
+ *
+ * Isso derrubou clientes reais em CO/PE/MX/AR/FR (zero casos no BR, onde a página já está no idioma
+ * do usuário e o Chrome não oferece tradução), inclusive em cima da tela de trocar cartão — o cliente
+ * ficava sem conseguir pagar.
+ *
+ * SOLUÇÃO: transformar essas duas operações em no-op quando o nó de referência já não pertence mais
+ * ao pai. O React segue adiante, a página não morre, e o trecho traduzido apenas deixa de receber
+ * aquela atualização pontual (o próximo re-render completo normaliza).
+ *
+ * Precisa rodar ANTES da hidratação, por isso é injetado como `<script>` inline no `<head>` do root
+ * layout em vez de virar um `useEffect`.
+ */
+
+declare global {
+  interface Window {
+    /** Contadores de quantas vezes a guarda entrou em ação nesta sessão. */
+    __gpDomGuard?: { removeChild: number; insertBefore: number };
+    /** Hook opcional preenchido pelo reporter para avisar o Sentry no primeiro disparo. */
+    __gpDomGuardOnHit?: ((kind: 'removeChild' | 'insertBefore') => void) | null;
+  }
+}
+
+export const DOM_MUTATION_GUARD_SCRIPT = `(function(){
+if(typeof Node==="undefined"||!Node.prototype)return;
+if(window.__gpDomGuard)return;
+var s={removeChild:0,insertBefore:0};
+window.__gpDomGuard=s;
+window.__gpDomGuardOnHit=window.__gpDomGuardOnHit||null;
+function hit(k){s[k]++;try{if(window.__gpDomGuardOnHit)window.__gpDomGuardOnHit(k)}catch(e){}}
+var removeChild=Node.prototype.removeChild;
+Node.prototype.removeChild=function(child){
+if(child&&child.parentNode!==this){hit("removeChild");return child}
+return removeChild.apply(this,arguments)};
+var insertBefore=Node.prototype.insertBefore;
+Node.prototype.insertBefore=function(newNode,referenceNode){
+if(referenceNode&&referenceNode.parentNode!==this){hit("insertBefore");return newNode}
+return insertBefore.apply(this,arguments)};
+})();`;

package/src/utils/intl/locales.ts

@@ -1,3 +1,5 @@
+import { Locale } from '../../i18n/config';
+
 export type LocaleOption = {
   value: string;
   label: string;
@@ -14,3 +16,8 @@ export const LANGUAGE_OPTIONS: LocaleOption[] = [
 export function buildLocaleOptions(): LocaleOption[] {
   return LANGUAGE_OPTIONS;
 }
+
+export function localeToApiLanguage(locale: Locale): string {
+  const option = LANGUAGE_OPTIONS.find((o) => o.value === locale);
+  return option?.apiValue ?? locale;
+}