@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/services/service-3.schema.ts

@@ -1,23 +1,21 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA = {
+  id: "oilirpqbBMhi",
+  filename: "services-3.png",
   kind: "image",
-  mimetype: "image/png",
+  location: "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY.png",
   srcset: {
-    "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-    "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-    "1920w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1080w.webp 1080w",
   },
+  mimetype: "image/png",
 };
 
 const DUMMY_ICON = {
@@ -36,7 +34,7 @@ const DEFAULT_CONTENT = {
   container: null,
   main_wrapper: null,
   left_container: null,
-  profile_image: DEFAULT_IMAGE,
+  profile_image: MEDIA,
   right_container: null,
   content_wrapper: null,
   title: "Professional Service Package",
@@ -150,8 +148,7 @@ export const Service3: IBlock = {
           label: "Label",
           field_interface: "TypographyWidget",
           hint: {
-            prompt_description:
-              "Descriptive text for the breadcrumb navigation item.",
+            prompt_description: "Descriptive text for the breadcrumb navigation item.",
             min_characters: 3,
             max_characters: 20,
           },
@@ -208,10 +205,11 @@ export const Service3: IBlock = {
           "Wrapper for the main content elements (title, stats, pricing) with proper vertical spacing.",
       },
     },
+
     {
       key: "title",
       label: "Service Title",
-      field_interface: "HeadingWidget",
+      field_interface: "TypographyWidget",
       hint: {
         prompt_description:
           "Main service headline that communicates the primary offering. Should be professional and clear.",
@@ -219,17 +217,7 @@ export const Service3: IBlock = {
         max_characters: 60,
       },
     },
-    {
-      key: "statswrapper",
-      label: "Stats Wrapper",
-      field_interface: "BoxWidget",
-      hint: {
-        prompt_description:
-          "Wrapper for the service features or benefits with icons that build credibility and showcase capabilities.",
-        min_items: 2,
-        max_items: 4,
-      },
-    },
+
     {
       key: "stats",
       label: "Service Features",
@@ -359,10 +347,9 @@ export const Service3: IBlock = {
     {
       key: "actual_price",
       label: "Actual Price",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
       hint: {
-        prompt_description:
-          "Current promotional price that customers will pay (e.g., '$299').",
+        prompt_description: "Current promotional price that customers will pay (e.g., '$299').",
       },
     },
     {
@@ -370,8 +357,7 @@ export const Service3: IBlock = {
       label: "Discount Price",
       field_interface: "TypographyWidget",
       hint: {
-        prompt_description:
-          "Original price before discount to show value (e.g., '$599').",
+        prompt_description: "Original price before discount to show value (e.g., '$599').",
       },
     },
     {
@@ -379,8 +365,7 @@ export const Service3: IBlock = {
       label: "Off Percent",
       field_interface: "TypographyWidget",
       hint: {
-        prompt_description:
-          "Discount percentage highlighting the savings (e.g., '50% OFF').",
+        prompt_description: "Discount percentage highlighting the savings (e.g., '50% OFF').",
       },
     },
     {
@@ -405,8 +390,7 @@ export const Service3: IBlock = {
       label: "Search Button",
       field_interface: "ButtonWidget",
       hint: {
-        prompt_description:
-          "Button that checks service availability based on the entered zipcode.",
+        prompt_description: "Button that checks service availability based on the entered zipcode.",
         min_characters: 8,
         max_characters: 25,
       },
@@ -435,29 +419,9 @@ export const Service3: IBlock = {
       key: "default",
       styles: {
         layout: {
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          tablet: {
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-            "padding-left": "lg",
-            "padding-right": "lg",
-          },
-          mobile: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
-          },
           "background-color": "oklch(0.9413 0.0138 46.228)",
         },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        container: {},
         main_wrapper: {
           display: "flex",
           "align-items": "center",
@@ -488,14 +452,10 @@ export const Service3: IBlock = {
         content_wrapper: {
           display: "flex",
           "flex-direction": "column",
-          "row-gap": "lg",
+          "row-gap": "sm",
         },
         title: {
           "margin-bottom": "lg",
-          "font-size": "4xl",
-          tablet: {
-            "font-size": "2xl",
-          },
         },
         stats_levoGroup: {
           display: "grid",
@@ -517,24 +477,20 @@ export const Service3: IBlock = {
           "column-gap": "base",
         },
         actual_price: {
-          "font-size": "xl",
-          "font-weight": "700",
-          color: "text-1",
+          "font-weight": 700,
         },
         discount_price: {
-          "font-size": "sm",
           color: "text-3",
           "text-decoration": "line-through",
         },
         off_percent: {
-          "font-size": "sm",
-          "font-weight": "600",
-          color: "success",
+          "font-weight": 600,
         },
         search_input_wrapper: {
           display: "flex",
           "flex-direction": "column",
           "row-gap": "base",
+          "margin-top": "base",
         },
         stats: [
           {
@@ -543,9 +499,7 @@ export const Service3: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -553,9 +507,7 @@ export const Service3: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -563,9 +515,7 @@ export const Service3: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -573,9 +523,7 @@ export const Service3: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
         ],
         breadcrumbs: [
@@ -614,10 +562,10 @@ export const Service3: IBlock = {
       config: {
         title: {
           heading: {
-            level: 2,
+            level: "3",
           },
           selectedVariants: {
-            Heading_Level: "H2",
+            Heading_Level: "H3",
           },
         },
         search_button: {
@@ -625,6 +573,46 @@ export const Service3: IBlock = {
             Button_Variants: "Primary",
           },
         },
+        stats: [
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+        ],
+        actual_price: {
+          heading: {
+            level: "4",
+          },
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+        },
+        off_percent: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        discount_price: {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
       },
     },
   ],

package/src/blocks/services/service-3.tsx

@@ -4,20 +4,18 @@ import {
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
   useBlockContext,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 
 import type { IService3Content } from "./service-3.schema";
 
-const Service3: React.FC<ILevoBlockBaseProps<IService3Content>> = ({
-  content,
-  config,
-}) => {
+const Service3: React.FC<ILevoBlockBaseProps<IService3Content>> = ({ content, config }) => {
   const [zipcode, setZipcode] = useState("");
   const { isBuilder } = useBlockContext();
   return (
@@ -41,47 +39,48 @@ const Service3: React.FC<ILevoBlockBaseProps<IService3Content>> = ({
           </Box>
           <Box elementKey="right_container">
             <Box elementKey="content_wrapper">
-              <Heading elementKey="title" />
-              <Box elementKey="statswrapper_levoGroup" data-levo_group>
-                <Box elementKey="stats_levoGroup" data-levo_group>
-                  {(content?.stats ?? []).map((_, index: number) => (
-                    <Box
-                      key={`stat-${index}`}
-                      data-levo_group_item
-                      elementKey={`stats.${index}.stat_wrapper`}
-                    >
-                      <Icon elementKey={`stats.${index}.icon`} />
-                      <Typography elementKey={`stats.${index}.label`} />
-                    </Box>
-                  ))}
-                </Box>
-                <Box elementKey="stats_2_levoGroup" data-levo_group>
-                  {(content?.stats_2 ?? []).map((_: any, index: number) => (
-                    <Box
-                      key={`stat-${index}`}
-                      data-levo_group_item
-                      elementKey={`stats_2.${index}.stat_wrapper`}
-                    >
-                      <Icon elementKey={`stats_2.${index}.icon`} />
-                      <Typography elementKey={`stats_2.${index}.label`} />
-                    </Box>
-                  ))}
-                </Box>
-                <Box elementKey="stats_3_levoGroup" data-levo_group>
-                  {(content?.stats_3 ?? []).map((_: any, index: number) => (
-                    <Box
-                      key={`stat-${index}`}
-                      data-levo_group_item
-                      elementKey={`stats_3.${index}.stat_wrapper`}
-                    >
-                      <Icon elementKey={`stats_3.${index}.icon`} />
-                      <Typography elementKey={`stats_3.${index}.label`} />
-                    </Box>
-                  ))}
-                </Box>
+              <Typography elementKey="title" />
+
+              <Box elementKey="stats_levoGroup" data-levo_group>
+                {(content?.stats ?? []).map((_, index: number) => (
+                  <Box
+                    key={`stat-${index}`}
+                    data-levo_group_item
+                    elementKey={`stats.${index}.stat_wrapper`}
+                  >
+                    <Icon elementKey={`stats.${index}.icon`} />
+                    <Typography elementKey={`stats.${index}.label`} />
+                  </Box>
+                ))}
               </Box>
+
+              <Box elementKey="stats_2_levoGroup" data-levo_group>
+                {(content?.stats_2 ?? []).map((_: any, index: number) => (
+                  <Box
+                    key={`stat-${index}`}
+                    data-levo_group_item
+                    elementKey={`stats_2.${index}.stat_wrapper`}
+                  >
+                    <Icon elementKey={`stats_2.${index}.icon`} />
+                    <Typography elementKey={`stats_2.${index}.label`} />
+                  </Box>
+                ))}
+              </Box>
+              <Box elementKey="stats_3_levoGroup" data-levo_group>
+                {(content?.stats_3 ?? []).map((_: any, index: number) => (
+                  <Box
+                    key={`stat-${index}`}
+                    data-levo_group_item
+                    elementKey={`stats_3.${index}.stat_wrapper`}
+                  >
+                    <Icon elementKey={`stats_3.${index}.icon`} />
+                    <Typography elementKey={`stats_3.${index}.label`} />
+                  </Box>
+                ))}
+              </Box>
+
               <Box elementKey="price_container">
-                <Typography elementKey="actual_price" />
+                <Heading elementKey="actual_price" />
                 <Typography elementKey="discount_price" />
                 <Typography elementKey="off_percent" />
               </Box>