@levo-so/blocks 0.1.60 → 0.1.62

package/src/blocks/community/community-post-1.schema.ts

@@ -4,6 +4,7 @@ const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   post: "{context.forum}",
+  forum_key: "forum",
   sidebar_links_levoGroup: null,
   sidebar_links: [
     {
@@ -43,43 +44,28 @@ const DEFAULT_CONTENT = {
     kind: "image",
     location: "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq.png",
     srcset: {
-      "1080w":
-        "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1080w.webp",
-      "1200w":
-        "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1200w.webp",
-      "1920w":
-        "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1920w.webp",
-      "320w":
-        "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-320w.webp",
-      "640w":
-        "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-640w.webp",
-      "750w":
-        "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-750w.webp",
-      "828w":
-        "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-828w.webp",
+      "1080w": "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1080w.webp",
+      "1200w": "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1200w.webp",
+      "1920w": "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1920w.webp",
+      "320w": "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-320w.webp",
+      "640w": "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-640w.webp",
+      "750w": "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-750w.webp",
+      "828w": "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-828w.webp",
       path: "https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-320w.webp 320w, https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-640w.webp 640w, https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-750w.webp 750w, https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-828w.webp 828w, https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1080w.webp 1080w, https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1200w.webp 1200w, https://static.levostg.online/WZZKMUBH/banner-HXVr5tikleqvq-1920w.webp 1920w",
     },
   },
   edit_profile_block_logo: {
     id: "zucZ9wWTU6qEL",
     kind: "image",
-    location:
-      "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw.jpeg",
+    location: "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw.jpeg",
     srcset: {
-      "1080w":
-        "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1080w.webp",
-      "1200w":
-        "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1200w.webp",
-      "1920w":
-        "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1920w.webp",
-      "320w":
-        "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-320w.webp",
-      "640w":
-        "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-640w.webp",
-      "750w":
-        "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-750w.webp",
-      "828w":
-        "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-828w.webp",
+      "1080w": "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1080w.webp",
+      "1200w": "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1200w.webp",
+      "1920w": "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1920w.webp",
+      "320w": "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-320w.webp",
+      "640w": "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-640w.webp",
+      "750w": "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-750w.webp",
+      "828w": "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-828w.webp",
       path: "https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1200w.webp 1200w, https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1920w.webp 1920w, https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-320w.webp 320w, https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-640w.webp 640w, https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-750w.webp 750w, https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-828w.webp 828w, https://static.levostg.online/WZZKMUBH/netflix-FUGaJXflpOINw-1080w.webp 1080w",
     },
   },
@@ -105,6 +91,11 @@ export const CommunityPost1: IBlock = {
       label: "Container",
       field_interface: "LayoutWidget",
     },
+    {
+      key: "forum_key",
+      label: "Forum Key",
+      field_interface: "HeadingWidget",
+    },
     {
       key: "left_container",
       label: "Left Container",

package/src/blocks/community/community-post-1.tsx

@@ -1,47 +1,210 @@
 import {
-  type ILevoBlockBaseProps,
-  Container,
-  Section,
+  getLevoError,
+  type IForum,
+  type IForumJoinRequest,
+  type IForumMember,
+  type IForumMembershipStatus,
+  type IForumPost,
+  type IResponseSingle,
+} from "@levo-so/core";
+import { useLevo } from "@levo-so/react";
+import {
   Box,
-  ForumPost,
-  Comments,
   Button,
-  Media,
+  Comments,
+  CommentsRestrictionOverlay,
+  Container,
+  ForumPost,
+  ForumProvider,
   Heading,
+  type ILevoBlockBaseProps,
+  Media,
+  PostsRestrictionOverlay,
+  SamplePostSkeleton,
+  Section,
+  Skeleton,
   Typography,
+  useAuth,
 } from "@levo-so/studio";
-import { Spinner, useLevo } from "@levo-so/react";
-import {
-  type IForumPost,
-  type IResponseSingle,
-  getLevoError,
-} from "@levo-so/core";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import type { ICommunityPost1Content } from "./community-post-1.schema";
 
-const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
-  content,
-}) => {
+/** Map API error codes to user-friendly messages */
+const JOIN_REQUEST_ERROR_MESSAGES: { [key: number]: string } = {
+  12111: "This forum doesn't require join requests.",
+  12112: "Join requests are not enabled for this forum.",
+  12113: "You are already a member of this forum.",
+  12114: "You have already submitted a join request.",
+};
+
+/** Skeleton for post detail page loading state */
+const PostDetailSkeleton: React.FC = () => (
+  <div className="flex flex-col gap-4">
+    {/* Post skeleton */}
+    <div className="flex flex-col gap-3 rounded-lg border border-[#E5E5E5] bg-white p-4">
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
+      <div className="mt-2 flex items-center gap-4">
+        <Skeleton className="h-8 w-20 rounded-lg" />
+        <Skeleton className="h-8 w-16 rounded-lg" />
+        <Skeleton className="h-8 w-20 rounded-lg" />
+      </div>
+    </div>
+    {/* Comments skeleton */}
+    <div className="flex flex-col gap-4">
+      <Skeleton className="h-10 w-full rounded-lg" />
+      <div className="flex gap-3">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-3/4" />
+        </div>
+      </div>
+      <div className="flex gap-3">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-1/2" />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({ content }) => {
   const { fetch, logger } = useLevo();
-  const [fetchedPostData, setFetchedPostData] =
-    useState<Partial<IForumPost> | null>(null);
+  const { isLoggedIn } = useAuth();
+  const [fetchedPostData, setFetchedPostData] = useState<Partial<IForumPost> | null>(null);
   const [commentCount, setCommentCount] = useState(
     (content?.post as unknown as IForumPost)?.comments_count ?? 0,
   );
   const hasFetchedRef = useRef(false);
   const failedAttemptsRef = useRef(0);
+  const hasFetchedForumRef = useRef(false);
+  const failedForumAttemptsRef = useRef(0);
+  const hasFetchedMembershipRef = useRef(false);
+  const failedMembershipAttemptsRef = useRef(0);
+  const [forumData, setForumData] = useState<IForum | null>(null);
+  const [isMember, setIsMember] = useState<boolean>(false);
+  const [isLoadingMembership, setIsLoadingMembership] = useState(false);
+  const [joinRequest, setJoinRequest] = useState<IForumJoinRequest | null>(null);
 
   const postSlug = (content?.post as unknown as IForumPost)?.slug;
+  const forumKey = content?.forum_key as unknown as string;
+
+  const fetchForumData = useCallback(async () => {
+    if (!forumKey || hasFetchedForumRef.current || failedForumAttemptsRef.current >= 3) return;
+
+    try {
+      const response = await fetch
+        .url(`/v1/community/${forumKey}/get-single`)
+        .get()
+        .json<IResponseSingle<IForum>>();
+
+      if (response?.content?.data) {
+        setForumData(response.content.data);
+        hasFetchedForumRef.current = true;
+      }
+    } catch (error) {
+      const levoError = getLevoError(error);
+      logger?.error("Failed to fetch forum data", levoError);
+      failedForumAttemptsRef.current += 1;
+    }
+  }, [forumKey, fetch, logger]);
+
+  const checkMembership = useCallback(async () => {
+    if (!forumData?.settings?.invite_only || !isLoggedIn) {
+      setIsMember(false);
+      setJoinRequest(null);
+      hasFetchedMembershipRef.current = true;
+      return;
+    }
+
+    if (hasFetchedMembershipRef.current || failedMembershipAttemptsRef.current >= 3) {
+      return;
+    }
+
+    setIsLoadingMembership(true);
+
+    try {
+      const response = await fetch
+        .url(`/v1/community/${forumKey}/member/get-me`)
+        .get()
+        .json<IResponseSingle<IForumMembershipStatus>>();
+
+      const data = response?.content?.data;
+      setIsMember(!!data?.member);
+      setJoinRequest(data?.join_request || null);
+      hasFetchedMembershipRef.current = true;
+    } catch (error) {
+      const levoError = getLevoError(error);
+      logger?.error("Failed to check membership", levoError);
+      setIsMember(false);
+      setJoinRequest(null);
+      failedMembershipAttemptsRef.current += 1;
+    } finally {
+      setIsLoadingMembership(false);
+    }
+  }, [forumKey, forumData?.settings?.invite_only, isLoggedIn, fetch, logger]);
+
+  /** Submit a join request for the current user */
+  const handleSubmitJoinRequest = useCallback(
+    async (message?: string): Promise<boolean> => {
+      try {
+        const response = await fetch
+          .url(`/v1/community/${forumKey}/join-request/submit`)
+          .post({ message })
+          .json<IResponseSingle<IForumJoinRequest>>();
+
+        if (response?.content?.data) {
+          setJoinRequest(response.content.data);
+          return true;
+        }
+        return false;
+      } catch (error) {
+        const levoError = getLevoError(error);
+        logger?.error("Failed to submit join request", levoError);
+
+        // Throw with user-friendly message
+        const errorMessage =
+          JOIN_REQUEST_ERROR_MESSAGES[levoError.code as any] || levoError.message;
+        throw new Error(errorMessage);
+      }
+    },
+    [forumKey, fetch, logger],
+  );
+
+  useEffect(() => {
+    fetchForumData();
+  }, [fetchForumData]);
+
+  useEffect(() => {
+    if (forumData) {
+      checkMembership();
+    }
+  }, [forumData, checkMembership]);
 
   useEffect(() => {
     const fetchPostVotes = async () => {
-      if (!postSlug || hasFetchedRef.current || failedAttemptsRef.current >= 3)
-        return;
+      if (!postSlug || hasFetchedRef.current || failedAttemptsRef.current >= 3) return;
 
       try {
         const response = await fetch
-          .url(`/v1/community/forum/posts/${postSlug}/get-single`)
+          .url(`/v1/community/${forumKey}/post/${postSlug}/get-single`)
           .get()
           .json<IResponseSingle<IForumPost>>();
 
@@ -78,77 +241,164 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
     setCommentCount((prev) => prev + delta);
   };
 
-  const isLoadingPostData =
-    !hasFetchedRef.current && failedAttemptsRef.current < 3;
+  const isLoadingPostData = !hasFetchedRef.current && failedAttemptsRef.current < 3;
+
+  /** Check if we're still loading forum data */
+  const isLoadingForumData = !hasFetchedForumRef.current && failedForumAttemptsRef.current < 3;
+
+  /** Check if we're still loading membership (only relevant for invite-only forums) */
+  const isCheckingMembership =
+    forumData?.settings?.invite_only &&
+    !hasFetchedMembershipRef.current &&
+    failedMembershipAttemptsRef.current < 3;
+
+  /**
+   * Show skeleton until all required data is fetched:
+   * - Forum data must be loaded
+   * - Membership check must be complete (for invite-only forums)
+   * - Post data should be available
+   */
+  const isInitialLoading = isLoadingForumData || isCheckingMembership || isLoadingMembership;
+
+  const isInviteOnly = forumData?.settings?.invite_only ?? false;
+  const allowJoinRequests = forumData?.settings?.allow_join_requests ?? false;
+
+  /**
+   * Check if posts should be restricted (show overlay):
+   * 1. For non-logged-in users: when invite_only=true
+   * 2. For logged-in non-members: when invite_only=true AND allow_public_view_for_post=false
+   * Note: Only evaluate after membership check is complete to avoid flash
+   */
+  const shouldRestrictPosts =
+    isInviteOnly &&
+    hasFetchedMembershipRef.current &&
+    !isLoadingMembership &&
+    (!isLoggedIn || (!isMember && !forumData?.settings?.allow_public_view_for_post));
+
+  /**
+   * Check if comments should be restricted (show overlay):
+   * 1. For non-logged-in users: when invite_only=true
+   * 2. For logged-in non-members: when invite_only=true AND allow_public_view_for_comment=false
+   * This is a secondary check - only relevant if posts are viewable
+   * Note: Only evaluate after membership check is complete to avoid flash
+   */
+  const shouldRestrictComments =
+    isInviteOnly &&
+    hasFetchedMembershipRef.current &&
+    !isLoadingMembership &&
+    (!isLoggedIn || (!isMember && !forumData?.settings?.allow_public_view_for_comment));
+
+  /**
+   * Whether user can interact with posts (upvote/downvote):
+   * - Not invite-only: true (login modal will show if not logged in)
+   * - Invite-only + member: true
+   * - Invite-only + non-member: false (greyed out)
+   */
+  const canInteractWithPosts = !isInviteOnly || isMember;
+
+  /**
+   * Whether user can interact with comments (reply/vote):
+   * - Not invite-only: true (login modal will show if not logged in)
+   * - Invite-only + member: true
+   * - Invite-only + non-member: false (greyed out)
+   */
+  const canInteractWithComments = !isInviteOnly || isMember;
+
   return (
-    <Section elementKey="layout">
-      <Container elementKey="container">
-        <Box elementKey="left_container">
-          <Box elementKey="sidebar_links_levoGroup">
-            {content?.sidebar_links?.map((v, index) => {
-              return (
-                <Button
-                  key={`sidebar_links.${index}.sidebar_link`}
-                  elementKey={`sidebar_links.${index}.sidebar_link`}
-                />
-              );
-            })}
-          </Box>
-        </Box>
-        <Box elementKey="content_container">
-          {postWithVotes ? (
-            <Box elementKey="post_container">
-              <ForumPost
-                post={postWithVotes}
-                isRenderedSolo
-                postDetailPageBaseURL={content?.post_detail_page_url || ""}
-                actionsLoadingState={{
-                  comments: isLoadingPostData,
-                }}
-              />
-              <Comments
-                post={postWithVotes}
-                onCommentCountChange={handleCommentCountUpdate}
-              />
-            </Box>
-          ) : (
-            <Box elementKey="loading_container">
-              <Spinner className="text-brand" />
-            </Box>
-          )}
-        </Box>
-        <Box elementKey="right_container">
-          <Box elementKey="edit_profile_block">
-            <Box elementKey="edit_profile_block_content_wrapper">
-              <Media
-                elementKey="edit_profile_block_banner_image"
-                alt="Banner Image"
-              />
-              <Box elementKey="edit_profile_block_content">
-                <Media
-                  elementKey="edit_profile_block_logo"
-                  alt="Community Logo"
-                />
-                <Box elementKey="edit_profile_block_text_container">
-                  <Heading elementKey="edit_profile_block_title" />
-                  <Typography elementKey="edit_profile_block_description" />
-                </Box>
-              </Box>
-            </Box>
-            <Box elementKey="edit_profile_ctas_levoGroup">
-              {content?.edit_profile_ctas?.map((v, index) => {
+    <ForumProvider
+      forum={forumData}
+      isMember={isMember}
+      isLoadingMembership={isLoadingMembership}
+      isInviteOnly={isInviteOnly}
+      canInteractWithPosts={canInteractWithPosts}
+      canInteractWithComments={canInteractWithComments}
+      joinRequest={joinRequest}
+      isJoinRequestPending={!!joinRequest}
+      allowJoinRequests={allowJoinRequests}
+      submitJoinRequest={handleSubmitJoinRequest}
+      refreshMembershipStatus={checkMembership}
+    >
+      <Section elementKey="layout">
+        <Container elementKey="container">
+          <Box elementKey="left_container">
+            <Box elementKey="sidebar_links_levoGroup">
+              {content?.sidebar_links?.map((v, index) => {
                 return (
                   <Button
-                    key={`edit_profile_ctas.${index}.edit_profile_cta`}
-                    elementKey={`edit_profile_ctas.${index}.edit_profile_cta`}
+                    key={`sidebar_links.${index}.sidebar_link`}
+                    elementKey={`sidebar_links.${index}.sidebar_link`}
                   />
                 );
               })}
             </Box>
           </Box>
-        </Box>
-      </Container>
-    </Section>
+          <Box elementKey="content_container">
+            {isInitialLoading ? (
+              <Box elementKey="loading_container">
+                <PostDetailSkeleton />
+              </Box>
+            ) : shouldRestrictPosts ? (
+              <>
+                {/* Show sample posts behind the overlay */}
+                <SamplePostSkeleton opacity={0.6} />
+                <SamplePostSkeleton opacity={0.4} />
+                <SamplePostSkeleton opacity={0.3} />
+                <PostsRestrictionOverlay isOpen communityName={forumData?.name} />
+              </>
+            ) : postWithVotes ? (
+              <Box elementKey="post_container">
+                <ForumPost
+                  post={postWithVotes}
+                  isRenderedSolo
+                  postDetailPageBaseURL={content?.post_detail_page_url || ""}
+                  forumKey={forumKey}
+                  actionsLoadingState={{
+                    comments: isLoadingPostData,
+                  }}
+                />
+                {shouldRestrictComments ? (
+                  <CommentsRestrictionOverlay communityName={forumData?.name} />
+                ) : (
+                  <Comments
+                    forumKey={forumKey}
+                    post={postWithVotes}
+                    onCommentCountChange={handleCommentCountUpdate}
+                  />
+                )}
+              </Box>
+            ) : (
+              <Box elementKey="loading_container">
+                <PostDetailSkeleton />
+              </Box>
+            )}
+          </Box>
+          <Box elementKey="right_container">
+            <Box elementKey="edit_profile_block">
+              <Box elementKey="edit_profile_block_content_wrapper">
+                <Media elementKey="edit_profile_block_banner_image" alt="Banner Image" />
+                <Box elementKey="edit_profile_block_content">
+                  <Media elementKey="edit_profile_block_logo" alt="Community Logo" />
+                  <Box elementKey="edit_profile_block_text_container">
+                    <Heading elementKey="edit_profile_block_title" />
+                    <Typography elementKey="edit_profile_block_description" />
+                  </Box>
+                </Box>
+              </Box>
+              <Box elementKey="edit_profile_ctas_levoGroup">
+                {content?.edit_profile_ctas?.map((v, index) => {
+                  return (
+                    <Button
+                      key={`edit_profile_ctas.${index}.edit_profile_cta`}
+                      elementKey={`edit_profile_ctas.${index}.edit_profile_cta`}
+                    />
+                  );
+                })}
+              </Box>
+            </Box>
+          </Box>
+        </Container>
+      </Section>
+    </ForumProvider>
   );
 };
 

package/src/blocks/contact-us/contact-us-1.schema.ts

@@ -4,23 +4,15 @@ const MEDIA = {
   id: "zucZWwW4cQj9F",
   filename: "contact-us-1.png",
   kind: "image",
-  location:
-    "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC.png",
+  location: "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC.png",
   srcset: {
-    "1080w":
-      "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1080w.webp",
-    "1200w":
-      "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1200w.webp",
-    "1920w":
-      "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1920w.webp",
-    "320w":
-      "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-320w.webp",
-    "640w":
-      "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-640w.webp",
-    "750w":
-      "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-750w.webp",
-    "828w":
-      "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-828w.webp",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-828w.webp",
     path: "https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/contact-us-1-OaJcGLqfj5VDC-1200w.webp 1200w",
   },
   mimetype: "image/png",

package/src/blocks/contact-us/contact-us-1.tsx

@@ -1,19 +1,9 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import {
-  Box,
-  Button,
-  Heading,
-  Media,
-  Section,
-  Typography,
-  Container,
-} from "@levo-so/studio";
+import { Box, Button, Container, Heading, Media, Section, Typography } from "@levo-so/studio";
 
 import type { IContactUs1Content } from "./contact-us-1.schema";
 
-const ContactUs1: React.FC<ILevoBlockBaseProps<IContactUs1Content>> = ({
-  content,
-}) => (
+const ContactUs1: React.FC<ILevoBlockBaseProps<IContactUs1Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="contentWrapper">

package/src/blocks/contact-us/contact-us-2.tsx

@@ -1,20 +1,18 @@
 import {
-  type ILevoBlockBaseProps,
+  Box,
+  Container,
+  Form,
   Heading,
   Icon,
-  Typography,
-  Container,
-  Section,
-  Box,
+  type ILevoBlockBaseProps,
   Media,
-  Form,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IContactUs2Content } from "./contact-us-2.schema";
 
-const ContactUs2: React.FC<ILevoBlockBaseProps<IContactUs2Content>> = ({
-  content,
-}) => (
+const ContactUs2: React.FC<ILevoBlockBaseProps<IContactUs2Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="layoutContentWrapper">
@@ -30,32 +28,23 @@ const ContactUs2: React.FC<ILevoBlockBaseProps<IContactUs2Content>> = ({
           </Box>
           <Box data-levo_group elementKey="contact_options_levoGroup">
             {(content?.contact_options ?? []).map((_, index) => (
-              <Box
-                data-levo_group_item
-                elementKey={`contact_options.${index}.wrapper`}
-                key={index}
-              >
+              <Box data-levo_group_item elementKey={`contact_options.${index}.wrapper`} key={index}>
                 <Icon elementKey={`contact_options.${index}.icon`} />
                 <Box elementKey={`contact_options.${index}.text_box`}>
                   <Heading elementKey={`contact_options.${index}.label`} />
                   <Typography elementKey={`contact_options.${index}.value`} />
-                  <Box
-                    data-levo_group
-                    elementKey={`contact_options.${index}.icon_links_levoGroup`}
-                  >
-                    {(content?.contact_options?.[index]?.icon_links ?? []).map(
-                      (_, linkIndex) => (
-                        <Box
-                          data-levo_group_item
-                          elementKey={`contact_options.${index}.icon_links.${linkIndex}.wrapper`}
-                          key={linkIndex}
-                        >
-                          <Icon
-                            elementKey={`contact_options.${index}.icon_links.${linkIndex}.icon`}
-                          />
-                        </Box>
-                      ),
-                    )}
+                  <Box data-levo_group elementKey={`contact_options.${index}.icon_links_levoGroup`}>
+                    {(content?.contact_options?.[index]?.icon_links ?? []).map((_, linkIndex) => (
+                      <Box
+                        data-levo_group_item
+                        elementKey={`contact_options.${index}.icon_links.${linkIndex}.wrapper`}
+                        key={linkIndex}
+                      >
+                        <Icon
+                          elementKey={`contact_options.${index}.icon_links.${linkIndex}.icon`}
+                        />
+                      </Box>
+                    ))}
                   </Box>
                 </Box>
               </Box>