@gem-sdk/core 1.58.0-dev.46 → 1.58.0-dev.52

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 (5) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +30 -17
  2. package/dist/cjs/helpers/compose-advance-style.js +2 -1
  3. package/dist/esm/components/ComponentToolbarPreview.js +30 -17
  4. package/dist/esm/helpers/compose-advance-style.js +2 -1
  5. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -37,7 +37,7 @@ const isSection = (el)=>{
37
37
  };
38
38
  const ComponentToolbarPreview = (props)=>{
39
39
  const isThemeSection = props.isThemeSection;
40
- const isShopifySection = props.isShopifySection;
40
+ const isShopifySection = !!props.isShopifySection;
41
41
  const storefrontUrl = ShopContext.useShopStore((s)=>s.storefrontUrl);
42
42
  const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
43
43
  const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
@@ -48,7 +48,7 @@ const ComponentToolbarPreview = (props)=>{
48
48
  const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
49
49
  const [parents, setParents] = react.useState([]);
50
50
  const [deleteTooltipPosition, setDeleteTooltipPosition] = react.useState('top');
51
- const [isDisableDelete, setIsUnableDelete] = react.useState(false);
51
+ const [isDisableDeleteInSaleFunelPage, setIsDisableDeleteInSaleFunelPage] = react.useState(false);
52
52
  const [isActiveToolbarComponent, setIsActiveToolbarComponent] = react.useState(false);
53
53
  const [productId, setProductId] = react.useState('');
54
54
  const [articleUid, setArticleUid] = react.useState('');
@@ -56,7 +56,7 @@ const ComponentToolbarPreview = (props)=>{
56
56
  width: '',
57
57
  text: ''
58
58
  });
59
- const [isDisableDuplicate, setIsDisableDuplicate] = react.useState(false);
59
+ const [isDisableDuplicateInSaleFunnelPage, setIsDisableDuplicateInSaleFunnelPage] = react.useState(false);
60
60
  const interactionData = PageContext.usePageStore((s)=>s.interactionData);
61
61
  const isSaleFunnelPage = react.useMemo(()=>editingPageType === 'POST_PURCHASE', [
62
62
  editingPageType
@@ -100,6 +100,9 @@ const ComponentToolbarPreview = (props)=>{
100
100
  return;
101
101
  }
102
102
  };
103
+ const getSectionNumber = ()=>{
104
+ return root?.childrens?.length || 0;
105
+ };
103
106
  const getDeleteTooltipPosition = react.useCallback(()=>{
104
107
  if (props.tag == 'Section') return 'bottom';
105
108
  const $toolbar = document.body.querySelector('#storefront')?.querySelector('[data-toolbar-active="true"]');
@@ -164,6 +167,20 @@ const ComponentToolbarPreview = (props)=>{
164
167
  isShowIconInteractionTarget,
165
168
  isShowIconInteractionTrigger
166
169
  ]);
170
+ const isDisableDelete = react.useMemo(()=>{
171
+ return isDisableDeleteInSaleFunelPage || isShopifySection;
172
+ }, [
173
+ isDisableDeleteInSaleFunelPage,
174
+ isShopifySection
175
+ ]);
176
+ const isDisableDuplicate = react.useMemo(()=>{
177
+ return isDisableDuplicateInSaleFunnelPage || isShopifySection || getSectionNumber() > SECTION_LIMIT && props.tag === 'Section';
178
+ }, [
179
+ getSectionNumber,
180
+ isDisableDuplicateInSaleFunnelPage,
181
+ isShopifySection,
182
+ props.tag
183
+ ]);
167
184
  // Get parents
168
185
  const onActiveComponent = react.useCallback((e)=>{
169
186
  const detail = e.detail;
@@ -177,9 +194,9 @@ const ComponentToolbarPreview = (props)=>{
177
194
  setIsActiveToolbarComponent(true);
178
195
  getDeleteTooltipPosition();
179
196
  if (isSaleFunnelPage) {
180
- setIsUnableDelete(checkDisableDelete());
197
+ setIsDisableDeleteInSaleFunelPage(checkDisableDelete());
181
198
  setTooltipText(getTooltipText());
182
- setIsDisableDuplicate(checkDisableDuplicate());
199
+ setIsDisableDuplicateInSaleFunnelPage(checkDisableDuplicate());
183
200
  }
184
201
  const currentParents = getParents(props.uid).filter((parent)=>{
185
202
  if (parent.uid === 'ROOT') return false;
@@ -219,9 +236,6 @@ const ComponentToolbarPreview = (props)=>{
219
236
  if (props.editorConfigs?.toolbar?.hide) {
220
237
  return null;
221
238
  }
222
- const getSectionNumber = ()=>{
223
- return root?.childrens?.length || 0;
224
- };
225
239
  const getIndexSection = ()=>{
226
240
  if (props.tag !== 'Section') {
227
241
  return -1;
@@ -289,9 +303,6 @@ const ComponentToolbarPreview = (props)=>{
289
303
  const onDuplicate = (e)=>{
290
304
  e.preventDefault();
291
305
  e.stopPropagation();
292
- if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
293
- return false;
294
- }
295
306
  const event = new CustomEvent('editor:toolbar:duplicate-component', {
296
307
  bubbles: true,
297
308
  detail: {
@@ -449,7 +460,7 @@ const ComponentToolbarPreview = (props)=>{
449
460
  "data-toolbar-name": true,
450
461
  children: [
451
462
  getSectionName(),
452
- isActiveToolbarComponent && props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
463
+ isActiveToolbarComponent && isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
453
464
  "data-toolbar-visibility": true,
454
465
  width: "20",
455
466
  height: "20",
@@ -622,11 +633,12 @@ const ComponentToolbarPreview = (props)=>{
622
633
  })
623
634
  }),
624
635
  /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
625
- enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
626
- text: "Page has reached Shopify’s 25 section-limit",
636
+ enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isShopifySection,
637
+ text: isShopifySection ? 'Disabled. Please edit in Shopify Editor' : 'Page has reached Shopify’s 25 section-limit',
627
638
  position: "bottom",
639
+ width: "200px",
628
640
  "data-toolbar-duplicate": true,
629
- "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isDisableDuplicate,
641
+ "data-toolbar-disable": isDisableDuplicate,
630
642
  onClick: isDisableDuplicate ? undefined : (e)=>onDuplicate(e),
631
643
  "aria-hidden": "true",
632
644
  className: isDisableDuplicate ? '!gp-cursor-not-allowed' : '',
@@ -648,10 +660,11 @@ const ComponentToolbarPreview = (props)=>{
648
660
  onClick: (e)=>isDisableDelete ? null : onDelete(e),
649
661
  enable: isDisableDelete,
650
662
  "data-toolbar-disable": isDisableDelete,
663
+ text: isShopifySection ? 'Disabled. Please edit in Shopify Editor' : tooltipText.text,
651
664
  width: tooltipText.width,
652
- text: tooltipText.text,
653
- position: deleteTooltipPosition,
665
+ position: isShopifySection ? 'bottom' : deleteTooltipPosition,
654
666
  "aria-hidden": "true",
667
+ className: isDisableDelete ? '!gp-cursor-not-allowed' : '',
655
668
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
656
669
  width: "16",
657
670
  height: "16",
package/dist/cjs/helpers/compose-advance-style.js CHANGED
@@ -124,7 +124,8 @@ function composeAdvanceStyle(data, tag, pageType) {
124
124
  'ProductTitle',
125
125
  'ProductDescription',
126
126
  'ProductPrice',
127
- 'ProductVendor'
127
+ 'ProductVendor',
128
+ 'Product'
128
129
  ];
129
130
  const listElementShadowV2 = [
130
131
  ...baseElements,
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -33,7 +33,7 @@ const isSection = (el)=>{
33
33
  };
34
34
  const ComponentToolbarPreview = (props)=>{
35
35
  const isThemeSection = props.isThemeSection;
36
- const isShopifySection = props.isShopifySection;
36
+ const isShopifySection = !!props.isShopifySection;
37
37
  const storefrontUrl = useShopStore((s)=>s.storefrontUrl);
38
38
  const editingPageType = useShopStore((s)=>s.pageType);
39
39
  const getParents = useBuilderPreviewStore((s)=>s.getParents);
@@ -44,7 +44,7 @@ const ComponentToolbarPreview = (props)=>{
44
44
  const [isShowParentRevert, setIsShowParentRevert] = useState(false);
45
45
  const [parents, setParents] = useState([]);
46
46
  const [deleteTooltipPosition, setDeleteTooltipPosition] = useState('top');
47
- const [isDisableDelete, setIsUnableDelete] = useState(false);
47
+ const [isDisableDeleteInSaleFunelPage, setIsDisableDeleteInSaleFunelPage] = useState(false);
48
48
  const [isActiveToolbarComponent, setIsActiveToolbarComponent] = useState(false);
49
49
  const [productId, setProductId] = useState('');
50
50
  const [articleUid, setArticleUid] = useState('');
@@ -52,7 +52,7 @@ const ComponentToolbarPreview = (props)=>{
52
52
  width: '',
53
53
  text: ''
54
54
  });
55
- const [isDisableDuplicate, setIsDisableDuplicate] = useState(false);
55
+ const [isDisableDuplicateInSaleFunnelPage, setIsDisableDuplicateInSaleFunnelPage] = useState(false);
56
56
  const interactionData = usePageStore((s)=>s.interactionData);
57
57
  const isSaleFunnelPage = useMemo(()=>editingPageType === 'POST_PURCHASE', [
58
58
  editingPageType
@@ -96,6 +96,9 @@ const ComponentToolbarPreview = (props)=>{
96
96
  return;
97
97
  }
98
98
  };
99
+ const getSectionNumber = ()=>{
100
+ return root?.childrens?.length || 0;
101
+ };
99
102
  const getDeleteTooltipPosition = useCallback(()=>{
100
103
  if (props.tag == 'Section') return 'bottom';
101
104
  const $toolbar = document.body.querySelector('#storefront')?.querySelector('[data-toolbar-active="true"]');
@@ -160,6 +163,20 @@ const ComponentToolbarPreview = (props)=>{
160
163
  isShowIconInteractionTarget,
161
164
  isShowIconInteractionTrigger
162
165
  ]);
166
+ const isDisableDelete = useMemo(()=>{
167
+ return isDisableDeleteInSaleFunelPage || isShopifySection;
168
+ }, [
169
+ isDisableDeleteInSaleFunelPage,
170
+ isShopifySection
171
+ ]);
172
+ const isDisableDuplicate = useMemo(()=>{
173
+ return isDisableDuplicateInSaleFunnelPage || isShopifySection || getSectionNumber() > SECTION_LIMIT && props.tag === 'Section';
174
+ }, [
175
+ getSectionNumber,
176
+ isDisableDuplicateInSaleFunnelPage,
177
+ isShopifySection,
178
+ props.tag
179
+ ]);
163
180
  // Get parents
164
181
  const onActiveComponent = useCallback((e)=>{
165
182
  const detail = e.detail;
@@ -173,9 +190,9 @@ const ComponentToolbarPreview = (props)=>{
173
190
  setIsActiveToolbarComponent(true);
174
191
  getDeleteTooltipPosition();
175
192
  if (isSaleFunnelPage) {
176
- setIsUnableDelete(checkDisableDelete());
193
+ setIsDisableDeleteInSaleFunelPage(checkDisableDelete());
177
194
  setTooltipText(getTooltipText());
178
- setIsDisableDuplicate(checkDisableDuplicate());
195
+ setIsDisableDuplicateInSaleFunnelPage(checkDisableDuplicate());
179
196
  }
180
197
  const currentParents = getParents(props.uid).filter((parent)=>{
181
198
  if (parent.uid === 'ROOT') return false;
@@ -215,9 +232,6 @@ const ComponentToolbarPreview = (props)=>{
215
232
  if (props.editorConfigs?.toolbar?.hide) {
216
233
  return null;
217
234
  }
218
- const getSectionNumber = ()=>{
219
- return root?.childrens?.length || 0;
220
- };
221
235
  const getIndexSection = ()=>{
222
236
  if (props.tag !== 'Section') {
223
237
  return -1;
@@ -285,9 +299,6 @@ const ComponentToolbarPreview = (props)=>{
285
299
  const onDuplicate = (e)=>{
286
300
  e.preventDefault();
287
301
  e.stopPropagation();
288
- if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
289
- return false;
290
- }
291
302
  const event = new CustomEvent('editor:toolbar:duplicate-component', {
292
303
  bubbles: true,
293
304
  detail: {
@@ -445,7 +456,7 @@ const ComponentToolbarPreview = (props)=>{
445
456
  "data-toolbar-name": true,
446
457
  children: [
447
458
  getSectionName(),
448
- isActiveToolbarComponent && props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxs("svg", {
459
+ isActiveToolbarComponent && isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxs("svg", {
449
460
  "data-toolbar-visibility": true,
450
461
  width: "20",
451
462
  height: "20",
@@ -618,11 +629,12 @@ const ComponentToolbarPreview = (props)=>{
618
629
  })
619
630
  }),
620
631
  /*#__PURE__*/ jsx(Tooltip, {
621
- enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
622
- text: "Page has reached Shopify’s 25 section-limit",
632
+ enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isShopifySection,
633
+ text: isShopifySection ? 'Disabled. Please edit in Shopify Editor' : 'Page has reached Shopify’s 25 section-limit',
623
634
  position: "bottom",
635
+ width: "200px",
624
636
  "data-toolbar-duplicate": true,
625
- "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isDisableDuplicate,
637
+ "data-toolbar-disable": isDisableDuplicate,
626
638
  onClick: isDisableDuplicate ? undefined : (e)=>onDuplicate(e),
627
639
  "aria-hidden": "true",
628
640
  className: isDisableDuplicate ? '!gp-cursor-not-allowed' : '',
@@ -644,10 +656,11 @@ const ComponentToolbarPreview = (props)=>{
644
656
  onClick: (e)=>isDisableDelete ? null : onDelete(e),
645
657
  enable: isDisableDelete,
646
658
  "data-toolbar-disable": isDisableDelete,
659
+ text: isShopifySection ? 'Disabled. Please edit in Shopify Editor' : tooltipText.text,
647
660
  width: tooltipText.width,
648
- text: tooltipText.text,
649
- position: deleteTooltipPosition,
661
+ position: isShopifySection ? 'bottom' : deleteTooltipPosition,
650
662
  "aria-hidden": "true",
663
+ className: isDisableDelete ? '!gp-cursor-not-allowed' : '',
651
664
  children: /*#__PURE__*/ jsx("svg", {
652
665
  width: "16",
653
666
  height: "16",
package/dist/esm/helpers/compose-advance-style.js CHANGED
@@ -122,7 +122,8 @@ function composeAdvanceStyle(data, tag, pageType) {
122
122
  'ProductTitle',
123
123
  'ProductDescription',
124
124
  'ProductPrice',
125
- 'ProductVendor'
125
+ 'ProductVendor',
126
+ 'Product'
126
127
  ];
127
128
  const listElementShadowV2 = [
128
129
  ...baseElements,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.58.0-dev.46",
3
+ "version": "1.58.0-dev.52",
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.58.0-dev.13",
31
- "@gem-sdk/styles": "1.58.0-dev.25",
31
+ "@gem-sdk/styles": "1.58.0-dev.51",
32
32
  "@types/classnames": "^2.3.1"
33
33
  },
34
34
  "dependencies": {