@hed-hog/core 0.0.401 → 0.0.402

package/hedhog/frontend/app/users/simulate-access-dialog.test.tsx.ejs

@@ -24,48 +24,22 @@ vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
 }));
 
-// O Select real é Radix e precisa de APIs de ponteiro que o jsdom não tem. O
-// stub vira um <select> nativo, mesmo padrão de commerce-form-sheet.test.tsx.
-vi.mock('@/components/ui/select', () => ({
-  Select: ({
-    children,
-    value,
-    onValueChange,
-  }: {
-    children: ReactNode;
-    value?: string;
-    onValueChange?: (value: string) => void;
-  }) => (
-    <select
-      aria-label="select-app"
-      value={value}
-      onChange={(event) => onValueChange?.(event.target.value)}
-    >
-      {children}
-    </select>
-  ),
-  SelectContent: ({ children }: { children: ReactNode }) => <>{children}</>,
-  SelectItem: ({ children, value }: { children: ReactNode; value: string }) => (
-    <option value={value}>{children}</option>
-  ),
-  SelectTrigger: ({ children }: { children: ReactNode }) => <>{children}</>,
-  SelectValue: ({ placeholder }: { placeholder?: string }) => (
-    <option value="" disabled>
-      {placeholder ?? 'Selecione'}
-    </option>
-  ),
-}));
-
-// O Dialog real também é Radix (portal + focus trap); aqui só interessa o
+// O Sheet real é Radix (portal + focus trap) e o ResizableSheetContent depende
+// de matchMedia/ResizeObserver, que o jsdom não tem; aqui só interessa o
 // conteúdo renderizado.
-vi.mock('@/components/ui/dialog', () => ({
-  Dialog: ({ children, open }: { children: ReactNode; open?: boolean }) =>
+vi.mock('@/components/ui/sheet', () => ({
+  Sheet: ({ children, open }: { children: ReactNode; open?: boolean }) =>
     open ? <div>{children}</div> : null,
-  DialogContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  DialogDescription: ({ children }: { children: ReactNode }) => <p>{children}</p>,
-  DialogFooter: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  DialogHeader: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  DialogTitle: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
+  SheetDescription: ({ children }: { children: ReactNode }) => <p>{children}</p>,
+  SheetFooter: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  SheetHeader: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  SheetTitle: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
+}));
+
+vi.mock('@/components/ui/resizable-sheet-content', () => ({
+  ResizableSheetContent: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
 }));
 
 import { SimulateAccessDialog } from './simulate-access-dialog';
@@ -87,10 +61,9 @@ const renderDialog = () => {
 };
 
 const chooseApp = async (value: string) => {
-  // Espera a lista de apps chegar: mudar o valor antes de a <option> existir é
-  // um no-op silencioso e o teste passaria a testar nada.
-  await screen.findByText(value);
-  fireEvent.change(screen.getByLabelText('select-app'), { target: { value } });
+  // Espera a lista de apps chegar: clicar antes de o card existir falharia, e o
+  // teste passaria a testar nada.
+  fireEvent.click(await screen.findByRole('radio', { name: new RegExp(`apps.${value}`) }));
 };
 
 describe('SimulateAccessDialog', () => {
@@ -114,10 +87,9 @@ describe('SimulateAccessDialog', () => {
   it('lista apenas os apps que o backend devolve', async () => {
     renderDialog();
 
-    expect(await screen.findByText('admin')).toBeInTheDocument();
-    expect(screen.getByText('class')).toBeInTheDocument();
-    // `training` tem autenticação própria e ficou fora desta fase.
-    expect(screen.queryByText('training')).not.toBeInTheDocument();
+    expect(await screen.findByText('apps.admin')).toBeInTheDocument();
+    expect(screen.getByText('apps.class')).toBeInTheDocument();
+    expect(screen.queryByText('apps.training')).not.toBeInTheDocument();
   });
 
   it('exige escolher o app antes de confirmar', async () => {
@@ -130,7 +102,13 @@ describe('SimulateAccessDialog', () => {
 
   it('abre a aba no gesto do clique, antes do await, e só depois aponta a URL', async () => {
     // Abrir a aba depois do await cai no bloqueador de pop-up de todo navegador.
-    const tab = { location: { href: '' }, close: vi.fn() };
+    // Sem `noopener`: com ele o navegador devolve `null` e a URL iria para a
+    // aba do admin, deixando a nova em branco.
+    const tab = {
+      location: { href: '' },
+      opener: window as Window | null,
+      close: vi.fn(),
+    };
     const openSpy = vi
       .spyOn(window, 'open')
       .mockReturnValue(tab as unknown as Window);
@@ -139,12 +117,13 @@ describe('SimulateAccessDialog', () => {
     await chooseApp('class');
     fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
 
-    expect(openSpy).toHaveBeenCalledWith('', '_blank', 'noopener');
+    expect(openSpy).toHaveBeenCalledWith('', '_blank');
     await waitFor(() =>
       expect(tab.location.href).toBe(
         'https://class.example.com/simulacao#code=abc'
       )
     );
+    expect(tab.opener).toBeNull();
   });
 
   it('envia o alvo, o app e o motivo para o backend', async () => {

package/hedhog/frontend/app/users/simulate-access-dialog.tsx.ejs

@@ -1,32 +1,78 @@
 'use client';
 
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+  Sheet,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
 import { User } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { VenetianMask } from 'lucide-react';
+import {
+  AppWindow,
+  CheckCircle2,
+  GraduationCap,
+  Handshake,
+  LayoutDashboard,
+  LucideIcon,
+  Presentation,
+  VenetianMask,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
 type AppOption = { key: string; url: string };
 
+// O ícone é o do próprio app, servido pela rota de ícone do Next de cada um
+// (`app/icon.*`). O Lucide só aparece se a imagem não carregar.
+const APP_META: Record<string, { iconPath: string; fallback: LucideIcon }> = {
+  admin: { iconPath: '/icon', fallback: LayoutDashboard },
+  class: { iconPath: '/icon.png', fallback: GraduationCap },
+  partners: { iconPath: '/icon.svg', fallback: Handshake },
+  training: { iconPath: '/icon.png', fallback: Presentation },
+};
+
+function resolveUrl(path: string, base: string) {
+  try {
+    return new URL(path, base);
+  } catch {
+    return null;
+  }
+}
+
+function AppIcon({ option }: { option: AppOption }) {
+  const meta = APP_META[option.key];
+  const Fallback = meta?.fallback ?? AppWindow;
+  const src = meta ? resolveUrl(meta.iconPath, option.url)?.href : undefined;
+  const [failed, setFailed] = useState(false);
+
+  if (!src || failed) {
+    return (
+      <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+        <Fallback className="h-5 w-5 text-muted-foreground" />
+      </span>
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt=""
+      className="h-10 w-10 shrink-0 rounded-lg object-contain"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
 export function SimulateAccessDialog({
   open,
   onOpenChange,
@@ -59,6 +105,9 @@ export function SimulateAccessDialog({
 
   const options = apps?.apps ?? [];
 
+  const appLabel = (key: string) =>
+    APP_META[key] ? t(`apps.${key}` as 'apps.admin') : key;
+
   useEffect(() => {
     if (!open) {
       setApp('');
@@ -71,8 +120,10 @@ export function SimulateAccessDialog({
     if (!user || !app) return;
 
     // A aba precisa ser aberta AGORA, no gesto do clique. Abrir depois do await
-    // cai no bloqueador de pop-up de todo navegador.
-    const tab = window.open('', '_blank', 'noopener');
+    // cai no bloqueador de pop-up de todo navegador. Sem `noopener`: com ele o
+    // `window.open` devolve `null` mesmo abrindo a aba, e a URL acabaria na aba
+    // do admin. O vínculo com o admin é cortado à mão antes de navegar.
+    const tab = window.open('', '_blank');
 
     setSubmitting(true);
     try {
@@ -84,6 +135,7 @@ export function SimulateAccessDialog({
       });
 
       if (tab) {
+        tab.opener = null;
         tab.location.href = data.url;
       } else {
         // Pop-up bloqueado apesar do gesto: o código vale 60s, então mandar o
@@ -92,14 +144,15 @@ export function SimulateAccessDialog({
       }
 
       onOpenChange(false);
-    } catch (error: any) {
+    } catch (error) {
       tab?.close();
       // A mensagem do backend é específica (alvo administrador, conta
       // desativada, app sem URL...) e vale mais que um texto genérico.
+      const backendMessage = (
+        error as { response?: { data?: { message?: unknown } } }
+      )?.response?.data?.message;
       const message =
-        typeof error?.response?.data?.message === 'string'
-          ? error.response.data.message
-          : t('startFailure');
+        typeof backendMessage === 'string' ? backendMessage : t('startFailure');
       toast.error(message);
     } finally {
       setSubmitting(false);
@@ -107,35 +160,73 @@ export function SimulateAccessDialog({
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <VenetianMask className="h-4 w-4 text-amber-600" />
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <ResizableSheetContent
+        sheetId="core-users-simulate-access-sheet"
+        defaultWidth={520}
+        minWidth={420}
+        maxWidth={800}
+        className="w-full sm:max-w-xl gap-0"
+      >
+        <SheetHeader className="px-6 pt-6 pb-4">
+          <SheetTitle className="flex items-center gap-2">
+            <VenetianMask className="h-5 w-5 text-amber-600" />
             {t('dialogTitle')}
-          </DialogTitle>
-          <DialogDescription>
+          </SheetTitle>
+          <SheetDescription>
             {t('dialogDescription', { name: user?.name ?? '' })}
-          </DialogDescription>
-        </DialogHeader>
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="w-full border-t" />
 
-        <div className="space-y-4">
+        <div className="flex-1 space-y-6 overflow-y-auto px-6 py-5">
           <div className="space-y-2">
-            <Label htmlFor="impersonation-app">{t('targetApp')}</Label>
-            <Select value={app} onValueChange={setApp} disabled={isLoadingApps}>
-              <SelectTrigger id="impersonation-app" className="w-full">
-                <SelectValue placeholder={t('targetAppPlaceholder')} />
-              </SelectTrigger>
-              <SelectContent>
-                {options.map((option) => (
-                  <SelectItem key={option.key} value={option.key}>
-                    {option.key}
-                  </SelectItem>
+            <Label id="impersonation-app-label">{t('targetApp')}</Label>
+            {isLoadingApps ? (
+              <div className="space-y-2">
+                {[0, 1, 2].map((index) => (
+                  <Skeleton key={index} className="h-[62px] w-full rounded-lg" />
                 ))}
-              </SelectContent>
-            </Select>
-            {!isLoadingApps && options.length === 0 && (
+              </div>
+            ) : options.length === 0 ? (
               <p className="text-xs text-destructive">{t('noAppsConfigured')}</p>
+            ) : (
+              <div
+                role="radiogroup"
+                aria-labelledby="impersonation-app-label"
+                className="space-y-2"
+              >
+                {options.map((option) => {
+                  const selected = option.key === app;
+                  return (
+                    <button
+                      key={option.key}
+                      type="button"
+                      role="radio"
+                      aria-checked={selected}
+                      onClick={() => setApp(option.key)}
+                      className={cn(
+                        'flex w-full cursor-pointer items-center gap-3 rounded-lg border bg-card px-3 py-2.5 text-left transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        selected && 'border-primary bg-primary/5 hover:border-primary'
+                      )}
+                    >
+                      <AppIcon option={option} />
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm font-medium">
+                          {appLabel(option.key)}
+                        </p>
+                        <p className="truncate text-xs text-muted-foreground">
+                          {resolveUrl('/', option.url)?.host ?? option.url}
+                        </p>
+                      </div>
+                      {selected && (
+                        <CheckCircle2 className="h-5 w-5 shrink-0 text-primary" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
             )}
           </div>
 
@@ -156,15 +247,20 @@ export function SimulateAccessDialog({
           </div>
         </div>
 
-        <DialogFooter>
+        <SheetFooter className="border-t px-6">
           <Button variant="outline" onClick={() => onOpenChange(false)}>
             {t('cancel')}
           </Button>
-          <Button onClick={handleConfirm} disabled={!app || submitting}>
-            {submitting ? t('opening') : t('confirm')}
+          <Button
+            onClick={handleConfirm}
+            disabled={!app}
+            loading={submitting}
+            loadingLabel={t('opening')}
+          >
+            {t('confirm')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </SheetFooter>
+      </ResizableSheetContent>
+    </Sheet>
   );
 }

package/hedhog/frontend/messages/en.json

@@ -2626,6 +2626,11 @@
     "testConnectionSuccess": "Connection validated successfully.",
     "testConnectionOkWithInfo": "Connection validated: {info}",
     "testConnectionWarning": "Credentials are valid, but: {warning}",
+    "testConnectionWarningCodes": {
+      "google_oauth_testing": "The OAuth consent screen is in Testing: Google refresh tokens expire after 7 days, so channels must be reconnected every week. Publish the app (In production) to keep them connected.",
+      "youtube_audit_pending": "Until the YouTube API audit is approved for this Google Cloud project, uploaded videos stay private.",
+      "google_business_access_pending": "The Business Profile APIs require approved access (Basic API Access): until Google approves this project the quota is 0 and connections fail."
+    },
     "testConnectionError": "Connection test failed.",
     "testConnectionErrorFallback": "Could not validate the credentials.",
     "testConnectionNotPersisted": "Save the profile to record the result.",
@@ -2671,7 +2676,9 @@
     "fieldWabaId": "WhatsApp Business Account ID (WABA)",
     "fieldVerifyToken": "Webhook Verify Token",
     "fieldGraphApiVersion": "Graph API Version",
-    "fieldLinkedInApiVersion": "LinkedIn API version (YYYYMM)",
+    "fieldLinkedInApiVersion": "LinkedIn API version (YYYYMM)",
+    "fieldXClientId": "Client ID (OAuth 2.0)",
+    "fieldXClientSecret": "Client Secret (OAuth 2.0)",
     "fieldEnvironmentTest": "Test",
     "fieldEnvironmentProduction": "Production",
     "copiedToClipboard": "Copied to clipboard",
@@ -2840,32 +2847,42 @@
     "metaSocialSectionTitle": "Social network connection",
     "metaSocialDescription": "This profile is the HedHog app on Meta. Pages and Instagram accounts are connected per brand, under Social → Brands → Channels.",
     "metaSocialRedirectUriLabel": "OAuth redirect URI",
-    "metaSocialRedirectUriUnavailable": "Set NEXT_PUBLIC_API_BASE_URL to show the URI",
+    "metaSocialRedirectUriUnavailable": "Fill in the API URL setting (api-url) to show the URI",
     "metaSocialStepsTitle": "How to configure it in the Meta dashboard",
     "metaSocialStep1": "Create a Business app and add Facebook Login for Business and the Instagram API with Facebook Login.",
-    "metaSocialStep2": "Create a Login Configuration of type \"User access token\" with the publishing permissions and paste its ID above.",
+    "metaSocialStep2": "Create a Login Configuration of type \"User access token\" with the permissions pages_show_list, business_management, pages_read_engagement, pages_manage_posts, instagram_basic and instagram_content_publish, and paste its ID in the Login Configuration ID field.",
     "metaSocialStep3": "Add the URI above to \"Valid OAuth Redirect URIs\".",
-    "metaSocialStep4": "Until App Review is approved, use Sandbox mode or only the app administrators and testers.",
+    "metaSocialStep4": "In App settings > Basic, fill in the privacy policy, the terms of service and the data deletion instructions URL.",
     "instagramSocialSectionTitle": "Instagram connection",
     "instagramSocialDescription": "This profile is the HedHog app on the Instagram API with Instagram Login. Professional Instagram accounts (Business or Creator) are connected per brand, under Social → Brands → Channels, with or without a Facebook Page.",
     "instagramSocialRedirectUriLabel": "OAuth redirect URI",
-    "instagramSocialRedirectUriUnavailable": "Set NEXT_PUBLIC_API_BASE_URL to show the URI",
+    "instagramSocialRedirectUriUnavailable": "Fill in the API URL setting (api-url) to show the URI",
     "instagramSocialStepsTitle": "How to configure it in the Meta dashboard",
     "instagramSocialStep1": "In the Meta app, add the Instagram product and open \"API setup with Instagram login\".",
     "instagramSocialStep2": "Copy the Instagram app ID and Instagram app secret shown there and paste them above. They are not the Meta app ID and secret.",
     "instagramSocialStep3": "Under \"Set up Instagram business login\" > Business login settings, add the URI above to \"OAuth redirect URIs\" exactly as shown, with no trailing slash.",
     "instagramSocialStep4": "In the same settings, fill in the Deauthorize callback URL and the Data deletion request URL with the page of your privacy instructions.",
-    "instagramSocialStep5": "Until App Review is approved, add the accounts you will connect as Instagram testers of the app, or use Sandbox mode.",
-    "linkedinSocialSectionTitle": "LinkedIn connection",
-    "linkedinSocialDescription": "This profile is the HedHog app on the LinkedIn Community Management API. Company pages are connected per brand, under Social → Brands → Channels, by a member who is an administrator or content administrator of the page.",
-    "linkedinSocialRedirectUriLabel": "Authorized redirect URL",
-    "linkedinSocialRedirectUriUnavailable": "Set NEXT_PUBLIC_API_BASE_URL to show the URL",
-    "linkedinSocialStepsTitle": "How to configure it in the LinkedIn Developer Portal",
-    "linkedinSocialStep1": "Create a dedicated app, with no other products, linked to the company page and verified by a super admin of that LinkedIn Page.",
-    "linkedinSocialStep2": "In the Products tab, request the Community Management API. Access starts in the Development tier.",
-    "linkedinSocialStep3": "In the Auth tab, add the URL above to \"Authorized redirect URLs for your app\" exactly as shown, then copy the Client ID and Primary Client Secret and paste them above.",
-    "linkedinSocialStep4": "Before going to production, request the Standard tier, which requires a screencast of each use case of the app.",
-    "linkedinSocialStep5": "Until the Standard tier is approved, use Sandbox mode.",
+    "instagramSocialStep5": "Until App Review is approved, add the accounts you will connect as Instagram testers of the app and keep the Production mode: Sandbox is a local simulator and is refused in production.",
+    "linkedinSocialSectionTitle": "LinkedIn connection",
+    "linkedinSocialDescription": "This profile is the HedHog app on the LinkedIn Community Management API. Company pages are connected per brand, under Social → Brands → Channels, by a member who is an administrator or content administrator of the page.",
+    "linkedinSocialRedirectUriLabel": "Authorized redirect URL",
+    "linkedinSocialRedirectUriUnavailable": "Fill in the API URL setting (api-url) to show the URL",
+    "linkedinSocialStepsTitle": "How to configure it in the LinkedIn Developer Portal",
+    "linkedinSocialStep1": "Create a dedicated app, with no other products, linked to the company page and verified by a super admin of that LinkedIn Page.",
+    "linkedinSocialStep2": "In the Products tab, request the Community Management API. Access starts in the Development tier.",
+    "linkedinSocialStep3": "In the Auth tab, add the URL above to \"Authorized redirect URLs for your app\" exactly as shown, then copy the Client ID and Primary Client Secret and paste them above.",
+    "linkedinSocialStep4": "Before going to production, request the Standard tier, which requires a screencast of each use case of the app.",
+    "linkedinSocialStep5": "Use the Production mode: it already calls LinkedIn in the Development tier, within its limits. Sandbox is a local simulator and is refused in production.",
+    "xSocialSectionTitle": "X connection",
+    "xSocialSectionDescription": "This profile is the HedHog app on the pay-per-use X API. X accounts are connected per brand, in Social → Brands → Channels, by someone who signs in to X with the brand account.",
+    "xSocialRedirectUriLabel": "Callback URI",
+    "xSocialRedirectUriUnavailable": "Fill in the API URL setting (api-url) to show the URL",
+    "xSocialStepsTitle": "How to set it up in the X Developer Console",
+    "xSocialStep1": "In the Developer Console, create a Project and an App. Under User authentication settings, turn on OAuth 2.0 with the Web App (confidential client) type and the Read and write permissions.",
+    "xSocialStep2": "Register the URL above as the Callback URI, exactly as shown, in every environment.",
+    "xSocialStep3": "Copy the OAuth 2.0 Client ID and Client Secret into the fields above (not the API Key and API Secret).",
+    "xSocialStep4": "Under Billing, buy credits and set a spending limit: the API is pay-per-use (US$ 0.015 per post, US$ 0.20 with a link).",
+    "xSocialStep5": "Use the Production mode to connect real accounts. Sandbox is a local simulator and is refused in production.",
     "fieldOauthAppStatus": "OAuth consent screen status",
     "fieldOauthAppStatusTesting": "Testing (the refresh token expires in 7 days and the channel must be reconnected)",
     "fieldOauthAppStatusProduction": "In production (the refresh token does not expire in 7 days)",
@@ -2873,10 +2890,10 @@
     "youtubeSocialDescription": "This profile is the HedHog project on Google Cloud for YouTube. Channels are connected per brand, under Social → Brands → Channels.",
     "googleBusinessSocialDescription": "This profile is the HedHog project on Google Cloud for Google Business Profile. Locations are connected per brand, under Social → Brands → Channels.",
     "googleSocialRedirectUriLabel": "OAuth authorized redirect URI",
-    "googleSocialRedirectUriUnavailable": "Set NEXT_PUBLIC_API_BASE_URL to show the URI",
+    "googleSocialRedirectUriUnavailable": "Fill in the API URL setting (api-url) to show the URI",
     "googleSocialStepsTitle": "How to configure it in the Google Cloud Console",
     "youtubeSocialStep1": "Create a Google Cloud project just for YouTube and enable the YouTube Data API v3.",
-    "youtubeSocialStep2": "Configure the OAuth consent screen with the youtube.upload and youtube.readonly scopes. Since they are sensitive scopes, the app must pass Google verification before it is published.",
+    "youtubeSocialStep2": "Configure the OAuth consent screen with the youtube.upload, youtube.readonly and youtube.force-ssl scopes (sensitive, they require Google verification before the app is published) and yt-analytics.readonly (non-sensitive).",
     "youtubeSocialStep3": "Create an OAuth client ID of type \"Web application\", add the URI above to \"Authorized redirect URIs\" and paste the Client ID and Client Secret above.",
     "youtubeSocialStep4": "Request the YouTube API compliance audit: until it is approved, every video uploaded by the project stays private.",
     "youtubeSocialStep5": "The default project quota allows about 100 video uploads per day. When it runs out, publishing is rescheduled for after the reset (midnight Pacific Time).",
@@ -2885,7 +2902,10 @@
     "googleBusinessSocialStep3": "Enable the My Business Account Management API, the My Business Business Information API and the Google My Business API. Until access is approved the quota is 0 and every call fails.",
     "googleBusinessSocialStep4": "Configure the OAuth consent screen with the business.manage scope.",
     "googleBusinessSocialStep5": "Create an OAuth client ID of type \"Web application\", add the URI above to \"Authorized redirect URIs\" and paste the Client ID and Client Secret above.",
-    "googleSocialTestingStep": "While the consent screen is in \"Testing\", choose \"Testing\" in the status above and use Sandbox mode to develop without waiting for Google approvals."
+    "googleSocialTestingStep": "While the consent screen is in \"Testing\", choose \"Testing\" in the status above and add the Google accounts that will be connected as test users.",
+    "metaSocialStep5": "Complete Business Verification and request App Review for the permissions. Until it is approved, only the app administrators, developers and testers can connect.",
+    "socialRedirectUriMismatch": "The API URL setting ({setting}) differs from the API this panel uses ({env}). The URI above follows the setting, which is what the backend sends to the network.",
+    "socialGuideLink": "Open the full setup guide"
   },
   "SystemPagesPage": {
     "title": "Pages",
@@ -3301,7 +3321,13 @@
     "redeemInvalidDescription": "This link works only once and expires after a minute. Ask the operator to start a new simulation.",
     "redeemMissingCode": "No simulation code found in the link.",
     "noAdminAccessTitle": "This user has no access to the admin panel",
-    "noAdminAccessDescription": "{name} has no administrative role, so there is nothing to show here. Simulate them in the application they actually use."
+    "noAdminAccessDescription": "{name} has no administrative role, so there is nothing to show here. Simulate them in the application they actually use.",
+    "apps": {
+      "admin": "Hub (administration)",
+      "class": "Hcode Class",
+      "partners": "Partner Portal",
+      "training": "Hcode Training"
+    }
   },
   "MessageTemplatesPage": {
     "title": "Message templates",