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

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 (7) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +27 -1
  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/esm/components/ComponentToolbarPreview.js +27 -1
  5. package/dist/esm/components/theme-section/CreateThemeSection.js +7 -4
  6. package/dist/esm/components/theme-section/ThemeSectionTooltip.js +7 -1
  7. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -110,7 +110,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
110
110
  const event = new CustomEvent('editor:toolbar:duplicate-component', {
111
111
  bubbles: true,
112
112
  detail: {
113
- componentUid: props.uid
113
+ componentUid: props.uid,
114
+ isThemeSection: isThemeSection
114
115
  }
115
116
  });
116
117
  window.dispatchEvent(event);
@@ -303,6 +304,31 @@ const ComponentToolbarPreview = ({ ...props })=>{
303
304
  "data-outline-section": props.tag == 'Section',
304
305
  "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor
305
306
  }),
307
+ props.tag === 'Section' && isThemeSection && /*#__PURE__*/ jsxRuntime.jsxs("div", {
308
+ "data-theme-section-status": true,
309
+ children: [
310
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
311
+ "data-theme-section-status-icon": true,
312
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
313
+ xmlns: "http://www.w3.org/2000/svg",
314
+ width: "16",
315
+ height: "16",
316
+ viewBox: "0 0 16 16",
317
+ fill: "none",
318
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
319
+ fillRule: "evenodd",
320
+ clipRule: "evenodd",
321
+ 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",
322
+ fill: "#9144DA"
323
+ })
324
+ })
325
+ }),
326
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
327
+ "data-theme-section-status-text": true,
328
+ children: "Need to republish. Go to global edit to publish it"
329
+ })
330
+ ]
331
+ }),
306
332
  props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
307
333
  children: [
308
334
  /*#__PURE__*/ jsxRuntime.jsx("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/esm/components/ComponentToolbarPreview.js CHANGED
@@ -108,7 +108,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
108
108
  const event = new CustomEvent('editor:toolbar:duplicate-component', {
109
109
  bubbles: true,
110
110
  detail: {
111
- componentUid: props.uid
111
+ componentUid: props.uid,
112
+ isThemeSection: isThemeSection
112
113
  }
113
114
  });
114
115
  window.dispatchEvent(event);
@@ -301,6 +302,31 @@ const ComponentToolbarPreview = ({ ...props })=>{
301
302
  "data-outline-section": props.tag == 'Section',
302
303
  "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor
303
304
  }),
305
+ props.tag === 'Section' && isThemeSection && /*#__PURE__*/ jsxs("div", {
306
+ "data-theme-section-status": true,
307
+ children: [
308
+ /*#__PURE__*/ jsx("div", {
309
+ "data-theme-section-status-icon": true,
310
+ children: /*#__PURE__*/ jsx("svg", {
311
+ xmlns: "http://www.w3.org/2000/svg",
312
+ width: "16",
313
+ height: "16",
314
+ viewBox: "0 0 16 16",
315
+ fill: "none",
316
+ children: /*#__PURE__*/ jsx("path", {
317
+ fillRule: "evenodd",
318
+ clipRule: "evenodd",
319
+ 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",
320
+ fill: "#9144DA"
321
+ })
322
+ })
323
+ }),
324
+ /*#__PURE__*/ jsx("span", {
325
+ "data-theme-section-status-text": true,
326
+ children: "Need to republish. Go to global edit to publish it"
327
+ })
328
+ ]
329
+ }),
304
330
  props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxs(Fragment, {
305
331
  children: [
306
332
  /*#__PURE__*/ jsx("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/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.8",
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.7"
29
29
  },
30
30
  "dependencies": {
31
31
  "react-error-boundary": "4.0.10",