@levo-so/blocks 0.1.54 → 0.1.58

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

@@ -0,0 +1,52 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { ITimeline1 } from "./timeline-1.schema";
+
+const Timeline1: React.FC<ILevoBlockBaseProps<ITimeline1>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="header_wrapper">
+      <Heading elementKey="title" />
+      <Typography elementKey="description" />
+    </Container>
+    <Container elementKey="container">
+      <Box elementKey="center_line" />
+      <Box elementKey="events_levoGroup" data-levo_group>
+        {(content?.events ?? [])?.map((_, index) => (
+          <Box
+            key={index}
+            data-levo_group_item
+            elementKey={`events.${index}.wrapper`}
+          >
+            {/* Left Side Content */}
+            <Box elementKey={`events.${index}.content_wrapper`}>
+              <Typography elementKey={`events.${index}.description`} />
+              <Image
+                elementKey={`events.${index}.image`}
+                alt={content?.events?.[index]?.title || "Timeline event image"}
+              />
+            </Box>
+
+            {/* Timeline Dot and Line */}
+            <Box elementKey={`events.${index}.timeline_wrapper`}>
+              <Box elementKey="timeline_dot_wrapper">
+                <Box elementKey={`events.${index}.timeline_line`} />
+                <Box elementKey={`events.${index}.timeline_dot`} />
+              </Box>
+              <Typography elementKey={`events.${index}.year`} />
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Timeline1;

package/src/blocks/users/edit-profile.schema.ts

@@ -0,0 +1,294 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_section: null,
+  title: "Settings",
+  description: "Manage your account settings.",
+  profile_section: null,
+  content: null,
+  sections: [
+    {
+      cta: "Profile",
+      wrapper: null,
+      header: null,
+      title: "Profile",
+      description: "This is how others will see you on the site.",
+    },
+  ],
+  profile_settings_form: null,
+  loading_container: null,
+};
+
+export type IEditProfileContent = typeof DEFAULT_CONTENT;
+
+export const EditProfile: IBlock = {
+  category_id: "users",
+  title: "Edit Profile",
+  key: "edit-profile",
+  version: "v1",
+  prompt_description:
+    "A comprehensive edit profile form with avatar upload, personal information fields, and additional sections for security settings. Features form validation hints and actionable buttons.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "header_section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "profile_section",
+      label: "Profile Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "sections",
+      label: "Sections",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+        {
+          key: "wrapper",
+          label: "Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "header",
+          label: "Header",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+    {
+      key: "content",
+      label: "Content",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "profile_settings_form",
+      label: "Profile Settings Form",
+      field_interface: "FormWidget",
+    },
+    {
+      key: "loading_container",
+      label: "Loading Container",
+      field_interface: "BoxWidget",
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "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_section: {
+          "margin-bottom": "none",
+          "border-style": "solid",
+          "border-color": "brandSecondary",
+          "border-right-width": "0px",
+          "border-bottom-width": "1px",
+          "border-left-width": "0px",
+          "border-top-width": "0px",
+          "padding-bottom": "xl",
+        },
+        title: {
+          "font-weight": 700,
+        },
+        description: {
+          "margin-top": "5xs",
+        },
+        profile_section: {
+          display: "flex",
+          width: "100%",
+          "flex-grow": "1",
+          gap: "xl",
+        },
+        sections_levoGroup: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          gap: "6xs",
+          "max-width": "235px",
+        },
+        content: {
+          display: "flex",
+          width: "100%",
+        },
+        sections: Array(1)
+          .fill(0)
+          .map(() => {
+            return {
+              cta: {},
+              header: {},
+              title: {},
+              description: {},
+              wrapper: {
+                width: "100%",
+              },
+            };
+          }),
+        profile_settings_form: {
+          "margin-top": "xl",
+        },
+        loading_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "justify-content": "center",
+          "align-items": "center",
+          "min-height": "256px",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+        },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Body",
+          },
+        },
+        sections: [
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+            title: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+          },
+        ],
+        profile_settings_form: {
+          form: {
+            collection_id: "so_levo_membership_account",
+            collection_name: "Membership Account",
+            workspace_id: "WZZKMUBH",
+            hidden_fields: [
+              // Extra Fields in headstart
+              "7315443834393400293",
+              "7315443834420559484",
+              "7315443834430280457",
+              "7315443834441059829",
+              // Default Fields
+              "_id",
+              "slug",
+              "email",
+              "display_email",
+              "reducted_email",
+              "organizations",
+              "mobile",
+              "reducted_mobile",
+              "verified_at",
+              "email_verified_at",
+              "mobile_verified_at",
+              "last_access_at",
+              "account_locked_at",
+              "credentials_expired_at",
+              "referral_count",
+              "referral_code",
+              "referred_by_account",
+              "referred_by_organization",
+              "deactivated_at",
+              "flagged_at",
+              "created_at",
+              "updated_at",
+              "onboarded_at",
+              "password",
+              "tfa_secret",
+              "source",
+              "acquisition_visit",
+              "acquisition_page",
+              "conversion_visit",
+              "conversion_page",
+              "oauth_credentials",
+              "attendees",
+              "bookings",
+              "deliveries",
+              "status",
+              "modified_by",
+            ],
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/users/edit-profile.tsx

@@ -0,0 +1,184 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  EditForm,
+  Heading,
+  Section,
+  Typography,
+  useAuth,
+  useBlockContext,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+import { errorHandler, Spinner, successToast, useLevo } from "@levo-so/react";
+
+import type { IEditProfileContent } from "./edit-profile.schema";
+
+const EditProfile: React.FC<ILevoBlockBaseProps<IEditProfileContent>> = ({
+  content,
+  config,
+}) => {
+  const levoClient = useLevo();
+
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [formData, setFormData] = useState<any>(null);
+  const [entry, setEntry] = useState<any>(null);
+  const [isFormLoading, setIsFormLoading] = useState<boolean>(true);
+
+  const { account, isAuthLoaded } = useAuth();
+  const { isBuilder } = useBlockContext();
+
+  const collectionKey = config?.profile_settings_form?.form?.schema?.key;
+  const isMembershipForm = collectionKey === "so_levo_membership_account";
+
+  useEffect(() => {
+    const fetchFormData = async () => {
+      if (!isAuthLoaded || !collectionKey || !account) {
+        setIsFormLoading(false);
+        return;
+      }
+
+      try {
+        setIsFormLoading(true);
+
+        if (isMembershipForm) {
+          setFormData(account ?? {});
+          setEntry(null);
+        } else {
+          const response =
+            await levoClient?.collection?.getDraftEntry(collectionKey);
+
+          const entries = response?.content?.data ?? [];
+
+          if (entries?.length > 0) {
+            const firstEntry = entries[0];
+            setEntry(firstEntry);
+            setFormData(firstEntry);
+          } else {
+            setFormData({});
+            setEntry(null);
+          }
+        }
+      } catch (error) {
+        // const levoError = getLevoError(error);
+        levoClient?.logger?.error("Failed to fetch form data", error);
+        setFormData(isMembershipForm ? (account ?? {}) : {});
+      } finally {
+        setIsFormLoading(false);
+      }
+    };
+
+    fetchFormData();
+  }, [isAuthLoaded, collectionKey, isMembershipForm, account, levoClient]);
+
+  const onSubmit = async (values: any) => {
+    if (!collectionKey) return;
+
+    setIsLoading(true);
+    try {
+      const allFields =
+        config?.profile_settings_form?.form?.schema?.sections?.flatMap(
+          (v) => v?.fields,
+        );
+      const hiddenFieldsInstance =
+        config?.profile_settings_form?.form?.hidden_fields ?? [];
+
+      const availableFields =
+        allFields
+          ?.filter((v) => !hiddenFieldsInstance?.includes(v?.id))
+          ?.map((v) => v?.key) ?? [];
+
+      const filteredValues = Object.entries(values)?.filter(([key]) =>
+        availableFields?.includes(key),
+      );
+
+      const filteredData = Object.fromEntries(filteredValues);
+
+      let response;
+
+      if (isMembershipForm) {
+        response = await levoClient?.membership?.updateMe(filteredData);
+      } else {
+        if (entry?._id) {
+          response = await levoClient?.collection?.editDraftEntry(
+            collectionKey,
+            entry._id,
+            filteredData,
+          );
+        } else {
+          response = await levoClient?.collection?.saveCollectionData({
+            collection_id: collectionKey,
+            data: filteredData,
+          });
+        }
+      }
+
+      if (response) {
+        successToast("Profile updated successfully.");
+      }
+    } catch (err: unknown) {
+      levoClient?.logger?.error("Failed to update profile", err);
+      errorHandler(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header_section">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="profile_section">
+          <Box elementKey="sections_levoGroup" data-levo_group>
+            {(content?.sections ?? [])?.map((_: any, index: number) => {
+              return (
+                <Button
+                  data-levo_group_item
+                  key={`sections-${index}`}
+                  elementKey={`sections.${index}.cta`}
+                  onClick={() => setActiveIndex(index)}
+                />
+              );
+            })}
+          </Box>
+          <Box elementKey="content">
+            <Box elementKey={`sections.${activeIndex}.wrapper`}>
+              <Box elementKey={`sections.${activeIndex}.header`}>
+                <Heading elementKey={`sections.${activeIndex}.title`} />
+                <Typography
+                  elementKey={`sections.${activeIndex}.description`}
+                />
+              </Box>
+
+              <>
+                {isFormLoading ? (
+                  <Box elementKey="loading_container">
+                    <Spinner />
+                  </Box>
+                ) : formData ? (
+                  <EditForm
+                    elementKey="profile_settings_form"
+                    initialValues={formData}
+                    onSubmit={onSubmit}
+                    isLoading={isLoading}
+                  />
+                ) : (
+                  <Box elementKey="loading_container">
+                    <Spinner />
+                  </Box>
+                )}
+              </>
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default EditProfile;