@gem-sdk/core 1.22.31-new-feature.1 → 1.22.31-new-feature.3
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.
- package/dist/cjs/components/ComponentToolbarPreview.js +14 -8
- package/dist/cjs/components/ComponentWrapperPreview.js +3 -0
- package/dist/cjs/components/Render.liquid.js +2 -0
- package/dist/cjs/components/RenderCustomCode.js +2 -0
- package/dist/cjs/components/theme-section/CreateThemeSection.js +124 -0
- package/dist/cjs/components/theme-section/ThemeSectionTooltip.js +95 -0
- package/dist/cjs/contexts/BuilderPreviewContext.js +6 -4
- package/dist/cjs/contexts/ShopContext.js +10 -0
- package/dist/cjs/hooks/useProduct.js +2 -0
- package/dist/esm/components/ComponentToolbarPreview.js +14 -8
- package/dist/esm/components/ComponentWrapperPreview.js +3 -0
- package/dist/esm/components/Render.liquid.js +2 -0
- package/dist/esm/components/RenderCustomCode.js +2 -0
- package/dist/esm/components/theme-section/CreateThemeSection.js +122 -0
- package/dist/esm/components/theme-section/ThemeSectionTooltip.js +93 -0
- package/dist/esm/contexts/BuilderPreviewContext.js +6 -4
- package/dist/esm/contexts/ShopContext.js +10 -0
- package/dist/esm/hooks/useProduct.js +2 -0
- package/dist/types/index.d.ts +13 -3
- package/package.json +2 -2
|
@@ -9,11 +9,14 @@ require('@gem-sdk/adapter-shopify');
|
|
|
9
9
|
require('swr/mutation');
|
|
10
10
|
require('vanilla-lazyload');
|
|
11
11
|
require('../hooks/useCartUI.js');
|
|
12
|
+
var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
|
|
12
13
|
require('../helpers/convert.js');
|
|
13
14
|
|
|
14
15
|
const ComponentToolbarPreview = ({ ...props })=>{
|
|
15
16
|
const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
|
|
16
17
|
const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
|
|
18
|
+
const isThemeSection = props.isThemeSection;
|
|
19
|
+
const isEditThemeSection = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isEditThemeSection);
|
|
17
20
|
const [activeAddSection, setActiveAddSection] = react.useState(null);
|
|
18
21
|
const [isShowParent, setIsShowParent] = react.useState(false);
|
|
19
22
|
const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
|
|
@@ -94,7 +97,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
94
97
|
const event = new CustomEvent('editor:toolbar:delete-component', {
|
|
95
98
|
bubbles: true,
|
|
96
99
|
detail: {
|
|
97
|
-
componentUid: props.uid
|
|
100
|
+
componentUid: props.uid,
|
|
101
|
+
isThemeSection: isThemeSection
|
|
98
102
|
}
|
|
99
103
|
});
|
|
100
104
|
window.dispatchEvent(event);
|
|
@@ -141,6 +145,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
141
145
|
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
142
146
|
"data-toolbar": true,
|
|
143
147
|
"data-toolbar-section": props.tag == 'Section',
|
|
148
|
+
"data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection,
|
|
144
149
|
children: [
|
|
145
150
|
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
146
151
|
"data-toolbar-show-parent": true,
|
|
@@ -182,12 +187,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
182
187
|
]
|
|
183
188
|
})
|
|
184
189
|
}),
|
|
185
|
-
props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.
|
|
190
|
+
props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
186
191
|
"data-toolbar-name": true,
|
|
187
|
-
children:
|
|
188
|
-
"Section ",
|
|
189
|
-
getIndexSection() + 1
|
|
190
|
-
]
|
|
192
|
+
children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}`
|
|
191
193
|
}) : /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
192
194
|
"data-toolbar-name": true,
|
|
193
195
|
children: props.label
|
|
@@ -256,6 +258,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
256
258
|
})
|
|
257
259
|
]
|
|
258
260
|
}, parent.uid)),
|
|
261
|
+
/*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
|
|
262
|
+
...props
|
|
263
|
+
}),
|
|
259
264
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
260
265
|
"data-toolbar-duplicate": true,
|
|
261
266
|
onClick: (e)=>onDuplicate(e),
|
|
@@ -294,9 +299,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
294
299
|
}),
|
|
295
300
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
296
301
|
"data-outline": true,
|
|
297
|
-
"data-outline-section": props.tag == 'Section'
|
|
302
|
+
"data-outline-section": props.tag == 'Section',
|
|
303
|
+
"data-outline-theme-section": props.tag == 'Section' && !!isThemeSection
|
|
298
304
|
}),
|
|
299
|
-
props.tag == 'Section' && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
305
|
+
props.tag == 'Section' && !!isEditThemeSection && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
300
306
|
children: [
|
|
301
307
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
302
308
|
"data-toolbar-add-top": true,
|
|
@@ -14,6 +14,9 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
14
14
|
return null;
|
|
15
15
|
}
|
|
16
16
|
const customProps = {};
|
|
17
|
+
if (props.tag === 'Section' && props.isThemeSection) {
|
|
18
|
+
customProps['data-theme-section'] = true;
|
|
19
|
+
}
|
|
17
20
|
// Build editor configs
|
|
18
21
|
if (props.editorConfigs) {
|
|
19
22
|
const editorConfigs = props.editorConfigs;
|
|
@@ -10,6 +10,8 @@ require('@gem-sdk/adapter-shopify');
|
|
|
10
10
|
require('swr/mutation');
|
|
11
11
|
require('vanilla-lazyload');
|
|
12
12
|
require('../hooks/useCartUI.js');
|
|
13
|
+
require('react-transition-group');
|
|
14
|
+
require('@gem-sdk/core');
|
|
13
15
|
var render = require('../helpers/render.js');
|
|
14
16
|
require('../helpers/convert.js');
|
|
15
17
|
var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
|
|
@@ -13,6 +13,8 @@ require('swr/mutation');
|
|
|
13
13
|
var shop = require('../hooks/shop.js');
|
|
14
14
|
require('vanilla-lazyload');
|
|
15
15
|
require('../hooks/useCartUI.js');
|
|
16
|
+
require('react-transition-group');
|
|
17
|
+
require('@gem-sdk/core');
|
|
16
18
|
require('../helpers/convert.js');
|
|
17
19
|
|
|
18
20
|
const RenderCustomCode = ({ uid, advanced })=>{
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var ThemeSectionTooltip = require('./ThemeSectionTooltip.js');
|
|
6
|
+
require('zustand');
|
|
7
|
+
var ShopContext = require('../../contexts/ShopContext.js');
|
|
8
|
+
require('@gem-sdk/adapter-shopify');
|
|
9
|
+
require('swr');
|
|
10
|
+
require('swr/mutation');
|
|
11
|
+
require('vanilla-lazyload');
|
|
12
|
+
require('../../hooks/useCartUI.js');
|
|
13
|
+
require('../../helpers/convert.js');
|
|
14
|
+
|
|
15
|
+
const SHOW_TOOLTIP_TIMEOUT = 600;
|
|
16
|
+
const LIMIT_PLANS = [
|
|
17
|
+
'trial',
|
|
18
|
+
'trial2022'
|
|
19
|
+
];
|
|
20
|
+
const CreateThemeSection = ({ ...props })=>{
|
|
21
|
+
const isThemeSection = props.isThemeSection;
|
|
22
|
+
const shopPlan = ShopContext.useShopStore((s)=>s.plan);
|
|
23
|
+
const createThemeSectionCount = ShopContext.useShopStore((s)=>s.createThemeSectionCount);
|
|
24
|
+
const isLimit = LIMIT_PLANS.includes(shopPlan ?? '');
|
|
25
|
+
const isRenderTooltip = react.useMemo(()=>{
|
|
26
|
+
return createThemeSectionCount === undefined || createThemeSectionCount < 100;
|
|
27
|
+
}, [
|
|
28
|
+
createThemeSectionCount
|
|
29
|
+
]);
|
|
30
|
+
const isRenderCreateThemeSection = react.useMemo(()=>{
|
|
31
|
+
return props.tag === 'Section' && !isThemeSection;
|
|
32
|
+
}, [
|
|
33
|
+
props.tag,
|
|
34
|
+
isThemeSection
|
|
35
|
+
]);
|
|
36
|
+
const timeoutRef = react.useRef();
|
|
37
|
+
const [isShowTooltip, setIsShowTooltip] = react.useState(false);
|
|
38
|
+
const showTooltip = ()=>{
|
|
39
|
+
if (!isRenderTooltip) return;
|
|
40
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
41
|
+
timeoutRef.current = setTimeout(()=>{
|
|
42
|
+
setIsShowTooltip(true);
|
|
43
|
+
}, SHOW_TOOLTIP_TIMEOUT);
|
|
44
|
+
};
|
|
45
|
+
const hideTooltip = ()=>{
|
|
46
|
+
if (!isRenderTooltip) return;
|
|
47
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
48
|
+
setIsShowTooltip(false);
|
|
49
|
+
};
|
|
50
|
+
const onActions = (e)=>{
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
e.stopPropagation();
|
|
53
|
+
isLimit ? onUpgrade() : onCreate();
|
|
54
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
55
|
+
setIsShowTooltip(false);
|
|
56
|
+
return false;
|
|
57
|
+
};
|
|
58
|
+
const onUpgrade = ()=>{
|
|
59
|
+
const eventUpgrade = new CustomEvent('editor:toolbar:upgrade', {
|
|
60
|
+
bubbles: true
|
|
61
|
+
});
|
|
62
|
+
window.dispatchEvent(eventUpgrade);
|
|
63
|
+
};
|
|
64
|
+
const onCreate = ()=>{
|
|
65
|
+
const eventCreate = new CustomEvent('editor:toolbar:create-theme-section', {
|
|
66
|
+
bubbles: true,
|
|
67
|
+
detail: {
|
|
68
|
+
componentUid: props.uid
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
window.dispatchEvent(eventCreate);
|
|
72
|
+
};
|
|
73
|
+
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
74
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs(ThemeSectionTooltip.ThemeSectionTooltip, {
|
|
75
|
+
isLimit: isLimit,
|
|
76
|
+
isShow: isShowTooltip,
|
|
77
|
+
isRender: isRenderTooltip,
|
|
78
|
+
onActions: onActions,
|
|
79
|
+
onMouseEnter: showTooltip,
|
|
80
|
+
onMouseLeave: hideTooltip,
|
|
81
|
+
children: [
|
|
82
|
+
isRenderCreateThemeSection && isRenderTooltip && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
83
|
+
"data-toolbar-create-theme-section": true,
|
|
84
|
+
children: "You can create reusable sections"
|
|
85
|
+
}),
|
|
86
|
+
isRenderCreateThemeSection && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
87
|
+
"data-toolbar-active-create-theme-section-wrapper": true,
|
|
88
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
89
|
+
"data-toolbar-active-create-theme-section": true,
|
|
90
|
+
onClick: (e)=>onActions(e),
|
|
91
|
+
"aria-hidden": "true",
|
|
92
|
+
children: [
|
|
93
|
+
/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
94
|
+
width: "16",
|
|
95
|
+
height: "16",
|
|
96
|
+
viewBox: "0 0 16 16",
|
|
97
|
+
fill: "none",
|
|
98
|
+
children: [
|
|
99
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
100
|
+
d: "M1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V6C7 6.55228 6.55228 7 6 7H2C1.44772 7 1 6.55228 1 6V2Z",
|
|
101
|
+
fill: "#F9F9F9"
|
|
102
|
+
}),
|
|
103
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
104
|
+
d: "M9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V10Z",
|
|
105
|
+
fill: "#F9F9F9"
|
|
106
|
+
}),
|
|
107
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
108
|
+
d: "M2 9C1.44772 9 1 9.44772 1 10V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V10C7 9.44772 6.55228 9 6 9H2Z",
|
|
109
|
+
fill: "#F9F9F9"
|
|
110
|
+
})
|
|
111
|
+
]
|
|
112
|
+
}),
|
|
113
|
+
/*#__PURE__*/ jsxRuntime.jsx("p", {
|
|
114
|
+
children: "Create Theme section"
|
|
115
|
+
})
|
|
116
|
+
]
|
|
117
|
+
})
|
|
118
|
+
})
|
|
119
|
+
]
|
|
120
|
+
})
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
exports.CreateThemeSection = CreateThemeSection;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var reactTransitionGroup = require('react-transition-group');
|
|
6
|
+
var core = require('@gem-sdk/core');
|
|
7
|
+
|
|
8
|
+
const TRANSITION_DURATION = 350;
|
|
9
|
+
const defaultStyles = {
|
|
10
|
+
transition: `all ${TRANSITION_DURATION}ms ease-out`,
|
|
11
|
+
opacity: 0
|
|
12
|
+
};
|
|
13
|
+
const transitions = {
|
|
14
|
+
entering: {
|
|
15
|
+
opacity: 1
|
|
16
|
+
},
|
|
17
|
+
entered: {
|
|
18
|
+
opacity: 1
|
|
19
|
+
},
|
|
20
|
+
exiting: {
|
|
21
|
+
opacity: 0
|
|
22
|
+
},
|
|
23
|
+
exited: {
|
|
24
|
+
opacity: 0
|
|
25
|
+
},
|
|
26
|
+
unmounted: {
|
|
27
|
+
opacity: 0
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter, onMouseLeave, onActions })=>{
|
|
31
|
+
const nodeRef = react.useRef(null);
|
|
32
|
+
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
33
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
34
|
+
className: "theme-section-tooltip-wrapper",
|
|
35
|
+
onMouseEnter: onMouseEnter,
|
|
36
|
+
onMouseLeave: onMouseLeave,
|
|
37
|
+
children: [
|
|
38
|
+
children,
|
|
39
|
+
isRender && /*#__PURE__*/ jsxRuntime.jsx(reactTransitionGroup.Transition, {
|
|
40
|
+
in: isShow,
|
|
41
|
+
timeout: TRANSITION_DURATION,
|
|
42
|
+
nodeRef: nodeRef,
|
|
43
|
+
unmountOnExit: true,
|
|
44
|
+
children: (state)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
45
|
+
className: "theme-section-tooltip",
|
|
46
|
+
ref: nodeRef,
|
|
47
|
+
style: {
|
|
48
|
+
...defaultStyles,
|
|
49
|
+
...transitions[state]
|
|
50
|
+
},
|
|
51
|
+
children: [
|
|
52
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
53
|
+
className: "theme-section-tooltip__image",
|
|
54
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("img", {
|
|
55
|
+
src: "https://ucarecdn.com/6a9f408a-aa8c-434a-890b-81067a14aceb/-/format/auto/-/preview/1920x1920/-/quality/lighter/theme-section-illustration.png",
|
|
56
|
+
alt: ""
|
|
57
|
+
})
|
|
58
|
+
}),
|
|
59
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
60
|
+
className: "theme-section-tooltip__body",
|
|
61
|
+
children: [
|
|
62
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
63
|
+
className: "theme-section-tooltip__body-title",
|
|
64
|
+
children: "Create once, use everywhere with Theme section"
|
|
65
|
+
}),
|
|
66
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
67
|
+
className: "theme-section-tooltip__body-desc",
|
|
68
|
+
children: "A global section that can be used on all your GemPages & pages."
|
|
69
|
+
})
|
|
70
|
+
]
|
|
71
|
+
}),
|
|
72
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
73
|
+
className: core.cls('theme-section-tooltip__action', {
|
|
74
|
+
'theme-section-tooltip__action-limit': isLimit
|
|
75
|
+
}),
|
|
76
|
+
children: [
|
|
77
|
+
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
78
|
+
onClick: (e)=>onActions(e),
|
|
79
|
+
children: isLimit ? 'Upgrade to create Theme section' : 'Create theme section'
|
|
80
|
+
}),
|
|
81
|
+
isLimit && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
82
|
+
className: "theme-section-tooltip__action-learn-more",
|
|
83
|
+
children: "Learn more about Theme section"
|
|
84
|
+
})
|
|
85
|
+
]
|
|
86
|
+
})
|
|
87
|
+
]
|
|
88
|
+
})
|
|
89
|
+
})
|
|
90
|
+
]
|
|
91
|
+
})
|
|
92
|
+
});
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
exports.ThemeSectionTooltip = ThemeSectionTooltip;
|
|
@@ -28,9 +28,10 @@ const root = {
|
|
|
28
28
|
label: 'Root',
|
|
29
29
|
childrens: []
|
|
30
30
|
};
|
|
31
|
-
const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
|
|
31
|
+
const createBuilderPreviewProvider = (args, isEditThemeSection)=>zustand.createStore((set, get)=>({
|
|
32
32
|
state: args,
|
|
33
33
|
loaded: false,
|
|
34
|
+
isEditThemeSection: !!isEditThemeSection,
|
|
34
35
|
addItem: (args)=>{
|
|
35
36
|
const { position, data } = args;
|
|
36
37
|
const state = get().state;
|
|
@@ -410,12 +411,13 @@ const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
|
|
|
410
411
|
return parents;
|
|
411
412
|
}
|
|
412
413
|
}));
|
|
413
|
-
const BuilderPreviewProvider = ({ children, state, lazy, ...passProps })=>{
|
|
414
|
+
const BuilderPreviewProvider = ({ children, state, isEditThemeSection, lazy, ...passProps })=>{
|
|
414
415
|
const Component = lazy ? react.Suspense : react.Fragment;
|
|
415
416
|
const value = react.useMemo(()=>{
|
|
416
|
-
return createBuilderPreviewProvider(state);
|
|
417
|
+
return createBuilderPreviewProvider(state, isEditThemeSection);
|
|
417
418
|
}, [
|
|
418
|
-
state
|
|
419
|
+
state,
|
|
420
|
+
isEditThemeSection
|
|
419
421
|
]);
|
|
420
422
|
return /*#__PURE__*/ jsxRuntime.jsx(Component, {
|
|
421
423
|
children: /*#__PURE__*/ jsxRuntime.jsx(BuilderPreviewContext.Provider, {
|
|
@@ -37,6 +37,16 @@ const createShopStoreProvider = (data)=>zustand.createStore((set)=>({
|
|
|
37
37
|
storefrontUrl: url,
|
|
38
38
|
storefrontToken: token
|
|
39
39
|
});
|
|
40
|
+
},
|
|
41
|
+
changeCreateThemeSectionCount: (count)=>{
|
|
42
|
+
set({
|
|
43
|
+
createThemeSectionCount: count
|
|
44
|
+
});
|
|
45
|
+
},
|
|
46
|
+
changeShopPlan: (plan)=>{
|
|
47
|
+
set({
|
|
48
|
+
plan
|
|
49
|
+
});
|
|
40
50
|
}
|
|
41
51
|
}));
|
|
42
52
|
const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps })=>{
|
|
@@ -11,6 +11,8 @@ require('swr/mutation');
|
|
|
11
11
|
require('vanilla-lazyload');
|
|
12
12
|
require('./useCartUI.js');
|
|
13
13
|
var variant = require('../helpers/variant.js');
|
|
14
|
+
require('react-transition-group');
|
|
15
|
+
require('@gem-sdk/core');
|
|
14
16
|
var product = require('../helpers/product.js');
|
|
15
17
|
require('../helpers/convert.js');
|
|
16
18
|
|
|
@@ -7,11 +7,14 @@ import '@gem-sdk/adapter-shopify';
|
|
|
7
7
|
import 'swr/mutation';
|
|
8
8
|
import 'vanilla-lazyload';
|
|
9
9
|
import '../hooks/useCartUI.js';
|
|
10
|
+
import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
|
|
10
11
|
import '../helpers/convert.js';
|
|
11
12
|
|
|
12
13
|
const ComponentToolbarPreview = ({ ...props })=>{
|
|
13
14
|
const getParents = useBuilderPreviewStore((s)=>s.getParents);
|
|
14
15
|
const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
|
|
16
|
+
const isThemeSection = props.isThemeSection;
|
|
17
|
+
const isEditThemeSection = useBuilderPreviewStore((s)=>s.isEditThemeSection);
|
|
15
18
|
const [activeAddSection, setActiveAddSection] = useState(null);
|
|
16
19
|
const [isShowParent, setIsShowParent] = useState(false);
|
|
17
20
|
const [isShowParentRevert, setIsShowParentRevert] = useState(false);
|
|
@@ -92,7 +95,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
92
95
|
const event = new CustomEvent('editor:toolbar:delete-component', {
|
|
93
96
|
bubbles: true,
|
|
94
97
|
detail: {
|
|
95
|
-
componentUid: props.uid
|
|
98
|
+
componentUid: props.uid,
|
|
99
|
+
isThemeSection: isThemeSection
|
|
96
100
|
}
|
|
97
101
|
});
|
|
98
102
|
window.dispatchEvent(event);
|
|
@@ -139,6 +143,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
139
143
|
/*#__PURE__*/ jsxs("div", {
|
|
140
144
|
"data-toolbar": true,
|
|
141
145
|
"data-toolbar-section": props.tag == 'Section',
|
|
146
|
+
"data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection,
|
|
142
147
|
children: [
|
|
143
148
|
/*#__PURE__*/ jsxs("div", {
|
|
144
149
|
"data-toolbar-show-parent": true,
|
|
@@ -180,12 +185,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
180
185
|
]
|
|
181
186
|
})
|
|
182
187
|
}),
|
|
183
|
-
props.tag == 'Section' ? /*#__PURE__*/
|
|
188
|
+
props.tag == 'Section' ? /*#__PURE__*/ jsx("div", {
|
|
184
189
|
"data-toolbar-name": true,
|
|
185
|
-
children:
|
|
186
|
-
"Section ",
|
|
187
|
-
getIndexSection() + 1
|
|
188
|
-
]
|
|
190
|
+
children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}`
|
|
189
191
|
}) : /*#__PURE__*/ jsx("div", {
|
|
190
192
|
"data-toolbar-name": true,
|
|
191
193
|
children: props.label
|
|
@@ -254,6 +256,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
254
256
|
})
|
|
255
257
|
]
|
|
256
258
|
}, parent.uid)),
|
|
259
|
+
/*#__PURE__*/ jsx(CreateThemeSection, {
|
|
260
|
+
...props
|
|
261
|
+
}),
|
|
257
262
|
/*#__PURE__*/ jsx("div", {
|
|
258
263
|
"data-toolbar-duplicate": true,
|
|
259
264
|
onClick: (e)=>onDuplicate(e),
|
|
@@ -292,9 +297,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
292
297
|
}),
|
|
293
298
|
/*#__PURE__*/ jsx("div", {
|
|
294
299
|
"data-outline": true,
|
|
295
|
-
"data-outline-section": props.tag == 'Section'
|
|
300
|
+
"data-outline-section": props.tag == 'Section',
|
|
301
|
+
"data-outline-theme-section": props.tag == 'Section' && !!isThemeSection
|
|
296
302
|
}),
|
|
297
|
-
props.tag == 'Section' && /*#__PURE__*/ jsxs(Fragment, {
|
|
303
|
+
props.tag == 'Section' && !!isEditThemeSection && /*#__PURE__*/ jsxs(Fragment, {
|
|
298
304
|
children: [
|
|
299
305
|
/*#__PURE__*/ jsx("div", {
|
|
300
306
|
"data-toolbar-add-top": true,
|
|
@@ -10,6 +10,9 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
10
10
|
return null;
|
|
11
11
|
}
|
|
12
12
|
const customProps = {};
|
|
13
|
+
if (props.tag === 'Section' && props.isThemeSection) {
|
|
14
|
+
customProps['data-theme-section'] = true;
|
|
15
|
+
}
|
|
13
16
|
// Build editor configs
|
|
14
17
|
if (props.editorConfigs) {
|
|
15
18
|
const editorConfigs = props.editorConfigs;
|
|
@@ -6,6 +6,8 @@ import '@gem-sdk/adapter-shopify';
|
|
|
6
6
|
import 'swr/mutation';
|
|
7
7
|
import 'vanilla-lazyload';
|
|
8
8
|
import '../hooks/useCartUI.js';
|
|
9
|
+
import 'react-transition-group';
|
|
10
|
+
import '@gem-sdk/core';
|
|
9
11
|
import { RenderIf, template } from '../helpers/render.js';
|
|
10
12
|
import '../helpers/convert.js';
|
|
11
13
|
import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
|
|
@@ -9,6 +9,8 @@ import 'swr/mutation';
|
|
|
9
9
|
import { useEditorMode } from '../hooks/shop.js';
|
|
10
10
|
import 'vanilla-lazyload';
|
|
11
11
|
import '../hooks/useCartUI.js';
|
|
12
|
+
import 'react-transition-group';
|
|
13
|
+
import '@gem-sdk/core';
|
|
12
14
|
import '../helpers/convert.js';
|
|
13
15
|
|
|
14
16
|
const RenderCustomCode = ({ uid, advanced })=>{
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useMemo, useRef, useState } from 'react';
|
|
3
|
+
import { ThemeSectionTooltip } from './ThemeSectionTooltip.js';
|
|
4
|
+
import 'zustand';
|
|
5
|
+
import { useShopStore } from '../../contexts/ShopContext.js';
|
|
6
|
+
import '@gem-sdk/adapter-shopify';
|
|
7
|
+
import 'swr';
|
|
8
|
+
import 'swr/mutation';
|
|
9
|
+
import 'vanilla-lazyload';
|
|
10
|
+
import '../../hooks/useCartUI.js';
|
|
11
|
+
import '../../helpers/convert.js';
|
|
12
|
+
|
|
13
|
+
const SHOW_TOOLTIP_TIMEOUT = 600;
|
|
14
|
+
const LIMIT_PLANS = [
|
|
15
|
+
'trial',
|
|
16
|
+
'trial2022'
|
|
17
|
+
];
|
|
18
|
+
const CreateThemeSection = ({ ...props })=>{
|
|
19
|
+
const isThemeSection = props.isThemeSection;
|
|
20
|
+
const shopPlan = useShopStore((s)=>s.plan);
|
|
21
|
+
const createThemeSectionCount = useShopStore((s)=>s.createThemeSectionCount);
|
|
22
|
+
const isLimit = LIMIT_PLANS.includes(shopPlan ?? '');
|
|
23
|
+
const isRenderTooltip = useMemo(()=>{
|
|
24
|
+
return createThemeSectionCount === undefined || createThemeSectionCount < 100;
|
|
25
|
+
}, [
|
|
26
|
+
createThemeSectionCount
|
|
27
|
+
]);
|
|
28
|
+
const isRenderCreateThemeSection = useMemo(()=>{
|
|
29
|
+
return props.tag === 'Section' && !isThemeSection;
|
|
30
|
+
}, [
|
|
31
|
+
props.tag,
|
|
32
|
+
isThemeSection
|
|
33
|
+
]);
|
|
34
|
+
const timeoutRef = useRef();
|
|
35
|
+
const [isShowTooltip, setIsShowTooltip] = useState(false);
|
|
36
|
+
const showTooltip = ()=>{
|
|
37
|
+
if (!isRenderTooltip) return;
|
|
38
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
39
|
+
timeoutRef.current = setTimeout(()=>{
|
|
40
|
+
setIsShowTooltip(true);
|
|
41
|
+
}, SHOW_TOOLTIP_TIMEOUT);
|
|
42
|
+
};
|
|
43
|
+
const hideTooltip = ()=>{
|
|
44
|
+
if (!isRenderTooltip) return;
|
|
45
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
46
|
+
setIsShowTooltip(false);
|
|
47
|
+
};
|
|
48
|
+
const onActions = (e)=>{
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
e.stopPropagation();
|
|
51
|
+
isLimit ? onUpgrade() : onCreate();
|
|
52
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
53
|
+
setIsShowTooltip(false);
|
|
54
|
+
return false;
|
|
55
|
+
};
|
|
56
|
+
const onUpgrade = ()=>{
|
|
57
|
+
const eventUpgrade = new CustomEvent('editor:toolbar:upgrade', {
|
|
58
|
+
bubbles: true
|
|
59
|
+
});
|
|
60
|
+
window.dispatchEvent(eventUpgrade);
|
|
61
|
+
};
|
|
62
|
+
const onCreate = ()=>{
|
|
63
|
+
const eventCreate = new CustomEvent('editor:toolbar:create-theme-section', {
|
|
64
|
+
bubbles: true,
|
|
65
|
+
detail: {
|
|
66
|
+
componentUid: props.uid
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
window.dispatchEvent(eventCreate);
|
|
70
|
+
};
|
|
71
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
72
|
+
children: /*#__PURE__*/ jsxs(ThemeSectionTooltip, {
|
|
73
|
+
isLimit: isLimit,
|
|
74
|
+
isShow: isShowTooltip,
|
|
75
|
+
isRender: isRenderTooltip,
|
|
76
|
+
onActions: onActions,
|
|
77
|
+
onMouseEnter: showTooltip,
|
|
78
|
+
onMouseLeave: hideTooltip,
|
|
79
|
+
children: [
|
|
80
|
+
isRenderCreateThemeSection && isRenderTooltip && /*#__PURE__*/ jsx("div", {
|
|
81
|
+
"data-toolbar-create-theme-section": true,
|
|
82
|
+
children: "You can create reusable sections"
|
|
83
|
+
}),
|
|
84
|
+
isRenderCreateThemeSection && /*#__PURE__*/ jsx("div", {
|
|
85
|
+
"data-toolbar-active-create-theme-section-wrapper": true,
|
|
86
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
87
|
+
"data-toolbar-active-create-theme-section": true,
|
|
88
|
+
onClick: (e)=>onActions(e),
|
|
89
|
+
"aria-hidden": "true",
|
|
90
|
+
children: [
|
|
91
|
+
/*#__PURE__*/ jsxs("svg", {
|
|
92
|
+
width: "16",
|
|
93
|
+
height: "16",
|
|
94
|
+
viewBox: "0 0 16 16",
|
|
95
|
+
fill: "none",
|
|
96
|
+
children: [
|
|
97
|
+
/*#__PURE__*/ jsx("path", {
|
|
98
|
+
d: "M1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V6C7 6.55228 6.55228 7 6 7H2C1.44772 7 1 6.55228 1 6V2Z",
|
|
99
|
+
fill: "#F9F9F9"
|
|
100
|
+
}),
|
|
101
|
+
/*#__PURE__*/ jsx("path", {
|
|
102
|
+
d: "M9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V10Z",
|
|
103
|
+
fill: "#F9F9F9"
|
|
104
|
+
}),
|
|
105
|
+
/*#__PURE__*/ jsx("path", {
|
|
106
|
+
d: "M2 9C1.44772 9 1 9.44772 1 10V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V10C7 9.44772 6.55228 9 6 9H2Z",
|
|
107
|
+
fill: "#F9F9F9"
|
|
108
|
+
})
|
|
109
|
+
]
|
|
110
|
+
}),
|
|
111
|
+
/*#__PURE__*/ jsx("p", {
|
|
112
|
+
children: "Create Theme section"
|
|
113
|
+
})
|
|
114
|
+
]
|
|
115
|
+
})
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
})
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export { CreateThemeSection };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef } from 'react';
|
|
3
|
+
import { Transition } from 'react-transition-group';
|
|
4
|
+
import { cls } from '@gem-sdk/core';
|
|
5
|
+
|
|
6
|
+
const TRANSITION_DURATION = 350;
|
|
7
|
+
const defaultStyles = {
|
|
8
|
+
transition: `all ${TRANSITION_DURATION}ms ease-out`,
|
|
9
|
+
opacity: 0
|
|
10
|
+
};
|
|
11
|
+
const transitions = {
|
|
12
|
+
entering: {
|
|
13
|
+
opacity: 1
|
|
14
|
+
},
|
|
15
|
+
entered: {
|
|
16
|
+
opacity: 1
|
|
17
|
+
},
|
|
18
|
+
exiting: {
|
|
19
|
+
opacity: 0
|
|
20
|
+
},
|
|
21
|
+
exited: {
|
|
22
|
+
opacity: 0
|
|
23
|
+
},
|
|
24
|
+
unmounted: {
|
|
25
|
+
opacity: 0
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter, onMouseLeave, onActions })=>{
|
|
29
|
+
const nodeRef = useRef(null);
|
|
30
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
31
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
32
|
+
className: "theme-section-tooltip-wrapper",
|
|
33
|
+
onMouseEnter: onMouseEnter,
|
|
34
|
+
onMouseLeave: onMouseLeave,
|
|
35
|
+
children: [
|
|
36
|
+
children,
|
|
37
|
+
isRender && /*#__PURE__*/ jsx(Transition, {
|
|
38
|
+
in: isShow,
|
|
39
|
+
timeout: TRANSITION_DURATION,
|
|
40
|
+
nodeRef: nodeRef,
|
|
41
|
+
unmountOnExit: true,
|
|
42
|
+
children: (state)=>/*#__PURE__*/ jsxs("div", {
|
|
43
|
+
className: "theme-section-tooltip",
|
|
44
|
+
ref: nodeRef,
|
|
45
|
+
style: {
|
|
46
|
+
...defaultStyles,
|
|
47
|
+
...transitions[state]
|
|
48
|
+
},
|
|
49
|
+
children: [
|
|
50
|
+
/*#__PURE__*/ jsx("div", {
|
|
51
|
+
className: "theme-section-tooltip__image",
|
|
52
|
+
children: /*#__PURE__*/ jsx("img", {
|
|
53
|
+
src: "https://ucarecdn.com/6a9f408a-aa8c-434a-890b-81067a14aceb/-/format/auto/-/preview/1920x1920/-/quality/lighter/theme-section-illustration.png",
|
|
54
|
+
alt: ""
|
|
55
|
+
})
|
|
56
|
+
}),
|
|
57
|
+
/*#__PURE__*/ jsxs("div", {
|
|
58
|
+
className: "theme-section-tooltip__body",
|
|
59
|
+
children: [
|
|
60
|
+
/*#__PURE__*/ jsx("div", {
|
|
61
|
+
className: "theme-section-tooltip__body-title",
|
|
62
|
+
children: "Create once, use everywhere with Theme section"
|
|
63
|
+
}),
|
|
64
|
+
/*#__PURE__*/ jsx("div", {
|
|
65
|
+
className: "theme-section-tooltip__body-desc",
|
|
66
|
+
children: "A global section that can be used on all your GemPages & pages."
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
}),
|
|
70
|
+
/*#__PURE__*/ jsxs("div", {
|
|
71
|
+
className: cls('theme-section-tooltip__action', {
|
|
72
|
+
'theme-section-tooltip__action-limit': isLimit
|
|
73
|
+
}),
|
|
74
|
+
children: [
|
|
75
|
+
/*#__PURE__*/ jsx("button", {
|
|
76
|
+
onClick: (e)=>onActions(e),
|
|
77
|
+
children: isLimit ? 'Upgrade to create Theme section' : 'Create theme section'
|
|
78
|
+
}),
|
|
79
|
+
isLimit && /*#__PURE__*/ jsx("div", {
|
|
80
|
+
className: "theme-section-tooltip__action-learn-more",
|
|
81
|
+
children: "Learn more about Theme section"
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
})
|
|
85
|
+
]
|
|
86
|
+
})
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export { ThemeSectionTooltip };
|
|
@@ -26,9 +26,10 @@ const root = {
|
|
|
26
26
|
label: 'Root',
|
|
27
27
|
childrens: []
|
|
28
28
|
};
|
|
29
|
-
const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
|
|
29
|
+
const createBuilderPreviewProvider = (args, isEditThemeSection)=>createStore((set, get)=>({
|
|
30
30
|
state: args,
|
|
31
31
|
loaded: false,
|
|
32
|
+
isEditThemeSection: !!isEditThemeSection,
|
|
32
33
|
addItem: (args)=>{
|
|
33
34
|
const { position, data } = args;
|
|
34
35
|
const state = get().state;
|
|
@@ -408,12 +409,13 @@ const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
|
|
|
408
409
|
return parents;
|
|
409
410
|
}
|
|
410
411
|
}));
|
|
411
|
-
const BuilderPreviewProvider = ({ children, state, lazy, ...passProps })=>{
|
|
412
|
+
const BuilderPreviewProvider = ({ children, state, isEditThemeSection, lazy, ...passProps })=>{
|
|
412
413
|
const Component = lazy ? Suspense : Fragment;
|
|
413
414
|
const value = useMemo(()=>{
|
|
414
|
-
return createBuilderPreviewProvider(state);
|
|
415
|
+
return createBuilderPreviewProvider(state, isEditThemeSection);
|
|
415
416
|
}, [
|
|
416
|
-
state
|
|
417
|
+
state,
|
|
418
|
+
isEditThemeSection
|
|
417
419
|
]);
|
|
418
420
|
return /*#__PURE__*/ jsx(Component, {
|
|
419
421
|
children: /*#__PURE__*/ jsx(BuilderPreviewContext.Provider, {
|
|
@@ -35,6 +35,16 @@ const createShopStoreProvider = (data)=>createStore((set)=>({
|
|
|
35
35
|
storefrontUrl: url,
|
|
36
36
|
storefrontToken: token
|
|
37
37
|
});
|
|
38
|
+
},
|
|
39
|
+
changeCreateThemeSectionCount: (count)=>{
|
|
40
|
+
set({
|
|
41
|
+
createThemeSectionCount: count
|
|
42
|
+
});
|
|
43
|
+
},
|
|
44
|
+
changeShopPlan: (plan)=>{
|
|
45
|
+
set({
|
|
46
|
+
plan
|
|
47
|
+
});
|
|
38
48
|
}
|
|
39
49
|
}));
|
|
40
50
|
const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps })=>{
|
|
@@ -9,6 +9,8 @@ import 'swr/mutation';
|
|
|
9
9
|
import 'vanilla-lazyload';
|
|
10
10
|
import './useCartUI.js';
|
|
11
11
|
import { checkInStock } from '../helpers/variant.js';
|
|
12
|
+
import 'react-transition-group';
|
|
13
|
+
import '@gem-sdk/core';
|
|
12
14
|
import { getSelectedVariant } from '../helpers/product.js';
|
|
13
15
|
import '../helpers/convert.js';
|
|
14
16
|
|
package/dist/types/index.d.ts
CHANGED
|
@@ -37,12 +37,16 @@ type BlockEntity = {
|
|
|
37
37
|
styles?: Record<string, any>;
|
|
38
38
|
editorConfigs?: Record<string, any>;
|
|
39
39
|
type?: 'component';
|
|
40
|
+
name?: string;
|
|
41
|
+
isThemeSection?: boolean;
|
|
40
42
|
};
|
|
41
43
|
type SectionEntity = {
|
|
42
44
|
uid: string;
|
|
43
45
|
tag?: string;
|
|
44
46
|
label?: string;
|
|
45
47
|
type: 'section';
|
|
48
|
+
name?: string;
|
|
49
|
+
isThemeSection?: boolean;
|
|
46
50
|
};
|
|
47
51
|
type BuilderEntity = BlockEntity | SectionEntity;
|
|
48
52
|
type BuilderEntityNested = Omit<BlockEntity, 'childrens'> & {
|
|
@@ -7305,6 +7309,7 @@ declare const useBuilderStore: <U>(selector: (state: ExtractState<StoreApi<Build
|
|
|
7305
7309
|
type BuilderPreviewContextProps = {
|
|
7306
7310
|
state: BuilderState;
|
|
7307
7311
|
loaded?: boolean;
|
|
7312
|
+
isEditThemeSection?: boolean;
|
|
7308
7313
|
addItem: (args: {
|
|
7309
7314
|
data: BuilderEntityNested | BuilderEntityNested[];
|
|
7310
7315
|
type?: 'component' | 'section';
|
|
@@ -7331,6 +7336,7 @@ type BuilderPreviewProviderProps = Pick<BuilderPreviewContextProps, 'state'> & {
|
|
|
7331
7336
|
children: React.ReactNode;
|
|
7332
7337
|
lazy?: boolean;
|
|
7333
7338
|
priority?: boolean;
|
|
7339
|
+
isEditThemeSection?: boolean;
|
|
7334
7340
|
};
|
|
7335
7341
|
declare const BuilderPreviewProvider: React.FC<BuilderPreviewProviderProps>;
|
|
7336
7342
|
declare const useBuilderPreviewStore: <U>(selector: (state: ExtractState<StoreApi<BuilderPreviewContextProps>>) => U, equalityFn?: ((a: U, b: U) => boolean) | undefined) => U;
|
|
@@ -7510,6 +7516,8 @@ type ShopContextProps = {
|
|
|
7510
7516
|
mobileOnly?: boolean;
|
|
7511
7517
|
swatches?: GlobalSwatchesData[];
|
|
7512
7518
|
isStorefront?: boolean;
|
|
7519
|
+
createThemeSectionCount?: number;
|
|
7520
|
+
plan?: string;
|
|
7513
7521
|
changeLocale: (locale: string) => void;
|
|
7514
7522
|
changeStorefrontInfo: (args: {
|
|
7515
7523
|
url?: string;
|
|
@@ -7518,12 +7526,14 @@ type ShopContextProps = {
|
|
|
7518
7526
|
changeCurrency: (currency: string) => void;
|
|
7519
7527
|
changeSwatches: (swatches: GlobalSwatchesData[]) => void;
|
|
7520
7528
|
changeLayoutSettings: (layoutSettings: LayoutSettings) => void;
|
|
7529
|
+
changeCreateThemeSectionCount: (count: number) => void;
|
|
7530
|
+
changeShopPlan: (plan: string) => void;
|
|
7521
7531
|
};
|
|
7522
7532
|
type ShopProviderProps = {
|
|
7523
7533
|
children: React.ReactNode;
|
|
7524
7534
|
key?: React.Key;
|
|
7525
7535
|
addons: AddonContextProps['components'];
|
|
7526
|
-
storeOption: Omit<ShopContextProps, 'changeLocale' | 'changeCurrency' | 'changeSwatches' | 'changeLayoutSettings' | '
|
|
7536
|
+
storeOption: Omit<ShopContextProps, 'changeLocale' | 'changeStorefrontInfo' | 'changeCurrency' | 'changeSwatches' | 'changeLayoutSettings' | 'changeCreateThemeSectionCount' | 'changeShopPlan'>;
|
|
7527
7537
|
queryOption?: React.ComponentProps<typeof SWRConfig>['value'];
|
|
7528
7538
|
};
|
|
7529
7539
|
declare const ShopProvider: React.FC<ShopProviderProps>;
|
|
@@ -9695,11 +9705,11 @@ declare const useSelectedOption: () => {
|
|
|
9695
9705
|
forceSelectedOption: (selectedOption?: Record<string, string>, productId?: Maybe<string>, noEmit?: boolean) => void;
|
|
9696
9706
|
};
|
|
9697
9707
|
declare const useVariants: () => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
|
|
9698
|
-
selectedOptions: Pick<SelectedOption, "
|
|
9708
|
+
selectedOptions: Pick<SelectedOption, "name" | "value" | "optionType">[];
|
|
9699
9709
|
media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
|
|
9700
9710
|
}>[];
|
|
9701
9711
|
declare const useVariant: (id: string) => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
|
|
9702
|
-
selectedOptions: Pick<SelectedOption, "
|
|
9712
|
+
selectedOptions: Pick<SelectedOption, "name" | "value" | "optionType">[];
|
|
9703
9713
|
media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
|
|
9704
9714
|
}>;
|
|
9705
9715
|
declare const useCurrentVariant: () => Maybe<VariantSelectFragment>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/core",
|
|
3
|
-
"version": "1.22.31-new-feature.
|
|
3
|
+
"version": "1.22.31-new-feature.3",
|
|
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.
|
|
28
|
+
"@gem-sdk/styles": "1.22.31-new-feature.2"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"react-error-boundary": "4.0.10",
|