From d2f8afac01f1b9a596129806e00a68ad8b8924af Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Mon, 3 Mar 2025 21:52:24 +0700
Subject: [PATCH] fix: render contact & form dynamically from payload

---
 src/app/(main)/contact/page.tsx               |  24 --
 src/blocks/Contact.ts                         |   7 +
 src/collections/Pages.ts                      |   4 +
 src/components/Blocks/Contact/index.tsx       | 284 ++++++++++++++++++
 src/components/Blocks/Form/Checkbox/index.tsx |   2 +-
 src/components/Blocks/Form/index.tsx          |  24 +-
 src/components/Blocks/RenderBlocks.tsx        |  15 +
 src/payload-types.ts                          |  42 +++
 8 files changed, 370 insertions(+), 32 deletions(-)
 delete mode 100644 src/app/(main)/contact/page.tsx
 create mode 100644 src/blocks/Contact.ts
 create mode 100644 src/components/Blocks/Contact/index.tsx

diff --git a/src/app/(main)/contact/page.tsx b/src/app/(main)/contact/page.tsx
deleted file mode 100644
index 88a0474..0000000
--- a/src/app/(main)/contact/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Contact from "@/components/Contacts/Contact";
-import ContactForm from "@/components/Contacts/ContactForm";
-import HeroOther from "@/components/HeroOther";
-import { Suspense } from "react";
-
-export const metadata = {
-  title: "Contact - Cochise Oncology",
-  description: "Contact - Cochise Oncology",
-};
-
-export default async function ContactPage() {
-  return (
-    <>
-      <HeroOther title="Contact Us" />
-
-      <section className="page-section scrollSpysection" id="contact">
-        <Contact />
-        <Suspense fallback={<></>}>
-          <ContactForm />
-        </Suspense>
-      </section>
-    </>
-  );
-}
diff --git a/src/blocks/Contact.ts b/src/blocks/Contact.ts
new file mode 100644
index 0000000..bfdd32e
--- /dev/null
+++ b/src/blocks/Contact.ts
@@ -0,0 +1,7 @@
+import { Block } from "payload";
+
+export const ContactBlock: Block = {
+  slug: "contactBlock",
+  labels: { plural: "Contacts", singular: "Contacts" },
+  fields: [],
+};
diff --git a/src/collections/Pages.ts b/src/collections/Pages.ts
index b5d4bff..fec04fe 100644
--- a/src/collections/Pages.ts
+++ b/src/collections/Pages.ts
@@ -1,6 +1,8 @@
 import { BeforeFooterBlock } from "@/blocks/BeforeFooter";
 import { BoxMenuGridBlock } from "@/blocks/BoxMenuGrid";
+import { ContactBlock } from "@/blocks/Contact";
 import { ContentBlock } from "@/blocks/Content";
+import { FormBlock } from "@/blocks/Form";
 import { GoogleReviewBlock } from "@/blocks/GoogleReview";
 import { HorizontalImageContentBlock } from "@/blocks/HorizontalImageContent";
 import { ImageSliderBlock } from "@/blocks/ImageSlider";
@@ -47,6 +49,8 @@ export const Pages: CollectionConfig = {
         ImageSliderBlock,
         BoxMenuGridBlock,
         GoogleReviewBlock,
+        ContactBlock,
+        FormBlock,
       ],
     },
     {
diff --git a/src/components/Blocks/Contact/index.tsx b/src/components/Blocks/Contact/index.tsx
new file mode 100644
index 0000000..85069be
--- /dev/null
+++ b/src/components/Blocks/Contact/index.tsx
@@ -0,0 +1,284 @@
+import { fetchContact } from "@/services/payload/contact";
+import { Suspense } from "react";
+
+export default function ContactBlock() {
+  return (
+    <>
+      <Suspense fallback={<ContactSkeleton />}>
+        <ContactWithData />
+      </Suspense>
+    </>
+  );
+}
+
+async function ContactWithData() {
+  const contact = await fetchContact();
+
+  return (
+    <div className="container position-relative">
+      <div className="row">
+        <div className="col-lg-6">
+          <div className="row mb-50">
+            <div className="col-lg-10">
+              <h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-md-6 mb-sm-10">
+          {/* Contact Form */}
+          <div className="row mb-60 mb-sm-50">
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" />
+                  </svg>
+                </div>
+
+                <h4 className="alt-features-title">Location</h4>
+                <div className="alt-features-descr clearlinks">
+                  <div>
+                    <a target="_blank" href={contact?.location?.href ?? "#"}>
+                      {contact?.fullLocation ?? ""}
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+            {/* Contact Item */}
+            <div className="col-sm-6 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Phone</h4>
+                <div className="alt-features-descr clearlinks">
+                  <div>
+                    <a href={`tel:${contact?.phone ?? "#"}`}>{contact?.phone ?? ""}</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+          </div>
+          <div className="row mb-60 mb-sm-50">
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Hours</h4>
+                <div className="alt-features-descr clearlinks">
+                  {Array.isArray(contact?.hours) &&
+                    contact.hours.map((h) => (
+                      <p key={h.id} className="text-wrap">
+                        {h.hour ?? ""}
+                      </p>
+                    ))}
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Fax</h4>
+                <div className="alt-features-descr clearlinks">
+                  <div>
+                    <a href={`tel:${contact?.fax ?? "#"}`}>{contact?.fax ?? ""}</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+          </div>
+          {/* End Contact Form */}
+        </div>
+        <div className="col-md-6 d-flex align-items-stretch">
+          {/* Google Map */}
+          <div className="map-boxed">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d108795.7060636289!2d-110.242613!3d31.555297!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292e9b858975%3A0xc2519e5d827cd79c!2sCochise%20Oncology!5e0!3m2!1sen!2sus!4v1740412623968!5m2!1sen!2sus"
+              width={600}
+              height={450}
+              style={{ border: 0 }}
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+            />
+          </div>
+          {/* End Google Map */}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ContactSkeleton() {
+  return (
+    <div className="container position-relative animate-pulse">
+      <div className="row">
+        <div className="col-lg-6">
+          <div className="row mb-50">
+            <div className="col-lg-10">
+              <h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-md-6 mb-sm-10">
+          {/* Contact Form */}
+          <div className="row mb-60 mb-sm-50">
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="flex-1 alt-features-item border-left mt-0">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" />
+                  </svg>
+                </div>
+
+                <h4 className="alt-features-title">Location</h4>
+                <div className="h-3 bg-gray-300 rounded flex-1"></div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+            {/* Contact Item */}
+            <div className="col-sm-6 d-flex align-items-stretch">
+              <div className="flex-1 alt-features-item border-left mt-0">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Phone</h4>
+                <div className="h-3 bg-gray-300 rounded flex-1"></div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+          </div>
+          <div className="row mb-60 mb-sm-50">
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="flex-1 alt-features-item border-left mt-0">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Hours</h4>
+                <div className="h-3 bg-gray-300 rounded flex-1"></div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="flex-1 alt-features-item border-left mt-0">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Fax</h4>
+                <div className="h-3 bg-gray-300 rounded flex-1"></div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+          </div>
+          {/* End Contact Form */}
+        </div>
+        <div className="col-md-6 d-flex align-items-stretch">
+          {/* Google Map */}
+          <div className="h-80 bg-gray-300 rounded flex-1"></div>
+          {/* End Google Map */}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Blocks/Form/Checkbox/index.tsx b/src/components/Blocks/Form/Checkbox/index.tsx
index 91a6e7d..fdea9d3 100644
--- a/src/components/Blocks/Form/Checkbox/index.tsx
+++ b/src/components/Blocks/Form/Checkbox/index.tsx
@@ -23,7 +23,7 @@ export const Checkbox: React.FC<
       <div className="form-group pr-4">
         <div className="flex">
           <input
-            className="form-check-input mr-2"
+            className="form-check-input mr-2 p-2"
             type="checkbox"
             {...register(name, { required: requiredFromProps })}
           />
diff --git a/src/components/Blocks/Form/index.tsx b/src/components/Blocks/Form/index.tsx
index dca2329..52c28e4 100644
--- a/src/components/Blocks/Form/index.tsx
+++ b/src/components/Blocks/Form/index.tsx
@@ -1,8 +1,6 @@
 // @ts-nocheck
 "use client";
 
-import type { Form as FormType } from "@payloadcms/plugin-form-builder/types";
-
 import { useRouter } from "next/navigation";
 import React, { useCallback, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -26,16 +24,28 @@ export interface Data {
 export type FormBlockType = {
   blockName?: string;
   blockType?: "formBlock";
-  enableIntro: boolean;
-  form: FormType | Form;
+  enableIntro?: boolean | null;
+  form: number | Form;
   introContent?: {
+    root: {
+      type: string;
+      children: {
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ("ltr" | "rtl") | null;
+      format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
+      indent: number;
+      version: number;
+    };
     [k: string]: unknown;
-  }[];
+  } | null;
 };
 
 export const FormBlock: React.FC<
   FormBlockType & {
-    id?: string;
+    id?: string | null;
   }
 > = (props) => {
   const {
@@ -132,7 +142,7 @@ export const FormBlock: React.FC<
   return (
     <div>
       <div>
-        {enableIntro && introContent && !hasSubmitted && <RichText content={introContent} />}
+        {!!enableIntro && introContent && !hasSubmitted && <RichText content={introContent} />}
         {!isLoading && hasSubmitted && confirmationType === "message" && <RichText content={confirmationMessage} />}
         {isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
         {error && <div className="text-red-500">{`${error.status || "500"}: ${error.message || ""}`}</div>}
diff --git a/src/components/Blocks/RenderBlocks.tsx b/src/components/Blocks/RenderBlocks.tsx
index eb0092a..277a987 100644
--- a/src/components/Blocks/RenderBlocks.tsx
+++ b/src/components/Blocks/RenderBlocks.tsx
@@ -9,6 +9,8 @@ import { ImageSliderBlock } from "./ImageSlider";
 import { BoxMenuGridBlock } from "./BoxMenuGrid";
 import { GoogleReviewsBlock } from "./GoogleReviews";
 import { GoogleReviewsSkeleton } from "./GoogleReviews/GoogleReviews";
+import ContactBlock from "./Contact";
+import { FormBlock } from "./Form";
 
 const blockComponents = {
   contentBlock: ContentBlock,
@@ -18,6 +20,8 @@ const blockComponents = {
   imageSliderBlock: ImageSliderBlock,
   boxMenuGridBlock: BoxMenuGridBlock,
   googleReviewBlock: GoogleReviewsBlock,
+  contactBlock: ContactBlock,
+  formBlock: FormBlock,
 };
 
 export const RenderBlocks: React.FC<{
@@ -45,6 +49,17 @@ export const RenderBlocks: React.FC<{
                   </Suspense>
                 </div>
               );
+            } else if (blockType === "formBlock") {
+              return (
+                <div className="my-10 px-8" key={index}>
+                  <FormBlock
+                    id={block.id}
+                    enableIntro={block.enableIntro}
+                    introContent={block.introContent}
+                    form={block.form}
+                  />
+                </div>
+              );
             } else if (blockType === "beforeFooterBlock") {
               return (
                 <div className="mt-10" key={index}>
diff --git a/src/payload-types.ts b/src/payload-types.ts
index be96b10..203e067 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -269,6 +269,33 @@ export interface Page {
             blockName?: string | null;
             blockType: 'googleReviewBlock';
           }
+        | {
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'contactBlock';
+          }
+        | {
+            form: number | Form;
+            enableIntro?: boolean | null;
+            introContent?: {
+              root: {
+                type: string;
+                children: {
+                  type: string;
+                  version: number;
+                  [k: string]: unknown;
+                }[];
+                direction: ('ltr' | 'rtl') | null;
+                format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+                indent: number;
+                version: number;
+              };
+              [k: string]: unknown;
+            } | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'formBlock';
+          }
       )[]
     | null;
   meta?: {
@@ -691,6 +718,21 @@ export interface PagesSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
+        contactBlock?:
+          | T
+          | {
+              id?: T;
+              blockName?: T;
+            };
+        formBlock?:
+          | T
+          | {
+              form?: T;
+              enableIntro?: T;
+              introContent?: T;
+              id?: T;
+              blockName?: T;
+            };
       };
   meta?:
     | T
-- 
2.47.2