fixing the call to action import

SSWConsulting · Oct 24, 2024 · fc64037 · fc64037
1 parent 56efe1c
commit fc64037
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 5 deletions.
diff --git a/app/consulting/[filename]/consulting.tsx b/app/consulting/[filename]/consulting.tsx
@@ -6,21 +6,24 @@ import { BuiltOnAzure } from "@/components/blocks/builtOnAzure";
 import { ClientLogos } from "@/components/blocks/clientLogos";
 import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
 import { BookingButton } from "@/components/bookingButton/bookingButton";
+import { CallToAction } from "@/components/callToAction/callToAction";
 import MediaCards from "@/components/consulting/mediaCard/mediaCards";
 import { Marketing } from "@/components/marketing/Marketing";
 import TechnologyCards from "@/components/technologyCard/technologyCards";
 import { TestimonialRow } from "@/components/testimonials/TestimonialRow";
 import { Benefits } from "@/components/util/consulting/benefits";
 import { Container } from "@/components/util/container";
-
 import { Section } from "@/components/util/section";
+import { sanitiseXSS, spanWhitelist } from "@/helpers/validator";
 import { removeExtension } from "@/services/client/utils.service";
 import { Breadcrumbs } from "app/components/breadcrumb";
+import { ReactElement } from "react";
+import ReactDOMServer from "react-dom/server";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 
-export default function Consulting({ props, tinaProps }) {
-  const { categories, marketingData, mediaCardProps, techCards } = props;
+export default function Consulting({ tinaProps, props }) {
+  const { techCards, marketingData, categories, mediaCardProps } = props;
   const { data } = tinaProps;
   return (
     <>
@@ -103,9 +106,56 @@ export default function Consulting({ props, tinaProps }) {
           </Container>
         </Section>
       )}
+      {data?.consulting?.callToAction?.showCallToAction && (
+        <CallToAction
+          buttonSubtitle={data?.consulting?.callToAction?.buttonSubtitle}
+          subTitle={data?.consulting?.callToAction?.subTitle}
+          animated={data?.consulting?.callToAction?.animated}
+          buttonText={data?.consulting?.callToAction?.buttonText}
+          tinaFields={{
+            subTitle: tinaField(data.consulting?.callToAction, "subTitle"),
+            buttonSubtitle: tinaField(
+              data.consulting?.callToAction,
+              "buttonSubtitle"
+            ),
+          }}
+        >
+          <h2
+            className="callToAction"
+            data-tina-field={tinaField(data.consulting.callToAction, "title")}
+            dangerouslySetInnerHTML={{
+              __html: parseCallToAction(
+                data.consulting?.callToAction?.title,
+                data.consulting?.solution?.project,
+                data.consulting?.solution
+              ),
+            }}
+          ></h2>
+        </CallToAction>
+      )}
       <Section>
         <BuiltOnAzure data={{ backgroundColor: "default" }} />
       </Section>
     </>
   );
 }
+
+const parseCallToAction = (
+  content: string,
+  project: string,
+  data: { project?: string }
+) => {
+  const HTMLelement: ReactElement = (
+    <span
+      className="text-sswRed"
+      {...(data ? { "data-tina-field": tinaField(data, "project") } : {})}
+    >
+      {project}
+    </span>
+  );
+
+  return sanitiseXSS(
+    content?.replace("{{TITLE}}", ReactDOMServer.renderToString(HTMLelement)),
+    spanWhitelist
+  );
+};
diff --git a/components/callToAction/callToAction.tsx b/components/callToAction/callToAction.tsx
@@ -1,5 +1,7 @@
-import { BookingButton } from "../blocks";
-import { bookingButtonSchema } from "../bookingButton/bookingButton";
+import {
+  BookingButton,
+  bookingButtonSchema,
+} from "../bookingButton/bookingButton";
 import { Container } from "../util/container";
 import { Section } from "../util/section";