@gem-sdk/core 1.60.5 → 1.60.7

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