@greatapps/common 1.1.699 → 1.1.700

package/src/components/account/sections/SecuritySection.tsx

@@ -1,102 +1,102 @@
-'use client';
-
-import { IconAlertTriangle, IconBrandGoogleFilled } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-import { useQueryClient } from '@tanstack/react-query';
-import { useAuth } from '../../../providers/auth.provider';
-import { AccountSectionType } from '../../../enums/AccountSectionType';
-import { useUnlinkGoogle } from '../../../modules/auth/hooks/unlink-google.hook';
-import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
-import { Toast } from '../../ui/feedback/Toast';
-
-interface SecuritySectionProps {
-  setActiveSection: (section: AccountSectionType) => void;
-  onClose: () => void;
-  onDeleteAccount?: () => void;
-}
-
-export function SecuritySection({
-  onDeleteAccount,
-}: SecuritySectionProps) {
-  const translate = useTranslations();
-  const { user } = useAuth();
-  const queryClient = useQueryClient();
-  const { mutateAsync: unlinkGoogle, isPending: isUnlinking } = useUnlinkGoogle();
-  const hasGoogleLinked = !!user?.google_sub;
-
-  const handleUnlinkGoogle = async () => {
-    try {
-      const result = await unlinkGoogle();
-      toast.custom((t) => (
-        <Toast variant="success" message={result.message} toastId={t} />
-      ));
-      queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : translate('common.account.security.unlinkError');
-      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
-    }
-  };
-
-  return (
-    <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
-      <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">
-        {translate('common.account.security.title')}
-      </span>
-
-      {hasGoogleLinked && (
-        <div className="flex flex-col items-center lg:items-start gap-4">
-          <div className="size-10 rounded-lg bg-blue-50 flex items-center justify-center">
-            <IconBrandGoogleFilled size={20} className="text-blue-500" />
-          </div>
-
-          <div className="flex flex-col gap-2">
-            <span className="paragraph-medium-semibold text-gray-950">
-              {translate('common.account.security.googleLinkedTitle')}
-            </span>
-            <span className="paragraph-small-regular text-gray-600">
-              {translate('common.account.security.googleLinkedDescription')}
-            </span>
-          </div>
-
-          <button
-            type="button"
-            disabled={isUnlinking}
-            className="paragraph-small-semibold text-zinc-700 bg-zinc-100 rounded-lg px-3 py-2 cursor-pointer hover:bg-zinc-200 transition-colors w-fit disabled:opacity-50 disabled:cursor-not-allowed"
-            onClick={handleUnlinkGoogle}
-          >
-            {isUnlinking
-              ? translate('common.account.security.unlinking')
-              : translate('common.account.security.unlinkGoogle')}
-          </button>
-        </div>
-      )}
-
-      <div className="flex flex-col items-center lg:items-start gap-4">
-        <div className="size-10 rounded-lg bg-red-50 flex items-center justify-center">
-          <IconAlertTriangle size={20} className="text-red-500" />
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <span className="paragraph-medium-semibold text-gray-950">
-            {translate('common.account.deleteAccount.title')}
-          </span>
-          <span className="paragraph-small-regular text-gray-600">
-            {translate('common.account.security.deleteAccountDescription')}
-          </span>
-        </div>
-
-        {onDeleteAccount && (
-          <button
-            type="button"
-            className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
-            onClick={onDeleteAccount}
-          >
-            {translate('common.account.security.deleteMyAccount')}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { IconAlertTriangle, IconBrandGoogleFilled } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { useQueryClient } from '@tanstack/react-query';
+import { useAuth } from '../../../providers/auth.provider';
+import { AccountSectionType } from '../../../enums/AccountSectionType';
+import { useUnlinkGoogle } from '../../../modules/auth/hooks/unlink-google.hook';
+import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
+import { Toast } from '../../ui/feedback/Toast';
+
+interface SecuritySectionProps {
+  setActiveSection: (section: AccountSectionType) => void;
+  onClose: () => void;
+  onDeleteAccount?: () => void;
+}
+
+export function SecuritySection({
+  onDeleteAccount,
+}: SecuritySectionProps) {
+  const translate = useTranslations();
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const { mutateAsync: unlinkGoogle, isPending: isUnlinking } = useUnlinkGoogle();
+  const hasGoogleLinked = !!user?.google_sub;
+
+  const handleUnlinkGoogle = async () => {
+    try {
+      const result = await unlinkGoogle();
+      toast.custom((t) => (
+        <Toast variant="success" message={result.message} toastId={t} />
+      ));
+      queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : translate('common.account.security.unlinkError');
+      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
+    }
+  };
+
+  return (
+    <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
+      <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">
+        {translate('common.account.security.title')}
+      </span>
+
+      {hasGoogleLinked && (
+        <div className="flex flex-col items-center lg:items-start gap-4">
+          <div className="size-10 rounded-lg bg-blue-50 flex items-center justify-center">
+            <IconBrandGoogleFilled size={20} className="text-blue-500" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="paragraph-medium-semibold text-gray-950">
+              {translate('common.account.security.googleLinkedTitle')}
+            </span>
+            <span className="paragraph-small-regular text-gray-600">
+              {translate('common.account.security.googleLinkedDescription')}
+            </span>
+          </div>
+
+          <button
+            type="button"
+            disabled={isUnlinking}
+            className="paragraph-small-semibold text-zinc-700 bg-zinc-100 rounded-lg px-3 py-2 cursor-pointer hover:bg-zinc-200 transition-colors w-fit disabled:opacity-50 disabled:cursor-not-allowed"
+            onClick={handleUnlinkGoogle}
+          >
+            {isUnlinking
+              ? translate('common.account.security.unlinking')
+              : translate('common.account.security.unlinkGoogle')}
+          </button>
+        </div>
+      )}
+
+      <div className="flex flex-col items-center lg:items-start gap-4">
+        <div className="size-10 rounded-lg bg-red-50 flex items-center justify-center">
+          <IconAlertTriangle size={20} className="text-red-500" />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <span className="paragraph-medium-semibold text-gray-950">
+            {translate('common.account.deleteAccount.title')}
+          </span>
+          <span className="paragraph-small-regular text-gray-600">
+            {translate('common.account.security.deleteAccountDescription')}
+          </span>
+        </div>
+
+        {onDeleteAccount && (
+          <button
+            type="button"
+            className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
+            onClick={onDeleteAccount}
+          >
+            {translate('common.account.security.deleteMyAccount')}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/account/sections/TokenSection.tsx

@@ -1,85 +1,85 @@
-'use client';
-
-import { IconCheck, IconCopy, IconInfoCircle } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-import { Toast } from '../../ui/feedback/Toast';
-import { Button } from '../../ui/buttons/Button';
-import { FormField } from '../../ui/form/FormField';
-import useCopyToClipboard from '../../../hooks/copy-to-clipboard.hook';
-import { useAccountToken } from '../../../modules/accounts/hooks/use-account-token.hook';
-import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
-
-export function TokenSection() {
-  const translate = useTranslations();
-  const { data: token = '', isLoading } = useAccountToken();
-  const isDefaultWl = useIsDefaultWhitelabel();
-
-  const { isCopied, copy } = useCopyToClipboard({
-    onSuccess: () => {
-      toast.custom((toastId) => (
-        <Toast
-          variant="success"
-          message={translate('common.account.token.copySuccess')}
-          toastId={toastId}
-        />
-      ));
-    },
-    onError: () => {
-      toast.custom((toastId) => (
-        <Toast
-          variant="error"
-          message={translate('common.account.token.copyError')}
-          toastId={toastId}
-        />
-      ));
-    },
-  });
-
-  return (
-    <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
-      <span className="paragraph-medium-semibold text-gray-950">
-        {translate('common.account.token.title')}
-      </span>
-
-      <div className="flex flex-col gap-3">
-        <div className="flex items-end gap-3">
-          <FormField
-            label={translate('common.account.token.label')}
-            value={isLoading ? translate('common.actions.loading') : token}
-            disabled
-            readOnly
-            classnameContainer="bg-gray-50 cursor-default opacity-100!"
-            className="text-gray-950/50"
-          />
-          <Button
-            type="button"
-            variant="secondary"
-            className="h-10! shrink-0 gap-2"
-            onClick={() => copy(token)}
-            disabled={isLoading || !token}
-          >
-            {isCopied ? <IconCheck size={16} /> : <IconCopy size={16} />}
-            {isCopied ? translate('common.actions.copied') : translate('common.actions.copy')}
-          </Button>
-        </div>
-
-        <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>
-          <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
-          <span className="paragraph-small-regular text-zinc-950 max-w-[420px]">
-            {translate('common.account.token.info')}
-          </span>
-        </div>
-
-        <a
-          href="https://documenter.getpostman.com/view/4861938/T1Djiz8H"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="paragraph-small-medium text-gray-500 underline hover:text-gray-700 transition-colors w-fit"
-        >
-          {translate('common.account.token.docsLink')}
-        </a>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { IconCheck, IconCopy, IconInfoCircle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { Button } from '../../ui/buttons/Button';
+import { FormField } from '../../ui/form/FormField';
+import useCopyToClipboard from '../../../hooks/copy-to-clipboard.hook';
+import { useAccountToken } from '../../../modules/accounts/hooks/use-account-token.hook';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
+
+export function TokenSection() {
+  const translate = useTranslations();
+  const { data: token = '', isLoading } = useAccountToken();
+  const isDefaultWl = useIsDefaultWhitelabel();
+
+  const { isCopied, copy } = useCopyToClipboard({
+    onSuccess: () => {
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.token.copySuccess')}
+          toastId={toastId}
+        />
+      ));
+    },
+    onError: () => {
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.token.copyError')}
+          toastId={toastId}
+        />
+      ));
+    },
+  });
+
+  return (
+    <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
+      <span className="paragraph-medium-semibold text-gray-950">
+        {translate('common.account.token.title')}
+      </span>
+
+      <div className="flex flex-col gap-3">
+        <div className="flex items-end gap-3">
+          <FormField
+            label={translate('common.account.token.label')}
+            value={isLoading ? translate('common.actions.loading') : token}
+            disabled
+            readOnly
+            classnameContainer="bg-gray-50 cursor-default opacity-100!"
+            className="text-gray-950/50"
+          />
+          <Button
+            type="button"
+            variant="secondary"
+            className="h-10! shrink-0 gap-2"
+            onClick={() => copy(token)}
+            disabled={isLoading || !token}
+          >
+            {isCopied ? <IconCheck size={16} /> : <IconCopy size={16} />}
+            {isCopied ? translate('common.actions.copied') : translate('common.actions.copy')}
+          </Button>
+        </div>
+
+        <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>
+          <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
+          <span className="paragraph-small-regular text-zinc-950 max-w-[420px]">
+            {translate('common.account.token.info')}
+          </span>
+        </div>
+
+        <a
+          href="https://documenter.getpostman.com/view/4861938/T1Djiz8H"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="paragraph-small-medium text-gray-500 underline hover:text-gray-700 transition-colors w-fit"
+        >
+          {translate('common.account.token.docsLink')}
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/components/embeds/ClarityEmbed.tsx

@@ -1,70 +1,70 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { useAuth } from '../../providers/auth.provider';
-
-const CLARITY_PROJECT_ID = 'rc99jr00nn';
-const CLARITY_SCRIPT_BASE = 'https://www.clarity.ms/tag/';
-const CLARITY_LOAD_DELAY = 800;
-
-declare global {
-  interface Window {
-    clarity?: (...args: unknown[]) => void;
-  }
-}
-
-function loadClarityScript() {
-  try {
-    const win = window as any;
-    win.clarity =
-      win.clarity ||
-      function (...args: unknown[]) {
-        (win.clarity.q = win.clarity.q || []).push(args);
-      };
-
-    const src = CLARITY_SCRIPT_BASE + CLARITY_PROJECT_ID;
-    if (document.querySelector(`script[src="${src}"]`)) return;
-
-    const t = document.createElement('script');
-    t.async = true;
-    t.src = src;
-    const y = document.getElementsByTagName('script')[0];
-    y?.parentNode?.insertBefore(t, y);
-  } catch {}
-}
-
-function identifyClarityUser(user: { id?: number; email?: string; name?: string; last_name?: string }) {
-  try {
-    if (!window.clarity) return;
-
-    const fullName = `${user.name ?? ''} ${user.last_name ?? ''}`.trim();
-    window.clarity('identify', String(user.id ?? ''), undefined, undefined, fullName || undefined);
-
-    if (user.email) window.clarity('set', 'email', user.email);
-  } catch {}
-}
-
-export function ClarityEmbed() {
-  const { user } = useAuth();
-  const scriptLoadedRef = useRef(false);
-
-  useEffect(() => {
-    if (!user || scriptLoadedRef.current) return;
-
-    const timeout = setTimeout(() => {
-      try {
-        loadClarityScript();
-        scriptLoadedRef.current = true;
-      } catch {}
-    }, CLARITY_LOAD_DELAY);
-
-    return () => clearTimeout(timeout);
-  }, [user]);
-
-  useEffect(() => {
-    if (!user || !scriptLoadedRef.current) return;
-    identifyClarityUser(user);
-  }, [user]);
-
-  return null;
-}
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useAuth } from '../../providers/auth.provider';
+
+const CLARITY_PROJECT_ID = 'rc99jr00nn';
+const CLARITY_SCRIPT_BASE = 'https://www.clarity.ms/tag/';
+const CLARITY_LOAD_DELAY = 800;
+
+declare global {
+  interface Window {
+    clarity?: (...args: unknown[]) => void;
+  }
+}
+
+function loadClarityScript() {
+  try {
+    const win = window as any;
+    win.clarity =
+      win.clarity ||
+      function (...args: unknown[]) {
+        (win.clarity.q = win.clarity.q || []).push(args);
+      };
+
+    const src = CLARITY_SCRIPT_BASE + CLARITY_PROJECT_ID;
+    if (document.querySelector(`script[src="${src}"]`)) return;
+
+    const t = document.createElement('script');
+    t.async = true;
+    t.src = src;
+    const y = document.getElementsByTagName('script')[0];
+    y?.parentNode?.insertBefore(t, y);
+  } catch {}
+}
+
+function identifyClarityUser(user: { id?: number; email?: string; name?: string; last_name?: string }) {
+  try {
+    if (!window.clarity) return;
+
+    const fullName = `${user.name ?? ''} ${user.last_name ?? ''}`.trim();
+    window.clarity('identify', String(user.id ?? ''), undefined, undefined, fullName || undefined);
+
+    if (user.email) window.clarity('set', 'email', user.email);
+  } catch {}
+}
+
+export function ClarityEmbed() {
+  const { user } = useAuth();
+  const scriptLoadedRef = useRef(false);
+
+  useEffect(() => {
+    if (!user || scriptLoadedRef.current) return;
+
+    const timeout = setTimeout(() => {
+      try {
+        loadClarityScript();
+        scriptLoadedRef.current = true;
+      } catch {}
+    }, CLARITY_LOAD_DELAY);
+
+    return () => clearTimeout(timeout);
+  }, [user]);
+
+  useEffect(() => {
+    if (!user || !scriptLoadedRef.current) return;
+    identifyClarityUser(user);
+  }, [user]);
+
+  return null;
+}