@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -0,0 +1,405 @@
+import {
+  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,
+  Button,
+  Comments,
+  CommentsRestrictionOverlay,
+  Container,
+  ForumPost,
+  ForumProvider,
+  Heading,
+  type ILevoBlockBaseProps,
+  Media,
+  PostsRestrictionOverlay,
+  SamplePostSkeleton,
+  Section,
+  Skeleton,
+  Typography,
+  useAuth,
+} from "@levo-so/studio";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import type { ICommunityPost1Content } from "./community-post-1.schema";
+
+/** 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 { 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;
+
+      try {
+        const response = await fetch
+          .url(`/v1/community/${forumKey}/post/${postSlug}/get-single`)
+          .get()
+          .json<IResponseSingle<IForumPost>>();
+
+        if (response?.content?.data) {
+          setFetchedPostData({
+            upvoted_at: response.content.data.upvoted_at,
+            downvoted_at: response.content.data.downvoted_at,
+            upvote_count: response.content.data.upvote_count,
+            downvote_count: response.content.data.downvote_count,
+            comments_count: response?.content?.data?.comments_count,
+          });
+          setCommentCount(response?.content?.data?.comments_count ?? 0);
+          hasFetchedRef.current = true;
+        }
+      } catch (error) {
+        const levoError = getLevoError(error);
+        logger?.error("Failed to fetch post vote information", levoError);
+        failedAttemptsRef.current += 1;
+      }
+    };
+
+    fetchPostVotes();
+  }, [postSlug, fetch, logger]);
+
+  const postWithVotes: IForumPost | null = content?.post
+    ? {
+        ...(content.post as unknown as IForumPost),
+        ...(fetchedPostData || {}),
+        comments_count: commentCount,
+      }
+    : null;
+
+  const handleCommentCountUpdate = (delta: number) => {
+    setCommentCount((prev) => prev + delta);
+  };
+
+  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 (
+    <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={`sidebar_links.${index}.sidebar_link`}
+                    elementKey={`sidebar_links.${index}.sidebar_link`}
+                  />
+                );
+              })}
+            </Box>
+          </Box>
+          <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>
+  );
+};
+
+export default CommunityPost1;

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

@@ -1,5 +1,23 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA = {
+  id: "zucZWwW4cQj9F",
+  filename: "contact-us-1.png",
+  kind: "image",
+  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",
+    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",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -13,29 +31,7 @@ const DEFAULT_CONTENT = {
     },
   ],
 
-  media: {
-    id: "7141014160938075687",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-      "1080w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-    },
-  },
+  media: MEDIA,
 };
 
 export type IContactUs1Content = typeof DEFAULT_CONTENT;
@@ -149,24 +145,7 @@ export const ContactUs1: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-left": "8xl",
-          "padding-right": "8xl",
-          "padding-top": "8xl",
-          "padding-bottom": "8xl",
-          tablet: {
-            "padding-left": "4xl",
-            "padding-right": "4xl",
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-          },
-          mobile: {
-            "padding-left": "lg",
-            "padding-right": "lg",
-            "padding-top": "lg",
-            "padding-bottom": "lg",
-          },
-        },
+        layout: {},
         container: {
           display: "flex",
           "justify-content": "space-between",
@@ -213,8 +192,11 @@ export const ContactUs1: IBlock = {
           "flex-direction": "column",
           "row-gap": "4xs",
         },
-        title: {
-          color: "text-1",
+        title: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "column-gap": "sm",
+          "align-items": "center",
         },
       },
       content: DEFAULT_CONTENT,

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.schema.ts

@@ -167,7 +167,7 @@ export const ContactUs2: IBlock = {
         {
           key: "label",
           label: "Label",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "value",
@@ -200,10 +200,7 @@ export const ContactUs2: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        container: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-        },
+        container: {},
         contactContainer: {
           display: "flex",
           width: "100%",
@@ -254,9 +251,7 @@ export const ContactUs2: IBlock = {
               "row-gap": "3xs",
             },
             label: {
-              "font-weight": "600",
-              color: "text-1",
-              "margin-bottom": "none",
+              "font-weight": 600,
             },
             value: {
               color: "text-3",
@@ -319,9 +314,7 @@ export const ContactUs2: IBlock = {
               "row-gap": "3xs",
             },
             label: {
-              "font-weight": "600",
-              color: "text-1",
-              "margin-bottom": "none",
+              "font-weight": 600,
             },
             value: {
               color: "text-3",
@@ -384,9 +377,7 @@ export const ContactUs2: IBlock = {
               "row-gap": "3xs",
             },
             label: {
-              "font-weight": "600",
-              color: "text-1",
-              "margin-bottom": "none",
+              "font-weight": 600,
             },
             value: {
               color: "text-3",
@@ -449,9 +440,7 @@ export const ContactUs2: IBlock = {
               "row-gap": "3xs",
             },
             label: {
-              "font-weight": "600",
-              color: "text-1",
-              "margin-bottom": "none",
+              "font-weight": 600,
             },
             value: {
               color: "text-3",
@@ -518,6 +507,39 @@ export const ContactUs2: IBlock = {
             Heading_Level: "H2",
           },
         },
+        contact_options: [
+          {
+            label: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+          {
+            label: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+          {
+            label: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+          {
+            label: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+        ],
       },
     },
   ],