From 1876bbd9e448f58a60c65374040e41974d4280d0 Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Thu, 18 Jul 2024 09:18:16 +0200
Subject: [PATCH] Update error handling and UI design across multiple files

Enhanced error handling in documentation and blog pages, to ensure smoother running and user experience. This also includes additional UI updates related to font selection, layout arrangement, and interactive elements on error pages, marketing pages, and general site navigation components. Moreover, a "contact us" feature has been added to error pages to help users seek assistance more conveniently.
---
 .../(marketing)/_components/site-footer.tsx   |  2 +-
 .../(marketing)/_components/site-header.tsx   |  2 +-
 .../_components/site-navigation-item.tsx      |  3 +-
 .../_components/site-navigation.tsx           |  8 +++--
 .../_components/site-page-header.tsx          | 12 +++++--
 .../blog/_components/post-header.tsx          |  6 +++-
 apps/web/app/(marketing)/blog/page.tsx        | 24 +++++++++-----
 .../docs/_lib/server/docs.loader.ts           | 20 ++++++++----
 apps/web/app/(marketing)/docs/layout.tsx      |  2 +-
 apps/web/app/(marketing)/page.tsx             | 16 +++++++---
 apps/web/app/error.tsx                        | 30 ++++++++++++-----
 apps/web/app/global-error.tsx                 | 32 +++++++++++++++----
 apps/web/app/version/route.ts                 |  4 ++-
 .../gateway/src/components/pricing-table.tsx  |  4 +--
 .../components/password-sign-up-container.tsx |  2 +-
 packages/i18n/src/create-i18n-settings.ts     |  6 +++-
 packages/ui/src/shadcn/heading.tsx            | 10 +++---
 17 files changed, 129 insertions(+), 54 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-footer.tsx b/apps/web/app/(marketing)/_components/site-footer.tsx
index 98d0e3c3f..25c2346c6 100644
--- a/apps/web/app/(marketing)/_components/site-footer.tsx
+++ b/apps/web/app/(marketing)/_components/site-footer.tsx
@@ -7,7 +7,7 @@ import appConfig from '~/config/app.config';
 
 export function SiteFooter() {
   return (
-    <footer className={'mt-auto py-8 2xl:py-16 relative w-full site-footer'}>
+    <footer className={'site-footer relative mt-auto w-full py-8 2xl:py-16'}>
       <div className={'container'}>
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div
diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index c7a9116e9..cba82e278 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -9,7 +9,7 @@ export function SiteHeader(props: { user?: User | null }) {
   return (
     <div
       className={
-        'sticky top-0 z-10 w-full bg-background/80 backdrop-blur-md dark:bg-background/50 py-2 site-header'
+        'site-header sticky top-0 z-10 w-full bg-background/80 py-2 backdrop-blur-md dark:bg-background/50'
       }
     >
       <div className={'container'}>
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index 8458ccae8..ab2255b5e 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
@@ -12,8 +12,7 @@ const getClassName = (path: string, currentPathName: string) => {
   return cn(
     `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-100`,
     {
-      'dark:text-gray-300 dark:hover:text-white':
-        !isActive,
+      'dark:text-gray-300 dark:hover:text-white': !isActive,
       'dark:text-white text-current': isActive,
     },
   );
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index 3f8af19d7..7b96fe21e 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -33,7 +33,7 @@ const links = {
   Contact: {
     label: 'marketing:contact',
     path: '/contact',
-  }
+  },
 };
 
 export function SiteNavigation() {
@@ -48,7 +48,11 @@ export function SiteNavigation() {
   return (
     <>
       <div className={'hidden items-center justify-center md:flex'}>
-        <NavigationMenu className={'border border-gray-100 dark:border-primary/10 rounded-full py-2 px-4'}>
+        <NavigationMenu
+          className={
+            'rounded-full border border-gray-100 px-4 py-2 dark:border-primary/10'
+          }
+        >
           <NavigationMenuList className={'space-x-1'}>
             {NavItems}
           </NavigationMenuList>
diff --git a/apps/web/app/(marketing)/_components/site-page-header.tsx b/apps/web/app/(marketing)/_components/site-page-header.tsx
index a058b649e..232c001e9 100644
--- a/apps/web/app/(marketing)/_components/site-page-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-page-header.tsx
@@ -8,11 +8,19 @@ export function SitePageHeader(props: {
   return (
     <div className={cn('border-b py-8 xl:py-10 2xl:py-12', props.className)}>
       <div className={'container flex flex-col space-y-2 lg:space-y-4'}>
-        <h1 className={'font-medium font-heading text-3xl xl:text-5xl dark:text-white tracking-tight'}>
+        <h1
+          className={
+            'font-heading text-3xl font-medium tracking-tight dark:text-white xl:text-5xl'
+          }
+        >
           {props.title}
         </h1>
 
-        <h2 className={'text-lg text-muted-foreground 2xl:text-2xl tracking-tight'}>
+        <h2
+          className={
+            'text-lg tracking-tight text-muted-foreground 2xl:text-2xl'
+          }
+        >
           {props.subtitle}
         </h2>
       </div>
diff --git a/apps/web/app/(marketing)/blog/_components/post-header.tsx b/apps/web/app/(marketing)/blog/_components/post-header.tsx
index 65b4b9922..03f3734e4 100644
--- a/apps/web/app/(marketing)/blog/_components/post-header.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post-header.tsx
@@ -12,7 +12,11 @@ export function PostHeader({ post }: { post: Cms.ContentItem }) {
     <div className={'flex flex-1 flex-col'}>
       <div className={cn('border-b py-8')}>
         <div className={'mx-auto flex max-w-3xl flex-col space-y-4'}>
-          <h1 className={'font-heading text-3xl font-semibold xl:text-5xl dark:text-white'}>
+          <h1
+            className={
+              'font-heading text-3xl font-semibold dark:text-white xl:text-5xl'
+            }
+          >
             {title}
           </h1>
 
diff --git a/apps/web/app/(marketing)/blog/page.tsx b/apps/web/app/(marketing)/blog/page.tsx
index ef3988c88..3fd53c6f2 100644
--- a/apps/web/app/(marketing)/blog/page.tsx
+++ b/apps/web/app/(marketing)/blog/page.tsx
@@ -1,6 +1,7 @@
 import { cache } from 'react';
 
 import { createCmsClient } from '@kit/cms';
+import { getLogger } from '@kit/shared/logger';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
@@ -24,15 +25,22 @@ export const generateMetadata = async () => {
 const getContentItems = cache(
   async (language: string | undefined, limit: number, offset: number) => {
     const client = await createCmsClient();
+    const logger = await getLogger();
 
-    return client.getContentItems({
-      collection: 'posts',
-      limit,
-      offset,
-      language,
-      sortBy: 'publishedAt',
-      sortDirection: 'desc',
-    });
+    try {
+      return await client.getContentItems({
+        collection: 'posts',
+        limit,
+        offset,
+        language,
+        sortBy: 'publishedAt',
+        sortDirection: 'desc',
+      });
+    } catch (error) {
+      logger.error({ error }, 'Failed to load blog posts');
+
+      return { total: 0, items: [] };
+    }
   },
 );
 
diff --git a/apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts b/apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts
index a0e3f69f2..996a9d97e 100644
--- a/apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts
+++ b/apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts
@@ -1,6 +1,7 @@
 import { cache } from 'react';
 
 import { createCmsClient } from '@kit/cms';
+import { getLogger } from '@kit/shared/logger';
 
 /**
  * @name getDocs
@@ -11,12 +12,19 @@ export const getDocs = cache(docsLoader);
 
 async function docsLoader(language: string | undefined) {
   const cms = await createCmsClient();
+  const logger = await getLogger();
 
-  const { items: pages } = await cms.getContentItems({
-    collection: 'documentation',
-    language,
-    limit: 500,
-  });
+  try {
+    const data = await cms.getContentItems({
+      collection: 'documentation',
+      language,
+      limit: 500,
+    });
 
-  return pages;
+    return data.items;
+  } catch (error) {
+    logger.error({ error }, 'Failed to load documentation pages');
+
+    return [];
+  }
 }
diff --git a/apps/web/app/(marketing)/docs/layout.tsx b/apps/web/app/(marketing)/docs/layout.tsx
index 4975cedb4..4981d372c 100644
--- a/apps/web/app/(marketing)/docs/layout.tsx
+++ b/apps/web/app/(marketing)/docs/layout.tsx
@@ -11,7 +11,7 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
   const pages = await getDocs(resolvedLanguage);
 
   return (
-    <div className={'flex container'}>
+    <div className={'container flex'}>
       <DocsNavigation pages={buildDocumentationTree(pages)} />
 
       {children}
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 0d47baafe..2b68556b2 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -98,7 +98,9 @@ function Home() {
 
                   <Heading
                     level={3}
-                    className={'font-sans font-normal text-muted-foreground tracking-normal'}
+                    className={
+                      'font-sans font-normal tracking-normal text-muted-foreground'
+                    }
                   >
                     Secure and Easy-to-Use Authentication for Your SaaS Website
                     and API
@@ -147,7 +149,9 @@ function Home() {
 
                   <Heading
                     level={3}
-                    className={'font-sans font-normal text-muted-foreground tracking-normal'}
+                    className={
+                      'font-sans font-normal tracking-normal text-muted-foreground'
+                    }
                   >
                     A fantastic dashboard to manage your SaaS business
                   </Heading>
@@ -174,7 +178,9 @@ function Home() {
 
                   <Heading
                     level={3}
-                    className={'font-sans font-normal text-muted-foreground tracking-normal'}
+                    className={
+                      'font-sans font-normal tracking-normal text-muted-foreground'
+                    }
                   >
                     A powerful billing system for your SaaS business
                   </Heading>
@@ -300,7 +306,7 @@ function MainCallToActionButton() {
   return (
     <div className={'flex space-x-4'}>
       <Button
-        className={'h-12 px-4 rounded-xl text-base font-semibold'}
+        className={'h-12 rounded-xl px-4 text-base font-semibold'}
         asChild
       >
         <Link href={'/auth/sign-up'}>
@@ -321,7 +327,7 @@ function MainCallToActionButton() {
 
       <Button
         variant={'link'}
-        className={'h-12 px-4 rounded-xl text-base font-semibold'}
+        className={'h-12 rounded-xl px-4 text-base font-semibold'}
         asChild
       >
         <Link href={'/contact'}>
diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
index bbaff0842..ba1d0f837 100644
--- a/apps/web/app/error.tsx
+++ b/apps/web/app/error.tsx
@@ -1,6 +1,8 @@
 'use client';
 
-import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+
+import { ArrowLeft, MessageCircle } from 'lucide-react';
 
 import { useCaptureException } from '@kit/monitoring/hooks';
 import { Button } from '@kit/ui/button';
@@ -27,32 +29,44 @@ const ErrorPage = ({
           'container m-auto flex w-full flex-1 flex-col items-center justify-center'
         }
       >
-        <div className={'flex flex-col items-center space-y-16'}>
+        <div className={'flex flex-col items-center space-y-8'}>
           <div>
-            <h1 className={'font-heading text-9xl font-extrabold'}>
+            <h1 className={'font-heading text-9xl font-semibold'}>
               <Trans i18nKey={'common:errorPageHeading'} />
             </h1>
           </div>
 
           <div className={'flex flex-col items-center space-y-8'}>
-            <div className={'flex flex-col items-center space-y-2.5'}>
+            <div
+              className={
+                'flex max-w-xl flex-col items-center space-y-1 text-center'
+              }
+            >
               <div>
-                <Heading level={1}>
+                <Heading level={2}>
                   <Trans i18nKey={'common:genericError'} />
                 </Heading>
               </div>
 
-              <p className={'text-muted-foreground'}>
+              <p className={'text-lg text-muted-foreground'}>
                 <Trans i18nKey={'common:genericErrorSubHeading'} />
               </p>
             </div>
 
-            <div>
-              <Button variant={'outline'} onClick={reset}>
+            <div className={'flex space-x-4'}>
+              <Button className={'w-full'} variant={'default'} onClick={reset}>
                 <ArrowLeft className={'mr-2 h-4'} />
 
                 <Trans i18nKey={'common:goBack'} />
               </Button>
+
+              <Button className={'w-full'} variant={'outline'} asChild>
+                <Link href={'/contact'}>
+                  <MessageCircle className={'mr-2 h-4'} />
+
+                  <Trans i18nKey={'common:contactUs'} />
+                </Link>
+              </Button>
             </div>
           </div>
         </div>
diff --git a/apps/web/app/global-error.tsx b/apps/web/app/global-error.tsx
index 0d4906ba1..bea248834 100644
--- a/apps/web/app/global-error.tsx
+++ b/apps/web/app/global-error.tsx
@@ -1,6 +1,8 @@
 'use client';
 
-import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+
+import { ArrowLeft, MessageCircle } from 'lucide-react';
 
 import { useCaptureException } from '@kit/monitoring/hooks';
 import { Button } from '@kit/ui/button';
@@ -29,32 +31,48 @@ const GlobalErrorPage = ({
               'container m-auto flex w-full flex-1 flex-col items-center justify-center'
             }
           >
-            <div className={'flex flex-col items-center space-y-16'}>
+            <div className={'flex flex-col items-center space-y-8'}>
               <div>
-                <h1 className={'font-heading text-9xl font-extrabold'}>
+                <h1 className={'font-heading text-9xl font-semibold'}>
                   <Trans i18nKey={'common:errorPageHeading'} />
                 </h1>
               </div>
 
               <div className={'flex flex-col items-center space-y-8'}>
-                <div className={'flex flex-col items-center space-y-2.5'}>
+                <div
+                  className={
+                    'flex max-w-xl flex-col items-center space-y-1 text-center'
+                  }
+                >
                   <div>
-                    <Heading level={1}>
+                    <Heading level={2}>
                       <Trans i18nKey={'common:genericError'} />
                     </Heading>
                   </div>
 
-                  <p className={'text-muted-foreground'}>
+                  <p className={'text-lg text-muted-foreground'}>
                     <Trans i18nKey={'common:genericErrorSubHeading'} />
                   </p>
                 </div>
 
                 <div>
-                  <Button variant={'outline'} onClick={reset}>
+                  <Button
+                    className={'w-full'}
+                    variant={'default'}
+                    onClick={reset}
+                  >
                     <ArrowLeft className={'mr-2 h-4'} />
 
                     <Trans i18nKey={'common:goBack'} />
                   </Button>
+
+                  <Button className={'w-full'} variant={'outline'} asChild>
+                    <Link href={'/contact'}>
+                      <MessageCircle className={'mr-2 h-4'} />
+
+                      <Trans i18nKey={'common:contactUs'} />
+                    </Link>
+                  </Button>
                 </div>
               </div>
             </div>
diff --git a/apps/web/app/version/route.ts b/apps/web/app/version/route.ts
index 6765d5cc1..a4559270e 100644
--- a/apps/web/app/version/route.ts
+++ b/apps/web/app/version/route.ts
@@ -31,7 +31,9 @@ async function getGitHash() {
   try {
     return await getHashFromProcess();
   } catch (error) {
-    console.warn(`[WARN] Could not find git hash: ${JSON.stringify(error)}. You may want to provide a fallback.`);
+    console.warn(
+      `[WARN] Could not find git hash: ${JSON.stringify(error)}. You may want to provide a fallback.`,
+    );
 
     return '';
   }
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 6bb339bbd..745f35268 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -211,7 +211,7 @@ function PricingItem(
           <Price>
             {lineItem
               ? formatCurrency(props.product.currency, lineItem.cost)
-              : props.plan.label ?? <Trans i18nKey={'billing:custom'} />}
+              : (props.plan.label ?? <Trans i18nKey={'billing:custom'} />)}
           </Price>
 
           <If condition={props.plan.name}>
@@ -444,7 +444,7 @@ function DefaultCheckoutButton(
     <Link className={'w-full'} href={linkHref}>
       <Button
         size={'lg'}
-        className={'border-primary w-full border rounded-lg'}
+        className={'border-primary w-full rounded-lg border'}
         variant={props.highlighted ? 'default' : 'outline'}
       >
         <span>
diff --git a/packages/features/auth/src/components/password-sign-up-container.tsx b/packages/features/auth/src/components/password-sign-up-container.tsx
index 117540085..547b4f0dd 100644
--- a/packages/features/auth/src/components/password-sign-up-container.tsx
+++ b/packages/features/auth/src/components/password-sign-up-container.tsx
@@ -27,7 +27,7 @@ export function EmailPasswordSignUpContainer({
   defaultValues,
   onSignUp,
   emailRedirectTo,
-  displayTermsCheckbox
+  displayTermsCheckbox,
 }: EmailPasswordSignUpContainerProps) {
   const { captchaToken, resetCaptchaToken } = useCaptchaToken();
 
diff --git a/packages/i18n/src/create-i18n-settings.ts b/packages/i18n/src/create-i18n-settings.ts
index 52651c5cc..3eac53fa0 100644
--- a/packages/i18n/src/create-i18n-settings.ts
+++ b/packages/i18n/src/create-i18n-settings.ts
@@ -28,7 +28,11 @@ export function createI18nSettings({
     lowerCaseLng: true as const,
     fallbackNS: ns,
     missingInterpolationHandler: (text, value, options) => {
-      console.debug(`Missing interpolation value for key: ${text}`, value, options);
+      console.debug(
+        `Missing interpolation value for key: ${text}`,
+        value,
+        options,
+      );
     },
     ns,
     react: {
diff --git a/packages/ui/src/shadcn/heading.tsx b/packages/ui/src/shadcn/heading.tsx
index 0e410772c..ab75453e8 100644
--- a/packages/ui/src/shadcn/heading.tsx
+++ b/packages/ui/src/shadcn/heading.tsx
@@ -12,7 +12,7 @@ export function Heading({
       return (
         <h1
           className={cn(
-            `scroll-m-20 font-heading text-3xl lg:text-4xl font-bold tracking-tight dark:text-white`,
+            `scroll-m-20 font-heading text-3xl font-bold tracking-tight dark:text-white lg:text-4xl`,
             className,
           )}
         >
@@ -23,7 +23,7 @@ export function Heading({
       return (
         <h2
           className={cn(
-            `scroll-m-20 pb-2 font-heading text-2xl lg:text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
+            `scroll-m-20 pb-2 font-heading text-2xl font-semibold tracking-tight transition-colors first:mt-0 lg:text-3xl`,
             className,
           )}
         >
@@ -34,7 +34,7 @@ export function Heading({
       return (
         <h3
           className={cn(
-            'scroll-m-20 font-heading text-xl lg:text-2xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-xl font-semibold tracking-tight lg:text-2xl',
             className,
           )}
         >
@@ -45,7 +45,7 @@ export function Heading({
       return (
         <h4
           className={cn(
-            'scroll-m-20 font-heading text-lg lg:text-xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-lg font-semibold tracking-tight lg:text-xl',
             className,
           )}
         >
@@ -56,7 +56,7 @@ export function Heading({
       return (
         <h5
           className={cn(
-            'scroll-m-20 font-heading text-base lg:text-lg font-medium',
+            'scroll-m-20 font-heading text-base font-medium lg:text-lg',
             className,
           )}
         >