@greatapps/common 1.1.219 → 1.1.222

package/src/components/embeds/FrillEmbed.tsx

@@ -1,119 +1,119 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { useAuth } from '../../providers/auth.provider';
-import { useWhitelabel } from '../../providers/whitelabel.provider';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-
-const V4_WHITELABEL_ID = 367568;
-
-const FRILL_SCRIPT_URL = 'https://widget.frill.co/v2/container.js';
-const FRILL_KEY = '2f77f232-a120-438e-8ef6-01912ffd1b99';
-
-const SURVEYS = [{ key: '7f59dbf6-b665-458a-80e2-778de47efe1c' }];
-const WIDGETS = [
-  { key: '4a5ba13b-1150-49fe-aa15-f9a2da0ba909' },
-  { key: '720c0912-e6a4-495c-835e-3ff1f59d6dfc' },
-];
-
-function initFrillLoader() {
-  try {
-    const win = window as any;
-    if (win.Frill) return;
-
-    let counter = 0;
-    const queue: Record<number, any> = {};
-
-    win.Frill = function (action: string, params: any) {
-      let instance: any;
-      const id = counter++;
-      const promise: any = new Promise((resolve, reject) => {
-        queue[id] = {
-          params: [action, params],
-          resolve: (f: any) => {
-            instance = f;
-            resolve(f);
-          },
-          reject,
-        };
-      });
-      promise.destroy = () => {
-        delete queue[id];
-        instance?.destroy();
-      };
-      return promise;
-    };
-    win.Frill.q = queue;
-  } catch {}
-}
-
-function loadFrillScript() {
-  try {
-    if (document.querySelector(`script[src="${FRILL_SCRIPT_URL}"]`)) return;
-    const anchor = document.getElementsByTagName('script')[0];
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.async = true;
-    script.src = FRILL_SCRIPT_URL;
-    anchor?.parentNode?.insertBefore(script, anchor);
-  } catch {}
-}
-
-export function FrillEmbed() {
-  const { user } = useAuth();
-  const { whitelabel } = useWhitelabel();
-  const { data: subscriptionData } = useActiveSubscription();
-  const containerRef = useRef<any>(null);
-
-  const subscription = subscriptionData?.data?.[0] ?? null;
-  const isV4 = whitelabel?.id === V4_WHITELABEL_ID;
-
-  useEffect(() => {
-    if (!user) return;
-
-    try {
-      initFrillLoader();
-
-      if (document.readyState === 'complete' || document.readyState === 'interactive') {
-        loadFrillScript();
-      } else {
-        document.addEventListener('DOMContentLoaded', loadFrillScript);
-      }
-
-      const userData: Record<string, any> = {
-        id: String(user.id ?? ''),
-      };
-      if (user.email) userData.email = user.email;
-      if (user.name || user.last_name) {
-        userData.name = `${user.name ?? ''} ${user.last_name ?? ''}`.trim();
-      }
-      userData.attributes = isV4
-        ? { company: 'V4' }
-        : { profile: user.profile ?? '', plan: subscription?.plan_name ?? '' };
-
-      const config: Record<string, any> = { key: FRILL_KEY, user: userData };
-      if (!isV4) {
-        config.surveys = SURVEYS;
-        config.widgets = WIDGETS;
-      }
-
-      const win = window as any;
-      const containerPromise = win.Frill('container', config);
-      win.Frill('identify', userData);
-
-      containerPromise.then((widget: any) => {
-        containerRef.current = widget;
-      }).catch(() => {});
-    } catch {}
-
-    return () => {
-      try {
-        containerRef.current?.destroy();
-        containerRef.current = null;
-        document.removeEventListener('DOMContentLoaded', loadFrillScript);
-      } catch {}
-    };
-  }, [user, isV4, subscription?.plan_name]);
-
-  return null;
-}
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useAuth } from '../../providers/auth.provider';
+import { useWhitelabel } from '../../providers/whitelabel.provider';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+
+const V4_WHITELABEL_ID = 367568;
+
+const FRILL_SCRIPT_URL = 'https://widget.frill.co/v2/container.js';
+const FRILL_KEY = '2f77f232-a120-438e-8ef6-01912ffd1b99';
+
+const SURVEYS = [{ key: '7f59dbf6-b665-458a-80e2-778de47efe1c' }];
+const WIDGETS = [
+  { key: '4a5ba13b-1150-49fe-aa15-f9a2da0ba909' },
+  { key: '720c0912-e6a4-495c-835e-3ff1f59d6dfc' },
+];
+
+function initFrillLoader() {
+  try {
+    const win = window as any;
+    if (win.Frill) return;
+
+    let counter = 0;
+    const queue: Record<number, any> = {};
+
+    win.Frill = function (action: string, params: any) {
+      let instance: any;
+      const id = counter++;
+      const promise: any = new Promise((resolve, reject) => {
+        queue[id] = {
+          params: [action, params],
+          resolve: (f: any) => {
+            instance = f;
+            resolve(f);
+          },
+          reject,
+        };
+      });
+      promise.destroy = () => {
+        delete queue[id];
+        instance?.destroy();
+      };
+      return promise;
+    };
+    win.Frill.q = queue;
+  } catch {}
+}
+
+function loadFrillScript() {
+  try {
+    if (document.querySelector(`script[src="${FRILL_SCRIPT_URL}"]`)) return;
+    const anchor = document.getElementsByTagName('script')[0];
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = FRILL_SCRIPT_URL;
+    anchor?.parentNode?.insertBefore(script, anchor);
+  } catch {}
+}
+
+export function FrillEmbed() {
+  const { user } = useAuth();
+  const { whitelabel } = useWhitelabel();
+  const { data: subscriptionData } = useActiveSubscription();
+  const containerRef = useRef<any>(null);
+
+  const subscription = subscriptionData?.data?.[0] ?? null;
+  const isV4 = whitelabel?.id === V4_WHITELABEL_ID;
+
+  useEffect(() => {
+    if (!user) return;
+
+    try {
+      initFrillLoader();
+
+      if (document.readyState === 'complete' || document.readyState === 'interactive') {
+        loadFrillScript();
+      } else {
+        document.addEventListener('DOMContentLoaded', loadFrillScript);
+      }
+
+      const userData: Record<string, any> = {
+        id: String(user.id ?? ''),
+      };
+      if (user.email) userData.email = user.email;
+      if (user.name || user.last_name) {
+        userData.name = `${user.name ?? ''} ${user.last_name ?? ''}`.trim();
+      }
+      userData.attributes = isV4
+        ? { company: 'V4' }
+        : { profile: user.profile ?? '', plan: subscription?.plan_name ?? '' };
+
+      const config: Record<string, any> = { key: FRILL_KEY, user: userData };
+      if (!isV4) {
+        config.surveys = SURVEYS;
+        config.widgets = WIDGETS;
+      }
+
+      const win = window as any;
+      const containerPromise = win.Frill('container', config);
+      win.Frill('identify', userData);
+
+      containerPromise.then((widget: any) => {
+        containerRef.current = widget;
+      }).catch(() => {});
+    } catch {}
+
+    return () => {
+      try {
+        containerRef.current?.destroy();
+        containerRef.current = null;
+        document.removeEventListener('DOMContentLoaded', loadFrillScript);
+      } catch {}
+    };
+  }, [user, isV4, subscription?.plan_name]);
+
+  return null;
+}

package/src/components/layouts/AppMobileNavBar.tsx

@@ -1,111 +1,110 @@
-"use client";
-
-import { ReactNode } from "react";
-import Image from "next/image";
-import { ProfilePopover } from "./ProfilePopover";
-import { useAccountModals } from "../../store/useAccountModals";
-import type { ProfileMenuItem } from "./ProfilePopover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-
-export interface AppMobileNavBarProps {
-  /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages";
-  /** Called when the GreatApps logo is clicked */
-  onLogoClick?: () => void;
-  /** Called when the app icon (e.g. GreatPages) is clicked */
-  onAppIconClick?: () => void;
-  /** Extra slot rendered after the app icon (e.g. project selector) */
-  extraLeftSlot?: ReactNode;
-  /** Required: the right-side action element (toggle button, sheet button, etc.) */
-  rightActionSlot: ReactNode;
-  menuItems?: ProfileMenuItem[];
-  onCreditsClick?: () => void;
-}
-
-export function AppMobileNavBar({
-  activeApp,
-  onLogoClick,
-  onAppIconClick,
-  extraLeftSlot,
-  rightActionSlot,
-  menuItems = [],
-  onCreditsClick,
-}: AppMobileNavBarProps) {
-  const { openConfigurations } = useAccountModals();
-
-  const isGpagesActive = activeApp === "gpages";
-  const isGappsActive = activeApp === "gapps";
-
-  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">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div
-              className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`}
-              onClick={onLogoClick}
-            >
-              <Image
-                src="/icons/great-icon.svg"
-                alt="Great"
-                width={28}
-                height={28}
-              />
-              {isGappsActive && (
-                <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
-              )}
-            </div>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">Great</TooltipContent>
-        </Tooltip>
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              {isGpagesActive ? (
-                <div
-                  className="size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300"
-                  onClick={onAppIconClick}
-                >
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                </div>
-              ) : (
-                <div
-                  className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-gray-100 ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`}
-                  onClick={onAppIconClick}
-                >
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                </div>
-              )}
-            </TooltipTrigger>
-            <TooltipContent side="bottom">GreatPages</TooltipContent>
-          </Tooltip>
-          {isGpagesActive && (
-            <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-cyan-300 rounded-t-xl" />
-          )}
-        </div>
-        {extraLeftSlot}
-      </div>
-      <div className="flex items-center gap-1.5">
-        <ProfilePopover
-          side="bottom"
-          align="end"
-          contentClassName=""
-          onEditProfile={() => openConfigurations()}
-          onCreditsClick={onCreditsClick}
-          menuItems={menuItems}
-        />
-        {rightActionSlot}
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { ReactNode } from "react";
+import Image from "next/image";
+import { ProfilePopover } from "./ProfilePopover";
+import { useAccountModals } from "../../store/useAccountModals";
+import type { ProfileMenuItem } from "./ProfilePopover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+
+export interface AppMobileNavBarProps {
+  /** Which app is currently active — controls which icon gets the indicator */
+  activeApp?: "gapps" | "gpages";
+  /** Called when the GreatApps logo is clicked */
+  onLogoClick?: () => void;
+  /** Called when the app icon (e.g. GreatPages) is clicked */
+  onAppIconClick?: () => void;
+  /** Extra slot rendered after the app icon (e.g. project selector) */
+  extraLeftSlot?: ReactNode;
+  /** Required: the right-side action element (toggle button, sheet button, etc.) */
+  rightActionSlot: ReactNode;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+}
+
+export function AppMobileNavBar({
+  activeApp,
+  onLogoClick,
+  onAppIconClick,
+  extraLeftSlot,
+  rightActionSlot,
+  menuItems = [],
+  onCreditsClick,
+}: AppMobileNavBarProps) {
+  const { openConfigurations } = useAccountModals();
+
+  const isGpagesActive = activeApp === "gpages";
+  const isGappsActive = activeApp === "gapps";
+
+  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">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`}
+              onClick={onLogoClick}
+            >
+              <Image
+                src="/icons/great-icon.svg"
+                alt="Great"
+                width={28}
+                height={28}
+              />
+              {isGappsActive && (
+                <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
+              )}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Great</TooltipContent>
+        </Tooltip>
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              {isGpagesActive ? (
+                <div
+                  className="size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300"
+                  onClick={onAppIconClick}
+                >
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                </div>
+              ) : (
+                <div
+                  className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-gray-100 ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`}
+                  onClick={onAppIconClick}
+                >
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                </div>
+              )}
+            </TooltipTrigger>
+            <TooltipContent side="bottom">GreatPages</TooltipContent>
+          </Tooltip>
+          {isGpagesActive && (
+            <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-cyan-300 rounded-t-xl" />
+          )}
+        </div>
+        {extraLeftSlot}
+      </div>
+      <div className="flex items-center gap-1.5">
+        <ProfilePopover
+          side="bottom"
+          align="end"
+          contentClassName=""
+          onCreditsClick={onCreditsClick}
+          menuItems={menuItems}
+        />
+        {rightActionSlot}
+      </div>
+    </div>
+  );
+}

package/src/components/layouts/AppNavBar.tsx

@@ -1,57 +1,57 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { NavBar } from "./NavBar";
-import { ProfilePopover } from "./ProfilePopover";
-import { NotificationsPopover } from "./NotificationsPopover";
-import { useAccountModals } from "../../store/useAccountModals";
-import type { ProfileMenuItem } from "./ProfilePopover";
-
-export interface AppNavBarProps {
-  onLogoClick?: () => void;
-  /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages";
-  appIconHref?: string;
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  menuItems?: ProfileMenuItem[];
-  onCreditsClick?: () => void;
-  onNotificationsViewAll?: () => void;
-  logoutRedirect?: string;
-}
-
-export function AppNavBar({
-  onLogoClick,
-  activeApp,
-  appIconHref = "/",
-  showExpandButton = false,
-  onExpandClick,
-  menuItems = [],
-  onCreditsClick,
-  onNotificationsViewAll,
-  logoutRedirect,
-}: AppNavBarProps) {
-  const router = useRouter();
-  const { openConfigurations } = useAccountModals();
-
-  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
-  const handleAppIconClick = () => router.push(appIconHref);
-
-  return (
-    <NavBar
-      onLogoClick={handleLogoClick}
-      onAppIconClick={handleAppIconClick}
-      activeApp={activeApp}
-      showExpandButton={showExpandButton}
-      onExpandClick={onExpandClick}
-    >
-      <NotificationsPopover onViewAll={onNotificationsViewAll} />
-      <ProfilePopover
-        onEditProfile={() => openConfigurations()}
-        onCreditsClick={onCreditsClick}
-        menuItems={menuItems}
-        logoutRedirect={logoutRedirect}
-      />
-    </NavBar>
-  );
-}
+"use client";
+
+import { useRouter } from "next/navigation";
+import { NavBar } from "./NavBar";
+import { ProfilePopover } from "./ProfilePopover";
+import { NotificationsPopover } from "./NotificationsPopover";
+import { useAccountModals } from "../../store/useAccountModals";
+import type { ProfileMenuItem } from "./ProfilePopover";
+
+export interface AppNavBarProps {
+  onLogoClick?: () => void;
+  /** Which app is currently active — controls which icon gets the indicator */
+  activeApp?: "gapps" | "gpages";
+  appIconHref?: string;
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+  onNotificationsViewAll?: () => void;
+  logoutRedirect?: string;
+}
+
+export function AppNavBar({
+  onLogoClick,
+  activeApp,
+  appIconHref = "/",
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onCreditsClick,
+  onNotificationsViewAll,
+  logoutRedirect,
+}: AppNavBarProps) {
+  const router = useRouter();
+  const { openConfigurations } = useAccountModals();
+
+  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
+  const handleAppIconClick = () => router.push(appIconHref);
+
+  return (
+    <NavBar
+      onLogoClick={handleLogoClick}
+      onAppIconClick={handleAppIconClick}
+      activeApp={activeApp}
+      showExpandButton={showExpandButton}
+      onExpandClick={onExpandClick}
+    >
+      <NotificationsPopover onViewAll={onNotificationsViewAll} />
+      <ProfilePopover
+        onEditProfile={() => openConfigurations()}
+        onCreditsClick={onCreditsClick}
+        menuItems={menuItems}
+        logoutRedirect={logoutRedirect}
+      />
+    </NavBar>
+  );
+}