@levo-so/blocks 0.1.54 → 0.1.59

package/src/blocks/polling/polling-1.schema.ts

@@ -0,0 +1,134 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header: null,
+  title: "Polls",
+  description:
+    "Our polls help you to get the insights you need to make informed decisions.",
+  polls: null,
+  loading_container: null,
+};
+
+export type IPolling1Content = typeof DEFAULT_CONTENT;
+
+export const Polling1: IBlock = {
+  category_id: "polling",
+  title: "Polling 1",
+  key: "polling-1",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "polls",
+      label: "Polls",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "loading_container",
+      label: "Loading Container",
+      field_interface: "BoxWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          "padding-right": "8xl",
+          "padding-left": "8xl",
+          tablet: {
+            "padding-top": "5xl",
+            "padding-bottom": "5xl",
+            "padding-right": "5xl",
+            "padding-left": "5xl",
+          },
+          mobile: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-right": "2xl",
+            "padding-left": "2xl",
+          },
+        },
+        container: {
+          width: "100%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          tablet: {
+            "row-gap": "3xl",
+          },
+          mobile: {
+            "row-gap": "4xl",
+          },
+        },
+        header: {
+          display: "flex",
+          "flex-direction": "column",
+          width: "100%",
+          "row-gap": "none",
+        },
+        title: {},
+        description: {},
+        polls: {
+          display: "flex",
+          "flex-direction": "column",
+          width: "100%",
+          "row-gap": "xl",
+        },
+        loading_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "justify-content": "center",
+          "align-items": "center",
+          "min-height": "256px",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: "2",
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Body",
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/polling/polling-1.tsx

@@ -0,0 +1,466 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Typography,
+  Container,
+  Section,
+  Box,
+  useBlockContext,
+  useAuth,
+} from "@levo-so/studio";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { cn, errorToast, Spinner, successToast, useLevo } from "@levo-so/react";
+import { CircleCheckBig, LoaderCircle } from "lucide-react";
+
+import type { IPolling1Content } from "./polling-1.schema";
+
+const POLLS_RESPONSE_SAMPLE = {
+  content: {
+    data: [
+      {
+        _id: "7388820366332899169",
+        comments_count: 0,
+        content: "Help us prioritize our development roadmap...",
+        cover_image: "",
+        created_at: "2025-10-28T06:14:12.977Z",
+        created_by: "URB3BU",
+        expires_at: "2026-12-31T23:59:59.000Z",
+        kind: "poll",
+        likes_count: 0,
+        media: [],
+        published_at: "2025-10-28T06:14:12.977Z",
+        show_participant_list: true,
+        show_participant_vote: false,
+        slug: "what-feature-would-you-like-to-see-next",
+        title: "What feature would you like to see next?",
+        updated_at: "2025-10-28T06:14:12.977Z",
+        vote_count: 0,
+        workspace_id: "WZZKMUBH",
+        options: [
+          {
+            _id: "7388820367269693206",
+            post: "7388820366332899169",
+            label: "Collaboration Support",
+            count: 4,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+          {
+            _id: "7388820367270497657",
+            post: "7388820366332899169",
+            label: "Roles based Access",
+            count: 8,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+          {
+            _id: "73888203672704976",
+            post: "7388820366332899169",
+            label: "Email Gating",
+            count: 2,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+          {
+            _id: "738882036727049",
+            post: "7388820366332899169",
+            label: "In Platform Image Editing",
+            count: 7,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+        ],
+        total_votes: 21,
+        is_expired: false,
+        user_voted_option: "7388820367269693206",
+        can_vote: true,
+      },
+      {
+        _id: "7388820366332899169",
+        comments_count: 0,
+        content: "Share your perspective with us",
+        cover_image: "",
+        created_at: "2025-10-28T06:14:12.977Z",
+        created_by: "URB3BU",
+        expires_at: "2026-12-31T23:59:59.000Z",
+        kind: "poll",
+        likes_count: 0,
+        media: [],
+        published_at: "2025-10-28T06:14:12.977Z",
+        show_participant_list: true,
+        show_participant_vote: false,
+        slug: "what-do-you-look-for-in-a-good-ai-platform",
+        title: "What do you look for in a good AI platform?",
+        updated_at: "2025-10-28T06:14:12.977Z",
+        vote_count: 0,
+        workspace_id: "WZZKMUBH",
+        options: [
+          {
+            _id: "7388820367270497657",
+            post: "7388820366332899169",
+            label: "Good Customer Support",
+            count: 3,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+          {
+            _id: "738882069693206",
+            post: "7388820366332899169",
+            label: "Rich Functionality",
+            count: 5,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+          {
+            _id: "73888206969320645767",
+            post: "7388820366332899169",
+            label: "Simple but efficient",
+            count: 8,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+          {
+            _id: "738882069696465754506",
+            post: "7388820366332899169",
+            label: "Good Documentation",
+            count: 3,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+          {
+            _id: "7388820696964657897869766",
+            post: "7388820366332899169",
+            label: "Able to DIY",
+            count: 10,
+            created_at: null,
+            created_by: "URB3BU",
+          },
+        ],
+        total_votes: 29,
+        is_expired: false,
+        user_voted_option: "73888206969320645767",
+        can_vote: true,
+      },
+    ],
+    meta: {
+      pages: 1,
+      total: 2,
+    },
+  },
+  status: true,
+};
+
+const PollOption: React.FC<{
+  option: (typeof POLLS_RESPONSE_SAMPLE.content.data)[0]["options"][number];
+  totalVotes: number;
+  selectedOption: string | null;
+  pollId: string;
+  fetchPolls?: () => Promise<void>;
+}> = ({ option, totalVotes, selectedOption, pollId, fetchPolls }) => {
+  const levoClient = useLevo();
+  const { isBuilder } = useBlockContext();
+
+  const [isUserOnOption, setIsUserOnOption] = useState(false);
+  const [isVoting, setIsVoting] = useState(false);
+
+  const [width, setWidth] = useState("0%");
+
+  const isCurrentOptionSelected = selectedOption === option._id;
+
+  const percentage = useMemo(() => {
+    if (
+      Number.isFinite(totalVotes) &&
+      Number.isFinite(option?.count) &&
+      totalVotes > 0
+    ) {
+      return ((option.count / totalVotes) * 100)?.toFixed(0);
+    }
+    return null;
+  }, [totalVotes, option?.count]);
+
+  useEffect(() => {
+    if (percentage !== null) {
+      setTimeout(() => {
+        setWidth(`${percentage}%`);
+      }, 500);
+    }
+  }, [percentage]);
+
+  const handleOptionClick = async () => {
+    if (isBuilder || isVoting || isCurrentOptionSelected) return;
+
+    try {
+      setIsVoting(true);
+      const response = await levoClient?.fetch
+        .url(`/v1/community/forum/${pollId}/register-vote`)
+        .post({
+          option: option?._id,
+        })
+        ?.json<{
+          content: {
+            data: {
+              voted: boolean;
+              option: string;
+              total_votes: number;
+              message: string;
+            };
+          };
+          status: boolean;
+        }>();
+
+      if (
+        response?.status &&
+        response?.content?.data &&
+        response?.content?.data?.voted
+      ) {
+        successToast(response?.content?.data?.message);
+        fetchPolls?.();
+      }
+    } catch (err: unknown) {
+      errorToast("Something went wrong. Please try again");
+    } finally {
+      setIsVoting(false);
+    }
+  };
+
+  return (
+    <div
+      onMouseEnter={() => {
+        setIsUserOnOption(true);
+      }}
+      onMouseLeave={() => {
+        setIsUserOnOption(false);
+      }}
+      onClick={handleOptionClick}
+      className="hover:cursor-pointer"
+    >
+      <div className="flex items-center justify-between">
+        <Heading
+          elementKey="poll-option-title"
+          style={{
+            fontSize: "16px",
+            lineHeight: "140%",
+            fontWeight: "500",
+          }}
+        >
+          {option.label}
+        </Heading>
+
+        {(isUserOnOption || isCurrentOptionSelected) && isVoting === false && (
+          <CircleCheckBig className="text-brand size-5" />
+        )}
+      </div>
+      <div className="flex items-center justify-between gap-x-2">
+        <div
+          className={cn(
+            "relative h-2 w-full rounded",
+            isVoting && "animate-pulse",
+          )}
+          style={{
+            maxWidth: "95%",
+            backgroundColor: "oklch(0.9416 0.0121 259.8229)",
+          }}
+        >
+          <div
+            className="bg-brand absolute top-0 right-0 left-0 h-2 rounded transition-all ease-out"
+            style={{
+              width,
+              transformOrigin: "left center",
+              transitionDuration: "2000ms",
+            }}
+          />
+        </div>
+        <div>
+          {isVoting ? (
+            <LoaderCircle
+              className={cn("text-brand size-6 animate-spin font-bold")}
+              style={{
+                height: "25.59px",
+              }}
+            />
+          ) : (
+            <Typography
+              elementKey="poll-option-votes-percentage-text"
+              style={{
+                fontSize: "16px",
+                lineHeight: "1.6",
+              }}
+            >
+              {percentage ?? 0}%
+            </Typography>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Poll: React.FC<{
+  poll: (typeof POLLS_RESPONSE_SAMPLE.content.data)[0];
+  fetchPolls?: () => Promise<void>;
+  isLoading?: boolean;
+}> = ({ poll, fetchPolls, isLoading }) => {
+  return (
+    <div className="flex flex-col gap-y-4">
+      <div className="flex flex-col-reverse">
+        <Heading
+          elementKey="poll-title"
+          style={{
+            fontWeight: "600",
+            fontSize: "18px",
+            lineHeight: "140%",
+          }}
+        >
+          {poll.title}
+        </Heading>
+        <Typography
+          elementKey="poll-description"
+          style={{
+            fontSize: "14px",
+            lineHeight: "1.5",
+          }}
+        >
+          {poll.content}
+        </Typography>
+      </div>
+      <div
+        className={cn("relative rounded-md p-3", isLoading && "animate-pulse")}
+        style={{
+          backgroundColor: "oklch(0.9758 0.0057 264.5326)",
+        }}
+      >
+        {isLoading && (
+          <div
+            className="absolute inset-0 z-50 flex animate-pulse cursor-wait items-center justify-center rounded-md"
+            style={{
+              backgroundColor: "rgba(255, 255, 255, 0.4)",
+            }}
+          />
+        )}
+        {poll?.options?.map((v) => {
+          return (
+            <PollOption
+              option={v}
+              totalVotes={poll.total_votes}
+              key={v._id}
+              selectedOption={poll?.user_voted_option}
+              pollId={poll._id}
+              fetchPolls={fetchPolls}
+            />
+          );
+        })}
+      </div>
+      <div className="flex w-full items-center justify-between">
+        <div>
+          <Typography
+            elementKey="poll-votes-text"
+            style={{
+              fontSize: "18px",
+              lineHeight: "1.5",
+              fontWeight: "500",
+            }}
+          >
+            {poll?.total_votes} {poll?.total_votes === 1 ? "vote" : "votes"}
+          </Typography>
+        </div>
+        <Typography
+          elementKey="poll-helper-text"
+          style={{
+            fontSize: "12px",
+            lineHeight: "1.5",
+          }}
+        >
+          *Voting in this poll no longer yields commission.
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+const Polling1: React.FC<ILevoBlockBaseProps<IPolling1Content>> = ({
+  content,
+}) => {
+  const levoClient = useLevo();
+  const { isBuilder } = useBlockContext();
+
+  const { account, isAuthLoaded } = useAuth();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [pollList, setPollList] = useState<any[]>([]);
+
+  const fetchPolls = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const response = await levoClient.fetch
+        .get("/v1/community/forum/list")
+        .json<typeof POLLS_RESPONSE_SAMPLE>();
+
+      if (response && response?.content?.data) {
+        setPollList(response?.content?.data);
+        setIsLoaded(true);
+      }
+    } catch (err: unknown) {
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isBuilder) return;
+    fetchPolls();
+  }, []);
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="polls">
+          {isBuilder ? (
+            <>
+              {POLLS_RESPONSE_SAMPLE?.content?.data?.map(
+                (item: any, index: number) => {
+                  return (
+                    <Poll
+                      poll={item}
+                      isLoading={isLoading}
+                      key={`polls.${index}`}
+                      fetchPolls={fetchPolls}
+                    />
+                  );
+                },
+              )}
+            </>
+          ) : (
+            <>
+              {isAuthLoaded && account && isLoaded ? (
+                <>
+                  {pollList?.map((item: any, index: number) => {
+                    return (
+                      <Poll
+                        poll={item}
+                        isLoading={isLoading}
+                        key={`polls.${index}`}
+                        fetchPolls={fetchPolls}
+                      />
+                    );
+                  })}
+                </>
+              ) : (
+                <Box elementKey="loading_container">
+                  <Spinner className="text-brand" />
+                </Box>
+              )}
+            </>
+          )}
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Polling1;