@gem-sdk/core 1.22.31-new-feature.4 → 1.22.31-new-feature.9

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 (9) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +57 -6
  2. package/dist/cjs/components/theme-section/CreateThemeSection.js +7 -4
  3. package/dist/cjs/components/theme-section/ThemeSectionTooltip.js +7 -1
  4. package/dist/cjs/components/toolbar/Tooltip.js +22 -0
  5. package/dist/esm/components/ComponentToolbarPreview.js +57 -6
  6. package/dist/esm/components/theme-section/CreateThemeSection.js +7 -4
  7. package/dist/esm/components/theme-section/ThemeSectionTooltip.js +7 -1
  8. package/dist/esm/components/toolbar/Tooltip.js +18 -0
  9. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -10,8 +10,10 @@ require('swr/mutation');
10
10
  require('vanilla-lazyload');
11
11
  require('../hooks/useCartUI.js');
12
12
  var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
13
+ var Tooltip = require('./toolbar/Tooltip.js');
13
14
  require('../helpers/convert.js');
14
15
 
16
+ const SECTION_LIMIT = 25;
15
17
  const ComponentToolbarPreview = ({ ...props })=>{
16
18
  const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
17
19
  const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -57,6 +59,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
57
59
  if (props.editorConfigs?.toolbar?.hide) {
58
60
  return null;
59
61
  }
62
+ const getSectionNumber = ()=>{
63
+ return root?.childrens?.length || 0;
64
+ };
60
65
  const getIndexSection = ()=>{
61
66
  if (props.tag !== 'Section') {
62
67
  return -1;
@@ -107,10 +112,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
107
112
  const onDuplicate = (e)=>{
108
113
  e.preventDefault();
109
114
  e.stopPropagation();
115
+ if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
116
+ return false;
117
+ }
110
118
  const event = new CustomEvent('editor:toolbar:duplicate-component', {
111
119
  bubbles: true,
112
120
  detail: {
113
- componentUid: props.uid
121
+ componentUid: props.uid,
122
+ isThemeSection: isThemeSection
114
123
  }
115
124
  });
116
125
  window.dispatchEvent(event);
@@ -123,6 +132,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
123
132
  const onAddSection = (e, position)=>{
124
133
  e.preventDefault();
125
134
  e.stopPropagation();
135
+ if (getSectionNumber() >= SECTION_LIMIT) {
136
+ return false;
137
+ }
126
138
  const $target = e.target;
127
139
  if ($target) {
128
140
  setActiveAddSection(position);
@@ -146,6 +158,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
146
158
  "data-toolbar": true,
147
159
  "data-toolbar-section": props.tag == 'Section',
148
160
  "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
161
+ "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
149
162
  children: [
150
163
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
151
164
  "data-toolbar-show-parent": true,
@@ -262,8 +275,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
262
275
  /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
263
276
  ...props
264
277
  }),
265
- /*#__PURE__*/ jsxRuntime.jsx("div", {
278
+ /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
279
+ enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
280
+ text: "Page has reached Shopify’s 25 section-limit",
281
+ position: "bottom",
266
282
  "data-toolbar-duplicate": true,
283
+ "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
267
284
  onClick: (e)=>onDuplicate(e),
268
285
  "aria-hidden": "true",
269
286
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
@@ -301,12 +318,42 @@ const ComponentToolbarPreview = ({ ...props })=>{
301
318
  /*#__PURE__*/ jsxRuntime.jsx("div", {
302
319
  "data-outline": true,
303
320
  "data-outline-section": props.tag == 'Section',
304
- "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor
321
+ "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
322
+ "data-outline-limit": getIndexSection() >= SECTION_LIMIT
305
323
  }),
306
- props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
324
+ props.tag === 'Section' && isThemeSection && /*#__PURE__*/ jsxRuntime.jsxs("div", {
325
+ "data-theme-section-status": true,
307
326
  children: [
308
327
  /*#__PURE__*/ jsxRuntime.jsx("div", {
328
+ "data-theme-section-status-icon": true,
329
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
330
+ xmlns: "http://www.w3.org/2000/svg",
331
+ width: "16",
332
+ height: "16",
333
+ viewBox: "0 0 16 16",
334
+ fill: "none",
335
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
336
+ fillRule: "evenodd",
337
+ clipRule: "evenodd",
338
+ d: "M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8.4668 4.61597C8.4668 4.89211 8.24294 5.11597 7.9668 5.11597C7.69065 5.11597 7.4668 4.89211 7.4668 4.61597C7.4668 4.33982 7.69065 4.11597 7.9668 4.11597C8.24294 4.11597 8.4668 4.33982 8.4668 4.61597ZM6.91309 5.48633C6.63694 5.48633 6.41309 5.71019 6.41309 5.98633C6.41309 6.26247 6.63694 6.48633 6.91309 6.48633H7.56006V10.3839C7.56006 10.9362 8.00777 11.3839 8.56006 11.3839H9.57144C9.84758 11.3839 10.0714 11.1601 10.0714 10.8839C10.0714 10.6078 9.84758 10.3839 9.57144 10.3839H8.56006V6.48633C8.56006 5.93404 8.11234 5.48633 7.56006 5.48633H6.91309Z",
339
+ fill: "#9144DA"
340
+ })
341
+ })
342
+ }),
343
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
344
+ "data-theme-section-status-text": true,
345
+ children: "Need to republish. Go to global edit to publish it"
346
+ })
347
+ ]
348
+ }),
349
+ props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
350
+ children: [
351
+ /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
352
+ enable: getSectionNumber() >= SECTION_LIMIT,
353
+ text: "Page has reached Shopify’s 25 section-limit",
354
+ position: "top",
309
355
  "data-toolbar-add-top": true,
356
+ "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
310
357
  "data-toolbar-add-open": activeAddSection == 'above',
311
358
  onClick: (e)=>onAddSection(e, 'above'),
312
359
  "aria-hidden": "true",
@@ -321,8 +368,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
321
368
  })
322
369
  })
323
370
  }),
324
- /*#__PURE__*/ jsxRuntime.jsx("div", {
371
+ /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
372
+ enable: getSectionNumber() >= SECTION_LIMIT,
373
+ text: "Page has reached Shopify’s 25 section-limit",
374
+ position: "top",
325
375
  "data-toolbar-add-bottom": true,
376
+ "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
326
377
  "data-toolbar-add-open": activeAddSection == 'below',
327
378
  onClick: (e)=>onAddSection(e, 'below'),
328
379
  "aria-hidden": "true",
@@ -339,7 +390,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
339
390
  })
340
391
  ]
341
392
  }),
342
- !(props.tag == 'Section' && isThemeSection) && /*#__PURE__*/ jsxRuntime.jsx("div", {
393
+ props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
343
394
  "data-spacing": true,
344
395
  "data-spacing-theme-section": isThemeSectionEditor,
345
396
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
package/dist/cjs/components/theme-section/CreateThemeSection.js CHANGED
@@ -13,6 +13,7 @@ require('../../hooks/useCartUI.js');
13
13
  require('../../helpers/convert.js');
14
14
 
15
15
  const SHOW_TOOLTIP_TIMEOUT = 600;
16
+ const NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP = 3;
16
17
  const LIMIT_PLANS = [
17
18
  'trial',
18
19
  'trial2022'
@@ -23,7 +24,7 @@ const CreateThemeSection = ({ ...props })=>{
23
24
  const createThemeSectionCount = ShopContext.useShopStore((s)=>s.createThemeSectionCount);
24
25
  const isLimit = LIMIT_PLANS.includes(shopPlan ?? '');
25
26
  const isRenderTooltip = react.useMemo(()=>{
26
- return createThemeSectionCount === undefined || createThemeSectionCount < 100;
27
+ return createThemeSectionCount === undefined || createThemeSectionCount < NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP;
27
28
  }, [
28
29
  createThemeSectionCount
29
30
  ]);
@@ -47,13 +48,13 @@ const CreateThemeSection = ({ ...props })=>{
47
48
  if (timeoutRef.current) clearTimeout(timeoutRef.current);
48
49
  setIsShowTooltip(false);
49
50
  };
50
- const onActions = (e)=>{
51
+ const onActions = (e, options)=>{
51
52
  e.preventDefault();
52
53
  e.stopPropagation();
54
+ if (options?.disabled) return;
53
55
  isLimit ? onUpgrade() : onCreate();
54
56
  if (timeoutRef.current) clearTimeout(timeoutRef.current);
55
57
  setIsShowTooltip(false);
56
- return false;
57
58
  };
58
59
  const onUpgrade = ()=>{
59
60
  const eventUpgrade = new CustomEvent('editor:toolbar:upgrade', {
@@ -87,7 +88,9 @@ const CreateThemeSection = ({ ...props })=>{
87
88
  "data-toolbar-active-create-theme-section-wrapper": true,
88
89
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
89
90
  "data-toolbar-active-create-theme-section": true,
90
- onClick: (e)=>onActions(e),
91
+ onClick: (e)=>onActions(e, {
92
+ disabled: isLimit
93
+ }),
91
94
  "aria-hidden": "true",
92
95
  children: [
93
96
  /*#__PURE__*/ jsxRuntime.jsxs("svg", {
package/dist/cjs/components/theme-section/ThemeSectionTooltip.js CHANGED
@@ -7,7 +7,7 @@ var core = require('@gem-sdk/core');
7
7
 
8
8
  const TRANSITION_DURATION = 350;
9
9
  const defaultStyles = {
10
- transition: `all ${TRANSITION_DURATION}ms ease-out`,
10
+ transition: `opacity ${TRANSITION_DURATION}ms ease-out`,
11
11
  opacity: 0
12
12
  };
13
13
  const transitions = {
@@ -29,6 +29,10 @@ const transitions = {
29
29
  };
30
30
  const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter, onMouseLeave, onActions })=>{
31
31
  const nodeRef = react.useRef(null);
32
+ const openHelpCenter = ()=>{
33
+ const url = 'index';
34
+ window.open(url, '_blank');
35
+ };
32
36
  return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
33
37
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
34
38
  className: "theme-section-tooltip-wrapper",
@@ -79,6 +83,8 @@ const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter
79
83
  children: isLimit ? 'Upgrade to create Theme section' : 'Create theme section'
80
84
  }),
81
85
  isLimit && /*#__PURE__*/ jsxRuntime.jsx("div", {
86
+ onClick: openHelpCenter,
87
+ "aria-hidden": true,
82
88
  className: "theme-section-tooltip__action-learn-more",
83
89
  children: "Learn more about Theme section"
84
90
  })
package/dist/cjs/components/toolbar/Tooltip.js ADDED
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+
7
+ function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', ...props }) {
8
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
9
+ ...props,
10
+ "data-toolbar-tooltip-trigger": true,
11
+ children: [
12
+ children,
13
+ enable && /*#__PURE__*/ jsxRuntime.jsx("div", {
14
+ "data-toolbar-tooltip": true,
15
+ "data-toolbar-tooltip-position": position,
16
+ children: text
17
+ })
18
+ ]
19
+ });
20
+ }
21
+
22
+ exports.default = Tooltip;
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -8,8 +8,10 @@ import 'swr/mutation';
8
8
  import 'vanilla-lazyload';
9
9
  import '../hooks/useCartUI.js';
10
10
  import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
11
+ import Tooltip from './toolbar/Tooltip.js';
11
12
  import '../helpers/convert.js';
12
13
 
14
+ const SECTION_LIMIT = 25;
13
15
  const ComponentToolbarPreview = ({ ...props })=>{
14
16
  const getParents = useBuilderPreviewStore((s)=>s.getParents);
15
17
  const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -55,6 +57,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
55
57
  if (props.editorConfigs?.toolbar?.hide) {
56
58
  return null;
57
59
  }
60
+ const getSectionNumber = ()=>{
61
+ return root?.childrens?.length || 0;
62
+ };
58
63
  const getIndexSection = ()=>{
59
64
  if (props.tag !== 'Section') {
60
65
  return -1;
@@ -105,10 +110,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
105
110
  const onDuplicate = (e)=>{
106
111
  e.preventDefault();
107
112
  e.stopPropagation();
113
+ if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
114
+ return false;
115
+ }
108
116
  const event = new CustomEvent('editor:toolbar:duplicate-component', {
109
117
  bubbles: true,
110
118
  detail: {
111
- componentUid: props.uid
119
+ componentUid: props.uid,
120
+ isThemeSection: isThemeSection
112
121
  }
113
122
  });
114
123
  window.dispatchEvent(event);
@@ -121,6 +130,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
121
130
  const onAddSection = (e, position)=>{
122
131
  e.preventDefault();
123
132
  e.stopPropagation();
133
+ if (getSectionNumber() >= SECTION_LIMIT) {
134
+ return false;
135
+ }
124
136
  const $target = e.target;
125
137
  if ($target) {
126
138
  setActiveAddSection(position);
@@ -144,6 +156,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
144
156
  "data-toolbar": true,
145
157
  "data-toolbar-section": props.tag == 'Section',
146
158
  "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
159
+ "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
147
160
  children: [
148
161
  /*#__PURE__*/ jsxs("div", {
149
162
  "data-toolbar-show-parent": true,
@@ -260,8 +273,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
260
273
  /*#__PURE__*/ jsx(CreateThemeSection, {
261
274
  ...props
262
275
  }),
263
- /*#__PURE__*/ jsx("div", {
276
+ /*#__PURE__*/ jsx(Tooltip, {
277
+ enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
278
+ text: "Page has reached Shopify’s 25 section-limit",
279
+ position: "bottom",
264
280
  "data-toolbar-duplicate": true,
281
+ "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
265
282
  onClick: (e)=>onDuplicate(e),
266
283
  "aria-hidden": "true",
267
284
  children: /*#__PURE__*/ jsx("svg", {
@@ -299,12 +316,42 @@ const ComponentToolbarPreview = ({ ...props })=>{
299
316
  /*#__PURE__*/ jsx("div", {
300
317
  "data-outline": true,
301
318
  "data-outline-section": props.tag == 'Section',
302
- "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor
319
+ "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
320
+ "data-outline-limit": getIndexSection() >= SECTION_LIMIT
303
321
  }),
304
- props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxs(Fragment, {
322
+ props.tag === 'Section' && isThemeSection && /*#__PURE__*/ jsxs("div", {
323
+ "data-theme-section-status": true,
305
324
  children: [
306
325
  /*#__PURE__*/ jsx("div", {
326
+ "data-theme-section-status-icon": true,
327
+ children: /*#__PURE__*/ jsx("svg", {
328
+ xmlns: "http://www.w3.org/2000/svg",
329
+ width: "16",
330
+ height: "16",
331
+ viewBox: "0 0 16 16",
332
+ fill: "none",
333
+ children: /*#__PURE__*/ jsx("path", {
334
+ fillRule: "evenodd",
335
+ clipRule: "evenodd",
336
+ d: "M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8.4668 4.61597C8.4668 4.89211 8.24294 5.11597 7.9668 5.11597C7.69065 5.11597 7.4668 4.89211 7.4668 4.61597C7.4668 4.33982 7.69065 4.11597 7.9668 4.11597C8.24294 4.11597 8.4668 4.33982 8.4668 4.61597ZM6.91309 5.48633C6.63694 5.48633 6.41309 5.71019 6.41309 5.98633C6.41309 6.26247 6.63694 6.48633 6.91309 6.48633H7.56006V10.3839C7.56006 10.9362 8.00777 11.3839 8.56006 11.3839H9.57144C9.84758 11.3839 10.0714 11.1601 10.0714 10.8839C10.0714 10.6078 9.84758 10.3839 9.57144 10.3839H8.56006V6.48633C8.56006 5.93404 8.11234 5.48633 7.56006 5.48633H6.91309Z",
337
+ fill: "#9144DA"
338
+ })
339
+ })
340
+ }),
341
+ /*#__PURE__*/ jsx("span", {
342
+ "data-theme-section-status-text": true,
343
+ children: "Need to republish. Go to global edit to publish it"
344
+ })
345
+ ]
346
+ }),
347
+ props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxs(Fragment, {
348
+ children: [
349
+ /*#__PURE__*/ jsx(Tooltip, {
350
+ enable: getSectionNumber() >= SECTION_LIMIT,
351
+ text: "Page has reached Shopify’s 25 section-limit",
352
+ position: "top",
307
353
  "data-toolbar-add-top": true,
354
+ "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
308
355
  "data-toolbar-add-open": activeAddSection == 'above',
309
356
  onClick: (e)=>onAddSection(e, 'above'),
310
357
  "aria-hidden": "true",
@@ -319,8 +366,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
319
366
  })
320
367
  })
321
368
  }),
322
- /*#__PURE__*/ jsx("div", {
369
+ /*#__PURE__*/ jsx(Tooltip, {
370
+ enable: getSectionNumber() >= SECTION_LIMIT,
371
+ text: "Page has reached Shopify’s 25 section-limit",
372
+ position: "top",
323
373
  "data-toolbar-add-bottom": true,
374
+ "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
324
375
  "data-toolbar-add-open": activeAddSection == 'below',
325
376
  onClick: (e)=>onAddSection(e, 'below'),
326
377
  "aria-hidden": "true",
@@ -337,7 +388,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
337
388
  })
338
389
  ]
339
390
  }),
340
- !(props.tag == 'Section' && isThemeSection) && /*#__PURE__*/ jsx("div", {
391
+ props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
341
392
  "data-spacing": true,
342
393
  "data-spacing-theme-section": isThemeSectionEditor,
343
394
  children: /*#__PURE__*/ jsxs("div", {
package/dist/esm/components/theme-section/CreateThemeSection.js CHANGED
@@ -11,6 +11,7 @@ import '../../hooks/useCartUI.js';
11
11
  import '../../helpers/convert.js';
12
12
 
13
13
  const SHOW_TOOLTIP_TIMEOUT = 600;
14
+ const NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP = 3;
14
15
  const LIMIT_PLANS = [
15
16
  'trial',
16
17
  'trial2022'
@@ -21,7 +22,7 @@ const CreateThemeSection = ({ ...props })=>{
21
22
  const createThemeSectionCount = useShopStore((s)=>s.createThemeSectionCount);
22
23
  const isLimit = LIMIT_PLANS.includes(shopPlan ?? '');
23
24
  const isRenderTooltip = useMemo(()=>{
24
- return createThemeSectionCount === undefined || createThemeSectionCount < 100;
25
+ return createThemeSectionCount === undefined || createThemeSectionCount < NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP;
25
26
  }, [
26
27
  createThemeSectionCount
27
28
  ]);
@@ -45,13 +46,13 @@ const CreateThemeSection = ({ ...props })=>{
45
46
  if (timeoutRef.current) clearTimeout(timeoutRef.current);
46
47
  setIsShowTooltip(false);
47
48
  };
48
- const onActions = (e)=>{
49
+ const onActions = (e, options)=>{
49
50
  e.preventDefault();
50
51
  e.stopPropagation();
52
+ if (options?.disabled) return;
51
53
  isLimit ? onUpgrade() : onCreate();
52
54
  if (timeoutRef.current) clearTimeout(timeoutRef.current);
53
55
  setIsShowTooltip(false);
54
- return false;
55
56
  };
56
57
  const onUpgrade = ()=>{
57
58
  const eventUpgrade = new CustomEvent('editor:toolbar:upgrade', {
@@ -85,7 +86,9 @@ const CreateThemeSection = ({ ...props })=>{
85
86
  "data-toolbar-active-create-theme-section-wrapper": true,
86
87
  children: /*#__PURE__*/ jsxs("div", {
87
88
  "data-toolbar-active-create-theme-section": true,
88
- onClick: (e)=>onActions(e),
89
+ onClick: (e)=>onActions(e, {
90
+ disabled: isLimit
91
+ }),
89
92
  "aria-hidden": "true",
90
93
  children: [
91
94
  /*#__PURE__*/ jsxs("svg", {
package/dist/esm/components/theme-section/ThemeSectionTooltip.js CHANGED
@@ -5,7 +5,7 @@ import { cls } from '@gem-sdk/core';
5
5
 
6
6
  const TRANSITION_DURATION = 350;
7
7
  const defaultStyles = {
8
- transition: `all ${TRANSITION_DURATION}ms ease-out`,
8
+ transition: `opacity ${TRANSITION_DURATION}ms ease-out`,
9
9
  opacity: 0
10
10
  };
11
11
  const transitions = {
@@ -27,6 +27,10 @@ const transitions = {
27
27
  };
28
28
  const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter, onMouseLeave, onActions })=>{
29
29
  const nodeRef = useRef(null);
30
+ const openHelpCenter = ()=>{
31
+ const url = 'index';
32
+ window.open(url, '_blank');
33
+ };
30
34
  return /*#__PURE__*/ jsx(Fragment, {
31
35
  children: /*#__PURE__*/ jsxs("div", {
32
36
  className: "theme-section-tooltip-wrapper",
@@ -77,6 +81,8 @@ const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter
77
81
  children: isLimit ? 'Upgrade to create Theme section' : 'Create theme section'
78
82
  }),
79
83
  isLimit && /*#__PURE__*/ jsx("div", {
84
+ onClick: openHelpCenter,
85
+ "aria-hidden": true,
80
86
  className: "theme-section-tooltip__action-learn-more",
81
87
  children: "Learn more about Theme section"
82
88
  })
package/dist/esm/components/toolbar/Tooltip.js ADDED
@@ -0,0 +1,18 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+
3
+ function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', ...props }) {
4
+ return /*#__PURE__*/ jsxs("div", {
5
+ ...props,
6
+ "data-toolbar-tooltip-trigger": true,
7
+ children: [
8
+ children,
9
+ enable && /*#__PURE__*/ jsx("div", {
10
+ "data-toolbar-tooltip": true,
11
+ "data-toolbar-tooltip-position": position,
12
+ children: text
13
+ })
14
+ ]
15
+ });
16
+ }
17
+
18
+ export { Tooltip as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.22.31-new-feature.4",
3
+ "version": "1.22.31-new-feature.9",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "devDependencies": {
27
27
  "@gem-sdk/adapter-shopify": "1.22.31-staging.0",
28
- "@gem-sdk/styles": "1.22.31-new-feature.4"
28
+ "@gem-sdk/styles": "1.22.31-new-feature.9"
29
29
  },
30
30
  "dependencies": {
31
31
  "react-error-boundary": "4.0.10",