Merge pull request #59 from include-davis/homepage-carousel-cms-integration

Homepage Carousel CMS integration

Author: naomitzhao

app/(pages)/(home)/page.jsx

@@ -69,9 +69,44 @@ async function getHomeCards() {
   }
 }
 
+async function getHomepageCarouselCards() {
+  try {
+    const res = await fetch(
+      `${process.env.CMS_BASE_URL}/api/content/homepage-carousel-cards?_published=true`,
+      { next: { tag: "cms" } }
+    );
+    const data = await res.json();
+    if (!data.ok || !data.body || data.body.length === 0) {
+      throw new Error(data.error);
+    }
+    console.log(data);
+    const parsedData = data.body.map((card) => {
+      let button_text, button_link;
+      if (card.button_text_and_link) {
+        [button_text, button_link] = card.button_text_and_link.split(",");
+      }
+      return {
+        title: card.title,
+        hours: card.hours,
+        appointment_instruction: card.appointment_instruction,
+        image: card.image[0],
+        image_alt_text: card.image_alt_text,
+        button_text: button_text,
+        button_link: button_link,
+      };
+    });
+    console.log(parsedData);
+    return parsedData;
+  } catch (e) {
+    console.error(`Failed to fetch homepage-carousel-cards: ${e.message}`);
+    return HomeCardsFallbackData;
+  }
+}
+
 export default async function Home() {
   const generalData = await getHomeGeneralInfo();
   const homeData = await getHomeCards();
+  const homeCarouselData = await getHomepageCarouselCards();
 
   return (
     <main className={styles.body}>
@@ -151,7 +186,7 @@ export default async function Home() {
         </div>
       </div>
 
-      <HomepageCarousel data={data.carousel} />
+      <HomepageCarousel data={homeCarouselData} />
 
       <div className={styles.contactCard}>
         <div className={styles.dots3}>

app/(pages)/_components/HomepageCarousel/HomepageCarousel.jsx

@@ -12,7 +12,13 @@ import "swiper/css";
 import "swiper/css/free-mode";
 
 export default function HomepageCarousel({ data }) {
-  const slides = Object.values(data);
+  let slides = Object.values(data);
+  if (Object.keys(data).length < 4) {
+    slides = Object.values([...data, ...data])
+  }
+
+  console.log(slides);
+
   const swiperRef = useRef(null);
   const [activeIndex, setActiveIndex] = useState(1);
   const numSlides = 4;
@@ -65,8 +71,8 @@ export default function HomepageCarousel({ data }) {
               >
                 <div className={styles.imageContainer}>
                   <Image
-                    src={slideinfo.src}
-                    alt="image"
+                    src={slideinfo.image}
+                    alt={slideinfo.image_alt_text}
                     fill
                     style={{ objectFit: "cover" }}
                     sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 33vw"}
@@ -80,18 +86,18 @@ export default function HomepageCarousel({ data }) {
                       size={20}
                       color="var(--emerald)"
                     />
-                    <p>{slideinfo.time}</p>
+                    <p>{slideinfo.hours}</p>
                   </div>
                   <div>
                     <IoMdInformationCircle
                       className={styles.icon}
                       size={20}
                       color="var(--emerald)"
                     />
-                    <p>{slideinfo.info}</p>
+                    <p>{slideinfo.appointment_instruction}</p>
                   </div>
-                  <a href="/clinic-schedule" className="btn">
-                    Schedule Now
+                  <a href={slideinfo.button_link} className="btn">
+                    {slideinfo.button_text}
                   </a>
                 </div>
               </div>

app/(pages)/_components/HomepageCarousel/HomepageCarousel.module.scss

@@ -23,13 +23,13 @@
   color: var(--dark-grey);
 }
 
-.swiper {
-  width: calc(8px * 123);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-  overflow: visible !important;
+.swiper{
+    width: calc(8px * 123);
+    // display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    overflow: visible !important;
 }
 
 .swiperslide {
@@ -68,7 +68,8 @@
 }
 
 .unshown {
-  display: none;
+    opacity: 1;
+    pointer-events: none !important;
 }
 
 .imageContainer {