@levo-so/blocks 0.1.75 → 0.1.76

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

@@ -1,3 +1,4 @@
+import type { IModuleStudioConfig, LevoEvent } from "@levo-so/core";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
@@ -8,66 +9,98 @@ import {
   Image,
   Section,
   Typography,
-  useContentEngine,
+  useBlockContext,
+  useContextEngine,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
 
 import { ClientOnly } from "./ClientOnly";
 import type { IEventListing3 } from "./event-listing-3.schema";
 
-const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
-  const { data, query, setQuery, meta } = useContentEngine("events");
+/** */
+interface IEventMeta {
+  total: number;
+  pages: number;
+  series?: {
+    studio_config?: IModuleStudioConfig[];
+  };
+}
+
+const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = ({ 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">
-        <Box elementKey="header-container">
-          <Heading elementKey="title" />
-          <Button elementKey="cta-button" />
+        <Box elementKey="header">
+          <Box elementKey="header-container">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+          <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((item: any, index: number) => (
+          {response?.data?.map((item, index: number) => (
             <Box
               key={`events-listing-element-${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 poster" />
+              <Image
+                elementKey={`events.${index}.image`}
+                alt="event poster"
+                image={item?.cover_image ?? undefined}
+              />
               <Box elementKey={`events.${index}.text-wrapper`}>
-                <Box elementKey={`events.${index}.text-container`}>
-                  <Box elementKey={`events.${index}.date-wrapper`}>
-                    <Icon elementKey={`events.${index}.date-icon`} />
+                <Box elementKey={`events.${index}.date-wrapper`}>
+                  <Icon elementKey={`events.${index}.date-icon`} />
+                  <ClientOnly>
                     <Typography elementKey={`events.${index}.publishedAt-header`}>
-                      <ClientOnly>
-                        {dayjs(item?.["publishedAt-header"]).format("MMM D, YYYY")}
-                      </ClientOnly>
+                      {dayjs(item?.starts_at).format("MMM D, YYYY")}
                     </Typography>
-                  </Box>
-
-                  <Box elementKey={`events.${index}.author-wrapper`}>
-                    <Icon elementKey={`events.${index}.author-image`} />
-                    <Typography elementKey={`events.${index}.author-name`} />
-                  </Box>
+                  </ClientOnly>
                 </Box>
 
                 <Box elementKey={`events.${index}.content-container`}>
-                  <Typography elementKey={`events.${index}.title`} />
-                  <Typography elementKey={`events.${index}.description`} />
-                  <Typography elementKey={`events.${index}.publishedAt`}>
-                    <ClientOnly>{dayjs(item?.publishedAt).format("MMM D, YYYY")}</ClientOnly>
+                  <Heading elementKey={`events.${index}.title`}>{item?.title}</Heading>
+                  <Typography elementKey={`events.${index}.description`}>
+                    {item?.description}
                   </Typography>
-
-                  <Button elementKey={`events.${index}.cta`} />
                 </Box>
               </Box>
             </Box>
           ))}
         </Box>
-        {(meta?.pages || 0) > 1 && (
+        {(response?.meta.pages ?? 0) > 1 && (
           <Box elementKey="paginationWrapper">
             <Button
               elementKey="paginationLeftButton"
@@ -76,12 +109,12 @@ const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
             />
 
             <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>
         )}