@levo-so/blocks 0.1.102 → 0.1.104
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.
- 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 +22 -0
- package/src/blocks/services/service-3.tsx +12 -4
- 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
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
import type { IBlock } from "@levo-so/studio";
|
|
2
|
+
|
|
3
|
+
const MEDIA_1 = {
|
|
4
|
+
id: "ZnMd6UkWEqMpG",
|
|
5
|
+
kind: "image",
|
|
6
|
+
location: "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ.png",
|
|
7
|
+
mimetype: "image/png",
|
|
8
|
+
srcset: {
|
|
9
|
+
"320w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-320w.webp",
|
|
10
|
+
"640w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-640w.webp",
|
|
11
|
+
"750w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-750w.webp",
|
|
12
|
+
"828w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-828w.webp",
|
|
13
|
+
"1080w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1080w.webp",
|
|
14
|
+
"1200w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1200w.webp",
|
|
15
|
+
"1920w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1920w.webp",
|
|
16
|
+
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",
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const DEFAULT_LOGOS = [
|
|
21
|
+
{ logo_wrapper: null, logo: MEDIA_1 },
|
|
22
|
+
{ logo_wrapper: null, logo: MEDIA_1 },
|
|
23
|
+
];
|
|
24
|
+
|
|
25
|
+
const DEFAULT_CATEGORIES = [
|
|
26
|
+
{
|
|
27
|
+
category_wrapper: null,
|
|
28
|
+
category_title: "Co-presented by",
|
|
29
|
+
logos: DEFAULT_LOGOS,
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
category_wrapper: null,
|
|
33
|
+
category_title: "Payments Partner",
|
|
34
|
+
logos: [ { logo_wrapper: null, logo: MEDIA_1 } ],
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
category_wrapper: null,
|
|
38
|
+
category_title: "Government Ecosystem Partner",
|
|
39
|
+
logos: [ { logo_wrapper: null, logo: MEDIA_1 } ],
|
|
40
|
+
},
|
|
41
|
+
];
|
|
42
|
+
|
|
43
|
+
const DEFAULT_CONTENT = {
|
|
44
|
+
layout: null,
|
|
45
|
+
container: null,
|
|
46
|
+
header: null,
|
|
47
|
+
title: "Partners",
|
|
48
|
+
subtitle: "Our trusted ecosystem of partners",
|
|
49
|
+
categories: DEFAULT_CATEGORIES,
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export type ILogos2Content = typeof DEFAULT_CONTENT;
|
|
53
|
+
|
|
54
|
+
export const Logos2: IBlock = {
|
|
55
|
+
category_id: "logos",
|
|
56
|
+
title: "Logos 2 (Grouped)",
|
|
57
|
+
key: "logos-2",
|
|
58
|
+
version: "v1",
|
|
59
|
+
prompt_description:
|
|
60
|
+
"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.",
|
|
61
|
+
content_schema: [
|
|
62
|
+
{
|
|
63
|
+
key: "layout",
|
|
64
|
+
label: "Layout",
|
|
65
|
+
field_interface: "LayoutWidget",
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
key: "container",
|
|
69
|
+
label: "Container",
|
|
70
|
+
field_interface: "ContainerWidget",
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
key: "header",
|
|
74
|
+
label: "Header",
|
|
75
|
+
field_interface: "BoxWidget",
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
key: "title",
|
|
79
|
+
label: "Title",
|
|
80
|
+
field_interface: "HeadingWidget",
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
key: "subtitle",
|
|
84
|
+
label: "Subtitle",
|
|
85
|
+
field_interface: "TypographyWidget",
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
key: "categories",
|
|
89
|
+
label: "Categories",
|
|
90
|
+
kind: "group",
|
|
91
|
+
field_interface: "BoxWidget",
|
|
92
|
+
fields: [
|
|
93
|
+
{
|
|
94
|
+
key: "category_wrapper",
|
|
95
|
+
label: "Category Wrapper",
|
|
96
|
+
field_interface: "BoxWidget",
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
key: "category_title",
|
|
100
|
+
label: "Category Title",
|
|
101
|
+
field_interface: "TypographyWidget",
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
key: "logos",
|
|
105
|
+
label: "Logos",
|
|
106
|
+
kind: "group",
|
|
107
|
+
field_interface: "BoxWidget",
|
|
108
|
+
fields: [
|
|
109
|
+
{
|
|
110
|
+
key: "logo_wrapper",
|
|
111
|
+
label: "Logo Wrapper",
|
|
112
|
+
field_interface: "BoxWidget",
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
key: "logo",
|
|
116
|
+
label: "Logo",
|
|
117
|
+
field_interface: "ImageWidget",
|
|
118
|
+
},
|
|
119
|
+
],
|
|
120
|
+
},
|
|
121
|
+
],
|
|
122
|
+
},
|
|
123
|
+
],
|
|
124
|
+
layouts: [
|
|
125
|
+
{
|
|
126
|
+
key: "default",
|
|
127
|
+
title: "Default",
|
|
128
|
+
styles: {
|
|
129
|
+
layout: {
|
|
130
|
+
"padding-top": "4xl",
|
|
131
|
+
"padding-bottom": "4xl",
|
|
132
|
+
},
|
|
133
|
+
container: {
|
|
134
|
+
display: "flex",
|
|
135
|
+
"flex-direction": "column",
|
|
136
|
+
"row-gap": "4xl",
|
|
137
|
+
},
|
|
138
|
+
header: {
|
|
139
|
+
display: "flex",
|
|
140
|
+
"flex-direction": "column",
|
|
141
|
+
"align-items": "center",
|
|
142
|
+
"text-align": "center",
|
|
143
|
+
"row-gap": "xs",
|
|
144
|
+
},
|
|
145
|
+
title: {
|
|
146
|
+
color: "brand",
|
|
147
|
+
"font-weight": 700,
|
|
148
|
+
},
|
|
149
|
+
subtitle: {
|
|
150
|
+
color: "text-2",
|
|
151
|
+
"font-size": "lg",
|
|
152
|
+
},
|
|
153
|
+
categories_levoGroup: {
|
|
154
|
+
display: "flex",
|
|
155
|
+
"flex-wrap": "wrap",
|
|
156
|
+
"justify-content": "center",
|
|
157
|
+
"column-gap": "4xl",
|
|
158
|
+
"row-gap": "4xl",
|
|
159
|
+
mobile: {
|
|
160
|
+
"flex-direction": "column",
|
|
161
|
+
"align-items": "center",
|
|
162
|
+
},
|
|
163
|
+
},
|
|
164
|
+
categories_levoGroupItem: {
|
|
165
|
+
category_wrapper: {
|
|
166
|
+
display: "flex",
|
|
167
|
+
"flex-direction": "column",
|
|
168
|
+
"align-items": "center",
|
|
169
|
+
"row-gap": "xl",
|
|
170
|
+
},
|
|
171
|
+
category_title: {
|
|
172
|
+
"font-weight": 600,
|
|
173
|
+
"font-size": "lg",
|
|
174
|
+
color: "text-1",
|
|
175
|
+
},
|
|
176
|
+
logos_levoGroup: {
|
|
177
|
+
display: "flex",
|
|
178
|
+
"flex-wrap": "wrap",
|
|
179
|
+
"justify-content": "center",
|
|
180
|
+
"column-gap": "xl",
|
|
181
|
+
"row-gap": "xl",
|
|
182
|
+
},
|
|
183
|
+
logos_levoGroupItem: {
|
|
184
|
+
logo_wrapper: {
|
|
185
|
+
"background-color": "background-1",
|
|
186
|
+
"border-radius": "xl",
|
|
187
|
+
"padding-top": "lg",
|
|
188
|
+
"padding-bottom": "lg",
|
|
189
|
+
"padding-left": "xl",
|
|
190
|
+
"padding-right": "xl",
|
|
191
|
+
"box-shadow": "default",
|
|
192
|
+
display: "flex",
|
|
193
|
+
"align-items": "center",
|
|
194
|
+
"justify-content": "center",
|
|
195
|
+
width: "240px",
|
|
196
|
+
height: "120px",
|
|
197
|
+
mobile: {
|
|
198
|
+
width: "200px",
|
|
199
|
+
height: "100px",
|
|
200
|
+
},
|
|
201
|
+
},
|
|
202
|
+
logo: {
|
|
203
|
+
"max-height": "70px",
|
|
204
|
+
"max-width": "180px",
|
|
205
|
+
"object-fit": "contain",
|
|
206
|
+
mobile: {
|
|
207
|
+
"max-height": "50px",
|
|
208
|
+
"max-width": "140px",
|
|
209
|
+
},
|
|
210
|
+
},
|
|
211
|
+
},
|
|
212
|
+
},
|
|
213
|
+
},
|
|
214
|
+
content: DEFAULT_CONTENT,
|
|
215
|
+
config: {
|
|
216
|
+
title: {
|
|
217
|
+
heading: { level: 1 },
|
|
218
|
+
selectedVariants: { Heading_Level: "H1" },
|
|
219
|
+
},
|
|
220
|
+
},
|
|
221
|
+
},
|
|
222
|
+
],
|
|
223
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Box,
|
|
3
|
+
Container,
|
|
4
|
+
Heading,
|
|
5
|
+
type ILevoBlockBaseProps,
|
|
6
|
+
Image,
|
|
7
|
+
Section,
|
|
8
|
+
Typography,
|
|
9
|
+
} from "@levo-so/studio";
|
|
10
|
+
|
|
11
|
+
import type { ILogos2Content } from "./logos-2.schema";
|
|
12
|
+
|
|
13
|
+
const Logos2: React.FC<ILevoBlockBaseProps<ILogos2Content>> = ({ content }) => {
|
|
14
|
+
const categories = content?.categories ?? [];
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<Section elementKey="layout">
|
|
18
|
+
<Container elementKey="container">
|
|
19
|
+
<Box elementKey="header">
|
|
20
|
+
<Heading elementKey="title" />
|
|
21
|
+
<Typography elementKey="subtitle" />
|
|
22
|
+
</Box>
|
|
23
|
+
|
|
24
|
+
<Box elementKey="categories_levoGroup" data-levo_group>
|
|
25
|
+
{categories.map((category, catIndex) => (
|
|
26
|
+
<Box
|
|
27
|
+
key={`category-${catIndex}`}
|
|
28
|
+
elementKey={`categories.${catIndex}.category_wrapper`}
|
|
29
|
+
data-levo_group_item
|
|
30
|
+
>
|
|
31
|
+
<Typography elementKey={`categories.${catIndex}.category_title`} />
|
|
32
|
+
|
|
33
|
+
<Box elementKey={`categories.${catIndex}.logos_levoGroup`} data-levo_group>
|
|
34
|
+
{(category.logos ?? []).map((_, logoIndex) => (
|
|
35
|
+
<Box
|
|
36
|
+
key={`logo-${catIndex}-${logoIndex}`}
|
|
37
|
+
elementKey={`categories.${catIndex}.logos.${logoIndex}.logo_wrapper`}
|
|
38
|
+
data-levo_group_item
|
|
39
|
+
>
|
|
40
|
+
<Image
|
|
41
|
+
elementKey={`categories.${catIndex}.logos.${logoIndex}.logo`}
|
|
42
|
+
alt="Partner Logo"
|
|
43
|
+
/>
|
|
44
|
+
</Box>
|
|
45
|
+
))}
|
|
46
|
+
</Box>
|
|
47
|
+
</Box>
|
|
48
|
+
))}
|
|
49
|
+
</Box>
|
|
50
|
+
</Container>
|
|
51
|
+
</Section>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export default Logos2;
|
|
@@ -448,6 +448,12 @@ const MOBILE_NAV_MENU_STYLE_GROUP = {
|
|
|
448
448
|
"align-items": "center",
|
|
449
449
|
"border-radius": "base",
|
|
450
450
|
width: "100%",
|
|
451
|
+
tablet: {
|
|
452
|
+
"flex-direction": "column",
|
|
453
|
+
display: "flex",
|
|
454
|
+
"align-items": "start",
|
|
455
|
+
"row-gap": "4xs",
|
|
456
|
+
},
|
|
451
457
|
},
|
|
452
458
|
"sub-item-icon-container": {
|
|
453
459
|
"aspect-ratio": "1 / 1",
|
|
@@ -110,7 +110,7 @@ const NestedDropdownItem: React.FC<{
|
|
|
110
110
|
</div>
|
|
111
111
|
</PopoverTrigger>
|
|
112
112
|
<PopoverContent
|
|
113
|
-
elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-
|
|
113
|
+
elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items_levoGroup`}
|
|
114
114
|
onMouseLeave={() => setIsNestedDropdownOpen(false)}
|
|
115
115
|
inPortal={true}
|
|
116
116
|
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<{
|
|
|
122
122
|
}}
|
|
123
123
|
side="right"
|
|
124
124
|
align="start"
|
|
125
|
+
data-levo_group
|
|
125
126
|
>
|
|
126
127
|
{nestedSubItems?.map((_: any, nestedIdx: number) => (
|
|
127
128
|
<Box
|
|
@@ -185,7 +186,7 @@ const DropdownNavigationItem: React.FC<{
|
|
|
185
186
|
data-levo_group
|
|
186
187
|
onMouseLeave={() => setIsDropdownPopoverOpen(false)}
|
|
187
188
|
inPortal={false}
|
|
188
|
-
className="focus:outline-none"
|
|
189
|
+
className="border-[var(--color-border)] focus:outline-none"
|
|
189
190
|
>
|
|
190
191
|
{subItems && Array?.isArray(subItems)
|
|
191
192
|
? subItems?.map((subItem: any, idx: number) => (
|
|
@@ -567,6 +567,12 @@ const MOBILE_NAV_MENU_STYLE_GROUP = {
|
|
|
567
567
|
"align-items": "center",
|
|
568
568
|
"border-radius": "base",
|
|
569
569
|
width: "100%",
|
|
570
|
+
tablet: {
|
|
571
|
+
"flex-direction": "column",
|
|
572
|
+
display: "flex",
|
|
573
|
+
"align-items": "start",
|
|
574
|
+
"row-gap": "4xs",
|
|
575
|
+
},
|
|
570
576
|
},
|
|
571
577
|
"sub-item-icon-container": {
|
|
572
578
|
"aspect-ratio": "1 / 1",
|
|
@@ -213,10 +213,6 @@ const DesktopNavItem: React.FC<{
|
|
|
213
213
|
const navSubItems = navItem?.["sub-items"] ?? [];
|
|
214
214
|
const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
|
|
215
215
|
|
|
216
|
-
console.log({
|
|
217
|
-
navItem,
|
|
218
|
-
});
|
|
219
|
-
|
|
220
216
|
return (
|
|
221
217
|
<>
|
|
222
218
|
{isNavItemDropdown && <DropdownNavigationItem navItem={navItem} index={index} />}
|
|
@@ -286,7 +282,7 @@ const NestedDropdownItemMobile: React.FC<any> = ({ subItem, parentIndex, subInde
|
|
|
286
282
|
<Box
|
|
287
283
|
key={`nestedSubItem_${parentIndex}_${subIndex}_${nestedIdx}`}
|
|
288
284
|
elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-container`}
|
|
289
|
-
className=
|
|
285
|
+
className="focus:outline-none"
|
|
290
286
|
data-levo_group_item
|
|
291
287
|
>
|
|
292
288
|
<Typography
|
|
@@ -353,7 +349,6 @@ const DropdownNavigationItemMobile: React.FC<{
|
|
|
353
349
|
key={`subItem_${index}_${idx}`}
|
|
354
350
|
elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-link`}
|
|
355
351
|
data-levo_group_item
|
|
356
|
-
className={cn("")}
|
|
357
352
|
>
|
|
358
353
|
{hasNestedItems ? (
|
|
359
354
|
<NestedDropdownItemMobile
|
|
@@ -233,7 +233,6 @@ const productWithImageCardBase = {
|
|
|
233
233
|
"padding-top": "md",
|
|
234
234
|
},
|
|
235
235
|
ctas_levoGroupItem: { cta: { width: "100%" } },
|
|
236
|
-
ctas: [{}],
|
|
237
236
|
};
|
|
238
237
|
|
|
239
238
|
const productWithoutImageCardBase = {
|
|
@@ -265,7 +264,6 @@ const productWithoutImageCardBase = {
|
|
|
265
264
|
"padding-top": "lg",
|
|
266
265
|
},
|
|
267
266
|
ctas_levoGroupItem: { cta: { width: "100%" } },
|
|
268
|
-
ctas: [{}],
|
|
269
267
|
};
|
|
270
268
|
|
|
271
269
|
const productWithImageCardClean = {
|
|
@@ -489,7 +487,7 @@ export const ProductsListing3: IBlock = {
|
|
|
489
487
|
key: "ctas",
|
|
490
488
|
label: "CTA Button Group",
|
|
491
489
|
kind: "group",
|
|
492
|
-
field_interface: "
|
|
490
|
+
field_interface: "BoxWidget",
|
|
493
491
|
fields: [{ key: "cta", label: "CTA Button", field_interface: "ButtonWidget" }],
|
|
494
492
|
},
|
|
495
493
|
],
|
|
@@ -512,7 +510,7 @@ export const ProductsListing3: IBlock = {
|
|
|
512
510
|
key: "ctas",
|
|
513
511
|
label: "CTA Button Group",
|
|
514
512
|
kind: "group",
|
|
515
|
-
field_interface: "
|
|
513
|
+
field_interface: "BoxWidget",
|
|
516
514
|
fields: [{ key: "cta", label: "CTA Button", field_interface: "ButtonWidget" }],
|
|
517
515
|
},
|
|
518
516
|
],
|
|
@@ -30,119 +30,121 @@ const ProductsListing3: React.FC<ILevoBlockBaseProps<IProductsListing3Content>>
|
|
|
30
30
|
</Box>
|
|
31
31
|
</Box>
|
|
32
32
|
<Box data-levo_group elementKey="product_groups_levoGroup">
|
|
33
|
-
{(content?.product_groups ?? []).map((
|
|
34
|
-
<Box
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
{(content?.product_groups ?? []).map((group, groupIndex) => (
|
|
34
|
+
<Box
|
|
35
|
+
key={groupIndex}
|
|
36
|
+
elementKey={`product_groups.${groupIndex}`}
|
|
37
|
+
data-levo_group_item
|
|
38
|
+
>
|
|
39
|
+
<Box elementKey={`product_groups.${groupIndex}.groups_container`}>
|
|
40
|
+
<Box
|
|
41
|
+
data-levo_group
|
|
42
|
+
elementKey={`product_groups.${groupIndex}.products_with_images_levoGroup`}
|
|
43
|
+
>
|
|
44
|
+
{(group?.products_with_images ?? []).map((product, index) => (
|
|
41
45
|
<Box
|
|
42
46
|
data-levo_group_item
|
|
43
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}
|
|
47
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}`}
|
|
44
48
|
key={index}
|
|
45
49
|
>
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<Box
|
|
53
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.content_wrapper`}
|
|
54
|
-
>
|
|
55
|
-
<Heading
|
|
56
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.title`}
|
|
57
|
-
/>
|
|
58
|
-
<Typography
|
|
59
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.description`}
|
|
50
|
+
<Box elementKey={`product_groups.${groupIndex}.products_with_images.${index}.card`}>
|
|
51
|
+
<Image
|
|
52
|
+
alt="product image"
|
|
53
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.image`}
|
|
54
|
+
width={400}
|
|
55
|
+
height={400}
|
|
60
56
|
/>
|
|
61
57
|
<Box
|
|
62
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.
|
|
58
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.content_wrapper`}
|
|
63
59
|
>
|
|
64
|
-
<
|
|
65
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.
|
|
66
|
-
/>
|
|
67
|
-
<Typography
|
|
68
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.discount_price`}
|
|
60
|
+
<Heading
|
|
61
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.title`}
|
|
69
62
|
/>
|
|
70
63
|
<Typography
|
|
71
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.
|
|
64
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.description`}
|
|
72
65
|
/>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas.${i}.cta`}
|
|
85
|
-
data-levo_group_item
|
|
66
|
+
<Box
|
|
67
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.price_container`}
|
|
68
|
+
>
|
|
69
|
+
<Typography
|
|
70
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.actual_price`}
|
|
71
|
+
/>
|
|
72
|
+
<Typography
|
|
73
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.discount_price`}
|
|
74
|
+
/>
|
|
75
|
+
<Typography
|
|
76
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.off_percent`}
|
|
86
77
|
/>
|
|
87
|
-
|
|
78
|
+
</Box>
|
|
79
|
+
<Box
|
|
80
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas_levoGroup`}
|
|
81
|
+
data-levo_group
|
|
82
|
+
>
|
|
83
|
+
{(product?.ctas ?? []).map((_, i) => (
|
|
84
|
+
<Button
|
|
85
|
+
key={i}
|
|
86
|
+
elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas.${i}.cta`}
|
|
87
|
+
data-levo_group_item
|
|
88
|
+
/>
|
|
89
|
+
))}
|
|
90
|
+
</Box>
|
|
88
91
|
</Box>
|
|
89
92
|
</Box>
|
|
90
93
|
</Box>
|
|
91
|
-
)
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
{(content.product_groups?.[groupIndex]?.products_without_images ?? []).map(
|
|
99
|
-
(_, index) => (
|
|
94
|
+
))}
|
|
95
|
+
</Box>
|
|
96
|
+
<Box
|
|
97
|
+
data-levo_group
|
|
98
|
+
elementKey={`product_groups.${groupIndex}.products_without_images_levoGroup`}
|
|
99
|
+
>
|
|
100
|
+
{(group?.products_without_images ?? []).map((product, index) => (
|
|
100
101
|
<Box
|
|
101
102
|
data-levo_group_item
|
|
102
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}
|
|
103
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}`}
|
|
103
104
|
key={index}
|
|
104
105
|
>
|
|
105
106
|
<Box
|
|
106
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.
|
|
107
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.card`}
|
|
107
108
|
>
|
|
108
|
-
<Heading
|
|
109
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.title`}
|
|
110
|
-
/>
|
|
111
|
-
<Typography
|
|
112
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.description`}
|
|
113
|
-
/>
|
|
114
109
|
<Box
|
|
115
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.
|
|
110
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.content_wrapper`}
|
|
116
111
|
>
|
|
117
|
-
<
|
|
118
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.
|
|
119
|
-
/>
|
|
120
|
-
<Typography
|
|
121
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.discount_price`}
|
|
112
|
+
<Heading
|
|
113
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.title`}
|
|
122
114
|
/>
|
|
123
115
|
<Typography
|
|
124
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.
|
|
116
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.description`}
|
|
125
117
|
/>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas.${i}.cta`}
|
|
138
|
-
data-levo_group_item
|
|
118
|
+
<Box
|
|
119
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.price_container`}
|
|
120
|
+
>
|
|
121
|
+
<Typography
|
|
122
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.actual_price`}
|
|
123
|
+
/>
|
|
124
|
+
<Typography
|
|
125
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.discount_price`}
|
|
126
|
+
/>
|
|
127
|
+
<Typography
|
|
128
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.off_percent`}
|
|
139
129
|
/>
|
|
140
|
-
|
|
130
|
+
</Box>
|
|
131
|
+
<Box
|
|
132
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas_levoGroup`}
|
|
133
|
+
data-levo_group
|
|
134
|
+
>
|
|
135
|
+
{(product?.ctas ?? []).map((_, i) => (
|
|
136
|
+
<Button
|
|
137
|
+
key={i}
|
|
138
|
+
elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas.${i}.cta`}
|
|
139
|
+
data-levo_group_item
|
|
140
|
+
/>
|
|
141
|
+
))}
|
|
142
|
+
</Box>
|
|
141
143
|
</Box>
|
|
142
144
|
</Box>
|
|
143
145
|
</Box>
|
|
144
|
-
)
|
|
145
|
-
|
|
146
|
+
))}
|
|
147
|
+
</Box>
|
|
146
148
|
</Box>
|
|
147
149
|
</Box>
|
|
148
150
|
))}
|
|
@@ -8,7 +8,6 @@ import {
|
|
|
8
8
|
Image,
|
|
9
9
|
Section,
|
|
10
10
|
Typography,
|
|
11
|
-
useBlockContext,
|
|
12
11
|
} from "@levo-so/studio";
|
|
13
12
|
import type React from "react";
|
|
14
13
|
import { useState } from "react";
|
|
@@ -17,7 +16,6 @@ import type { IService2Content } from "./service-2.schema";
|
|
|
17
16
|
|
|
18
17
|
const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({ content, config }) => {
|
|
19
18
|
const [zipcode, setZipcode] = useState("");
|
|
20
|
-
const { isStudio } = useBlockContext();
|
|
21
19
|
return (
|
|
22
20
|
<Section elementKey="layout">
|
|
23
21
|
<Container elementKey="container">
|
|
@@ -75,7 +73,6 @@ const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({ content, co
|
|
|
75
73
|
elementKey="search_button"
|
|
76
74
|
onClick={() => {
|
|
77
75
|
if (
|
|
78
|
-
!isStudio &&
|
|
79
76
|
zipcode &&
|
|
80
77
|
zipcode.length === 6 &&
|
|
81
78
|
config?.search_button?.custom_fields?.redirect_url
|
|
@@ -284,6 +284,28 @@ export const Service3: IBlock = {
|
|
|
284
284
|
},
|
|
285
285
|
],
|
|
286
286
|
},
|
|
287
|
+
{
|
|
288
|
+
key: "price_ctas_wrapper",
|
|
289
|
+
label: "Price CTAs Wrapper",
|
|
290
|
+
field_interface: "BoxWidget",
|
|
291
|
+
hint: {
|
|
292
|
+
prompt_description:
|
|
293
|
+
"Container for pricing information displaying actual price, discount price, and savings percentage.",
|
|
294
|
+
},
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
key: "ctas",
|
|
298
|
+
label: "CTA Group",
|
|
299
|
+
field_interface: "BoxWidget",
|
|
300
|
+
kind: "group",
|
|
301
|
+
fields: [
|
|
302
|
+
{
|
|
303
|
+
key: "cta",
|
|
304
|
+
label: "CTA",
|
|
305
|
+
field_interface: "ButtonWidget",
|
|
306
|
+
},
|
|
307
|
+
],
|
|
308
|
+
},
|
|
287
309
|
{
|
|
288
310
|
key: "price_container",
|
|
289
311
|
label: "Price Container",
|