@gem-sdk/core 1.22.21 → 1.22.31-new-feature.2

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 (26) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +362 -0
  2. package/dist/cjs/components/ComponentWrapperPreview.js +26 -4
  3. package/dist/cjs/components/Render.liquid.js +8 -0
  4. package/dist/cjs/components/RenderCustomCode.js +2 -0
  5. package/dist/cjs/components/theme-section/CreateThemeSection.js +124 -0
  6. package/dist/cjs/components/theme-section/ThemeSectionTooltip.js +95 -0
  7. package/dist/cjs/contexts/BuilderPreviewContext.js +24 -4
  8. package/dist/cjs/contexts/ShopContext.js +10 -0
  9. package/dist/cjs/helpers/filter-toolbar-preview.js +14 -0
  10. package/dist/cjs/helpers/is-empty-children.js +4 -1
  11. package/dist/cjs/hooks/useProduct.js +9 -1
  12. package/dist/cjs/index.js +2 -0
  13. package/dist/esm/components/ComponentToolbarPreview.js +360 -0
  14. package/dist/esm/components/ComponentWrapperPreview.js +26 -4
  15. package/dist/esm/components/Render.liquid.js +8 -0
  16. package/dist/esm/components/RenderCustomCode.js +2 -0
  17. package/dist/esm/components/theme-section/CreateThemeSection.js +122 -0
  18. package/dist/esm/components/theme-section/ThemeSectionTooltip.js +93 -0
  19. package/dist/esm/contexts/BuilderPreviewContext.js +24 -4
  20. package/dist/esm/contexts/ShopContext.js +10 -0
  21. package/dist/esm/helpers/filter-toolbar-preview.js +9 -0
  22. package/dist/esm/helpers/is-empty-children.js +5 -2
  23. package/dist/esm/hooks/useProduct.js +9 -1
  24. package/dist/esm/index.js +1 -0
  25. package/dist/types/index.d.ts +16 -3
  26. package/package.json +3 -3
package/dist/cjs/components/ComponentToolbarPreview.js ADDED
@@ -0,0 +1,362 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ require('zustand');
6
+ var BuilderPreviewContext = require('../contexts/BuilderPreviewContext.js');
7
+ require('swr');
8
+ require('@gem-sdk/adapter-shopify');
9
+ require('swr/mutation');
10
+ require('vanilla-lazyload');
11
+ require('../hooks/useCartUI.js');
12
+ var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
13
+ require('../helpers/convert.js');
14
+
15
+ const ComponentToolbarPreview = ({ ...props })=>{
16
+ const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
17
+ const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
18
+ const isThemeSection = props.isThemeSection;
19
+ const isEditThemeSection = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isEditThemeSection);
20
+ const [activeAddSection, setActiveAddSection] = react.useState(null);
21
+ const [isShowParent, setIsShowParent] = react.useState(false);
22
+ const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
23
+ const [parents, setParents] = react.useState([]);
24
+ // Get parents
25
+ const onActiveComponent = react.useCallback((e)=>{
26
+ const detail = e.detail;
27
+ if (detail?.componentUid == props.uid) {
28
+ const currentParents = getParents(props.uid).filter((parent)=>{
29
+ if (parent.uid === 'ROOT') return false;
30
+ if (parent.tag === 'Section') return false;
31
+ if (parent.editorConfigs?.toolbar?.hide) return false;
32
+ if (parent.editorConfigs?.component?.noSetting) return false;
33
+ return true;
34
+ }).slice(0, 3);
35
+ setParents(currentParents);
36
+ } else {
37
+ setParents([]);
38
+ setIsShowParent(false);
39
+ }
40
+ }, [
41
+ setParents,
42
+ getParents,
43
+ props.uid
44
+ ]);
45
+ react.useEffect(()=>{
46
+ window.addEventListener('editor:active-component', onActiveComponent);
47
+ return ()=>{
48
+ window.removeEventListener('editor:active-component', onActiveComponent);
49
+ };
50
+ }, [
51
+ onActiveComponent
52
+ ]);
53
+ // End get parents
54
+ if (props.type === 'section') {
55
+ return null;
56
+ }
57
+ if (props.editorConfigs?.toolbar?.hide) {
58
+ return null;
59
+ }
60
+ const getIndexSection = ()=>{
61
+ if (props.tag !== 'Section') {
62
+ return -1;
63
+ }
64
+ if (root?.childrens?.length) {
65
+ return root.childrens.findIndex((sectionUid)=>sectionUid == props.uid);
66
+ }
67
+ return -1;
68
+ };
69
+ const onShowParent = (e)=>{
70
+ if (!parents.length) return;
71
+ const $target = (e?.target) || null;
72
+ const $toolbar = $target.closest('[data-toolbar-active]');
73
+ if (!$target || !$toolbar) return;
74
+ if (isShowParent) {
75
+ setIsShowParentRevert(false);
76
+ setIsShowParent(false);
77
+ } else {
78
+ const rect = $toolbar.getBoundingClientRect();
79
+ if (rect.top < parents.length * 24) {
80
+ setIsShowParentRevert(true);
81
+ } else {
82
+ setIsShowParentRevert(false);
83
+ }
84
+ setIsShowParent(true);
85
+ }
86
+ const event = new CustomEvent('editor:toolbar:show-parents', {
87
+ bubbles: true,
88
+ detail: {
89
+ value: !isShowParent
90
+ }
91
+ });
92
+ window.dispatchEvent(event);
93
+ };
94
+ const onDelete = (e)=>{
95
+ e.preventDefault();
96
+ e.stopPropagation();
97
+ const event = new CustomEvent('editor:toolbar:delete-component', {
98
+ bubbles: true,
99
+ detail: {
100
+ componentUid: props.uid,
101
+ isThemeSection: isThemeSection
102
+ }
103
+ });
104
+ window.dispatchEvent(event);
105
+ return false;
106
+ };
107
+ const onDuplicate = (e)=>{
108
+ e.preventDefault();
109
+ e.stopPropagation();
110
+ const event = new CustomEvent('editor:toolbar:duplicate-component', {
111
+ bubbles: true,
112
+ detail: {
113
+ componentUid: props.uid
114
+ }
115
+ });
116
+ window.dispatchEvent(event);
117
+ return false;
118
+ };
119
+ const closeAddSection = ()=>{
120
+ setActiveAddSection(null);
121
+ window.removeEventListener('editor:close-add-section-popup', closeAddSection);
122
+ };
123
+ const onAddSection = (e, position)=>{
124
+ e.preventDefault();
125
+ e.stopPropagation();
126
+ const $target = e.target;
127
+ if ($target) {
128
+ setActiveAddSection(position);
129
+ const rect = $target.getBoundingClientRect();
130
+ const event = new CustomEvent('editor:toolbar:add-section', {
131
+ bubbles: true,
132
+ detail: {
133
+ componentUid: props.uid,
134
+ position,
135
+ top: rect.top + rect.height / 2
136
+ }
137
+ });
138
+ window.dispatchEvent(event);
139
+ window.addEventListener('editor:close-add-section-popup', closeAddSection);
140
+ }
141
+ return false;
142
+ };
143
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
144
+ children: [
145
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
146
+ "data-toolbar": true,
147
+ "data-toolbar-section": props.tag == 'Section',
148
+ "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection,
149
+ children: [
150
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
151
+ "data-toolbar-show-parent": true,
152
+ onClick: (e)=>onShowParent(e),
153
+ "aria-hidden": "true",
154
+ children: [
155
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
156
+ "data-toolbar-icon-drag": true,
157
+ children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
158
+ width: "16",
159
+ height: "16",
160
+ viewBox: "0 0 16 16",
161
+ fill: "none",
162
+ children: [
163
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
164
+ d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
165
+ fill: "currentColor"
166
+ }),
167
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
168
+ d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
169
+ fill: "currentColor"
170
+ }),
171
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
172
+ d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
173
+ fill: "currentColor"
174
+ }),
175
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
176
+ d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
177
+ fill: "currentColor"
178
+ }),
179
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
180
+ d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
181
+ fill: "currentColor"
182
+ }),
183
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
184
+ d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
185
+ fill: "currentColor"
186
+ })
187
+ ]
188
+ })
189
+ }),
190
+ props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
191
+ "data-toolbar-name": true,
192
+ children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}`
193
+ }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
194
+ "data-toolbar-name": true,
195
+ children: props.label
196
+ }),
197
+ props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
198
+ "data-toolbar-icon-parent": true,
199
+ "data-toolbar-icon-parent-open": isShowParent,
200
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
201
+ width: "16",
202
+ height: "16",
203
+ viewBox: "0 0 16 16",
204
+ fill: "none",
205
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
206
+ d: "M5.65522 10C5.07265 10 4.7809 9.22865 5.19284 8.77753L7.53762 6.20974C7.79298 5.93009 8.20702 5.93009 8.46238 6.20974L10.8072 8.77754C11.2191 9.22866 10.9274 10 10.3448 10H5.65522Z",
207
+ fill: "currentColor"
208
+ })
209
+ })
210
+ })
211
+ ]
212
+ }),
213
+ isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
214
+ "data-toolbar-parent": true,
215
+ "data-parent-uid": parent.uid,
216
+ style: {
217
+ top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
218
+ },
219
+ children: [
220
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
221
+ "data-toolbar-icon-drag": true,
222
+ children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
223
+ width: "16",
224
+ height: "16",
225
+ viewBox: "0 0 16 16",
226
+ fill: "none",
227
+ children: [
228
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
229
+ d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
230
+ fill: "currentColor"
231
+ }),
232
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
233
+ d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
234
+ fill: "currentColor"
235
+ }),
236
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
237
+ d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
238
+ fill: "currentColor"
239
+ }),
240
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
241
+ d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
242
+ fill: "currentColor"
243
+ }),
244
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
245
+ d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
246
+ fill: "currentColor"
247
+ }),
248
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
249
+ d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
250
+ fill: "currentColor"
251
+ })
252
+ ]
253
+ })
254
+ }),
255
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
256
+ "data-toolbar-name": true,
257
+ children: parent.label
258
+ })
259
+ ]
260
+ }, parent.uid)),
261
+ /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
262
+ ...props
263
+ }),
264
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
265
+ "data-toolbar-duplicate": true,
266
+ onClick: (e)=>onDuplicate(e),
267
+ "aria-hidden": "true",
268
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
269
+ width: "16",
270
+ height: "16",
271
+ viewBox: "0 0 16 16",
272
+ fill: "none",
273
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
274
+ fillRule: "evenodd",
275
+ clipRule: "evenodd",
276
+ d: "M6.08423 1.21289C5.53194 1.21289 5.08423 1.66061 5.08423 2.21289V3.78711H4.26172C3.43329 3.78711 2.76172 4.45868 2.76172 5.28711V13.2871C2.76172 14.1155 3.43329 14.7871 4.26172 14.7871H10.2617C11.0901 14.7871 11.7617 14.1155 11.7617 13.2871V12.4629H13.0842C13.6365 12.4629 14.0842 12.0152 14.0842 11.4629V2.21289C14.0842 1.66061 13.6365 1.21289 13.0842 1.21289H6.08423ZM10.7617 12.4629H6.08423C5.53194 12.4629 5.08423 12.0152 5.08423 11.4629V4.78711H4.26172C3.98558 4.78711 3.76172 5.01097 3.76172 5.28711V13.2871C3.76172 13.5633 3.98558 13.7871 4.26172 13.7871H10.2617C10.5379 13.7871 10.7617 13.5633 10.7617 13.2871V12.4629Z",
277
+ fill: "currentColor"
278
+ })
279
+ })
280
+ }),
281
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
282
+ "data-toolbar-delete": true,
283
+ onClick: (e)=>onDelete(e),
284
+ "aria-hidden": "true",
285
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
286
+ width: "16",
287
+ height: "16",
288
+ viewBox: "0 0 16 16",
289
+ fill: "none",
290
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
291
+ fillRule: "evenodd",
292
+ clipRule: "evenodd",
293
+ d: "M11 2.88965V2.38965C11 1.56122 10.3284 0.889648 9.5 0.889648H6.5C5.67157 0.889648 5 1.56122 5 2.38965V2.88965H2C1.72386 2.88965 1.5 3.11351 1.5 3.38965C1.5 3.66579 1.72386 3.88965 2 3.88965H3.21997V13.1099C3.21997 14.2144 4.1154 15.1099 5.21997 15.1099H11.22C12.3245 15.1099 13.22 14.2144 13.22 13.1099V3.88965H14C14.2761 3.88965 14.5 3.66579 14.5 3.38965C14.5 3.11351 14.2761 2.88965 14 2.88965H11ZM6 2.88965H10V2.38965C10 2.11351 9.77614 1.88965 9.5 1.88965H6.5C6.22386 1.88965 6 2.11351 6 2.38965V2.88965ZM6.24976 6.13965C6.66397 6.13965 6.99976 6.47543 6.99976 6.88965V11.3896C6.99976 11.8039 6.66397 12.1396 6.24976 12.1396C5.83554 12.1396 5.49976 11.8039 5.49976 11.3896V6.88965C5.49976 6.47543 5.83554 6.13965 6.24976 6.13965ZM10.4998 6.88965C10.4998 6.47543 10.164 6.13965 9.74976 6.13965C9.33554 6.13965 8.99976 6.47543 8.99976 6.88965V11.3896C8.99976 11.8039 9.33554 12.1396 9.74976 12.1396C10.164 12.1396 10.4998 11.8039 10.4998 11.3896V6.88965Z",
294
+ fill: "currentColor"
295
+ })
296
+ })
297
+ })
298
+ ]
299
+ }),
300
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
301
+ "data-outline": true,
302
+ "data-outline-section": props.tag == 'Section',
303
+ "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection
304
+ }),
305
+ props.tag == 'Section' && !!isEditThemeSection && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
306
+ children: [
307
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
308
+ "data-toolbar-add-top": true,
309
+ "data-toolbar-add-open": activeAddSection == 'above',
310
+ onClick: (e)=>onAddSection(e, 'above'),
311
+ "aria-hidden": "true",
312
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
313
+ width: "16",
314
+ height: "16",
315
+ viewBox: "0 0 16 16",
316
+ fill: "none",
317
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
318
+ d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
319
+ fill: "currentColor"
320
+ })
321
+ })
322
+ }),
323
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
324
+ "data-toolbar-add-bottom": true,
325
+ "data-toolbar-add-open": activeAddSection == 'below',
326
+ onClick: (e)=>onAddSection(e, 'below'),
327
+ "aria-hidden": "true",
328
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
329
+ width: "16",
330
+ height: "16",
331
+ viewBox: "0 0 16 16",
332
+ fill: "none",
333
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
334
+ d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
335
+ fill: "currentColor"
336
+ })
337
+ })
338
+ })
339
+ ]
340
+ }),
341
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
342
+ "data-spacing": true,
343
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
344
+ "data-spacing-margin-bottom": true,
345
+ children: [
346
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
347
+ "data-spacing-margin-bottom-bg": true,
348
+ children: /*#__PURE__*/ jsxRuntime.jsx("div", {
349
+ "data-spacing-margin-bottom-value": true
350
+ })
351
+ }),
352
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
353
+ "data-spacing-margin-bottom-drag": true
354
+ })
355
+ ]
356
+ })
357
+ })
358
+ ]
359
+ });
360
+ };
361
+
362
+ exports.ComponentToolbarPreview = ComponentToolbarPreview;
package/dist/cjs/components/ComponentWrapperPreview.js CHANGED
@@ -7,12 +7,16 @@ var react = require('react');
7
7
  var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
8
8
  var constant = require('./constant.js');
9
9
  var RenderCustomCode = require('./RenderCustomCode.js');
10
+ var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
10
11
 
11
12
  const ComponentWrapperPreview = ({ children, ...props })=>{
12
13
  if (props.type === 'section') {
13
14
  return null;
14
15
  }
15
16
  const customProps = {};
17
+ if (props.tag === 'Section' && props.isThemeSection) {
18
+ customProps['data-theme-section'] = true;
19
+ }
16
20
  // Build editor configs
17
21
  if (props.editorConfigs) {
18
22
  const editorConfigs = props.editorConfigs;
@@ -43,6 +47,13 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
43
47
  if (editorConfigs.slots?.children) {
44
48
  customProps['data-slots-children'] = true;
45
49
  }
50
+ if (!editorConfigs.toolbar?.hide) {
51
+ customProps['data-toolbar-wrap'] = true;
52
+ }
53
+ }
54
+ // Show toolbar wrapper
55
+ if (!props?.editorConfigs?.toolbar?.hide) {
56
+ customProps['data-toolbar-wrap'] = true;
46
57
  }
47
58
  const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
48
59
  const advanced = props.advanced;
@@ -60,12 +71,18 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
60
71
  uid: props.uid,
61
72
  advanced: advanced
62
73
  }),
63
- /*#__PURE__*/ jsxRuntime.jsx(children.type, {
74
+ /*#__PURE__*/ jsxRuntime.jsxs(children.type, {
64
75
  className: advanced?.cssClass,
65
76
  ...children.props,
66
77
  style,
67
78
  builderAttrs,
68
- advanced
79
+ advanced,
80
+ children: [
81
+ children.props['children'],
82
+ /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
83
+ ...props
84
+ })
85
+ ]
69
86
  })
70
87
  ]
71
88
  });
@@ -77,11 +94,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
77
94
  uid: props.uid,
78
95
  advanced: advanced
79
96
  }),
80
- /*#__PURE__*/ jsxRuntime.jsx("div", {
97
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
81
98
  style: style,
82
99
  className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
83
100
  ...builderAttrs,
84
- children: children
101
+ children: [
102
+ children,
103
+ /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
104
+ ...props
105
+ })
106
+ ]
85
107
  })
86
108
  ]
87
109
  });
package/dist/cjs/components/Render.liquid.js CHANGED
@@ -3,7 +3,15 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  require('react');
6
+ require('react/jsx-runtime');
7
+ require('zustand');
6
8
  require('swr');
9
+ require('@gem-sdk/adapter-shopify');
10
+ require('swr/mutation');
11
+ require('vanilla-lazyload');
12
+ require('../hooks/useCartUI.js');
13
+ require('react-transition-group');
14
+ require('@gem-sdk/core');
7
15
  var render = require('../helpers/render.js');
8
16
  require('../helpers/convert.js');
9
17
  var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
package/dist/cjs/components/RenderCustomCode.js CHANGED
@@ -13,6 +13,8 @@ require('swr/mutation');
13
13
  var shop = require('../hooks/shop.js');
14
14
  require('vanilla-lazyload');
15
15
  require('../hooks/useCartUI.js');
16
+ require('react-transition-group');
17
+ require('@gem-sdk/core');
16
18
  require('../helpers/convert.js');
17
19
 
18
20
  const RenderCustomCode = ({ uid, advanced })=>{
package/dist/cjs/components/theme-section/CreateThemeSection.js ADDED
@@ -0,0 +1,124 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ var ThemeSectionTooltip = require('./ThemeSectionTooltip.js');
6
+ require('zustand');
7
+ var ShopContext = require('../../contexts/ShopContext.js');
8
+ require('@gem-sdk/adapter-shopify');
9
+ require('swr');
10
+ require('swr/mutation');
11
+ require('vanilla-lazyload');
12
+ require('../../hooks/useCartUI.js');
13
+ require('../../helpers/convert.js');
14
+
15
+ const SHOW_TOOLTIP_TIMEOUT = 600;
16
+ const LIMIT_PLANS = [
17
+ 'trial',
18
+ 'trial2022'
19
+ ];
20
+ const CreateThemeSection = ({ ...props })=>{
21
+ const isThemeSection = props.isThemeSection;
22
+ const shopPlan = ShopContext.useShopStore((s)=>s.plan);
23
+ const createThemeSectionCount = ShopContext.useShopStore((s)=>s.createThemeSectionCount);
24
+ const isLimit = LIMIT_PLANS.includes(shopPlan ?? '');
25
+ const isRenderTooltip = react.useMemo(()=>{
26
+ return createThemeSectionCount === undefined || createThemeSectionCount < 100;
27
+ }, [
28
+ createThemeSectionCount
29
+ ]);
30
+ const isRenderCreateThemeSection = react.useMemo(()=>{
31
+ return props.tag === 'Section' && !isThemeSection;
32
+ }, [
33
+ props.tag,
34
+ isThemeSection
35
+ ]);
36
+ const timeoutRef = react.useRef();
37
+ const [isShowTooltip, setIsShowTooltip] = react.useState(false);
38
+ const showTooltip = ()=>{
39
+ if (!isRenderTooltip) return;
40
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
41
+ timeoutRef.current = setTimeout(()=>{
42
+ setIsShowTooltip(true);
43
+ }, SHOW_TOOLTIP_TIMEOUT);
44
+ };
45
+ const hideTooltip = ()=>{
46
+ if (!isRenderTooltip) return;
47
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
48
+ setIsShowTooltip(false);
49
+ };
50
+ const onActions = (e)=>{
51
+ e.preventDefault();
52
+ e.stopPropagation();
53
+ isLimit ? onUpgrade() : onCreate();
54
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
55
+ setIsShowTooltip(false);
56
+ return false;
57
+ };
58
+ const onUpgrade = ()=>{
59
+ const eventUpgrade = new CustomEvent('editor:toolbar:upgrade', {
60
+ bubbles: true
61
+ });
62
+ window.dispatchEvent(eventUpgrade);
63
+ };
64
+ const onCreate = ()=>{
65
+ const eventCreate = new CustomEvent('editor:toolbar:create-theme-section', {
66
+ bubbles: true,
67
+ detail: {
68
+ componentUid: props.uid
69
+ }
70
+ });
71
+ window.dispatchEvent(eventCreate);
72
+ };
73
+ return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
74
+ children: /*#__PURE__*/ jsxRuntime.jsxs(ThemeSectionTooltip.ThemeSectionTooltip, {
75
+ isLimit: isLimit,
76
+ isShow: isShowTooltip,
77
+ isRender: isRenderTooltip,
78
+ onActions: onActions,
79
+ onMouseEnter: showTooltip,
80
+ onMouseLeave: hideTooltip,
81
+ children: [
82
+ isRenderCreateThemeSection && isRenderTooltip && /*#__PURE__*/ jsxRuntime.jsx("div", {
83
+ "data-toolbar-create-theme-section": true,
84
+ children: "You can create reusable sections"
85
+ }),
86
+ isRenderCreateThemeSection && /*#__PURE__*/ jsxRuntime.jsx("div", {
87
+ "data-toolbar-active-create-theme-section-wrapper": true,
88
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
89
+ "data-toolbar-active-create-theme-section": true,
90
+ onClick: (e)=>onActions(e),
91
+ "aria-hidden": "true",
92
+ children: [
93
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
94
+ width: "16",
95
+ height: "16",
96
+ viewBox: "0 0 16 16",
97
+ fill: "none",
98
+ children: [
99
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
100
+ d: "M1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V6C7 6.55228 6.55228 7 6 7H2C1.44772 7 1 6.55228 1 6V2Z",
101
+ fill: "#F9F9F9"
102
+ }),
103
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
104
+ d: "M9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V10Z",
105
+ fill: "#F9F9F9"
106
+ }),
107
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
108
+ d: "M2 9C1.44772 9 1 9.44772 1 10V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V10C7 9.44772 6.55228 9 6 9H2Z",
109
+ fill: "#F9F9F9"
110
+ })
111
+ ]
112
+ }),
113
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
114
+ children: "Create Theme section"
115
+ })
116
+ ]
117
+ })
118
+ })
119
+ ]
120
+ })
121
+ });
122
+ };
123
+
124
+ exports.CreateThemeSection = CreateThemeSection;