@levo-so/blocks 0.1.101 → 0.1.103

package/src/blocks/ecommerce/ecommerce-4.schema.ts

@@ -0,0 +1,461 @@
+import type { IBlock } from "@levo-so/studio";
+
+const CALENDAR_ICON_SVG =
+  '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="var(--color-icon-primary)"/><path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="var(--color-icon-primary)"/><path d="M20.5 9.83997H3.5C3.09 9.83997 2.75 9.49997 2.75 9.08997C2.75 8.67997 3.09 8.33997 3.5 8.33997H20.5C20.91 8.33997 21.25 8.67997 21.25 9.08997C21.25 9.49997 20.91 9.83997 20.5 9.83997Z" fill="var(--color-icon-primary)"/><path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="var(--color-icon-primary)"/></svg>';
+
+const TAG_ICON_SVG =
+  '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 12.75L12 20.25L21 11.25V3.75H13.5L4.5 12.75Z" stroke="var(--color-icon-primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.25 8.25C17.6642 8.25 18 7.91421 18 7.5C18 7.08579 17.6642 6.75 17.25 6.75C16.8358 6.75 16.5 7.08579 16.5 7.5C16.5 7.91421 16.8358 8.25 17.25 8.25Z" fill="var(--color-icon-primary)"/></svg>';
+
+const DEFAULT_ITEM = (id: string, overrides: Record<string, any> = {}) => ({
+  id,
+  eventWrapper: null,
+  image: {
+    id: "ecom1_placeholder",
+    kind: "image",
+    location: "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg",
+    mimetype: "image/jpeg",
+    srcset: {
+      "320w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+      "640w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+      "750w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+      "828w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+      "1080w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+      path: "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w",
+    },
+  },
+  "text-wrapper": null,
+  "text-container": null,
+  "caption-text": "Health Package",
+  "date-wrapper": null,
+  "date-icon": {
+    kind: "icon",
+    data: {
+      id: "tag-1",
+      label: "Tag",
+      svgCode: TAG_ICON_SVG,
+    },
+  },
+  "publishedAt-header": "₹4,000",
+  "author-wrapper": null,
+  "author-image": {
+    kind: "icon",
+    data: {
+      id: "calendar-1",
+      label: "Calendar 1",
+      svgCode: CALENDAR_ICON_SVG,
+    },
+  },
+  "author-info-wrapper": null,
+  "author-name": "Newborns 24-72 hours",
+  title: "New Born Screening Extended",
+  description:
+    "Comprehensive heel-prick blood spot test for 50+ treatable conditions including thyroid issues, metabolic disorders, and more.",
+  publishedAt: "",
+  cta: "Add to cart",
+  ...overrides,
+});
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-container": null,
+  title: "Available Tests & Packages",
+  "cta-button": "View all",
+  events: [
+    DEFAULT_ITEM("test-item-1"),
+    DEFAULT_ITEM("test-item-2"),
+    DEFAULT_ITEM("test-item-3"),
+    DEFAULT_ITEM("test-item-4"),
+    DEFAULT_ITEM("test-item-5"),
+    DEFAULT_ITEM("test-item-6"),
+  ],
+  cart_key: "levo_cart_collectiona",
+  carousel_opts: null,
+};
+
+export type IEcommerce4Content = typeof DEFAULT_CONTENT;
+
+const GROUP_ITEM_STYLES = {
+  eventWrapper: {
+    "border-radius": "xl",
+    overflow: "hidden",
+    "box-shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    position: "relative",
+    display: "flex",
+    "flex-direction": "column",
+    height: "100%",
+    "background-color": "var(--color-card, var(--color-background))",
+  },
+  image: {
+    width: "100%",
+    "aspect-ratio": "3 / 2",
+    "object-fit": "cover",
+  },
+  "text-wrapper": {
+    "padding-left": "none",
+    "padding-top": "none",
+    "padding-right": "none",
+    "padding-bottom": "xl",
+    display: "flex",
+    "flex-direction": "column",
+    "row-gap": "lg",
+    flex: "1",
+  },
+  "text-container": {
+    display: "flex",
+    "flex-direction": "column",
+    "justify-content": "space-between",
+    "column-gap": "md",
+    "padding-top": "md",
+    "padding-bottom": "md",
+    "padding-left": "xl",
+    "padding-right": "xl",
+    "border-bottom": "1px solid var(--color-border)",
+    gap: "base",
+  },
+  "caption-text": { display: "none" },
+  "date-wrapper": {
+    display: "flex",
+    "align-items": "center",
+    "column-gap": "xs",
+  },
+  "date-icon": { width: "20px", height: "20px", "flex-shrink": "0" },
+  "publishedAt-header": {
+    "font-size": "sm",
+    color: "var(--color-brand)",
+    "font-weight": 700,
+  },
+  "author-wrapper": {
+    display: "flex",
+    "align-items": "center",
+    "column-gap": "xs",
+  },
+  "author-image": { width: "20px", height: "20px", "flex-shrink": "0" },
+  "author-name": {
+    "font-size": "sm",
+    "font-weight": 500,
+    color: "var(--color-text-2)",
+  },
+  title: {
+    "font-weight": 600,
+    "font-size": "lg",
+    color: "var(--color-text-1)",
+    "line-height": "1.35",
+  },
+  description: {
+    overflow: "hidden",
+    display: "-webkit-box",
+    "-webkit-box-orient": "vertical",
+    "-webkit-line-clamp": 3,
+    color: "var(--color-text-2)",
+    "line-height": 1.5,
+  },
+  publishedAt: { display: "none" },
+  cta: {
+    "padding-top": "sm",
+    "padding-bottom": "sm",
+    "padding-left": "lg",
+    "padding-right": "lg",
+    "border-radius": "md",
+    "font-size": "sm",
+    "font-weight": 500,
+    border: "none",
+    cursor: "pointer",
+    "align-self": "flex-start",
+    "margin-top": "auto",
+    width: "100%",
+    "text-align": "center",
+  },
+  "content-container": {
+    "padding-left": "xl",
+    "padding-right": "xl",
+    display: "flex",
+    "flex-direction": "column",
+    "row-gap": "md",
+    flex: "1",
+  },
+};
+
+export const Ecommerce4: IBlock = {
+  category_id: "ecommerce",
+  title: "Ecommerce 4 (Carousel)",
+  key: "ecommerce-4",
+  version: "v1",
+  prompt_description:
+    "Product/test listing in a carousel with price, add-to-cart functionality. Items are stored in localStorage cart.",
+  content_schema: [
+    { key: "layout", label: "Layout", field_interface: "LayoutWidget" },
+    { key: "container", label: "Container", field_interface: "ContainerWidget" },
+    { key: "header-container", label: "Header Container", field_interface: "BoxWidget" },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "cta-button",
+      label: "Header CTA Button",
+      field_interface: "ButtonWidget",
+    },
+    { key: "desktop-nav-wrapper", label: "Desktop Nav Wrapper", field_interface: "BoxWidget" },
+    { key: "carousel-prev-desktop", label: "Prev (Desktop)", field_interface: "ButtonWidget" },
+    { key: "carousel-next-desktop", label: "Next (Desktop)", field_interface: "ButtonWidget" },
+    { key: "mobile-nav-wrapper", label: "Mobile Nav Wrapper", field_interface: "BoxWidget" },
+    { key: "carousel-prev-mobile", label: "Prev (Mobile)", field_interface: "ButtonWidget" },
+    { key: "carousel-next-mobile", label: "Next (Mobile)", field_interface: "ButtonWidget" },
+    {
+      key: "events",
+      label: "Products",
+      kind: "group",
+      field_interface: "CarouselWidget",
+      fields: [
+        { key: "id", label: "Item ID (Internal)", field_interface: "TypographyWidget" },
+        { key: "eventWrapper", label: "Card Wrapper", field_interface: "BoxWidget" },
+        {
+          key: "image",
+          label: "Product Image",
+          field_interface: "ImageWidget",
+        },
+        { key: "text-wrapper", label: "Text Wrapper", field_interface: "BoxWidget" },
+        { key: "text-container", label: "Text Container", field_interface: "BoxWidget" },
+        { key: "date-wrapper", label: "Price Wrapper", field_interface: "BoxWidget" },
+        {
+          key: "date-icon",
+          label: "Price Icon",
+          field_interface: "IconWidget",
+        },
+        {
+          key: "publishedAt-header",
+          label: "Price",
+          field_interface: "TypographyWidget",
+        },
+        { key: "author-wrapper", label: "Meta Wrapper", field_interface: "BoxWidget" },
+        {
+          key: "author-image",
+          label: "Meta Icon",
+          field_interface: "IconWidget",
+        },
+        { key: "author-info-wrapper", label: "Meta Info Wrapper", field_interface: "BoxWidget" },
+        {
+          key: "author-name",
+          label: "Age Group / Meta",
+          field_interface: "TypographyWidget",
+        },
+        { key: "content-container", label: "Content Container", field_interface: "BoxWidget" },
+        {
+          key: "title",
+          label: "Product Name",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "description",
+          label: "Product Description",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "publishedAt",
+          label: "Additional Info",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "cta_wrapper",
+          label: "CTA Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description: "Wrapper for CTA and View Details button.",
+          },
+        },
+
+        {
+          key: "cta",
+          label: "Add to Cart CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description: "Button to  add product to cart. Default: 'Add to cart'.",
+            min_characters: 5,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "view_details",
+          label: "View Details Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+    {
+      key: "cart_key",
+      label: "Cart Storage Key",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Unique key for local storage to separate different carts.",
+        min_characters: 3,
+        max_characters: 50,
+      },
+    },
+    {
+      key: "carousel-navigation-pills-container",
+      label: "Carousel Navigation Pills Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Container for the navigation pills, positioned below the carousel.",
+      },
+    },
+    {
+      key: "carousel-navigation-pill",
+      label: "Carousel Navigation Pill",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Individual navigation pill indicating the current slide.",
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-left": "5xl",
+          "padding-right": "5xl",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          tablet: {
+            "padding-left": "3xl",
+            "padding-right": "3xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "xl",
+            "padding-right": "xl",
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+          },
+        },
+        container: { display: "flex", "flex-direction": "column", "row-gap": "2xl" },
+        "header-container": {
+          display: "flex",
+          width: "100%",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "margin-bottom": "xl",
+          "column-gap": "xl",
+          mobile: { "flex-direction": "column", "align-items": "flex-start", "row-gap": "md" },
+        },
+        title: { color: "var(--color-text-1)", margin: "0" },
+        "cta-button": {
+          "text-decoration": "none",
+          border: "none",
+          cursor: "pointer",
+          display: "none",
+          "align-items": "center",
+          "column-gap": "xs",
+          "font-weight": 500,
+          mobile: { display: "flex" },
+        },
+        "desktop-nav-wrapper": {
+          display: "flex",
+          "column-gap": "sm",
+          "margin-left": "auto",
+          mobile: { display: "none" },
+        },
+        "carousel-prev-desktop": {
+          position: "static",
+          transform: "none",
+          width: "40px",
+          height: "40px",
+          "background-color": "var(--color-brand)",
+          color: "var(--color-background, #ffffff)",
+          border: "none",
+          "border-radius": "full",
+        },
+        "carousel-next-desktop": {
+          position: "static",
+          transform: "none",
+          width: "40px",
+          height: "40px",
+          "background-color": "var(--color-brand)",
+          color: "var(--color-background, #ffffff)",
+          border: "none",
+          "border-radius": "full",
+        },
+        "mobile-nav-wrapper": {
+          display: "none",
+          mobile: {
+            display: "flex",
+            "justify-content": "center",
+            "column-gap": "lg",
+            "margin-top": "xl",
+          },
+        },
+        "carousel-prev-mobile": {
+          position: "static",
+          transform: "none",
+          width: "40px",
+          height: "40px",
+          "background-color": "var(--color-brand)",
+          color: "var(--color-background, #ffffff)",
+          border: "none",
+          "border-radius": "full",
+        },
+        "carousel-next-mobile": {
+          position: "static",
+          transform: "none",
+          width: "40px",
+          height: "40px",
+          "background-color": "var(--color-brand)",
+          color: "var(--color-background, #ffffff)",
+          border: "none",
+          "border-radius": "full",
+        },
+        "carousel-navigation-pills-container": {
+          display: "flex",
+          "justify-content": "center",
+          "margin-top": "xl",
+          "column-gap": "xs",
+        },
+        "carousel-navigation-pill": {
+          width: "8px",
+          height: "8px",
+          "border-radius": "100px",
+          "background-color": "border",
+          cursor: "pointer",
+          transition: "all 0.3s ease",
+        },
+        carousel_opts: {
+          width: "100%",
+        },
+        events_levoGroup: {
+          width: "100%",
+          number_of_slides: 3.5,
+          "column-gap": "base",
+          tablet: { number_of_slides: 2.5 },
+          mobile: { number_of_slides: 1.2 },
+        },
+        events_levoGroupItem: GROUP_ITEM_STYLES,
+        events: [{}, {}, {}, {}, {}, {}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: { Heading_Level: "H2" },
+          heading: { level: 2 },
+        },
+        "cta-button": {
+          selectedVariants: { Button_Variants: "Secondary" },
+        },
+        events_levoGroupItem: {
+          cta: {
+            selectedVariants: { Button_Variants: "Primary" },
+          },
+        },
+      },
+    },
+  ],
+};