@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/portal/PortalShell.tsx

@@ -0,0 +1,397 @@
+import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+import { LogOut, Menu } from "lucide-react";
+import { usePublicAuth } from "../../../contexts/PublicAuthContext";
+import { useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { usePortalSummary } from "../../headless/portal/usePortal";
+import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "../../headless/dialog";
+import { Loading } from "../Loading";
+import {
+  GROUP_LABEL_KEYS,
+  PORTAL_ITEMS,
+  buildPortalNav,
+  type PortalNavItem,
+  type PortalSection,
+} from "./portalNav";
+import { PortalContext, defaultPortalDate, type PortalContextValue } from "./shared";
+import { PortalPreviewBanner } from "./PortalPreviewBanner";
+import { AppHomeMark } from "../app/AppHomeMark";
+
+/** Tailwind's `lg`: the rail replaces the bottom bar from here up. */
+const BAR_BREAKPOINT = 1024;
+/** The bar's height above the safe area, matching `BarButton`'s min height. */
+const BAR_HEIGHT = 56;
+/**
+ * The "More" sheet is modal, so it covers everything pinned to the screen,
+ * including the site's chat bubble (`AiAgentWidget` defaults to 9999).
+ */
+const SHEET_Z = 10000;
+
+export interface PortalShellProps {
+  /** The section being shown. Drives the active item and keeps it drawn when empty. */
+  section: PortalSection;
+  /** SPA navigation. Pass the host router's; defaults to a full page visit. */
+  navigate?: (href: string) => void;
+  /** Short-date formatter. Defaults to Forge's work-portal date format. */
+  formatDate?: (value: string | number | Date) => string;
+  children: ReactNode;
+}
+
+/**
+ * The client portal's frame (`/i/account/*`).
+ *
+ * A rail on wide screens, grouped into "Your work", "Your library" and
+ * "Account". On a phone, a bottom bar holds Home, the person's main section,
+ * Activity and a "More" sheet with everything else, because a rail would eat
+ * the screen and a scrolling tab strip hides most of what is there.
+ *
+ * Sections the person has nothing in are not drawn (see `buildPortalNav`). A
+ * section with something waiting on them carries a count.
+ *
+ * The portal's Home is its own overview. The app's Home (the creator's start
+ * page, or `/i/app`) is the mark with the app's name, at the top of the rail
+ * and above the page on a phone.
+ */
+export function PortalShell({ section, navigate, formatDate, children }: PortalShellProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { user, logout } = usePublicAuth();
+  const { data: summary } = usePortalSummary();
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  const go = useMemo(
+    () => navigate ?? ((href: string) => typeof window !== "undefined" && window.location.assign(href)),
+    [navigate],
+  );
+  const ctx = useMemo<PortalContextValue>(
+    () => ({
+      navigate: (href) => {
+        setMoreOpen(false);
+        go(href);
+      },
+      formatDate: formatDate ?? defaultPortalDate,
+    }),
+    [go, formatDate],
+  );
+
+  const nav = buildPortalNav(summary, section);
+
+  // Tell anything else pinned to the bottom of the screen (the site's chat
+  // bubble) how tall the bar is, so it sits above it rather than on "More".
+  // Set on the root because those widgets live outside this tree.
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const root = document.documentElement;
+    const narrow = window.matchMedia(`(max-width: ${BAR_BREAKPOINT - 1}px)`);
+    const apply = () =>
+      narrow.matches
+        ? root.style.setProperty("--forge-bottom-bar-height", `${BAR_HEIGHT}px`)
+        : root.style.removeProperty("--forge-bottom-bar-height");
+    apply();
+    narrow.addEventListener("change", apply);
+    return () => {
+      narrow.removeEventListener("change", apply);
+      root.style.removeProperty("--forge-bottom-bar-height");
+    };
+  }, []);
+
+  if (!user) return <Loading fullPage />;
+
+  const itemLink = (item: PortalNavItem, variant: "rail" | "sheet") => {
+    const active = item.key === section;
+    const badge = nav.badges[item.key];
+    const style: CSSProperties =
+      variant === "rail"
+        ? {
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            padding: "7px 12px",
+            marginLeft: -12,
+            borderLeft: `3px solid ${active ? t.primary : "transparent"}`,
+            color: active ? t.text : t.muted,
+            fontWeight: active ? 600 : 500,
+            fontSize: 14,
+            textDecoration: "none",
+          }
+        : {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "12px 4px",
+            color: t.text,
+            fontWeight: active ? 600 : 500,
+            fontSize: 16,
+            textDecoration: "none",
+            borderBottom: `1px solid ${t.border}`,
+          };
+    const Icon = item.icon;
+    return (
+      <a
+        key={item.key}
+        href={item.href}
+        data-testid={`portal-nav-${item.key}`}
+        aria-current={active ? "page" : undefined}
+        onClick={(event) => {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          event.preventDefault();
+          ctx.navigate(item.href);
+        }}
+        style={style}
+      >
+        <Icon size={variant === "rail" ? 16 : 18} aria-hidden style={{ flexShrink: 0 }} />
+        <span style={{ flex: 1 }}>{tr(item.labelKey)}</span>
+        {badge ? <Badge count={badge} label={tr("forge.portal_shell.badge_label", { count: String(badge) })} /> : null}
+      </a>
+    );
+  };
+
+  const groupedLinks = (variant: "rail" | "sheet") =>
+    nav.groups.map(({ group, items }) => {
+      const labelKey = GROUP_LABEL_KEYS[group];
+      return (
+        <div key={group} style={{ marginTop: group === "start" ? 0 : 22 }}>
+          {labelKey ? (
+            <p style={{ margin: "0 0 6px", fontSize: 13, color: t.muted, fontWeight: 500 }}>{tr(labelKey)}</p>
+          ) : null}
+          {items.map((item) => itemLink(item, variant))}
+        </div>
+      );
+    });
+
+  const logOut = (
+    <button
+      type="button"
+      onClick={() => logout()}
+      className="fg:flex fg:items-center fg:gap-2.5"
+      style={{
+        marginTop: 22,
+        padding: "7px 0",
+        background: "transparent",
+        border: "none",
+        color: t.muted,
+        fontSize: 14,
+        fontFamily: t.fontFamily,
+        cursor: "pointer",
+      }}
+    >
+      <LogOut size={16} aria-hidden /> {tr("forge.portal_shell.log_out")}
+    </button>
+  );
+
+  // The bottom bar: Home, Messages when the person may message, the lead
+  // section, then Activity if there is still room, and More.
+  const home = PORTAL_ITEMS.find((i) => i.key === "home")!;
+  const activity = PORTAL_ITEMS.find((i) => i.key === "activity")!;
+  const messages = nav.groups.flatMap((g) => g.items).find((i) => i.key === "messages") ?? null;
+  const barItems = [home, messages, nav.primary, messages ? null : activity].filter(
+    (item): item is (typeof PORTAL_ITEMS)[number] => !!item,
+  );
+  const moreBadge = Object.entries(nav.badges)
+    .filter(([key]) => !barItems.some((i) => i.key === key))
+    .reduce((sum, [, n]) => sum + (n ?? 0), 0);
+
+  return (
+    <PortalContext.Provider value={ctx}>
+      <div
+        data-testid="portal-shell"
+        className="fg:flex fg:w-full fg:flex-col fg:lg:flex-row fg:lg:items-start fg:lg:gap-12"
+        style={{ color: t.text, fontFamily: t.fontFamily, paddingInline: 16 }}
+      >
+        <nav
+          aria-label={tr("forge.portal_shell.nav_label")}
+          className="fg:hidden fg:lg:block fg:lg:sticky fg:lg:top-6 fg:w-52 fg:shrink-0"
+        >
+          {/* The way back to the app's Home, which is not the portal's own Home. */}
+          <div style={{ marginBottom: 14 }}>
+            <AppHomeMark go={ctx.navigate} size={32} testId="portal-app-home" withName />
+          </div>
+          <p
+            style={{ margin: "0 0 18px", fontSize: 13, color: t.muted, overflow: "hidden", textOverflow: "ellipsis" }}
+            title={user.email}
+          >
+            {user.email}
+          </p>
+          {groupedLinks("rail")}
+          {logOut}
+        </nav>
+
+        <main className="fg:min-w-0 fg:w-full fg:max-w-3xl fg:flex-1 fg:pb-28 fg:lg:pb-0">
+          {/* On a phone the rail is hidden, so the way back to the app's Home sits above the page. */}
+          <div className="fg:flex fg:lg:hidden" style={{ marginBottom: 12 }}>
+            <AppHomeMark go={ctx.navigate} size={32} testId="portal-app-home-compact" withName />
+          </div>
+          {/* A creator previewing a client: says whose portal this is, that it is
+              read-only and when it ends. Draws nothing in a normal session. */}
+          <PortalPreviewBanner />
+          {children}
+        </main>
+
+        <nav
+          aria-label={tr("forge.portal_shell.nav_label")}
+          className="fg:fixed fg:inset-x-0 fg:bottom-0 fg:z-40 fg:flex fg:lg:hidden"
+          style={{
+            background: t.background,
+            borderTop: `1px solid ${t.border}`,
+            paddingBottom: "env(safe-area-inset-bottom)",
+          }}
+        >
+          {barItems.map((item) => (
+            <BarButton
+              key={item.key}
+              icon={<item.icon size={20} aria-hidden />}
+              label={tr(item.labelKey)}
+              active={item.key === section}
+              badge={nav.badges[item.key]}
+              href={item.href}
+              onGo={ctx.navigate}
+              testId={`portal-bar-${item.key}`}
+            />
+          ))}
+          <BarButton
+            icon={<Menu size={20} aria-hidden />}
+            label={tr("forge.portal_shell.more")}
+            active={!barItems.some((i) => i.key === section)}
+            badge={moreBadge || undefined}
+            onPress={() => setMoreOpen(true)}
+            testId="portal-bar-more"
+          />
+        </nav>
+
+        <DialogRoot open={moreOpen} onOpenChange={setMoreOpen}>
+          <DialogPortal>
+            <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: SHEET_Z }} />
+            <DialogContent
+              aria-describedby={undefined}
+              style={{
+                position: "fixed",
+                insetInline: 0,
+                bottom: 0,
+                zIndex: SHEET_Z + 1,
+                maxHeight: "85dvh",
+                overflowY: "auto",
+                background: t.background,
+                color: t.text,
+                fontFamily: t.fontFamily,
+                borderTopLeftRadius: Math.max(t.cornerRadius, 12),
+                borderTopRightRadius: Math.max(t.cornerRadius, 12),
+                padding: "20px 20px calc(20px + env(safe-area-inset-bottom))",
+              }}
+            >
+              <DialogTitle style={{ margin: "0 0 12px", fontSize: 18, fontWeight: 600, fontFamily: t.headingFontFamily }}>
+                {tr("forge.portal_shell.more_title")}
+              </DialogTitle>
+              {groupedLinks("sheet")}
+              {logOut}
+            </DialogContent>
+          </DialogPortal>
+        </DialogRoot>
+      </div>
+    </PortalContext.Provider>
+  );
+}
+
+function Badge({ count, label }: { count: number; label: string }) {
+  const t = useThemeTokens();
+  return (
+    <span
+      aria-label={label}
+      style={{
+        minWidth: 20,
+        height: 20,
+        padding: "0 6px",
+        borderRadius: 10,
+        background: t.primary,
+        color: t.textPrimary,
+        fontSize: 12,
+        fontWeight: 700,
+        lineHeight: "20px",
+        textAlign: "center",
+      }}
+    >
+      {count}
+    </span>
+  );
+}
+
+function BarButton({
+  icon,
+  label,
+  active,
+  badge,
+  href,
+  onGo,
+  onPress,
+  testId,
+}: {
+  icon: ReactNode;
+  label: string;
+  active: boolean;
+  badge?: number;
+  href?: string;
+  onGo?: (href: string) => void;
+  onPress?: () => void;
+  testId: string;
+}) {
+  const t = useThemeTokens();
+  const style: CSSProperties = {
+    position: "relative",
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 3,
+    padding: "9px 4px 8px",
+    minHeight: BAR_HEIGHT,
+    background: "transparent",
+    border: "none",
+    color: active ? t.primary : t.muted,
+    fontFamily: t.fontFamily,
+    fontSize: 11,
+    fontWeight: active ? 700 : 500,
+    textDecoration: "none",
+    cursor: "pointer",
+  };
+  const content = (
+    <>
+      {icon}
+      <span>{label}</span>
+      {badge ? (
+        <span
+          aria-hidden
+          style={{
+            position: "absolute",
+            top: 6,
+            left: "calc(50% + 6px)",
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            background: t.primary,
+          }}
+        />
+      ) : null}
+    </>
+  );
+  if (href && onGo) {
+    return (
+      <a
+        href={href}
+        data-testid={testId}
+        aria-current={active ? "page" : undefined}
+        onClick={(event) => {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          event.preventDefault();
+          onGo(href);
+        }}
+        style={style}
+      >
+        {content}
+      </a>
+    );
+  }
+  return (
+    <button type="button" data-testid={testId} onClick={onPress} style={style}>
+      {content}
+    </button>
+  );
+}

package/src/ui/styled/portal/_tests/PortalAppHome.spec.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { PortalShell } from "../PortalShell";
+import { account, get, installAdapter, restoreAdapter, wrapper } from "../../../headless/_tests/communityHarness";
+import { siteApp } from "../../../headless/_tests/siteAppHarness";
+
+/**
+ * The Home rule inside the client portal: the portal's own Home is its
+ * overview, so the way back to the app's Home is the app mark, at the top of
+ * the rail and above the page on a phone. It leads to the creator's start page
+ * when they chose one and to `/i/app` otherwise.
+ */
+
+// jsdom has no matchMedia; the shell asks it whether the phone bar is showing.
+beforeEach(() => {
+  vi.stubGlobal("matchMedia", (query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }));
+});
+afterEach(() => {
+  restoreAdapter();
+  vi.unstubAllGlobals();
+});
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function mount(node: ReactNode) {
+  const Wrapper = wrapper({ community: null, user: account() });
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const summary = {
+  sections: { projects: 1, invoices: 0, documents: 0, bookings: 0, memberships: 0, courses: 0, films: 0, orders: 0, tickets: 0, waitlist: 0, saved: 0, messages: 0, files: 0 },
+  lastActivity: { work: null, library: null },
+  attention: [],
+};
+
+const routes = (app: () => unknown) => [get("/public/websites/app", app), get("/public/portal/summary", () => summary)];
+
+describe("PortalShell and the app's Home", () => {
+  it("leads both marks to the creator's own start page, named for the app", async () => {
+    installAdapter(routes(() => siteApp({ appName: "Northlight", startUrl: "/members", iconUrl: "https://cdn.example/icon.png" })));
+    const navigate = vi.fn();
+    mount(
+      <PortalShell section="home" navigate={navigate}>
+        <p>overview</p>
+      </PortalShell>,
+    );
+
+    const rail = await screen.findByTestId("portal-app-home");
+    const compact = screen.getByTestId("portal-app-home-compact");
+    await waitFor(() => expect(rail.getAttribute("href")).toBe("/members"));
+    expect(compact.getAttribute("href")).toBe("/members");
+    // Named for the app, so it never reads as a second "Home" beside the portal's own.
+    expect(rail.textContent).toBe("Northlight");
+    expect(compact.querySelector("img")?.getAttribute("src")).toBe("https://cdn.example/icon.png");
+    // The portal's own Home is still the overview.
+    expect(screen.getByTestId("portal-bar-home").getAttribute("href")).toBe("/i/account");
+
+    fireEvent.click(compact, { button: 0 });
+    expect(navigate).toHaveBeenCalledWith("/members");
+  });
+
+  it("falls back to /i/app, labelled Home, when the site has no app settings", async () => {
+    installAdapter(
+      routes(() => {
+        throw { status: 404 };
+      }),
+    );
+    mount(
+      <PortalShell section="home">
+        <p>overview</p>
+      </PortalShell>,
+    );
+    const compact = await screen.findByTestId("portal-app-home-compact");
+    expect(compact.getAttribute("href")).toBe("/i/app");
+    expect(compact.getAttribute("aria-label")).toBe("Home");
+    expect(screen.getByTestId("portal-app-home").getAttribute("href")).toBe("/i/app");
+  });
+});

package/src/ui/styled/portal/_tests/PortalFiles.spec.tsx

@@ -0,0 +1,159 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { portalFilesKey, type PortalFile, type PortalFilesPage } from "../../../headless/portal/usePortalFiles";
+import { PortalFiles, formatFileSize } from "../PortalFiles";
+
+/**
+ * The Files page, rendered through `react-dom/server` with the first page
+ * SEEDED into the query cache, so the real `usePortalFiles` (and its key)
+ * stays in the path.
+ */
+
+const PROFILE_ID = "profile-1";
+const ACCOUNT_ID = "account-1";
+
+const member = {
+  id: ACCOUNT_ID,
+  email: "ada@example.com",
+  firstName: "Ada",
+  lastName: "Client",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  membership: null,
+};
+
+const FILES: PortalFile[] = [
+  {
+    id: "att-1",
+    source: "task",
+    title: "cover-art.png",
+    filename: "cover-art.png",
+    mimeType: "image/png",
+    size: 1536,
+    createdAt: "2026-09-30T10:00:00.000Z",
+    projectId: "proj-1",
+    projectName: "Album Mix",
+    open: { kind: "task_attachment", projectId: "proj-1", taskId: "task-1", url: "https://cdn.test/cover-art.png" },
+  },
+  {
+    id: "doc-1",
+    source: "project",
+    title: "Mix Notes",
+    filename: "mix-notes.pdf",
+    mimeType: "application/pdf",
+    size: 2 * 1024 * 1024,
+    createdAt: "2026-09-29T10:00:00.000Z",
+    projectId: "proj-1",
+    projectName: "Album Mix",
+    open: { kind: "project_document", projectId: "proj-1", documentId: "doc-1" },
+  },
+  {
+    id: "rec-1",
+    source: "document",
+    title: "Engagement Letter",
+    filename: "engagement-letter-signed.pdf",
+    mimeType: "application/pdf",
+    size: null,
+    createdAt: "2026-09-28T10:00:00.000Z",
+    projectId: null,
+    projectName: null,
+    open: { kind: "signed_document", token: "tok-abc" },
+  },
+  {
+    id: "inv-1",
+    source: "invoice",
+    title: "INV-1042",
+    filename: "invoice-INV-1042.pdf",
+    mimeType: "application/pdf",
+    size: null,
+    createdAt: "2026-09-27T10:00:00.000Z",
+    projectId: null,
+    projectName: null,
+    open: { kind: "invoice_pdf", invoiceId: "inv-1" },
+  },
+];
+
+function render(page: PortalFilesPage | null): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (page) {
+    queryClient.setQueryData(portalFilesKey(PROFILE_ID, ACCOUNT_ID, "all", 30), { pages: [page], pageParams: [1] });
+  }
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test/" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={{ user: member, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <PortalFiles />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+const rows = (html: string) => html.split('data-testid="portal-file"').slice(1);
+
+describe("PortalFiles", () => {
+  it("renders one row per file, newest first, with its meta and the right action", () => {
+    const html = render({ data: FILES, total: 4, page: 1, pageSize: 30 });
+    const [task, project, signed, invoice] = rows(html);
+    expect(rows(html)).toHaveLength(4);
+
+    expect(task).toContain("cover-art.png");
+    expect(task).toContain("Album Mix");
+    expect(task).toContain("1.5 KB");
+    expect(task).toContain('href="https://cdn.test/cover-art.png"');
+    expect(task).toContain(">Open<");
+
+    // A shared project file is a button: its address is minted on the click.
+    expect(project).toContain("Mix Notes");
+    expect(project).toContain("2.0 MB");
+    expect(project).toMatch(/<button[^>]*data-testid="portal-file-action"/);
+    expect(project).not.toContain("href=");
+
+    expect(signed).toContain("Engagement Letter");
+    expect(signed).toContain('href="http://api.test/public/documents/tok-abc/download"');
+    expect(signed).toContain(">Download<");
+
+    expect(invoice).toContain("Invoice INV-1042");
+    expect(invoice).toContain('href="http://api.test/public/invoices/inv-1/pdf"');
+  });
+
+  it("draws the filter tabs, with All selected", () => {
+    const html = render({ data: FILES, total: 4, page: 1, pageSize: 30 });
+    for (const key of ["all", "project", "task", "document", "invoice"]) {
+      expect(html).toContain(`data-testid="portal-files-filter-${key}"`);
+    }
+    expect(html).toMatch(/aria-selected="true"[^>]*data-testid="portal-files-filter-all"/);
+  });
+
+  it("offers more when the server has more", () => {
+    expect(render({ data: FILES, total: 40, page: 1, pageSize: 30 })).toContain('data-testid="portal-files-more"');
+    expect(render({ data: FILES, total: 4, page: 1, pageSize: 30 })).not.toContain('data-testid="portal-files-more"');
+  });
+
+  it("says what will appear when there are no files at all, without tabs", () => {
+    const html = render({ data: [], total: 0, page: 1, pageSize: 30 });
+    expect(html).toContain('data-testid="portal-empty"');
+    expect(html).toContain("No files yet");
+    expect(html).not.toContain("portal-files-filter-all");
+  });
+
+  it("formats sizes", () => {
+    expect(formatFileSize(null)).toBeNull();
+    expect(formatFileSize(0)).toBeNull();
+    expect(formatFileSize(512)).toBe("512 B");
+    expect(formatFileSize(1536)).toBe("1.5 KB");
+    expect(formatFileSize(50 * 1024 * 1024)).toBe("50 MB");
+  });
+});