@levo-so/blocks 0.1.74 → 0.1.76

package/src/blocks/event/event-listing-2.tsx

@@ -1,3 +1,4 @@
+import type { IModuleStudioConfig, LevoEvent } from "@levo-so/core";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
@@ -8,17 +9,34 @@ import {
   Image,
   Section,
   Typography,
-  useContentEngine,
+  useBlockContext,
+  useContextEngine,
 } from "@levo-so/studio";
+import dayjs from "dayjs";
 
+import { ClientOnly } from "./ClientOnly";
 import type { IEventListing2Content } from "./event-listing-2.schema";
 
-const EventListing2: React.FC<ILevoBlockBaseProps<IEventListing2Content>> = ({}) => {
-  const { data, query, setQuery, meta } = useContentEngine("events");
+/** */
+interface IEventMeta {
+  total: number;
+  pages: number;
+  series?: {
+    studio_config?: IModuleStudioConfig[];
+  };
+}
+
+const EventListing2: React.FC<ILevoBlockBaseProps<IEventListing2Content>> = ({ content }) => {
+  const { response, query, setQuery } = useContextEngine<LevoEvent.Root, IEventMeta>("events");
+  const { isBuilder } = useBlockContext();
 
   const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
   const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
 
+  const studioConfig = response?.meta?.series?.studio_config?.find(
+    (item) => !item.block_instance_id,
+  );
+
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
@@ -27,39 +45,85 @@ const EventListing2: React.FC<ILevoBlockBaseProps<IEventListing2Content>> = ({})
             <Heading elementKey="title" />
             <Typography elementKey="description" />
           </Box>
-          <Button elementKey="cta-button" />
+          <Box elementKey="cta-buttons_levoGroup" data-levo_group>
+            {content?.["cta-buttons"]?.map((item, index: number) => (
+              <Button key={`cta-buttons.${index}`} elementKey={`cta-buttons.${index}.cta-button`} />
+            ))}
+          </Box>
         </Box>
 
         <Box elementKey="events_levoGroup" data-levo_group>
-          {(data ?? []).map((_: any, index: number) => (
+          {response?.data?.map((item, index: number) => (
             <Box
               key={`event-${index}`}
               data-levo_group_item
               elementKey={`events.${index}.eventWrapper`}
+              config={
+                (isBuilder && studioConfig?.preview_url) || (!isBuilder && studioConfig?.live_url)
+                  ? {
+                      action: {
+                        type: "external_link",
+                        value:
+                          isBuilder && studioConfig.preview_url
+                            ? studioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
+                            : !isBuilder && studioConfig.live_url
+                              ? studioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
+                              : "",
+                        options: {},
+                      },
+                    }
+                  : {}
+              }
             >
-              <Image elementKey={`events.${index}.image`} alt="Event image" />
+              <Image
+                elementKey={`events.${index}.image`}
+                alt="Event image"
+                image={item?.cover_image ?? undefined}
+              />
 
               <Box elementKey={`events.${index}.content-wrapper`}>
-                <Heading elementKey={`events.${index}.title`} />
-                <Typography elementKey={`events.${index}.description`} />
+                <Heading elementKey={`events.${index}.title`}>{item?.title}</Heading>
+                <Typography elementKey={`events.${index}.description`}>
+                  {item?.description}
+                </Typography>
 
-                <Box elementKey={`events.${index}.details_levoGroup`} data-levo_group>
-                  {(data?.[index]?.details ?? []).map((_: any, detailIndex: number) => (
-                    <Box
-                      key={`detail-${detailIndex}`}
-                      data-levo_group_item
-                      elementKey={`events.${index}.details.${detailIndex}.detailWrapper`}
-                    >
-                      <Icon elementKey={`events.${index}.details.${detailIndex}.icon`} />
-                      <Typography elementKey={`events.${index}.details.${detailIndex}.text`} />
-                    </Box>
-                  ))}
+                <Box elementKey={`events.${index}.details_container`}>
+                  <Box elementKey={`events.${index}.date_detail_wrapper`}>
+                    <Icon elementKey={`events.${index}.date_icon`} />
+                    <ClientOnly>
+                      <Typography elementKey={`events.${index}.date_text`}>
+                        {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                      </Typography>
+                    </ClientOnly>
+                  </Box>
+                  <Box elementKey={`events.${index}.time_detail_wrapper`}>
+                    <Icon elementKey={`events.${index}.time_icon`} />
+                    <ClientOnly>
+                      <Typography elementKey={`events.${index}.time_text`}>
+                        {item?.starts_at && item?.ends_at
+                          ? `${dayjs(item.starts_at).format("h:mm A")} - ${dayjs(item.ends_at).format("h:mm A")}`
+                          : "Time TBA"}
+                      </Typography>
+                    </ClientOnly>
+                  </Box>
+                  <Box elementKey={`events.${index}.location_detail_wrapper`}>
+                    <Icon elementKey={`events.${index}.location_icon`} />
+                    <Typography elementKey={`events.${index}.location_text`}>
+                      {item?.location?.place_name || "Location TBA"}
+                    </Typography>
+                  </Box>
+                  <Box elementKey={`events.${index}.type_detail_wrapper`}>
+                    <Icon elementKey={`events.${index}.type_icon`} />
+                    <Typography elementKey={`events.${index}.type_text`}>
+                      {item?.kind === "virtual" ? "Virtual Event" : "In-Person Event"}
+                    </Typography>
+                  </Box>
                 </Box>
               </Box>
             </Box>
           ))}
         </Box>
-        {(meta?.pages || 0) > 1 && (
+        {response?.meta && (
           <Box elementKey="paginationWrapper">
             <Button
               elementKey="paginationLeftButton"
@@ -68,12 +132,12 @@ const EventListing2: React.FC<ILevoBlockBaseProps<IEventListing2Content>> = ({})
             />
 
             <Typography elementKey="paginationText">
-              {`${query?.page || 0}/${meta?.pages || 0}`}
+              {`${query?.page || 0}/${response?.meta?.pages || 0}`}
             </Typography>
             <Button
               elementKey="paginationRightButton"
               onClick={handleNext}
-              disabled={query?.page === meta?.pages}
+              disabled={query?.page === response?.meta?.pages}
             />
           </Box>
         )}