npm - @levo-so/blocks - Versions diffs - 0.1.102 → 0.1.103 - Mend

@levo-so/blocks 0.1.102 → 0.1.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/package.json +23 -23
package/src/blocks/blogs/blog-post-1.tsx +16 -7
package/src/blocks/cards/cards-21.tsx +6 -6
package/src/blocks/carousel/carousel-1.tsx +2 -2
package/src/blocks/ecommerce/ecommerce-1.schema.ts +477 -0
package/src/blocks/ecommerce/ecommerce-1.tsx +243 -0
package/src/blocks/ecommerce/ecommerce-2.schema.ts +268 -0
package/src/blocks/ecommerce/ecommerce-2.tsx +238 -0
package/src/blocks/ecommerce/ecommerce-3.schema.ts +56 -0
package/src/blocks/ecommerce/ecommerce-3.tsx +72 -0
package/src/blocks/ecommerce/ecommerce-4.schema.ts +461 -0
package/src/blocks/ecommerce/ecommerce-4.tsx +249 -0
package/src/blocks/ecommerce/ecommerce-5.schema.ts +230 -0
package/src/blocks/ecommerce/ecommerce-5.tsx +146 -0
package/src/blocks/index.ts +12 -2
package/src/blocks/logos/logos-2.schema.ts +223 -0
package/src/blocks/logos/logos-2.tsx +55 -0
package/src/blocks/navbar/navbar-3.schema.ts +6 -0
package/src/blocks/navbar/navbar-3.tsx +3 -2
package/src/blocks/navbar/navbar-4.schema.ts +6 -0
package/src/blocks/navbar/navbar-4.tsx +1 -6
package/src/blocks/products/products-listing-3.schema.ts +2 -4
package/src/blocks/products/products-listing-3.tsx +86 -84
package/src/blocks/services/service-2.tsx +0 -3
package/src/blocks/services/service-3.schema.ts +13 -0
package/src/blocks/services/service-3.tsx +6 -0
package/src/schemas/blocks.ts +13 -3
package/src/schemas/categories.ts +6 -0
package/src/blocks/navbar/navbar-2.schema.ts +0 -1255
package/src/blocks/navbar/navbar-2.tsx +0 -381

package/src/blocks/logos/logos-2.schema.ts ADDED Viewed

@@ -0,0 +1,223 @@
+import type { IBlock } from "@levo-so/studio";
+const MEDIA_1 = {
+  id: "ZnMd6UkWEqMpG",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ.png",
+  mimetype: "image/png",
+  srcset: {
+    "320w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-828w.webp",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1920w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-320w.webp 320w",
+  },
+};
+const DEFAULT_LOGOS = [
+  { logo_wrapper: null, logo: MEDIA_1 },
+  { logo_wrapper: null, logo: MEDIA_1 },
+];
+const DEFAULT_CATEGORIES = [
+  {
+    category_wrapper: null,
+    category_title: "Co-presented by",
+    logos: DEFAULT_LOGOS,
+  },
+  {
+    category_wrapper: null,
+    category_title: "Payments Partner",
+    logos: [ { logo_wrapper: null, logo: MEDIA_1 } ],
+  },
+  {
+    category_wrapper: null,
+    category_title: "Government Ecosystem Partner",
+    logos: [ { logo_wrapper: null, logo: MEDIA_1 } ],
+  },
+];
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header: null,
+  title: "Partners",
+  subtitle: "Our trusted ecosystem of partners",
+  categories: DEFAULT_CATEGORIES,
+};
+export type ILogos2Content = typeof DEFAULT_CONTENT;
+export const Logos2: IBlock = {
+  category_id: "logos",
+  title: "Logos 2 (Grouped)",
+  key: "logos-2",
+  version: "v1",
+  prompt_description:
+    "A section with a main title and subtitle, followed by categories. Each category has its own title and a set of logos displayed in cards with white backgrounds and subtle shadows.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "subtitle",
+      label: "Subtitle",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "categories",
+      label: "Categories",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "category_wrapper",
+          label: "Category Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "category_title",
+          label: "Category Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "logos",
+          label: "Logos",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "logo_wrapper",
+              label: "Logo Wrapper",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "logo",
+              label: "Logo",
+              field_interface: "ImageWidget",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xl",
+        },
+        header: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "row-gap": "xs",
+        },
+        title: {
+          color: "brand",
+          "font-weight": 700,
+        },
+        subtitle: {
+          color: "text-2",
+          "font-size": "lg",
+        },
+        categories_levoGroup: {
+          display: "flex",
+          "flex-wrap": "wrap",
+          "justify-content": "center",
+          "column-gap": "4xl",
+          "row-gap": "4xl",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "center",
+          },
+        },
+        categories_levoGroupItem: {
+          category_wrapper: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "xl",
+          },
+          category_title: {
+            "font-weight": 600,
+            "font-size": "lg",
+            color: "text-1",
+          },
+          logos_levoGroup: {
+            display: "flex",
+            "flex-wrap": "wrap",
+            "justify-content": "center",
+            "column-gap": "xl",
+            "row-gap": "xl",
+          },
+          logos_levoGroupItem: {
+            logo_wrapper: {
+              "background-color": "background-1",
+              "border-radius": "xl",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "xl",
+              "padding-right": "xl",
+              "box-shadow": "default",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              width: "240px",
+              height: "120px",
+              mobile: {
+                width: "200px",
+                height: "100px",
+              },
+            },
+            logo: {
+              "max-height": "70px",
+              "max-width": "180px",
+              "object-fit": "contain",
+              mobile: {
+                "max-height": "50px",
+                "max-width": "140px",
+              },
+            },
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: { level: 1 },
+          selectedVariants: { Heading_Level: "H1" },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/logos/logos-2.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+import {
+  Box,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import type { ILogos2Content } from "./logos-2.schema";
+const Logos2: React.FC<ILevoBlockBaseProps<ILogos2Content>> = ({ content }) => {
+  const categories = content?.categories ?? [];
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="subtitle" />
+        </Box>
+        <Box elementKey="categories_levoGroup" data-levo_group>
+          {categories.map((category, catIndex) => (
+            <Box
+              key={`category-${catIndex}`}
+              elementKey={`categories.${catIndex}.category_wrapper`}
+              data-levo_group_item
+            >
+              <Typography elementKey={`categories.${catIndex}.category_title`} />
+              <Box elementKey={`categories.${catIndex}.logos_levoGroup`} data-levo_group>
+                {(category.logos ?? []).map((_, logoIndex) => (
+                  <Box
+                    key={`logo-${catIndex}-${logoIndex}`}
+                    elementKey={`categories.${catIndex}.logos.${logoIndex}.logo_wrapper`}
+                    data-levo_group_item
+                  >
+                    <Image
+                      elementKey={`categories.${catIndex}.logos.${logoIndex}.logo`}
+                      alt="Partner Logo"
+                    />
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+export default Logos2;

package/src/blocks/navbar/navbar-3.schema.ts CHANGED Viewed

@@ -448,6 +448,12 @@ const MOBILE_NAV_MENU_STYLE_GROUP = {
         "align-items": "center",
         "border-radius": "base",
         width: "100%",
+        tablet: {
+          "flex-direction": "column",
+          display: "flex",
+          "align-items": "start",
+          "row-gap": "4xs",
+        },
       },
       "sub-item-icon-container": {
         "aspect-ratio": "1 / 1",

package/src/blocks/navbar/navbar-3.tsx CHANGED Viewed

@@ -110,7 +110,7 @@ const NestedDropdownItem: React.FC<{
         </div>
       </PopoverTrigger>
       <PopoverContent
-        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items`}
+        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items_levoGroup`}
         onMouseLeave={() => setIsNestedDropdownOpen(false)}
         inPortal={true}
         className="!bg-white z-[60] min-w-48 rounded-md border border-gray-200 shadow-lg focus:outline-none"
@@ -122,6 +122,7 @@ const NestedDropdownItem: React.FC<{
         }}
         side="right"
         align="start"
+        data-levo_group
       >
         {nestedSubItems?.map((_: any, nestedIdx: number) => (
           <Box
@@ -185,7 +186,7 @@ const DropdownNavigationItem: React.FC<{
         data-levo_group
         onMouseLeave={() => setIsDropdownPopoverOpen(false)}
         inPortal={false}
-        className="focus:outline-none"
+        className="border-[var(--color-border)] focus:outline-none"
       >
         {subItems && Array?.isArray(subItems)
           ? subItems?.map((subItem: any, idx: number) => (

package/src/blocks/navbar/navbar-4.schema.ts CHANGED Viewed

@@ -567,6 +567,12 @@ const MOBILE_NAV_MENU_STYLE_GROUP = {
         "align-items": "center",
         "border-radius": "base",
         width: "100%",
+        tablet: {
+          "flex-direction": "column",
+          display: "flex",
+          "align-items": "start",
+          "row-gap": "4xs",
+        },
       },
       "sub-item-icon-container": {
         "aspect-ratio": "1 / 1",

package/src/blocks/navbar/navbar-4.tsx CHANGED Viewed

@@ -213,10 +213,6 @@ const DesktopNavItem: React.FC<{
   const navSubItems = navItem?.["sub-items"] ?? [];
   const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
-  console.log({
-    navItem,
-  });
   return (
     <>
       {isNavItemDropdown && <DropdownNavigationItem navItem={navItem} index={index} />}
@@ -286,7 +282,7 @@ const NestedDropdownItemMobile: React.FC<any> = ({ subItem, parentIndex, subInde
             <Box
               key={`nestedSubItem_${parentIndex}_${subIndex}_${nestedIdx}`}
               elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-container`}
-              className={cn("focus:outline-none")}
+              className="focus:outline-none"
               data-levo_group_item
             >
               <Typography
@@ -353,7 +349,6 @@ const DropdownNavigationItemMobile: React.FC<{
                 key={`subItem_${index}_${idx}`}
                 elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-link`}
                 data-levo_group_item
-                className={cn("")}
               >
                 {hasNestedItems ? (
                   <NestedDropdownItemMobile

package/src/blocks/products/products-listing-3.schema.ts CHANGED Viewed

@@ -233,7 +233,6 @@ const productWithImageCardBase = {
     "padding-top": "md",
   },
   ctas_levoGroupItem: { cta: { width: "100%" } },
-  ctas: [{}],
 };
 const productWithoutImageCardBase = {
@@ -265,7 +264,6 @@ const productWithoutImageCardBase = {
     "padding-top": "lg",
   },
   ctas_levoGroupItem: { cta: { width: "100%" } },
-  ctas: [{}],
 };
 const productWithImageCardClean = {
@@ -489,7 +487,7 @@ export const ProductsListing3: IBlock = {
               key: "ctas",
               label: "CTA Button Group",
               kind: "group",
-              field_interface: "ButtonWidget",
+              field_interface: "BoxWidget",
               fields: [{ key: "cta", label: "CTA Button", field_interface: "ButtonWidget" }],
             },
           ],
@@ -512,7 +510,7 @@ export const ProductsListing3: IBlock = {
               key: "ctas",
               label: "CTA Button Group",
               kind: "group",
-              field_interface: "ButtonWidget",
+              field_interface: "BoxWidget",
               fields: [{ key: "cta", label: "CTA Button", field_interface: "ButtonWidget" }],
             },
           ],

package/src/blocks/products/products-listing-3.tsx CHANGED Viewed

@@ -30,119 +30,121 @@ const ProductsListing3: React.FC<ILevoBlockBaseProps<IProductsListing3Content>>
         </Box>
       </Box>
       <Box data-levo_group elementKey="product_groups_levoGroup">
-        {(content?.product_groups ?? []).map((_, groupIndex) => (
-          <Box key={groupIndex} elementKey={`product_groups.${groupIndex}.groups_container`}>
-            <Box
-              data-levo_group
-              elementKey={`product_groups.${groupIndex}.products_with_images_levoGroup`}
-            >
-              {(content.product_groups?.[groupIndex]?.products_with_images ?? []).map(
-                (_, index) => (
+        {(content?.product_groups ?? []).map((group, groupIndex) => (
+          <Box
+            key={groupIndex}
+            elementKey={`product_groups.${groupIndex}`}
+            data-levo_group_item
+          >
+            <Box elementKey={`product_groups.${groupIndex}.groups_container`}>
+              <Box
+                data-levo_group
+                elementKey={`product_groups.${groupIndex}.products_with_images_levoGroup`}
+              >
+                {(group?.products_with_images ?? []).map((product, index) => (
                   <Box
                     data-levo_group_item
-                    elementKey={`product_groups.${groupIndex}.products_with_images.${index}.card`}
+                    elementKey={`product_groups.${groupIndex}.products_with_images.${index}`}
                     key={index}
                   >
-                    <Image
-                      alt="product image"
-                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.image`}
-                      width={400}
-                      height={400}
-                    />
-                    <Box
-                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.content_wrapper`}
-                    >
-                      <Heading
-                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.title`}
-                      />
-                      <Typography
-                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.description`}
+                    <Box elementKey={`product_groups.${groupIndex}.products_with_images.${index}.card`}>
+                      <Image
+                        alt="product image"
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.image`}
+                        width={400}
+                        height={400}
                       />
                       <Box
-                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.price_container`}
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.content_wrapper`}
                       >
-                        <Typography
-                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.actual_price`}
-                        />
-                        <Typography
-                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.discount_price`}
+                        <Heading
+                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.title`}
                         />
                         <Typography
-                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.off_percent`}
+                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.description`}
                         />
-                      </Box>
-                      <Box
-                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas_levoGroup`}
-                        data-levo_group
-                      >
-                        {(
-                          content?.product_groups?.[groupIndex]?.products_with_images?.[index]
-                            ?.ctas ?? []
-                        ).map((_, i) => (
-                          <Button
-                            key={`product_groups.${groupIndex}.products_with_images.${index}.ctas.${i}.cta`}
-                            elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas.${i}.cta`}
-                            data-levo_group_item
+                        <Box
+                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.price_container`}
+                        >
+                          <Typography
+                            elementKey={`product_groups.${groupIndex}.products_with_images.${index}.actual_price`}
+                          />
+                          <Typography
+                            elementKey={`product_groups.${groupIndex}.products_with_images.${index}.discount_price`}
+                          />
+                          <Typography
+                            elementKey={`product_groups.${groupIndex}.products_with_images.${index}.off_percent`}
                           />
-                        ))}
+                        </Box>
+                        <Box
+                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas_levoGroup`}
+                          data-levo_group
+                        >
+                          {(product?.ctas ?? []).map((_, i) => (
+                            <Button
+                              key={i}
+                              elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas.${i}.cta`}
+                              data-levo_group_item
+                            />
+                          ))}
+                        </Box>
                       </Box>
                     </Box>
                   </Box>
-                ),
-              )}
-            </Box>
-            <Box
-              data-levo_group
-              elementKey={`product_groups.${groupIndex}.products_without_images_levoGroup`}
-            >
-              {(content.product_groups?.[groupIndex]?.products_without_images ?? []).map(
-                (_, index) => (
+                ))}
+              </Box>
+              <Box
+                data-levo_group
+                elementKey={`product_groups.${groupIndex}.products_without_images_levoGroup`}
+              >
+                {(group?.products_without_images ?? []).map((product, index) => (
                   <Box
                     data-levo_group_item
-                    elementKey={`product_groups.${groupIndex}.products_without_images.${index}.card`}
+                    elementKey={`product_groups.${groupIndex}.products_without_images.${index}`}
                     key={index}
                   >
                     <Box
-                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.content_wrapper`}
+                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.card`}
                     >
-                      <Heading
-                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.title`}
-                      />
-                      <Typography
-                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.description`}
-                      />
                       <Box
-                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.price_container`}
+                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.content_wrapper`}
                       >
-                        <Typography
-                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.actual_price`}
-                        />
-                        <Typography
-                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.discount_price`}
+                        <Heading
+                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.title`}
                         />
                         <Typography
-                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.off_percent`}
+                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.description`}
                         />
-                      </Box>
-                      <Box
-                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas_levoGroup`}
-                        data-levo_group
-                      >
-                        {(
-                          content?.product_groups?.[groupIndex]?.products_without_images?.[index]
-                            ?.ctas ?? []
-                        ).map((_, i) => (
-                          <Button
-                            key={`product_groups.${groupIndex}.products_without_images.${index}.ctas.${i}.cta`}
-                            elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas.${i}.cta`}
-                            data-levo_group_item
+                        <Box
+                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.price_container`}
+                        >
+                          <Typography
+                            elementKey={`product_groups.${groupIndex}.products_without_images.${index}.actual_price`}
+                          />
+                          <Typography
+                            elementKey={`product_groups.${groupIndex}.products_without_images.${index}.discount_price`}
+                          />
+                          <Typography
+                            elementKey={`product_groups.${groupIndex}.products_without_images.${index}.off_percent`}
                           />
-                        ))}
+                        </Box>
+                        <Box
+                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas_levoGroup`}
+                          data-levo_group
+                        >
+                          {(product?.ctas ?? []).map((_, i) => (
+                            <Button
+                              key={i}
+                              elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas.${i}.cta`}
+                              data-levo_group_item
+                            />
+                          ))}
+                        </Box>
                       </Box>
                     </Box>
                   </Box>
-                ),
-              )}
+                ))}
+              </Box>
             </Box>
           </Box>
         ))}

package/src/blocks/services/service-2.tsx CHANGED Viewed

@@ -8,7 +8,6 @@ import {
   Image,
   Section,
   Typography,
-  useBlockContext,
 } from "@levo-so/studio";
 import type React from "react";
 import { useState } from "react";
@@ -17,7 +16,6 @@ import type { IService2Content } from "./service-2.schema";
 const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({ content, config }) => {
   const [zipcode, setZipcode] = useState("");
-  const { isStudio } = useBlockContext();
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
@@ -75,7 +73,6 @@ const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({ content, co
                 elementKey="search_button"
                 onClick={() => {
                   if (
-                    !isStudio &&
                     zipcode &&
                     zipcode.length === 6 &&
                     config?.search_button?.custom_fields?.redirect_url

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

@@ -284,6 +284,19 @@ export const Service3: IBlock = {
         },
       ],
     },
+    {
+      key: "ctas",
+      label: "CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
     {
       key: "price_container",
       label: "Price Container",

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

@@ -79,6 +79,12 @@ const Service3: React.FC<ILevoBlockBaseProps<IService3Content>> = ({ content, co
                 ))}
               </Box>
+              <Box elementKey="ctas_levoGroup" data-levo_group>
+                {(content?.ctas ?? []).map((_: any, index: number) => (
+                  <Button key={`cta-${index}`} elementKey={`ctas.${index}.cta`} />
+                ))}
+              </Box>
               <Box elementKey="price_container">
                 <Typography elementKey="actual_price" />
                 <Typography elementKey="discount_price" />