App routing - Migration client case studies (#3249)

* App Routing - Migrating /company/*

Affected  Route: `/company/*`

Fixed #3246

* testing - removing consulting pages

* fixing canonical link

* fixing canonicals

* Revert "testing - removing consulting pages"

This reverts commit ff515c3.

* App Routing - Migrating case studies

* fixing the route for the case studies

* removing a page on root for client

* fixing the min height for the breadcrumb

* fixing breadcrumb for client FPE

* Fixing the component name

app/company/[filename]/index.tsx

@@ -25,7 +25,7 @@ export default function CompanyPage({ tinaProps, props }) {
         <Blocks prefix="CompanyBeforeBody" blocks={data.company.beforeBody} />
         {data.company.seo?.showBreadcrumb === null ||
           (data.company.seo?.showBreadcrumb && (
-            <Section className="mx-auto w-full max-w-9xl px-8 py-5">
+            <Section className="mx-auto min-h-24 w-full max-w-9xl px-8 py-5 md:min-h-16">
               <Breadcrumbs
                 path={removeExtension(props.variables.relativePath)}
                 suffix={data.global.breadcrumbSuffix}

app/company/[filename]/page.tsx

@@ -4,7 +4,7 @@ import { TODAY } from "hooks/useFetchEvents";
 import { useSEO } from "hooks/useSeo";
 import { Metadata } from "next";
 import { TinaClient } from "../../tina-client";
-import ConsultingPage from "./index";
+import CompanyPage from "./index";
 
 export const dynamicParams = false;
 
@@ -93,5 +93,5 @@ export default async function Consulting({
 
   const { props } = await getData(filename);
 
-  return <TinaClient props={props} Component={ConsultingPage} />;
+  return <TinaClient props={props} Component={CompanyPage} />;
 }

app/company/clients/[filename]/index.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { BuiltOnAzure } from "@/components/blocks";
+import { Blocks } from "@/components/blocks-renderer";
+import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
+import { TechUpgrade } from "@/components/blocks/techUpgrade";
+import { Section } from "@/components/util/section";
+import { removeExtension } from "@/services/client/utils.service";
+import { Breadcrumbs } from "app/components/breadcrumb";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+export default function CompanyPage({ tinaProps, props }) {
+  const { data } = tinaProps;
+
+  return (
+    <>
+      {data.caseStudy.seo?.showBreadcrumb === null ||
+        (data.caseStudy.seo?.showBreadcrumb && (
+          <Section className="mx-auto min-h-24 w-full max-w-9xl px-8 py-5 md:min-h-16">
+            <Breadcrumbs
+              path={removeExtension(props.variables.relativePath)}
+              suffix={data.global.breadcrumbSuffix}
+              title={data.caseStudy.seo?.title}
+              seoSchema={data.caseStudy.seo}
+            />
+          </Section>
+        ))}
+      <Section className="mx-auto w-full max-w-9xl px-8">
+        <div>
+          <h1
+            data-tina-field={tinaField(data.caseStudy, "heading")}
+            className="p-0"
+          >
+            {data.caseStudy.heading}
+          </h1>
+          <h2
+            data-tina-field={tinaField(data.caseStudy, "subHeading")}
+            className="p-0 text-sm"
+          >
+            {data.caseStudy.subHeading}
+          </h2>
+        </div>
+      </Section>
+      <Blocks prefix="CaseStudy_body" blocks={data.caseStudy._body} />
+      <Section className="prose mx-auto !block w-full max-w-9xl px-8 pb-16 pt-0">
+        <TinaMarkdown
+          data-tina-field={tinaField(data.caseStudy, "content")}
+          components={componentRenderer}
+          content={data.caseStudy.content}
+        />
+      </Section>
+      <Section className="mx-auto w-full !bg-gray-75 px-8 py-5">
+        <TechUpgrade />
+      </Section>
+      <Section>
+        <BuiltOnAzure data={{ backgroundColor: "transparent" }} />
+      </Section>
+    </>
+  );
+}

app/company/clients/[filename]/page.tsx

@@ -0,0 +1,85 @@
+import client from "@/tina/client";
+import { TODAY } from "hooks/useFetchEvents";
+import { useSEO } from "hooks/useSeo";
+import { Metadata } from "next";
+import { TinaClient } from "../../../tina-client";
+import CaseStudies from "./index";
+
+export const dynamicParams = false;
+
+export async function generateStaticParams() {
+  let pageListData = await client.queries.caseStudyConnection();
+  const allPagesListData = pageListData;
+
+  while (pageListData.data.caseStudyConnection.pageInfo.hasNextPage) {
+    const lastCursor = pageListData.data.caseStudyConnection.pageInfo.endCursor;
+    pageListData = await client.queries.caseStudyConnection({
+      after: lastCursor,
+    });
+
+    allPagesListData.data.caseStudyConnection.edges.push(
+      ...pageListData.data.caseStudyConnection.edges
+    );
+  }
+
+  const pages = allPagesListData.data.caseStudyConnection.edges.map((page) => ({
+    filename: page.node._sys.filename,
+  }));
+
+  return pages;
+}
+
+const getData = async (filename: string) => {
+  const tinaProps = await client.queries.caseStudyContentQuery({
+    relativePath: `${filename}.mdx`,
+    date: TODAY.toISOString(),
+  });
+
+  const seo = tinaProps.data.caseStudy.seo;
+
+  return {
+    props: {
+      data: tinaProps.data,
+      query: tinaProps.query,
+      variables: tinaProps.variables,
+      header: {
+        url: tinaProps.data.global.header.url,
+      },
+      seo,
+      ...tinaProps,
+    },
+  };
+};
+
+type GenerateMetaDataProps = {
+  params: { filename: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  params,
+}: GenerateMetaDataProps): Promise<Metadata> {
+  const tinaProps = await getData(params.filename);
+
+  const seo = tinaProps.props.seo;
+  if (seo && !seo.canonical) {
+    seo.canonical = `${tinaProps.props.header.url}company/clients/${params.filename}`;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { seoProps } = useSEO(seo);
+
+  return { ...seoProps };
+}
+
+export default async function Consulting({
+  params,
+}: {
+  params: { filename: string };
+}) {
+  const { filename } = params;
+
+  const { props } = await getData(filename);
+
+  return <TinaClient props={props} Component={CaseStudies} />;
+}

content/company/case-study/fpe.mdx

@@ -4,6 +4,7 @@ seo:
   description: >-
     Explore the journey of French Payroll Expert (FPE) - How integrating an
     AI-powered chatbot has revolutionized their customer service.
+  showBreadcrumb: true
 heading: French Payroll Expert (FPE)
 subHeading: >-
   Discover how integrating an AI-powered chatbot has revolutionized their