From 6d3d1dabb0037db7e2daf965401a2aa52ab6968a Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Mon, 3 Mar 2025 17:35:51 +0700
Subject: [PATCH] fix: contact section fetch and suspense

---
 src/app/(main)/layout.tsx           |   7 +-
 src/components/Contacts/Contact.tsx | 155 ++++++++++++++++++++++++++--
 src/components/Footer.tsx           |  13 ++-
 src/components/Homepage.tsx         |  20 ++--
 src/services/payload/contact.ts     |   9 +-
 5 files changed, 176 insertions(+), 28 deletions(-)

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 75bed91..6521bf7 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -1,5 +1,5 @@
 import "@/app/globals.css";
-import Footer, { FooterSkeleton } from "@/components/Footer";
+import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import InitialScript from "@/components/InitialScript";
 import { navMenuData } from "@/data/menu";
@@ -8,7 +8,6 @@ import "@public/assets/css/styles.css";
 import "jarallax/dist/jarallax.min.css";
 import { Roboto } from "next/font/google";
 import "photoswipe/dist/photoswipe.css";
-import { Suspense } from "react";
 import "react-modal-video/css/modal-video.css";
 import "swiper/css";
 import "swiper/css/effect-fade";
@@ -31,9 +30,7 @@ export default function MainLayout({
               <Header links={navMenuData} />
             </nav>
             <main id="main">{children}</main>
-            <Suspense fallback={<FooterSkeleton />}>
-              <Footer />
-            </Suspense>
+            <Footer />
           </div>
         </div>
       </body>
diff --git a/src/components/Contacts/Contact.tsx b/src/components/Contacts/Contact.tsx
index 397b49b..4804935 100644
--- a/src/components/Contacts/Contact.tsx
+++ b/src/components/Contacts/Contact.tsx
@@ -1,7 +1,19 @@
-"use client";
-import React from "react";
+import { fetchContact } from "@/services/payload/contact";
+import { Suspense } from "react";
 
 export default function Contact() {
+  return (
+    <>
+      <Suspense fallback={<ContactSkeleton />}>
+        <ContactWithData />
+      </Suspense>
+    </>
+  );
+}
+
+async function ContactWithData() {
+  const contact = await fetchContact();
+
   return (
     <div className="container position-relative">
       <div className="row">
@@ -13,8 +25,8 @@ export default function Contact() {
           </div>
         </div>
       </div>
-      <div className="row wow fadeInUp" data-wow-delay="0.5s">
-        <div className="col-md-6 mb-sm-50">
+      <div className="row" data-wow-delay="0.5s">
+        <div className="col-md-6 mb-sm-10">
           {/* Contact Form */}
           <div className="row mb-60 mb-sm-50">
             {/* Contact Item */}
@@ -38,7 +50,9 @@ export default function Contact() {
                 <h4 className="alt-features-title">Location</h4>
                 <div className="alt-features-descr clearlinks">
                   <div>
-                    <a href="https://maps.app.goo.gl/1sK5Mgi7mtqZsYkcA">5151 E HWY 90, Sierra Vista, Arizona 85635</a>
+                    <a target="_blank" href={contact?.location?.href ?? "#"}>
+                      {contact?.fullLocation ?? ""}
+                    </a>
                   </div>
                 </div>
               </div>
@@ -64,7 +78,7 @@ export default function Contact() {
                 <h4 className="alt-features-title">Phone</h4>
                 <div className="alt-features-descr clearlinks">
                   <div>
-                    <a href="tel:(520) 803-6644">(520) 803-6644</a>
+                    <a href={`tel:${contact?.phone ?? "#"}`}>{contact?.phone ?? ""}</a>
                   </div>
                 </div>
               </div>
@@ -91,7 +105,12 @@ export default function Contact() {
                 </div>
                 <h4 className="alt-features-title">Hours</h4>
                 <div className="alt-features-descr clearlinks">
-                  <p className="text-nowrap">Monday to Friday: 8:00 AM – 5:00 PM</p>
+                  {Array.isArray(contact?.hours) &&
+                    contact.hours.map((h) => (
+                      <p key={h.id} className="text-wrap">
+                        {h.hour ?? ""}
+                      </p>
+                    ))}
                 </div>
               </div>
             </div>
@@ -116,7 +135,7 @@ export default function Contact() {
                 <h4 className="alt-features-title">Fax</h4>
                 <div className="alt-features-descr clearlinks">
                   <div>
-                    <a href="tel:(520) 459-3193">(520) 459-3193</a>
+                    <a href={`tel:${contact?.fax ?? "#"}`}>{contact?.fax ?? ""}</a>
                   </div>
                 </div>
               </div>
@@ -143,3 +162,123 @@ export default function Contact() {
     </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/Footer.tsx b/src/components/Footer.tsx
index e9011ac..3ead61b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,8 +2,19 @@ import Image from "next/image";
 import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
 import ScrollToTop from "./ScrollToTop";
 import { fetchContact } from "@/services/payload/contact";
+import { Suspense } from "react";
 
 export default async function Footer() {
+  return (
+    <>
+      <Suspense fallback={<FooterSkeleton />}>
+        <FooterWithData />
+      </Suspense>
+    </>
+  );
+}
+
+async function FooterWithData() {
   const contact = await fetchContact();
 
   return (
@@ -106,7 +117,7 @@ export default async function Footer() {
   );
 }
 
-export function FooterSkeleton() {
+function FooterSkeleton() {
   return (
     <div
       className="relative text-white py-10"
diff --git a/src/components/Homepage.tsx b/src/components/Homepage.tsx
index d2ac287..7dd89b2 100644
--- a/src/components/Homepage.tsx
+++ b/src/components/Homepage.tsx
@@ -37,27 +37,27 @@ export default function homepage({ dark = false }) {
             </div>
           </div>
         </div>
-        <div className="w-full flex flex-wrap justify-center space-x-5 space-y-4 mt-[550px] md:mt-[24vh] lg:mt-[62vh]">
+        <div className="w-full flex flex-wrap justify-center space-x-5 space-y-4 mt-[550px] md:mt-[24vh] lg:mt-[62vh] wow fadeInUp">
           <Link href="/radiation-oncology">
             <div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-radiation-oncology-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
               <div className="h-full w-full rounded-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center"></div>
-              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+              <p className="text-[36px] text-center px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
                 Radiation Oncology
               </p>
             </div>
           </Link>
           <Link href="/medical-oncology">
             <div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-medical-oncology-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
-              <div className="h-full w-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
-              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+              <div className="h-full w-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center"></div>
+              <p className="text-[36px] text-center px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
                 Medical Oncology
               </p>
             </div>
           </Link>
           <Link href="/skin-cancer">
             <div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-skin-cancer-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
-              <div className="h-full w-full rounded-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
-              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+              <div className="h-full w-full rounded-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center"></div>
+              <p className="text-[36px] text-center px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
                 Skin Cancer
               </p>
             </div>
@@ -67,14 +67,14 @@ export default function homepage({ dark = false }) {
       {/* <section className="mb-5 w-full">
         <Testimonials />
       </section> */}
-      <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
-        <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
+      <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)] bg-cover">
+        <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-lg-block" />
         {/* Mobile Overlay */}
-        <div className="bg-overlay bg-dark-1 opacity-09 d-md-none" />
+        <div className="bg-overlay bg-dark-1 opacity-09 d-lg-none" />
         {/* End Mobile Overlay */}
         <div className="container position-relative">
           <div className="row wow fadeInUp">
-            <div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6">
+            <div className="col-12 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6">
               <h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2>
               <p className="text-sm">
                 Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
diff --git a/src/services/payload/contact.ts b/src/services/payload/contact.ts
index 1ac594d..befcc31 100644
--- a/src/services/payload/contact.ts
+++ b/src/services/payload/contact.ts
@@ -6,20 +6,21 @@ export async function fetchContact() {
   const dataQuery = await payload.findGlobal({ slug: "contacts" });
 
   const fullLocationArr: string[] = [];
+  if (!!dataQuery?.location?.street) {
+    fullLocationArr.push(dataQuery.location.street);
+  }
   if (!!dataQuery?.location?.city) {
     fullLocationArr.push(dataQuery.location.city);
   }
   if (!!dataQuery?.location?.state) {
     fullLocationArr.push(dataQuery.location.state);
   }
-  if (!!dataQuery?.location?.postcode) {
-    fullLocationArr.push(dataQuery.location.postcode);
-  }
 
   return !!dataQuery
     ? {
         ...dataQuery,
-        fullLocation: fullLocationArr.join(","),
+        fullLocation: `${fullLocationArr.join(", ")} ${dataQuery?.location?.postcode ?? ""}`,
+        fullLocationWithoutStreet: `${fullLocationArr.slice(1).join(", ")} ${dataQuery?.location?.postcode ?? ""}`,
       }
     : null;
 }