refactor(core): split contact us and normal websites (#810)

.changeset/many-bikes-roll.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+split contact us and normal websites into individual pages

apps/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/fragment.ts

@@ -0,0 +1,20 @@
+import { graphql } from '~/client/graphql';
+
+export const ContactUsFragment = graphql(`
+  fragment ContactUsFragment on Query {
+    node(id: $id) {
+      ... on ContactPage {
+        entityId
+        contactFields
+      }
+    }
+    site {
+      settings {
+        reCaptcha {
+          isEnabledOnStorefront
+          siteKey
+        }
+      }
+    }
+  }
+`);

apps/core/components/forms/contact-us.tsx → apps/core/app/[locale]/(default)/webpages/contact/[id]/contact-us/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Button } from '@bigcommerce/components/button';
 import {
   Field,
@@ -10,28 +12,21 @@ import {
 import { Input } from '@bigcommerce/components/input';
 import { Message } from '@bigcommerce/components/message';
 import { TextArea } from '@bigcommerce/components/text-area';
+import { type FragmentOf } from 'gql.tada';
 import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
 import { submitContactForm } from './_actions/submit-contact-form';
+import { ContactUsFragment } from './fragment';
 
 interface FormStatus {
   status: 'success' | 'error';
   message: string;
 }
 
-interface ContactUsProps {
-  fields: string[];
-  pageEntityId: number;
-  reCaptchaSettings?: {
-    isEnabledOnStorefront: boolean;
-    siteKey: string;
-  };
-}
-
 const fieldNameMapping = {
   fullname: 'fullNameLabel',
   companyname: 'companyNameLabel',
@@ -69,7 +64,11 @@ const Submit = () => {
   );
 };
 
-export const ContactUs = ({ fields, pageEntityId, reCaptchaSettings }: ContactUsProps) => {
+interface Props {
+  data: FragmentOf<typeof ContactUsFragment>;
+}
+
+export const ContactUs = ({ data }: Props) => {
   const form = useRef<HTMLFormElement>(null);
   const [formStatus, setFormStatus] = useState<FormStatus | null>(null);
   const [isTextFieldValid, setTextFieldValidation] = useState(true);
@@ -80,6 +79,13 @@ export const ContactUs = ({ fields, pageEntityId, reCaptchaSettings }: ContactUs
 
   const t = useTranslations('AboutUs');
 
+  if (data.node?.__typename !== 'ContactPage') {
+    return null;
+  }
+
+  const { contactFields: fields, entityId: pageEntityId } = data.node;
+  const reCaptchaSettings = data.site.settings?.reCaptcha;
+
   const onReCaptchaChange = (token: string | null) => {
     if (!token) {
       return setReCaptchaValid(false);

apps/core/app/[locale]/(default)/webpages/contact/[id]/page.tsx

@@ -0,0 +1,92 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages } from 'next-intl/server';
+import { cache } from 'react';
+
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+import { revalidate } from '~/client/revalidate-target';
+
+import { ContactUs } from './contact-us';
+import { ContactUsFragment } from './contact-us/fragment';
+
+interface Props {
+  params: { id: string; locale: string };
+}
+
+const WebPageQuery = graphql(
+  `
+    query WebPage($id: ID!) {
+      ...ContactUsFragment
+      node(id: $id) {
+        __typename
+        ... on ContactPage {
+          name
+          htmlBody
+          seo {
+            pageTitle
+            metaKeywords
+            metaDescription
+          }
+        }
+      }
+    }
+  `,
+  [ContactUsFragment],
+);
+
+const getWebpageData = cache(async (variables: { id: string }) => {
+  const { data } = await client.fetch({
+    document: WebPageQuery,
+    variables,
+    fetchOptions: { next: { revalidate } },
+  });
+
+  return data;
+});
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const data = await getWebpageData({ id: decodeURIComponent(params.id) });
+  const webpage = data.node?.__typename === 'ContactPage' ? data.node : null;
+
+  if (!webpage) {
+    notFound();
+  }
+
+  const { seo } = webpage;
+
+  return {
+    title: seo.pageTitle,
+    description: seo.metaDescription,
+    keywords: seo.metaKeywords,
+  };
+}
+
+export default async function WebPage({ params: { locale, id } }: Props) {
+  const data = await getWebpageData({ id: decodeURIComponent(id) });
+  const webpage = data.node?.__typename === 'ContactPage' ? data.node : null;
+
+  if (!webpage) {
+    notFound();
+  }
+
+  const messages = await getMessages({ locale });
+
+  const { name, htmlBody } = webpage;
+
+  return (
+    <>
+      <div className="mx-auto mb-10 flex flex-col justify-center gap-8 lg:w-2/3">
+        <h1 className="text-4xl font-black lg:text-5xl">{name}</h1>
+        <div dangerouslySetInnerHTML={{ __html: htmlBody }} />
+      </div>
+
+      <NextIntlClientProvider locale={locale} messages={{ AboutUs: messages.AboutUs ?? {} }}>
+        <ContactUs data={data} />
+      </NextIntlClientProvider>
+    </>
+  );
+}
+
+export const runtime = 'edge';

apps/core/app/[locale]/(default)/webpages/normal/[id]/page.tsx

@@ -0,0 +1,78 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { cache } from 'react';
+
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+import { revalidate } from '~/client/revalidate-target';
+
+interface Props {
+  params: { id: string };
+}
+
+const NormalPageQuery = graphql(`
+  query NormalPage($id: ID!) {
+    node(id: $id) {
+      ... on NormalPage {
+        __typename
+        name
+        htmlBody
+        entityId
+        seo {
+          pageTitle
+          metaDescription
+          metaKeywords
+        }
+      }
+    }
+  }
+`);
+
+const getWebpageData = cache(async (variables: { id: string }) => {
+  const { data } = await client.fetch({
+    document: NormalPageQuery,
+    variables,
+    fetchOptions: { next: { revalidate } },
+  });
+
+  if (data.node?.__typename !== 'NormalPage') {
+    return null;
+  }
+
+  return data.node;
+});
+
+export async function generateMetadata({ params: { id } }: Props): Promise<Metadata> {
+  const webpage = await getWebpageData({ id });
+
+  if (!webpage) {
+    notFound();
+  }
+
+  const { seo } = webpage;
+
+  return {
+    title: seo.pageTitle,
+    description: seo.metaDescription,
+    keywords: seo.metaKeywords,
+  };
+}
+
+export default async function WebPage({ params: { id } }: Props) {
+  const webpage = await getWebpageData({ id });
+
+  if (!webpage) {
+    notFound();
+  }
+
+  const { name, htmlBody } = webpage;
+
+  return (
+    <div className="mx-auto mb-10 flex flex-col justify-center gap-8 lg:w-2/3">
+      <h1 className="text-4xl font-black lg:text-5xl">{name}</h1>
+      <div dangerouslySetInnerHTML={{ __html: htmlBody }} />
+    </div>
+  );
+}
+
+export const runtime = 'edge';

apps/core/client/queries/get-route.ts

@@ -15,6 +15,7 @@ const GET_ROUTE_QUERY = graphql(`
         }
         node {
           __typename
+          id
           ... on Product {
             entityId
           }
@@ -24,9 +25,6 @@ const GET_ROUTE_QUERY = graphql(`
           ... on Brand {
             entityId
           }
-          ... on RawHtmlPage {
-            id
-          }
         }
       }
     }