@levo-so/blocks 0.1.101 → 0.1.103

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

@@ -0,0 +1,238 @@
+"use client";
+
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image as LevoImage,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import type { IEcommerce2Content } from "./ecommerce-2.schema";
+
+function getCart(key: string): any[] {
+  try {
+    return JSON.parse(localStorage.getItem(key) || "[]");
+  } catch {
+    return [];
+  }
+}
+
+const Ecommerce2: React.FC<ILevoBlockBaseProps<IEcommerce2Content>> = ({ content, config }) => {
+  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 cart = getCart(CART_KEY);
+    const updatedCart = cart.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);
+
+  const handleCheckout = (e?: React.MouseEvent) => {
+    // Prevent default navigation to handle it manually
+    e?.preventDefault();
+    e?.stopPropagation();
+
+    // The CTA link is primarily stored in the Action configuration.
+    const ctaConfig = config?.["checkout-cta"] as any;
+    
+    // First try extracting from Action configuration (standard approach)
+    let baseLink = "";
+    if (ctaConfig?.action && ctaConfig.action.type !== "none") {
+      baseLink = ctaConfig.action.value;
+    }
+
+
+
+    if (!baseLink) return;
+
+    if (cartItems.length === 0) return;
+
+    const cartIds = cartItems.map((item) => item._id || item.id);
+    const encodedData = encodeURIComponent(JSON.stringify(cartIds));
+
+    let finalBase = baseLink;
+    if (finalBase.endsWith("=")) {
+      // The URL already ends with an equals sign (e.g., ?param= or &param=)
+      // We can just append the data directly.
+    } else if (finalBase.includes("?") || finalBase.includes("&")) {
+      // The URL has a query parameter but doesn't end with '=', 
+      // assume the last part is the key (e.g., ?lf-select_your_test)
+      finalBase += "=";
+    }
+
+    const url = `${finalBase}${encodedData}`;
+    window.location.assign(url);
+  };
+
+  if (!mounted) {
+    return (
+      <section className="px-4 py-8">
+        <div className="mx-auto max-w-7xl">
+          <div
+            style={{
+              height: "40px",
+              width: "200px",
+              backgroundColor: "#f3f4f6",
+              borderRadius: "4px",
+              marginBottom: "2rem",
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+            }}
+          />
+          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            {[1, 2].map((i) => (
+              <div
+                key={i}
+                style={{
+                  display: "flex",
+                  gap: "1rem",
+                  alignItems: "center",
+                  padding: "1rem",
+                  border: "1px solid #e5e7eb",
+                  borderRadius: "8px",
+                }}
+              >
+                <div
+                  style={{
+                    width: "72px",
+                    height: "72px",
+                    backgroundColor: "#f3f4f6",
+                    borderRadius: "8px",
+                    animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+                  }}
+                />
+                <div style={{ flex: 1 }}>
+                  <div
+                    style={{
+                      height: "20px",
+                      width: "60%",
+                      backgroundColor: "#f3f4f6",
+                      borderRadius: "4px",
+                      marginBottom: "0.5rem",
+                      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+                    }}
+                  />
+                  <div
+                    style={{
+                      height: "16px",
+                      width: "40%",
+                      backgroundColor: "#f3f4f6",
+                      borderRadius: "4px",
+                      animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <style>
+          {`
+            @keyframes pulse {
+              0%, 100% { opacity: 1; }
+              50% { opacity: .5; }
+            }
+          `}
+        </style>
+      </section>
+    );
+  }
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Heading elementKey="title" />
+
+        {cartItems?.length === 0 ? (
+          <Box elementKey="empty-state">
+            <Typography elementKey="empty-text" />
+            <Button elementKey="empty-cta" />
+          </Box>
+        ) : (
+          <Box elementKey="cart-wrapper">
+            <Box elementKey="cart-items-list">
+              {cartItems?.map((item, index) => (
+                <Box key={`cart-item-${item._id || item.id}-${index}`} elementKey="cart-item">
+                  <Box
+                    elementKey="cart-item-inner"
+                    style={{ display: "flex", alignItems: "center", gap: "1rem" }}
+                  >
+                    {item?.image?.location && (
+                      <LevoImage
+                        elementKey="cart-item-image"
+                        image={{ location: item.image.location }}
+                        alt={item.name || "product"}
+                      />
+                    )}
+                    <Box elementKey="cart-item-details" style={{ flex: 1 }}>
+                      <Typography
+                        elementKey="cart-item-name"
+                        style={{ fontWeight: 600, color: "var(--color-text-1)" }}
+                      >
+                        {item.name || item.title || "Unknown Item"}
+                      </Typography>
+                      <Typography
+                        elementKey="cart-item-price"
+                        style={{ color: "var(--color-brand)", fontWeight: 700, marginTop: "4px" }}
+                      >
+                        {`₹${(Number(item.price) || 0).toLocaleString("en-IN")}`}
+                      </Typography>
+                    </Box>
+                    <Button
+                      elementKey="cart-item-remove"
+                      onClick={() => removeFromCart(item._id || item.id)}
+                    >
+                      <X size={20} />
+                    </Button>
+                  </Box>
+                </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" onClick={handleCheckout} />
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Ecommerce2;

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

@@ -0,0 +1,56 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  "floating-cart-wrapper": null,
+  "cart-button": "View Cart",
+  "cart-icon": {
+    kind: "icon",
+    data: {
+      id: "shopping-cart",
+      label: "Shopping Cart",
+      svgCode:
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-cart"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>',
+    },
+  },
+  cart_key: "levo_cart_collectiona",
+};
+
+export type IEcommerce3Content = typeof DEFAULT_CONTENT;
+
+export const Ecommerce3: IBlock = {
+  category_id: "ecommerce",
+  title: "Ecommerce 3 (Floating Cart)",
+  key: "ecommerce-3",
+  version: "v1",
+  prompt_description:
+    "A floating cart button that shows the number of items in the cart and redirects to the cart page.",
+  content_schema: [
+    { key: "floating-cart-wrapper", label: "Wrapper", field_interface: "BoxWidget" },
+    { key: "cart-button", label: "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,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        "floating-cart-wrapper": {},
+        "cart-button": {
+          border: "none",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,72 @@
+"use client";
+
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import { Box, Button } from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { IEcommerce3Content } from "./ecommerce-3.schema";
+
+function getCartCount(key: string): number {
+  try {
+    const cart = JSON.parse(localStorage.getItem(key) || "[]");
+    return Array.isArray(cart) ? cart.length : 0;
+  } catch {
+    return 0;
+  }
+}
+
+const Ecommerce3: React.FC<ILevoBlockBaseProps<IEcommerce3Content>> = ({ content }) => {
+  const [count, setCount] = useState(0);
+  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);
+    setCount(getCartCount(CART_KEY));
+    const sync = () => setCount(getCartCount(CART_KEY));
+    window.addEventListener("levo_cart_updated", sync);
+    window.addEventListener("storage", sync);
+    return () => {
+      window.removeEventListener("levo_cart_updated", sync);
+      window.removeEventListener("storage", sync);
+    };
+  }, [CART_KEY]);
+
+  if (!mounted) return null;
+
+  return (
+    <>
+      {count > 0 && (
+        <Box
+          elementKey="floating-cart-wrapper"
+          style={{
+            position: "fixed",
+            bottom: "2rem",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 100,
+            display: "flex",
+            justifyContent: "center",
+            width: "max-content",
+          }}
+        >
+          <Button elementKey="cart-button">
+            <span style={{ fontSize: "16px", fontWeight: 600 }}>
+              {(content?.["cart-button"] as any)?.label ||
+                (typeof content?.["cart-button"] === "string"
+                  ? content["cart-button"]
+                  : "View Cart")}
+            </span>{" "}
+            <br />
+            <span>{count} Items</span>
+          </Button>
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default Ecommerce3;