@levo-so/blocks 0.1.101 → 0.1.103

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

@@ -0,0 +1,243 @@
+"use client";
+
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  FormInput,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+  useContentEngine,
+} from "@levo-so/studio";
+import { Search } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+import type { IEcommerce1Content } from "./ecommerce-1.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 Ecommerce1: React.FC<ILevoBlockBaseProps<IEcommerce1Content>> = ({ content }) => {
+  const { data, query, setQuery, meta } = useContentEngine("events");
+
+  const [mounted, setMounted] = useState(false);
+  const [search, setSearch] = useState("");
+  const [cartIds, setCartIds] = useState<Set<string>>(new Set());
+
+  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);
+      // Prioritize _id for collection items
+      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 setDebouncedSearchKey = useDebouncedCallback((v: string) => {
+    if (v) {
+      setQuery({ related: v, page: 1 });
+      return;
+    }
+    setQuery({ related: undefined, page: 1 });
+  }, 1000);
+
+  const handleNext = () => setQuery({ page: (query?.page || 1) + 1 });
+  const handlePrevious = () => setQuery({ page: Math.max(1, (query?.page || 1) - 1) });
+
+  const handleCartToggle = useCallback(
+    (item: any, index: number) => {
+      const cart = getCart(CART_KEY);
+      // Prioritize collection _id, then manual id, then index
+      const itemId = item?._id || item?.id || `item-${index}`;
+      const itemName =
+        item?.name || item?.title || item?.["caption-text"] || `Product ${index + 1}`;
+
+      console.log(
+        `[Cart] Toggling item. Collection _id: ${item?._id}, Manual id: ${item?.id}, Used itemId: ${itemId}`,
+      );
+
+      // Robust price parsing: handle both numbers and strings like "₹4,000"
+      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],
+  );
+
+  console.log({ data });
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header-container">
+          <Heading elementKey="title" />
+          <Button elementKey="cta-button" />
+        </Box>
+        <Box elementKey="search-container">
+          <Box elementKey="search-input-box">
+            <FormInput
+              name="search"
+              placeholder="Search..."
+              value={search}
+              onChange={(e) => {
+                setSearch(e?.target?.value || "");
+                setDebouncedSearchKey(e?.target?.value || "");
+              }}
+              leftIcon={<Search size={22} />}
+              inputProps={{
+                style: {
+                  padding: "1rem",
+                  paddingLeft: "3rem",
+                  height: "unset",
+                  fontSize: "1.125rem",
+                  color: "var(--color-text-1)",
+                  borderColor: "var(--color-border)",
+                  borderRadius: "99px",
+                },
+              }}
+              leftIconBoxProps={{
+                style: {
+                  width: "unset",
+                  paddingLeft: "1.25rem",
+                },
+              }}
+            />
+          </Box>
+        </Box>
+        <Box elementKey="events_levoGroup" data-levo_group>
+          {(data || [])?.map((item: any, index: number) => {
+            const itemId = item?._id || item?.id || `item-${index}`;
+            const isInCart = mounted && itemId ? cartIds.has(itemId) : false;
+            return (
+              <Box
+                key={`ecommerce-listing-element-${index}`}
+                data-levo_group_item
+                elementKey={`events.${index}.eventWrapper`}
+              >
+                <Image
+                  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>
+            );
+          })}
+        </Box>
+        {(meta?.pages || 0) > 1 && (
+          <Box elementKey="paginationWrapper">
+            <Button
+              elementKey="paginationLeftButton"
+              disabled={query?.page === 1}
+              onClick={handlePrevious}
+            />
+
+            <Typography elementKey="paginationText">
+              {`${query?.page || 1}/${meta?.pages || 0}`}
+            </Typography>
+            <Button
+              elementKey="paginationRightButton"
+              onClick={handleNext}
+              disabled={query?.page === meta?.pages}
+            />
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Ecommerce1;

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

@@ -0,0 +1,268 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  title: "Your Cart",
+  "empty-state": null,
+  "empty-text": "Your cart is empty. Browse our tests and add items to get started.",
+  "cart-wrapper": null,
+  "cart-items-list": null,
+  "cart-item": null,
+  "cart-item-inner": null,
+  "cart-item-details": null,
+  "cart-item-name": "",
+  "cart-item-price": "",
+  "cart-total-wrapper": null,
+  "cart-total-label": "Total",
+  "cart-total-amount": "",
+  "checkout-cta": "Proceed to Checkout",
+  cart_key: "levo_cart_collectiona",
+};
+
+export type IEcommerce2Content = typeof DEFAULT_CONTENT;
+
+export const Ecommerce2: IBlock = {
+  category_id: "ecommerce",
+  title: "Ecommerce 2",
+  key: "ecommerce-2",
+  version: "v1",
+  prompt_description:
+    "Cart summary block. Reads items from localStorage, shows each item with image, name and price. Displays total price and a checkout CTA that redirects to a configurable URL with cart item IDs as query params.",
+  content_schema: [
+    { key: "layout", label: "Layout", field_interface: "LayoutWidget" },
+    { key: "container", label: "Container", field_interface: "ContainerWidget" },
+    {
+      key: "title",
+      label: "Section Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description: "Cart page heading, e.g. 'Your Cart'.",
+        min_characters: 3,
+        max_characters: 40,
+      },
+    },
+    { key: "empty-state", label: "Empty State Wrapper", field_interface: "BoxWidget" },
+    {
+      key: "empty-text",
+      label: "Empty Cart Text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Message shown when cart is empty.",
+        min_characters: 10,
+        max_characters: 120,
+      },
+    },
+    {
+      key: "empty-cta",
+      label: "Empty State CTA",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description: "CTA shown when cart is empty.",
+        min_characters: 5,
+        max_characters: 30,
+      },
+    },
+
+    { key: "cart-wrapper", label: "Cart Wrapper", field_interface: "BoxWidget" },
+    { key: "cart-items-list", label: "Cart Items List", field_interface: "BoxWidget" },
+    { key: "cart-item", label: "Cart Item Row", field_interface: "BoxWidget" },
+    { key: "cart-item-inner", label: "Cart Item Inner", field_interface: "BoxWidget" },
+    { key: "cart-item-details", label: "Cart Item Details", field_interface: "BoxWidget" },
+    {
+      key: "cart-item-name",
+      label: "Cart Item Name",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Product name inside the cart row.",
+        min_characters: 2,
+        max_characters: 80,
+      },
+    },
+    {
+      key: "cart-item-price",
+      label: "Cart Item Price",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Product price inside the cart row.",
+        min_characters: 2,
+        max_characters: 20,
+      },
+    },
+    { key: "cart-item-image", label: "Cart Item Image", field_interface: "ImageWidget" },
+    { key: "cart-item-remove", label: "Cart Item Remove Button", field_interface: "ButtonWidget" },
+    { key: "cart-total-wrapper", label: "Total Wrapper", field_interface: "BoxWidget" },
+    {
+      key: "cart-total-label",
+      label: "Total Label",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Label before the total amount, e.g. 'Total'.",
+        min_characters: 3,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "cart-total-amount",
+      label: "Total Amount",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Computed total price (auto-filled from cart).",
+        min_characters: 0,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "checkout-cta",
+      label: "Checkout CTA",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description: "Button that redirects to checkout page.",
+        min_characters: 5,
+        max_characters: 30,
+      },
+    },
+    {
+      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,
+      },
+    },
+  ],
+  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",
+          "max-width": "640px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          width: "100%",
+        },
+        title: { color: "var(--color-text-1)", margin: "0" },
+        "empty-state": {
+          display: "flex",
+          "justify-content": "center",
+          "align-items": "center",
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+        },
+        "empty-text": {
+          color: "var(--color-text-2)",
+          "text-align": "center",
+          "font-size": "lg",
+        },
+        "cart-wrapper": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        "cart-items-list": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "md",
+        },
+        "cart-item": {
+          "border-radius": "lg",
+          border: "1px solid var(--color-border)",
+          "padding-top": "md",
+          "padding-bottom": "md",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          "background-color": "var(--color-card, var(--color-background))",
+        },
+        "cart-item-inner": {
+          display: "flex",
+          "align-items": "center",
+          gap: "lg",
+        },
+        "cart-item-details": {
+          flex: "1",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+        },
+        "cart-item-name": {
+          "font-weight": 600,
+          color: "var(--color-text-1)",
+          "font-size": "base",
+        },
+        "cart-item-price": {
+          color: "var(--color-brand)",
+          "font-weight": 700,
+          "font-size": "base",
+        },
+        "cart-item-image": {
+          width: "72px",
+          height: "72px",
+          "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",
+          transition: "background-color 0.2s",
+        },
+        "cart-total-wrapper": {
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "border-top": "2px solid var(--color-border)",
+        },
+        "cart-total-label": {
+          "font-size": "xl",
+          "font-weight": 600,
+          color: "var(--color-text-1)",
+        },
+        "cart-total-amount": {
+          "font-size": "xl",
+          "font-weight": 700,
+          color: "var(--color-brand)",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: { Heading_Level: "H2" },
+          heading: { level: 2 },
+        },
+      },
+    },
+  ],
+};