@levo-so/blocks 0.1.101 → 0.1.103

package/src/blocks/ecommerce/ecommerce-4.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Container,
+  Heading,
+  Icon,
+  Image as LevoImage,
+  Section,
+  Typography,
+  useContentEngine,
+} from "@levo-so/studio";
+import { useCallback, useEffect, useState } from "react";
+
+import type { IEcommerce4Content } from "./ecommerce-4.schema";
+
+function getCart(key: string): any[] {
+  try {
+    return JSON.parse(localStorage.getItem(key) || "[]");
+  } catch {
+    return [];
+  }
+}
+
+function saveCart(key: string, cart: any[]) {
+  localStorage.setItem(key, JSON.stringify(cart));
+  window.dispatchEvent(new Event("levo_cart_updated"));
+}
+
+const Ecommerce4: React.FC<ILevoBlockBaseProps<IEcommerce4Content>> = ({ content }) => {
+  const { data } = useContentEngine("events");
+
+  const [mounted, setMounted] = useState(false);
+  const [cartIds, setCartIds] = useState<Set<string>>(new Set());
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap());
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const rawKey = content?.cart_key || "collectiona";
+  const cleanKey = rawKey.replace(/<[^>]*>/g, "").trim();
+  const CART_KEY = `levo_collection_cart_${cleanKey}`;
+
+  useEffect(() => {
+    setMounted(true);
+    const syncCart = () => {
+      const cart = getCart(CART_KEY);
+      setCartIds(new Set(cart.map((item: any) => item._id || item.id)));
+    };
+    syncCart();
+    window.addEventListener("levo_cart_updated", syncCart);
+    window.addEventListener("storage", syncCart);
+    return () => {
+      window.removeEventListener("levo_cart_updated", syncCart);
+      window.removeEventListener("storage", syncCart);
+    };
+  }, [CART_KEY]);
+
+  const handleCartToggle = useCallback(
+    (item: any, index: number) => {
+      const cart = getCart(CART_KEY);
+      const itemId = item?._id || item?.id || `item-${index}`;
+      const itemName =
+        item?.name || item?.title || item?.["caption-text"] || `Product ${index + 1}`;
+
+      const rawPrice = item?.price || item?.["publishedAt-header"] || "0";
+      const itemPrice =
+        typeof rawPrice === "number"
+          ? rawPrice
+          : parseFloat(String(rawPrice).replace(/[^0-9.]/g, "")) || 0;
+
+      const isInCart = cart.some((c: any) => (c._id || c.id) === itemId);
+      if (isInCart) {
+        saveCart(
+          CART_KEY,
+          cart.filter((c: any) => (c._id || c.id) !== itemId),
+        );
+      } else {
+        saveCart(CART_KEY, [
+          ...cart,
+          {
+            _id: itemId,
+            id: itemId,
+            name: itemName,
+            price: itemPrice,
+            image: item.image,
+          },
+        ]);
+      }
+      setCartIds((prev) => {
+        const next = new Set(prev);
+        if (isInCart) next.delete(itemId);
+        else next.add(itemId);
+        return next;
+      });
+    },
+    [CART_KEY],
+  );
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Carousel
+          elementKey="events_levoGroup"
+          data-levo_group
+          setApi={setApi}
+          opts={{
+            watchDrag: true,
+            watchResize: true,
+            watchSlides: true,
+          }}
+        >
+          <Box elementKey="header-container">
+            <Heading elementKey="title" />
+            <Box elementKey="desktop-nav-wrapper">
+              <CarouselPrevious
+                elementKey="carousel-prev-desktop"
+                style={{ position: "static", transform: "none" }}
+              />
+              <CarouselNext
+                elementKey="carousel-next-desktop"
+                style={{ position: "static", transform: "none" }}
+              />
+            </Box>
+            <Button elementKey="cta-button" />
+          </Box>
+
+          <CarouselContent>
+            {(data || [])?.map((item: any, index: number) => {
+              const itemId = item?._id || item?.id || `item-${index}`;
+              const isInCart = mounted && itemId ? cartIds.has(itemId) : false;
+              return (
+                <CarouselItem key={`ecommerce-carousel-item-${index}`} data-levo_group_item>
+                  <Box elementKey={`events.${index}.eventWrapper`}>
+                    <LevoImage
+                      elementKey={`events.${index}.image`}
+                      alt={item?.name || item?.title || "product image"}
+                    />
+                    <Box elementKey={`events.${index}.text-wrapper`}>
+                      <Box elementKey={`events.${index}.text-container`}>
+                        <Box elementKey={`events.${index}.date-wrapper`}>
+                          <Icon elementKey={`events.${index}.date-icon`} />
+                          <Typography elementKey={`events.${index}.publishedAt-header`}>
+                            {item?.["publishedAt-header"] ||
+                              (item?.price ? `₹${Number(item.price).toLocaleString("en-IN")}` : "")}
+                          </Typography>
+                        </Box>
+
+                        <Box elementKey={`events.${index}.author-wrapper`}>
+                          <Icon elementKey={`events.${index}.author-image`} />
+                          <Typography elementKey={`events.${index}.author-name`}>
+                            {item?.age_group || item?.["author-name"] || ""}
+                          </Typography>
+                        </Box>
+                      </Box>
+
+                      <Box elementKey={`events.${index}.content-container`}>
+                        <Typography elementKey={`events.${index}.title`}>
+                          {item?.name || item?.title || item?.["caption-text"] || ""}
+                        </Typography>
+                        <Typography elementKey={`events.${index}.description`}>
+                          {item?.description || ""}
+                        </Typography>
+                        <Typography elementKey={`events.${index}.publishedAt`} />
+
+                        <Box elementKey={`events.${index}.cta_wrapper`}>
+                          <Button
+                            elementKey={`events.${index}.cta`}
+                            onClick={() => handleCartToggle(item, index)}
+                            config={
+                              isInCart
+                                ? { selectedVariants: { Button_Variants: "Destructive" } }
+                                : undefined
+                            }
+                          >
+                            {isInCart ? "Remove" : undefined}
+                          </Button>
+                          <Button elementKey={`events.${index}.view_details`} />
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Box>
+                </CarouselItem>
+              );
+            })}
+          </CarouselContent>
+          <Box elementKey="mobile-nav-wrapper">
+            <CarouselPrevious
+              elementKey="carousel-prev-mobile"
+              style={{ position: "static", transform: "none" }}
+            />
+            <CarouselNext
+              elementKey="carousel-next-mobile"
+              style={{ position: "static", transform: "none" }}
+            />
+          </Box>
+          {count > 0 && (
+            <Box elementKey="carousel-navigation-pills-container">
+              {Array(count)
+                ?.fill(0)
+                ?.map((_, index) => (
+                  <Box
+                    key={index}
+                    elementKey="carousel-navigation-pill"
+                    style={
+                      index === current
+                        ? {
+                            backgroundColor: "var(--color-brand)",
+                            width: "24px",
+                          }
+                        : {}
+                    }
+                    onClick={() => {
+                      if (api) {
+                        api?.scrollTo(index);
+                      }
+                    }}
+                  />
+                ))}
+            </Box>
+          )}
+        </Carousel>
+      </Container>
+    </Section>
+  );
+};
+
+export default Ecommerce4;

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

@@ -0,0 +1,230 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-container": null,
+  title: "Book Your Tests/Scan",
+  description: "Please fill in your details to complete your booking.",
+  form: null,
+  cart_key: "levo_cart_collectiona",
+  "cart-title": "Order Summary",
+  "cart-total-label": "Total",
+  "checkout-cta": "Complete Booking",
+  "empty-cart-icon": {
+    kind: "icon",
+    data: {
+      id: "shopping-cart-empty",
+      label: "Empty Cart",
+      svgCode:
+        '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2H3.7401C4.8232 2 5.67038 2.88934 5.73341 3.9712L6.35713 14.6652C6.42016 15.7471 7.26733 16.6364 8.35043 16.6364H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 14L18 14C19.1046 14 20 13.1046 20 12L20 6C20 4.89543 19.1046 4 18 4H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="17" cy="20" r="2" stroke="currentColor" stroke-width="1.5"/></svg>',
+    },
+  },
+  "empty-cart-text": "Your cart is empty. Add some tests to proceed.",
+};
+
+export type IEcommerce5Content = typeof DEFAULT_CONTENT;
+
+export const Ecommerce5: IBlock = {
+  category_id: "ecommerce",
+  title: "Ecommerce 5 (Checkout Form)",
+  key: "ecommerce-5",
+  version: "v1",
+  prompt_description:
+    "A checkout block featuring a side-by-side layout with a lead/booking form on the left and a live order summary (cart) on the right. Synchronizes with localStorage.",
+  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: "Section Title", field_interface: "HeadingWidget" },
+    { key: "description", label: "Description", field_interface: "TypographyWidget" },
+    { key: "main-wrapper", label: "Main Wrapper (Form + Cart)", field_interface: "BoxWidget" },
+    { key: "form-container", label: "Form Column", field_interface: "BoxWidget" },
+    { key: "form", label: "Checkout Form", field_interface: "FormWidget" },
+    { key: "cart-container", label: "Cart Column", field_interface: "BoxWidget" },
+    { key: "cart-title", label: "Cart Title", field_interface: "TypographyWidget" },
+    { key: "cart_key", label: "Cart Storage Key", field_interface: "TypographyWidget" },
+    { key: "cart-total-label", label: "Total Label", field_interface: "TypographyWidget" },
+    { key: "checkout-cta", label: "Checkout Button", field_interface: "ButtonWidget" },
+    { key: "cart-items-list", label: "Cart Items List", field_interface: "BoxWidget" },
+    { key: "cart-item", label: "Cart Item Row", field_interface: "BoxWidget" },
+    { key: "cart-item-image", label: "Cart Item Image", field_interface: "ImageWidget" },
+    { key: "cart-item-details", label: "Cart Item Details Wrapper", field_interface: "BoxWidget" },
+    { key: "cart-item-name", label: "Cart Item Name", field_interface: "TypographyWidget" },
+    { key: "cart-item-price", label: "Cart Item Price", field_interface: "TypographyWidget" },
+    { key: "cart-item-remove", label: "Cart Item Remove Button", field_interface: "ButtonWidget" },
+    { key: "cart-total-wrapper", label: "Cart Total Wrapper", field_interface: "BoxWidget" },
+    { key: "cart-total-amount", label: "Cart Total Amount", field_interface: "TypographyWidget" },
+    { key: "empty-cart-container", label: "Empty Cart Wrapper", field_interface: "BoxWidget" },
+    { key: "empty-cart-icon", label: "Empty Cart Icon", field_interface: "IconWidget" },
+    { key: "empty-cart-text", label: "Empty Cart Text", field_interface: "TypographyWidget" },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default (Side-by-Side)",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "background-color": "var(--color-background)",
+        },
+        container: {
+          "max-width": "1200px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+        },
+        "header-container": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+          "text-align": "left",
+        },
+        title: {
+          color: "var(--color-text-1)",
+          margin: "0",
+        },
+        description: {
+          color: "var(--color-text-2)",
+        },
+        "main-wrapper": {
+          display: "grid",
+          "grid-template-columns": "1.5fr 1fr",
+          "column-gap": "4xl",
+          "align-items": "start",
+          tablet: {
+            "grid-template-columns": "1fr",
+            "row-gap": "3xl",
+          },
+        },
+        "form-container": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        form: {
+          width: "100%",
+        },
+        "cart-container": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          "padding-left": "3xl",
+          "border-left": "1px solid var(--color-border)",
+          tablet: {
+            "padding-left": "0",
+            "border-left": "none",
+            "padding-top": "3xl",
+            "border-top": "1px solid var(--color-border)",
+          },
+        },
+        "cart-title": {
+          "font-weight": 600,
+          "font-size": "xl",
+          color: "var(--color-text-1)",
+        },
+        "cart-items-list": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "md",
+        },
+        "cart-item": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "md",
+          "padding-bottom": "md",
+          "border-bottom": "1px solid var(--color-border-muted, #f3f4f6)",
+        },
+        "cart-item-details": {
+          flex: "1",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+        },
+        "cart-item-name": {
+          "font-weight": 500,
+          color: "var(--color-text-1)",
+          "font-size": "base",
+        },
+        "cart-item-price": {
+          color: "var(--color-brand)",
+          "font-weight": 600,
+        },
+        "cart-item-image": {
+          width: "64px",
+          height: "64px",
+          "object-fit": "cover",
+          "border-radius": "md",
+          "flex-shrink": 0,
+        },
+        "cart-item-remove": {
+          background: "none",
+          border: "none",
+          color: "var(--color-error, #ef4444)",
+          cursor: "pointer",
+          padding: "xs",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "border-radius": "full",
+        },
+        "cart-total-wrapper": {
+          "margin-top": "lg",
+          "padding-top": "lg",
+          "border-top": "2px solid var(--color-border)",
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+        },
+        "cart-total-label": {
+          "font-size": "lg",
+          "font-weight": 600,
+        },
+        "cart-total-amount": {
+          "font-size": "xl",
+          "font-weight": 700,
+          color: "var(--color-brand)",
+        },
+        "checkout-cta": {
+          "margin-top": "xl",
+          width: "100%",
+        },
+        "empty-cart-container": {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "md",
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "text-align": "center",
+          opacity: 0.6,
+        },
+        "empty-cart-icon": {
+          width: "48px",
+          height: "48px",
+          color: "var(--color-text-3)",
+        },
+        "empty-cart-text": {
+          "font-size": "base",
+          color: "var(--color-text-2)",
+          "font-style": "italic",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: { Heading_Level: "H2" },
+          heading: { level: 2 },
+        },
+        "checkout-cta": {
+          selectedVariants: { Button_Variants: "Primary" },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/ecommerce/ecommerce-5.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  Box,
+  Button,
+  Container,
+  Form,
+  Heading,
+  Icon,
+  type ILevoBlockBaseProps,
+  Image as LevoImage,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import type { IEcommerce5Content } from "./ecommerce-5.schema";
+
+function getCart(key: string): any[] {
+  try {
+    const data = localStorage.getItem(key);
+    return data ? JSON.parse(data) : [];
+  } catch {
+    return [];
+  }
+}
+
+const Ecommerce5: React.FC<ILevoBlockBaseProps<IEcommerce5Content>> = ({ content }) => {
+  const [cartItems, setCartItems] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+
+  const rawKey = content?.cart_key || "collectiona";
+  const cleanKey = rawKey.replace(/<[^>]*>/g, "").trim();
+  const CART_KEY = `levo_collection_cart_${cleanKey}`;
+
+  useEffect(() => {
+    setMounted(true);
+    setCartItems(getCart(CART_KEY));
+
+    const syncCart = () => {
+      setCartItems(getCart(CART_KEY));
+    };
+
+    window.addEventListener("levo_cart_updated", syncCart);
+    window.addEventListener("storage", syncCart);
+
+    return () => {
+      window.removeEventListener("levo_cart_updated", syncCart);
+      window.removeEventListener("storage", syncCart);
+    };
+  }, [CART_KEY]);
+
+  const removeFromCart = (id: string) => {
+    const currentCart = getCart(CART_KEY);
+    const updatedCart = currentCart.filter((item: any) => (item._id || item.id) !== id);
+    localStorage.setItem(CART_KEY, JSON.stringify(updatedCart));
+    setCartItems(updatedCart);
+    window.dispatchEvent(new Event("levo_cart_updated"));
+
+    if (updatedCart.length === 0) {
+      const url = new URL(window.location.href);
+      url.search = "";
+      window.history.replaceState({}, "", url.pathname);
+    }
+  };
+
+  const totalPrice = cartItems.reduce((sum, item) => sum + (Number(item.price) || 0), 0);
+
+  // Note: Form submission is handled by the Studio's Form component automatically.
+  // The Checkout Button can trigger additional logic if needed, but here it acts as a final submit or informative button.
+
+  if (!mounted) return null;
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header-container">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+
+        <Box elementKey="main-wrapper">
+          {/* Left Column: Form */}
+          <Box elementKey="form-container">
+            <Form elementKey="form" />
+          </Box>
+
+          {/* Right Column: Cart Summary */}
+          <Box elementKey="cart-container">
+            <Typography elementKey="cart-title" />
+
+            <Box elementKey="cart-items-list">
+              {cartItems.length === 0 ? (
+                <Box elementKey="empty-cart-container">
+                  <Icon elementKey="empty-cart-icon" />
+                  <Typography elementKey="empty-cart-text" />
+                </Box>
+              ) : (
+                cartItems.map((item, index) => {
+                  const itemId = item._id || item.id;
+                  return (
+                    <Box key={`${itemId}-${index}`} elementKey="cart-item">
+                      {item.image?.location && (
+                        <LevoImage
+                          elementKey="cart-item-image"
+                          image={{ location: item.image.location }}
+                          alt={item.name || "item"}
+                        />
+                      )}
+                      <Box elementKey="cart-item-details">
+                        <Typography elementKey="cart-item-name">
+                          {item.name || item.title || "Unknown Item"}
+                        </Typography>
+                        <Typography elementKey="cart-item-price">
+                          {`₹${(Number(item.price) || 0).toLocaleString("en-IN")}`}
+                        </Typography>
+                      </Box>
+                      <Button
+                        elementKey="cart-item-remove"
+                        onClick={() => removeFromCart(itemId)}
+                      >
+                        <X size={18} />
+                      </Button>
+                    </Box>
+                  );
+                })
+              )}
+            </Box>
+
+            <Box elementKey="cart-total-wrapper">
+              <Typography elementKey="cart-total-label" />
+              <Typography elementKey="cart-total-amount">
+                {`₹${totalPrice.toLocaleString("en-IN")}`}
+              </Typography>
+            </Box>
+
+            <Button elementKey="checkout-cta" />
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Ecommerce5;