@gem-sdk/core 1.43.0-staging.26 → 1.43.0-staging.28

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 (8) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +43 -5
  2. package/dist/cjs/components/ComponentWrapperPreview.js +43 -1
  3. package/dist/cjs/contexts/BuilderPreviewContext.js +6 -5
  4. package/dist/esm/components/ComponentToolbarPreview.js +43 -5
  5. package/dist/esm/components/ComponentWrapperPreview.js +43 -1
  6. package/dist/esm/contexts/BuilderPreviewContext.js +6 -5
  7. package/dist/types/index.d.ts +6 -2
  8. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -30,6 +30,7 @@ const isSection = (el)=>{
30
30
  };
31
31
  const ComponentToolbarPreview = (props)=>{
32
32
  const isThemeSection = props.isThemeSection;
33
+ const isShopifySection = props.isShopifySection;
33
34
  const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
34
35
  const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
35
36
  const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -175,7 +176,8 @@ const ComponentToolbarPreview = (props)=>{
175
176
  bubbles: true,
176
177
  detail: {
177
178
  componentUid: props.uid,
178
- isThemeSection: isThemeSection
179
+ isThemeSection,
180
+ isShopifySection
179
181
  }
180
182
  });
181
183
  window.dispatchEvent(event);
@@ -191,7 +193,8 @@ const ComponentToolbarPreview = (props)=>{
191
193
  bubbles: true,
192
194
  detail: {
193
195
  componentUid: props.uid,
194
- isThemeSection: isThemeSection
196
+ isThemeSection,
197
+ isShopifySection
195
198
  }
196
199
  });
197
200
  window.dispatchEvent(event);
@@ -240,6 +243,9 @@ const ComponentToolbarPreview = (props)=>{
240
243
  return false;
241
244
  };
242
245
  const getSectionName = ()=>{
246
+ if (isShopifySection) {
247
+ return props.name?.includes('Shopify section:') ? props.name : `Shopify section: ${props.name}`;
248
+ }
243
249
  const checkRenamedSection = props.name && props.name === `Section ${props.uid}`;
244
250
  if (getSectionNumber() >= SECTION_LIMIT - 5) {
245
251
  return `${checkRenamedSection ? 'Section' : props?.name} ${getIndexSection() + 1}/${SECTION_LIMIT}`;
@@ -256,6 +262,7 @@ const ComponentToolbarPreview = (props)=>{
256
262
  "data-toolbar": true,
257
263
  "data-toolbar-section": props.tag == 'Section',
258
264
  "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
265
+ "data-toolbar-shopify-section": props.tag == 'Section' && !!isShopifySection,
259
266
  "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
260
267
  children: [
261
268
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -298,9 +305,39 @@ const ComponentToolbarPreview = (props)=>{
298
305
  ]
299
306
  })
300
307
  }),
301
- props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
308
+ props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
302
309
  "data-toolbar-name": true,
303
- children: getSectionName()
310
+ children: [
311
+ getSectionName(),
312
+ props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
313
+ "data-toolbar-visibility": true,
314
+ width: "20",
315
+ height: "20",
316
+ viewBox: "0 0 20 20",
317
+ fill: "none",
318
+ xmlns: "http://www.w3.org/2000/svg",
319
+ children: [
320
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
321
+ fillRule: "evenodd",
322
+ clipRule: "evenodd",
323
+ d: "M13.1252 9.99773C13.1243 8.27226 11.7248 6.87423 9.99935 6.87506C8.27386 6.87561 6.87518 8.27455 6.87518 10.0001C6.87518 11.7259 8.27429 13.1251 10.0002 13.1251C11.7257 13.1251 13.125 11.727 13.1252 10.0011V9.99773ZM9.99985 8.12506C11.035 8.12451 11.8746 8.96322 11.8752 9.99839V10.0004C11.8752 11.0357 11.0359 11.8751 10.0002 11.8751C8.96465 11.8751 8.12518 11.0356 8.12518 10.0001C8.12518 8.96472 8.96451 8.12533 9.99985 8.12506Z",
324
+ fill: "#F9F9F9"
325
+ }),
326
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
327
+ fillRule: "evenodd",
328
+ clipRule: "evenodd",
329
+ d: "M9.99885 4.37593C5.66421 4.37604 2.80603 7.64523 1.79548 9.00983C1.35636 9.60279 1.35918 10.4 1.80012 10.9902C2.81706 12.3514 5.69374 15.6241 9.99886 15.6241C14.3806 15.6241 17.2194 12.3452 18.2168 10.9808C18.6473 10.392 18.6442 9.60472 18.211 9.01902C17.2056 7.65938 14.3429 4.37583 9.99885 4.37593ZM2.80002 9.75374C3.77049 8.44326 6.30207 5.62602 9.99888 5.62593C13.7041 5.62585 16.24 8.45598 17.206 9.76225C17.3146 9.9091 17.3149 10.0965 17.2077 10.2431C16.254 11.5477 13.7416 14.3741 9.99886 14.3741C6.33149 14.3741 3.78173 11.5541 2.80152 10.242C2.69021 10.0931 2.69001 9.90229 2.80002 9.75374Z",
330
+ fill: "#F9F9F9"
331
+ }),
332
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
333
+ fillRule: "evenodd",
334
+ clipRule: "evenodd",
335
+ d: "M18.0763 3.26988C18.3415 3.58809 18.2985 4.06101 17.9803 4.32619L2.98032 16.8262C2.66211 17.0914 2.18919 17.0484 1.92402 16.7302C1.65884 16.412 1.70184 15.939 2.02004 15.6739L17.02 3.17385C17.3383 2.90868 17.8112 2.95167 18.0763 3.26988Z",
336
+ fill: "#F9F9F9"
337
+ })
338
+ ]
339
+ })
340
+ ]
304
341
  }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
305
342
  "data-toolbar-name": true,
306
343
  children: toolbarName()
@@ -380,7 +417,7 @@ const ComponentToolbarPreview = (props)=>{
380
417
  ]
381
418
  }, parent.uid);
382
419
  }),
383
- props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
420
+ props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && !props.isShopifySection && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
384
421
  ...props
385
422
  }),
386
423
  props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -454,6 +491,7 @@ const ComponentToolbarPreview = (props)=>{
454
491
  "data-outline": true,
455
492
  "data-outline-section": props.tag == 'Section',
456
493
  "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
494
+ "data-outline-shopify-section": props.tag == 'Section' && !!isShopifySection,
457
495
  "data-outline-limit": getIndexSection() >= SECTION_LIMIT
458
496
  }, 'outline-' + props.uid),
459
497
  props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
package/dist/cjs/components/ComponentWrapperPreview.js CHANGED
@@ -16,6 +16,7 @@ require('swr/mutation');
16
16
  var shop = require('../hooks/shop.js');
17
17
  require('vanilla-lazyload');
18
18
  require('../hooks/useCartUI.js');
19
+ var cls = require('../helpers/cls.js');
19
20
  require('../helpers/convert.js');
20
21
 
21
22
  const ComponentWrapperPreview = ({ children, ...props })=>{
@@ -41,6 +42,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
41
42
  if (props.tag === 'Section' && props.isThemeSection) {
42
43
  customProps['data-theme-section'] = true;
43
44
  }
45
+ if (props.tag === 'Section' && props.isShopifySection) {
46
+ customProps['data-shopify-section'] = true;
47
+ customProps['data-toolbar-wrap'] = true;
48
+ }
44
49
  // Build editor configs
45
50
  if (props.editorConfigs) {
46
51
  const editorConfigs = props.editorConfigs;
@@ -95,6 +100,40 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
95
100
  'data-component-label': props.label,
96
101
  'data-not-droppable': isNotDroppable(props.tag)
97
102
  };
103
+ const ShopifySection = ({ name, visibility })=>{
104
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
105
+ className: cls.cls('gp-flex gp-items-center gp-justify-center gp-gap-[8px] gp-bg-[#F4F4F4] gp-p-[16px] gp-border gp-border-[#D6D6D6]', {
106
+ 'gp-opacity-60': !visibility
107
+ }),
108
+ children: [
109
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
110
+ width: "24",
111
+ height: "24",
112
+ viewBox: "0 0 24 24",
113
+ fill: "none",
114
+ xmlns: "http://www.w3.org/2000/svg",
115
+ children: [
116
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
117
+ d: "M19.1475 5.16194C19.1416 5.1148 19.1197 5.0713 19.0857 5.03911C19.0516 5.00692 19.0076 4.9881 18.9614 4.98597C18.8835 4.98597 17.3469 4.95397 17.3469 4.95397C17.3469 4.95397 16.0588 3.67419 15.9342 3.5311C15.8104 3.40312 15.5619 3.43512 15.4684 3.46711L14.8166 3.67508C14.7361 3.40491 14.6323 3.14259 14.5067 2.89121C14.0566 1.99536 13.3727 1.51544 12.5659 1.51544C12.5044 1.51544 12.4577 1.51544 12.3954 1.53144C12.3642 1.49945 12.3486 1.46745 12.3175 1.45145C11.9608 1.06752 11.5107 0.875552 10.967 0.891549C9.92824 0.923543 8.88772 1.70741 8.03419 3.08318C7.44467 4.05901 6.99453 5.27392 6.8543 6.21776C5.65969 6.6017 4.82087 6.87365 4.79057 6.87365C4.18461 7.06562 4.16903 7.08161 4.09199 7.67351C4.06082 8.12144 2.47754 20.7415 2.47754 20.7415L15.7636 23.1091L21.522 21.6374C21.5064 21.6374 19.1631 5.27392 19.1475 5.16194ZM14.1492 3.89904C13.8062 4.00572 13.4648 4.11772 13.1251 4.23498C13.1251 3.69108 13.0472 2.92321 12.8143 2.28331C13.6064 2.41129 13.9942 3.33914 14.1492 3.89904ZM12.4265 4.44206C11.7279 4.66602 10.9679 4.90598 10.207 5.14594C10.4243 4.29808 10.8277 3.46623 11.3245 2.90632C11.533 2.66965 11.7863 2.47913 12.069 2.34641C12.3806 2.9712 12.4421 3.85105 12.4265 4.44206ZM10.9982 1.61143C11.2466 1.61143 11.4483 1.65942 11.6197 1.7874C11.3127 1.95192 11.0387 2.17444 10.8121 2.44329C10.1455 3.17916 9.63305 4.31408 9.43135 5.4179C8.79423 5.62586 8.17356 5.81783 7.61521 5.9938C7.98744 4.25009 9.39933 1.65942 10.9982 1.61143Z",
118
+ fill: "#95BF47"
119
+ }),
120
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
121
+ d: "M18.9647 4.94709C18.8851 4.94709 17.3155 4.91503 17.3155 4.91503C17.3155 4.91503 15.9981 3.63242 15.8716 3.48812C15.8261 3.43951 15.7635 3.41074 15.6973 3.40796V23.1094L21.5828 21.6344L19.1709 5.12345C19.1399 5.01122 19.0444 4.94709 18.9647 4.94709Z",
122
+ fill: "#5E8E3E"
123
+ }),
124
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
125
+ d: "M13.0575 8.51577L12.3029 10.8908C12.3029 10.8908 11.4602 10.5663 10.4599 10.6253C8.98595 10.6991 8.98595 11.4809 8.98595 11.6727C9.07404 12.7348 12.39 12.9709 12.5828 15.4631C12.7238 17.4251 11.3545 18.7675 9.35396 18.8708C6.96778 18.9733 5.65137 17.7939 5.65137 17.7939L6.16032 15.9794C6.16032 15.9794 7.49435 16.8203 8.5465 16.7613C9.23162 16.7318 9.4949 16.245 9.45967 15.9204C9.35396 14.5337 6.65165 14.6223 6.47645 12.3365C6.33551 10.4188 7.82712 8.48626 11.1265 8.30924C12.4076 8.23548 13.0575 8.51577 13.0575 8.51577Z",
126
+ fill: "white"
127
+ })
128
+ ]
129
+ }),
130
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
131
+ className: "gp-text-[#212121] gp-text-[14px] gp-leading-[24px] gp-font-medium",
132
+ children: name
133
+ })
134
+ ]
135
+ });
136
+ };
98
137
  if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
99
138
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
100
139
  children: [
@@ -109,7 +148,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
109
148
  builderAttrs,
110
149
  advanced,
111
150
  children: [
112
- children.props['children'],
151
+ props.isShopifySection ? /*#__PURE__*/ jsxRuntime.jsx(ShopifySection, {
152
+ name: props.name ?? '',
153
+ visibility: !!props.isShopifyVisibility
154
+ }) : children.props['children'],
113
155
  /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.default, {
114
156
  ...props
115
157
  })
package/dist/cjs/contexts/BuilderPreviewContext.js CHANGED
@@ -429,15 +429,16 @@ const createBuilderPreviewProvider = (args, pageName, isThemeSectionEditor)=>zus
429
429
  updateItemAttribute: (id, value, attr)=>{
430
430
  if (!attr || ![
431
431
  'label',
432
- 'customLabel'
432
+ 'customLabel',
433
+ 'isShopifyVisibility'
433
434
  ].includes(attr)) return;
434
435
  const state = get().state;
435
436
  const item = state[id];
436
- // Ignore section
437
- if (item?.type === 'section') return;
438
437
  if (item) {
439
- const dateModified = Date.now();
440
- item.dateModified = dateModified;
438
+ if (item.type !== 'section') {
439
+ const dateModified = Date.now();
440
+ item.dateModified = dateModified;
441
+ }
441
442
  const updatedItem = {
442
443
  ...item,
443
444
  [attr]: value
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -26,6 +26,7 @@ const isSection = (el)=>{
26
26
  };
27
27
  const ComponentToolbarPreview = (props)=>{
28
28
  const isThemeSection = props.isThemeSection;
29
+ const isShopifySection = props.isShopifySection;
29
30
  const editingPageType = useShopStore((s)=>s.pageType);
30
31
  const getParents = useBuilderPreviewStore((s)=>s.getParents);
31
32
  const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -171,7 +172,8 @@ const ComponentToolbarPreview = (props)=>{
171
172
  bubbles: true,
172
173
  detail: {
173
174
  componentUid: props.uid,
174
- isThemeSection: isThemeSection
175
+ isThemeSection,
176
+ isShopifySection
175
177
  }
176
178
  });
177
179
  window.dispatchEvent(event);
@@ -187,7 +189,8 @@ const ComponentToolbarPreview = (props)=>{
187
189
  bubbles: true,
188
190
  detail: {
189
191
  componentUid: props.uid,
190
- isThemeSection: isThemeSection
192
+ isThemeSection,
193
+ isShopifySection
191
194
  }
192
195
  });
193
196
  window.dispatchEvent(event);
@@ -236,6 +239,9 @@ const ComponentToolbarPreview = (props)=>{
236
239
  return false;
237
240
  };
238
241
  const getSectionName = ()=>{
242
+ if (isShopifySection) {
243
+ return props.name?.includes('Shopify section:') ? props.name : `Shopify section: ${props.name}`;
244
+ }
239
245
  const checkRenamedSection = props.name && props.name === `Section ${props.uid}`;
240
246
  if (getSectionNumber() >= SECTION_LIMIT - 5) {
241
247
  return `${checkRenamedSection ? 'Section' : props?.name} ${getIndexSection() + 1}/${SECTION_LIMIT}`;
@@ -252,6 +258,7 @@ const ComponentToolbarPreview = (props)=>{
252
258
  "data-toolbar": true,
253
259
  "data-toolbar-section": props.tag == 'Section',
254
260
  "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
261
+ "data-toolbar-shopify-section": props.tag == 'Section' && !!isShopifySection,
255
262
  "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
256
263
  children: [
257
264
  /*#__PURE__*/ jsxs("div", {
@@ -294,9 +301,39 @@ const ComponentToolbarPreview = (props)=>{
294
301
  ]
295
302
  })
296
303
  }),
297
- props.tag == 'Section' ? /*#__PURE__*/ jsx("div", {
304
+ props.tag == 'Section' ? /*#__PURE__*/ jsxs("div", {
298
305
  "data-toolbar-name": true,
299
- children: getSectionName()
306
+ children: [
307
+ getSectionName(),
308
+ props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxs("svg", {
309
+ "data-toolbar-visibility": true,
310
+ width: "20",
311
+ height: "20",
312
+ viewBox: "0 0 20 20",
313
+ fill: "none",
314
+ xmlns: "http://www.w3.org/2000/svg",
315
+ children: [
316
+ /*#__PURE__*/ jsx("path", {
317
+ fillRule: "evenodd",
318
+ clipRule: "evenodd",
319
+ d: "M13.1252 9.99773C13.1243 8.27226 11.7248 6.87423 9.99935 6.87506C8.27386 6.87561 6.87518 8.27455 6.87518 10.0001C6.87518 11.7259 8.27429 13.1251 10.0002 13.1251C11.7257 13.1251 13.125 11.727 13.1252 10.0011V9.99773ZM9.99985 8.12506C11.035 8.12451 11.8746 8.96322 11.8752 9.99839V10.0004C11.8752 11.0357 11.0359 11.8751 10.0002 11.8751C8.96465 11.8751 8.12518 11.0356 8.12518 10.0001C8.12518 8.96472 8.96451 8.12533 9.99985 8.12506Z",
320
+ fill: "#F9F9F9"
321
+ }),
322
+ /*#__PURE__*/ jsx("path", {
323
+ fillRule: "evenodd",
324
+ clipRule: "evenodd",
325
+ d: "M9.99885 4.37593C5.66421 4.37604 2.80603 7.64523 1.79548 9.00983C1.35636 9.60279 1.35918 10.4 1.80012 10.9902C2.81706 12.3514 5.69374 15.6241 9.99886 15.6241C14.3806 15.6241 17.2194 12.3452 18.2168 10.9808C18.6473 10.392 18.6442 9.60472 18.211 9.01902C17.2056 7.65938 14.3429 4.37583 9.99885 4.37593ZM2.80002 9.75374C3.77049 8.44326 6.30207 5.62602 9.99888 5.62593C13.7041 5.62585 16.24 8.45598 17.206 9.76225C17.3146 9.9091 17.3149 10.0965 17.2077 10.2431C16.254 11.5477 13.7416 14.3741 9.99886 14.3741C6.33149 14.3741 3.78173 11.5541 2.80152 10.242C2.69021 10.0931 2.69001 9.90229 2.80002 9.75374Z",
326
+ fill: "#F9F9F9"
327
+ }),
328
+ /*#__PURE__*/ jsx("path", {
329
+ fillRule: "evenodd",
330
+ clipRule: "evenodd",
331
+ d: "M18.0763 3.26988C18.3415 3.58809 18.2985 4.06101 17.9803 4.32619L2.98032 16.8262C2.66211 17.0914 2.18919 17.0484 1.92402 16.7302C1.65884 16.412 1.70184 15.939 2.02004 15.6739L17.02 3.17385C17.3383 2.90868 17.8112 2.95167 18.0763 3.26988Z",
332
+ fill: "#F9F9F9"
333
+ })
334
+ ]
335
+ })
336
+ ]
300
337
  }) : /*#__PURE__*/ jsx("div", {
301
338
  "data-toolbar-name": true,
302
339
  children: toolbarName()
@@ -376,7 +413,7 @@ const ComponentToolbarPreview = (props)=>{
376
413
  ]
377
414
  }, parent.uid);
378
415
  }),
379
- props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
416
+ props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && !props.isShopifySection && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
380
417
  ...props
381
418
  }),
382
419
  props.tag == 'Sticky' && /*#__PURE__*/ jsx("div", {
@@ -450,6 +487,7 @@ const ComponentToolbarPreview = (props)=>{
450
487
  "data-outline": true,
451
488
  "data-outline-section": props.tag == 'Section',
452
489
  "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
490
+ "data-outline-shopify-section": props.tag == 'Section' && !!isShopifySection,
453
491
  "data-outline-limit": getIndexSection() >= SECTION_LIMIT
454
492
  }, 'outline-' + props.uid),
455
493
  props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxs(Fragment, {
package/dist/esm/components/ComponentWrapperPreview.js CHANGED
@@ -12,6 +12,7 @@ import 'swr/mutation';
12
12
  import { usePageType } from '../hooks/shop.js';
13
13
  import 'vanilla-lazyload';
14
14
  import '../hooks/useCartUI.js';
15
+ import { cls } from '../helpers/cls.js';
15
16
  import '../helpers/convert.js';
16
17
 
17
18
  const ComponentWrapperPreview = ({ children, ...props })=>{
@@ -37,6 +38,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
37
38
  if (props.tag === 'Section' && props.isThemeSection) {
38
39
  customProps['data-theme-section'] = true;
39
40
  }
41
+ if (props.tag === 'Section' && props.isShopifySection) {
42
+ customProps['data-shopify-section'] = true;
43
+ customProps['data-toolbar-wrap'] = true;
44
+ }
40
45
  // Build editor configs
41
46
  if (props.editorConfigs) {
42
47
  const editorConfigs = props.editorConfigs;
@@ -91,6 +96,40 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
91
96
  'data-component-label': props.label,
92
97
  'data-not-droppable': isNotDroppable(props.tag)
93
98
  };
99
+ const ShopifySection = ({ name, visibility })=>{
100
+ return /*#__PURE__*/ jsxs("div", {
101
+ className: cls('gp-flex gp-items-center gp-justify-center gp-gap-[8px] gp-bg-[#F4F4F4] gp-p-[16px] gp-border gp-border-[#D6D6D6]', {
102
+ 'gp-opacity-60': !visibility
103
+ }),
104
+ children: [
105
+ /*#__PURE__*/ jsxs("svg", {
106
+ width: "24",
107
+ height: "24",
108
+ viewBox: "0 0 24 24",
109
+ fill: "none",
110
+ xmlns: "http://www.w3.org/2000/svg",
111
+ children: [
112
+ /*#__PURE__*/ jsx("path", {
113
+ d: "M19.1475 5.16194C19.1416 5.1148 19.1197 5.0713 19.0857 5.03911C19.0516 5.00692 19.0076 4.9881 18.9614 4.98597C18.8835 4.98597 17.3469 4.95397 17.3469 4.95397C17.3469 4.95397 16.0588 3.67419 15.9342 3.5311C15.8104 3.40312 15.5619 3.43512 15.4684 3.46711L14.8166 3.67508C14.7361 3.40491 14.6323 3.14259 14.5067 2.89121C14.0566 1.99536 13.3727 1.51544 12.5659 1.51544C12.5044 1.51544 12.4577 1.51544 12.3954 1.53144C12.3642 1.49945 12.3486 1.46745 12.3175 1.45145C11.9608 1.06752 11.5107 0.875552 10.967 0.891549C9.92824 0.923543 8.88772 1.70741 8.03419 3.08318C7.44467 4.05901 6.99453 5.27392 6.8543 6.21776C5.65969 6.6017 4.82087 6.87365 4.79057 6.87365C4.18461 7.06562 4.16903 7.08161 4.09199 7.67351C4.06082 8.12144 2.47754 20.7415 2.47754 20.7415L15.7636 23.1091L21.522 21.6374C21.5064 21.6374 19.1631 5.27392 19.1475 5.16194ZM14.1492 3.89904C13.8062 4.00572 13.4648 4.11772 13.1251 4.23498C13.1251 3.69108 13.0472 2.92321 12.8143 2.28331C13.6064 2.41129 13.9942 3.33914 14.1492 3.89904ZM12.4265 4.44206C11.7279 4.66602 10.9679 4.90598 10.207 5.14594C10.4243 4.29808 10.8277 3.46623 11.3245 2.90632C11.533 2.66965 11.7863 2.47913 12.069 2.34641C12.3806 2.9712 12.4421 3.85105 12.4265 4.44206ZM10.9982 1.61143C11.2466 1.61143 11.4483 1.65942 11.6197 1.7874C11.3127 1.95192 11.0387 2.17444 10.8121 2.44329C10.1455 3.17916 9.63305 4.31408 9.43135 5.4179C8.79423 5.62586 8.17356 5.81783 7.61521 5.9938C7.98744 4.25009 9.39933 1.65942 10.9982 1.61143Z",
114
+ fill: "#95BF47"
115
+ }),
116
+ /*#__PURE__*/ jsx("path", {
117
+ d: "M18.9647 4.94709C18.8851 4.94709 17.3155 4.91503 17.3155 4.91503C17.3155 4.91503 15.9981 3.63242 15.8716 3.48812C15.8261 3.43951 15.7635 3.41074 15.6973 3.40796V23.1094L21.5828 21.6344L19.1709 5.12345C19.1399 5.01122 19.0444 4.94709 18.9647 4.94709Z",
118
+ fill: "#5E8E3E"
119
+ }),
120
+ /*#__PURE__*/ jsx("path", {
121
+ d: "M13.0575 8.51577L12.3029 10.8908C12.3029 10.8908 11.4602 10.5663 10.4599 10.6253C8.98595 10.6991 8.98595 11.4809 8.98595 11.6727C9.07404 12.7348 12.39 12.9709 12.5828 15.4631C12.7238 17.4251 11.3545 18.7675 9.35396 18.8708C6.96778 18.9733 5.65137 17.7939 5.65137 17.7939L6.16032 15.9794C6.16032 15.9794 7.49435 16.8203 8.5465 16.7613C9.23162 16.7318 9.4949 16.245 9.45967 15.9204C9.35396 14.5337 6.65165 14.6223 6.47645 12.3365C6.33551 10.4188 7.82712 8.48626 11.1265 8.30924C12.4076 8.23548 13.0575 8.51577 13.0575 8.51577Z",
122
+ fill: "white"
123
+ })
124
+ ]
125
+ }),
126
+ /*#__PURE__*/ jsx("span", {
127
+ className: "gp-text-[#212121] gp-text-[14px] gp-leading-[24px] gp-font-medium",
128
+ children: name
129
+ })
130
+ ]
131
+ });
132
+ };
94
133
  if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
95
134
  return /*#__PURE__*/ jsxs(Fragment, {
96
135
  children: [
@@ -105,7 +144,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
105
144
  builderAttrs,
106
145
  advanced,
107
146
  children: [
108
- children.props['children'],
147
+ props.isShopifySection ? /*#__PURE__*/ jsx(ShopifySection, {
148
+ name: props.name ?? '',
149
+ visibility: !!props.isShopifyVisibility
150
+ }) : children.props['children'],
109
151
  /*#__PURE__*/ jsx(ComponentToolbarPreview, {
110
152
  ...props
111
153
  })
package/dist/esm/contexts/BuilderPreviewContext.js CHANGED
@@ -427,15 +427,16 @@ const createBuilderPreviewProvider = (args, pageName, isThemeSectionEditor)=>cre
427
427
  updateItemAttribute: (id, value, attr)=>{
428
428
  if (!attr || ![
429
429
  'label',
430
- 'customLabel'
430
+ 'customLabel',
431
+ 'isShopifyVisibility'
431
432
  ].includes(attr)) return;
432
433
  const state = get().state;
433
434
  const item = state[id];
434
- // Ignore section
435
- if (item?.type === 'section') return;
436
435
  if (item) {
437
- const dateModified = Date.now();
438
- item.dateModified = dateModified;
436
+ if (item.type !== 'section') {
437
+ const dateModified = Date.now();
438
+ item.dateModified = dateModified;
439
+ }
439
440
  const updatedItem = {
440
441
  ...item,
441
442
  [attr]: value
package/dist/types/index.d.ts CHANGED
@@ -6478,6 +6478,8 @@ type BlockEntity = {
6478
6478
  type?: 'component';
6479
6479
  isThemeSection?: boolean;
6480
6480
  needPublishing?: boolean;
6481
+ isShopifySection?: boolean;
6482
+ isShopifyVisibility?: boolean;
6481
6483
  };
6482
6484
  type SectionEntity = {
6483
6485
  uid: string;
@@ -6487,6 +6489,8 @@ type SectionEntity = {
6487
6489
  name?: string;
6488
6490
  isThemeSection?: boolean;
6489
6491
  needPublishing?: boolean;
6492
+ isShopifySection?: boolean;
6493
+ isShopifyVisibility?: boolean;
6490
6494
  };
6491
6495
  type BuilderEntity = BlockEntity | SectionEntity;
6492
6496
  type BuilderEntityNested = Omit<BlockEntity, 'childrens'> & {
@@ -6537,8 +6541,8 @@ type SaleFunnelDiscountEdge$1 = {
6537
6541
  cursor: Scalars$1['Cursor'];
6538
6542
  node?: Maybe$1<SaleFunnelDiscount$1>;
6539
6543
  };
6540
- type ProductOffer = Maybe$1<Pick<SaleFunnelDiscountEdge$1, "cursor"> & {
6541
- node?: Maybe$1<Pick<SaleFunnelDiscount$1, "id" | "value" | "type" | "position" | "objectBaseID" | "objectType" | "title" | "valueType" | "isEnabled">>;
6544
+ type ProductOffer = Maybe$1<Pick<SaleFunnelDiscountEdge$1, 'cursor'> & {
6545
+ node?: Maybe$1<Pick<SaleFunnelDiscount$1, 'id' | 'value' | 'type' | 'position' | 'objectBaseID' | 'objectType' | 'title' | 'valueType' | 'isEnabled'>>;
6542
6546
  }>;
6543
6547
 
6544
6548
  type InitComponentType<T = any> = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.43.0-staging.26",
3
+ "version": "1.43.0-staging.28",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@gem-sdk/adapter-shopify": "1.43.0-staging.26",
31
- "@gem-sdk/styles": "1.43.0-staging.26"
31
+ "@gem-sdk/styles": "1.43.0-staging.28"
32
32
  },
33
33
  "dependencies": {
34
34
  "react-error-boundary": "4.0.10",