@gem-sdk/pages 1.53.0-dev.8 → 1.53.0-dev.82

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 (15) hide show
  1. package/dist/cjs/components/builder/Body.js +28 -0
  2. package/dist/cjs/components/builder/Header.js +0 -1
  3. package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js +11 -13
  4. package/dist/cjs/components/builder/PopupManager.js +1 -1
  5. package/dist/cjs/components/builder/Toolbox.js +15 -2
  6. package/dist/cjs/libs/hooks/useSelectModeInteraction.js +16 -0
  7. package/dist/cjs/pages/builder.js +4 -11
  8. package/dist/esm/components/builder/Body.js +24 -0
  9. package/dist/esm/components/builder/Header.js +0 -1
  10. package/dist/esm/components/builder/InteractionSelectOnPageHeader.js +11 -13
  11. package/dist/esm/components/builder/PopupManager.js +1 -1
  12. package/dist/esm/components/builder/Toolbox.js +15 -2
  13. package/dist/esm/libs/hooks/useSelectModeInteraction.js +14 -0
  14. package/dist/esm/pages/builder.js +5 -12
  15. package/package.json +2 -2
package/dist/cjs/components/builder/Body.js ADDED
@@ -0,0 +1,28 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var react = require('react');
7
+ var core = require('@gem-sdk/core');
8
+ var CollectionGlobalProvider = require('../../pages/CollectionGlobalProvider.js');
9
+
10
+ const Body = ({ pageType, isThemeSectionEditor })=>{
11
+ const interactionData = core.usePageStore((s)=>s.interactionData);
12
+ const isInteractionSelectModeClass = react.useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
13
+ interactionData?.isSelectOnPage
14
+ ]);
15
+ return /*#__PURE__*/ jsxRuntime.jsx("div", {
16
+ id: "storefront",
17
+ className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
18
+ children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
19
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
20
+ uid: "ROOT"
21
+ })
22
+ }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
23
+ uid: "ROOT"
24
+ })
25
+ });
26
+ };
27
+
28
+ exports.default = Body;
package/dist/cjs/components/builder/Header.js CHANGED
@@ -25,7 +25,6 @@ const Header = (props)=>{
25
25
  const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
26
26
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
27
27
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
28
- console.log('isSelectOnPage', isSelectOnPage);
29
28
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
30
29
  children: [
31
30
  /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),
package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -4,11 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
+ var useSelectModeInteraction = require('../../libs/hooks/useSelectModeInteraction.js');
7
8
 
8
9
  const InteractionSelectOnPageHeader = ()=>{
9
10
  const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
10
11
  const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
11
12
  const { closeSelectOnPage } = core.useInteraction();
13
+ const { changeSelectMode } = useSelectModeInteraction.useSelectModeInteraction();
14
+ const handleSetInteraction = (type)=>{
15
+ setInteractionSelectType(type);
16
+ changeSelectMode(type);
17
+ };
12
18
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
13
19
  children: [
14
20
  /*#__PURE__*/ jsxRuntime.jsxs("header", {
@@ -22,21 +28,13 @@ const InteractionSelectOnPageHeader = ()=>{
22
28
  className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
23
29
  children: [
24
30
  /*#__PURE__*/ jsxRuntime.jsx("button", {
25
- "data-interaction-mode": "element",
26
- onClick: ()=>setInteractionSelectType('element'),
27
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
28
- style: {
29
- cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
30
- },
31
+ onClick: ()=>handleSetInteraction('ELEMENT'),
32
+ className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'ELEMENT' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
31
33
  children: "Choose an element on page"
32
34
  }),
33
35
  /*#__PURE__*/ jsxRuntime.jsx("button", {
34
- "data-interaction-mode": "page",
35
- onClick: ()=>setInteractionSelectType('page'),
36
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
37
- style: {
38
- cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
39
- },
36
+ onClick: ()=>handleSetInteraction('PAGE'),
37
+ className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'PAGE' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
40
38
  children: "Use entire page"
41
39
  })
42
40
  ]
@@ -59,7 +57,7 @@ const InteractionSelectOnPageHeader = ()=>{
59
57
  ]
60
58
  }),
61
59
  /*#__PURE__*/ jsxRuntime.jsx("div", {
62
- className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-[999] gp-bg-[#3c67ff]/[0.25]' : ''}`,
60
+ className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-mt-[40px] gp-z-[999] ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
63
61
  style: {
64
62
  height: 'calc(100% - 40px)'
65
63
  }
package/dist/cjs/components/builder/PopupManager.js CHANGED
@@ -33,7 +33,7 @@ const PopupManager = ()=>{
33
33
  onSetActiveModal
34
34
  ]);
35
35
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
36
- className: "gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
36
+ className: "gp-popup-trigger-button gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
37
37
  children: popups?.map((item)=>{
38
38
  const display = item?.advanced?.d;
39
39
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
package/dist/cjs/components/builder/Toolbox.js CHANGED
@@ -39,6 +39,7 @@ const Toolbox = ()=>{
39
39
  const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
40
40
  const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
41
41
  const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
42
+ const setInteractionSettingType = core.usePageStore((s)=>s.setInteractionSettingType);
42
43
  const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
43
44
  state
44
45
  ]);
@@ -335,11 +336,20 @@ const Toolbox = ()=>{
335
336
  const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
336
337
  const isSelectOnPage = e.detail.value;
337
338
  const mode = e.detail.mode;
339
+ const settingType = e.detail.settingType;
338
340
  setInteractionIsSelectOnPage(isSelectOnPage);
339
341
  setInteractionSelectType(mode);
342
+ setInteractionSettingType(settingType);
340
343
  }, [
341
344
  setInteractionIsSelectOnPage,
342
- setInteractionSelectType
345
+ setInteractionSelectType,
346
+ setInteractionSettingType
347
+ ]);
348
+ const onUpdateInteractionSettingType = react.useCallback((e)=>{
349
+ const settingType = e.detail.settingType;
350
+ setInteractionSettingType(settingType);
351
+ }, [
352
+ setInteractionSettingType
343
353
  ]);
344
354
  const onUpdateInteractionItem = react.useCallback((e)=>{
345
355
  const interactionItem = e.detail;
@@ -376,6 +386,7 @@ const Toolbox = ()=>{
376
386
  window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
377
387
  window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
378
388
  window.addEventListener('update-interaction-item', onUpdateInteractionItem);
389
+ window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
379
390
  return ()=>{
380
391
  window.removeEventListener('update-shop-info', onChangeShopInfo);
381
392
  window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -397,6 +408,7 @@ const Toolbox = ()=>{
397
408
  window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
398
409
  window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
399
410
  window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
411
+ window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
400
412
  };
401
413
  }, [
402
414
  onAddEntity,
@@ -419,7 +431,8 @@ const Toolbox = ()=>{
419
431
  onUpdateProductOffers,
420
432
  onUpdateSalePageProductId,
421
433
  onUpdateInteractionItem,
422
- onUpdateInteractionIsSelectOnPage
434
+ onUpdateInteractionIsSelectOnPage,
435
+ onUpdateInteractionSettingType
423
436
  ]);
424
437
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
425
438
  className: "toolbox"
package/dist/cjs/libs/hooks/useSelectModeInteraction.js ADDED
@@ -0,0 +1,16 @@
1
+ 'use strict';
2
+
3
+ const useSelectModeInteraction = ()=>{
4
+ const changeSelectMode = (mode)=>{
5
+ const event = new CustomEvent('editor:interaction:change-select-mode', {
6
+ bubbles: true,
7
+ detail: mode
8
+ });
9
+ window.dispatchEvent(event);
10
+ };
11
+ return {
12
+ changeSelectMode
13
+ };
14
+ };
15
+
16
+ exports.useSelectModeInteraction = useSelectModeInteraction;
package/dist/cjs/pages/builder.js CHANGED
@@ -8,12 +8,12 @@ var react = require('react');
8
8
  var Toolbox = require('../components/builder/Toolbox.js');
9
9
  var Header = require('../components/builder/Header.js');
10
10
  var Footer = require('../components/builder/Footer.js');
11
- var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
12
11
  var PopupManager = require('../components/builder/PopupManager.js');
13
12
  var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
14
13
  var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
15
14
  var Toolbar = require('../components/builder/Toolbar.js');
16
15
  var SwitchView = require('../components/builder/SwitchView.js');
16
+ var Body = require('../components/builder/Body.js');
17
17
 
18
18
  const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
19
19
  const [loadSuccess, setLoadSuccess] = react.useState(false);
@@ -77,16 +77,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
77
77
  pageType: pageType,
78
78
  isOriginTemplate: isOriginTemplate
79
79
  })),
80
- /*#__PURE__*/ jsxRuntime.jsx("div", {
81
- id: "storefront",
82
- className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
83
- children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
84
- children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
85
- uid: "ROOT"
86
- })
87
- }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
88
- uid: "ROOT"
89
- })
80
+ /*#__PURE__*/ jsxRuntime.jsx(Body.default, {
81
+ pageType: pageType,
82
+ isThemeSectionEditor: isThemeSectionEditor
90
83
  }),
91
84
  /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
92
85
  editorImageToLayout: editorImageToLayout || false
package/dist/esm/components/builder/Body.js ADDED
@@ -0,0 +1,24 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useMemo } from 'react';
3
+ import { usePageStore, RenderPreview } from '@gem-sdk/core';
4
+ import CollectionGlobalProvider from '../../pages/CollectionGlobalProvider.js';
5
+
6
+ const Body = ({ pageType, isThemeSectionEditor })=>{
7
+ const interactionData = usePageStore((s)=>s.interactionData);
8
+ const isInteractionSelectModeClass = useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
9
+ interactionData?.isSelectOnPage
10
+ ]);
11
+ return /*#__PURE__*/ jsx("div", {
12
+ id: "storefront",
13
+ className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
14
+ children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
15
+ children: /*#__PURE__*/ jsx(RenderPreview, {
16
+ uid: "ROOT"
17
+ })
18
+ }) : /*#__PURE__*/ jsx(RenderPreview, {
19
+ uid: "ROOT"
20
+ })
21
+ });
22
+ };
23
+
24
+ export { Body as default };
package/dist/esm/components/builder/Header.js CHANGED
@@ -21,7 +21,6 @@ const Header = (props)=>{
21
21
  const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
22
22
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
23
23
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
24
- console.log('isSelectOnPage', isSelectOnPage);
25
24
  return /*#__PURE__*/ jsxs(Fragment, {
26
25
  children: [
27
26
  /*#__PURE__*/ jsx(Devices, {}),
package/dist/esm/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -1,10 +1,16 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { usePageStore, useInteraction } from '@gem-sdk/core';
3
+ import { useSelectModeInteraction } from '../../libs/hooks/useSelectModeInteraction.js';
3
4
 
4
5
  const InteractionSelectOnPageHeader = ()=>{
5
6
  const selectType = usePageStore((s)=>s.interactionData?.selectType);
6
7
  const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
7
8
  const { closeSelectOnPage } = useInteraction();
9
+ const { changeSelectMode } = useSelectModeInteraction();
10
+ const handleSetInteraction = (type)=>{
11
+ setInteractionSelectType(type);
12
+ changeSelectMode(type);
13
+ };
8
14
  return /*#__PURE__*/ jsxs(Fragment, {
9
15
  children: [
10
16
  /*#__PURE__*/ jsxs("header", {
@@ -18,21 +24,13 @@ const InteractionSelectOnPageHeader = ()=>{
18
24
  className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
19
25
  children: [
20
26
  /*#__PURE__*/ jsx("button", {
21
- "data-interaction-mode": "element",
22
- onClick: ()=>setInteractionSelectType('element'),
23
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
24
- style: {
25
- cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
26
- },
27
+ onClick: ()=>handleSetInteraction('ELEMENT'),
28
+ className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'ELEMENT' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
27
29
  children: "Choose an element on page"
28
30
  }),
29
31
  /*#__PURE__*/ jsx("button", {
30
- "data-interaction-mode": "page",
31
- onClick: ()=>setInteractionSelectType('page'),
32
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
33
- style: {
34
- cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
35
- },
32
+ onClick: ()=>handleSetInteraction('PAGE'),
33
+ className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'PAGE' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
36
34
  children: "Use entire page"
37
35
  })
38
36
  ]
@@ -55,7 +53,7 @@ const InteractionSelectOnPageHeader = ()=>{
55
53
  ]
56
54
  }),
57
55
  /*#__PURE__*/ jsx("div", {
58
- className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-[999] gp-bg-[#3c67ff]/[0.25]' : ''}`,
56
+ className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-mt-[40px] gp-z-[999] ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
59
57
  style: {
60
58
  height: 'calc(100% - 40px)'
61
59
  }
package/dist/esm/components/builder/PopupManager.js CHANGED
@@ -29,7 +29,7 @@ const PopupManager = ()=>{
29
29
  onSetActiveModal
30
30
  ]);
31
31
  return /*#__PURE__*/ jsx("div", {
32
- className: "gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
32
+ className: "gp-popup-trigger-button gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
33
33
  children: popups?.map((item)=>{
34
34
  const display = item?.advanced?.d;
35
35
  return /*#__PURE__*/ jsx("div", {
package/dist/esm/components/builder/Toolbox.js CHANGED
@@ -35,6 +35,7 @@ const Toolbox = ()=>{
35
35
  const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
36
36
  const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
37
37
  const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
38
+ const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
38
39
  const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
39
40
  state
40
41
  ]);
@@ -331,11 +332,20 @@ const Toolbox = ()=>{
331
332
  const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
332
333
  const isSelectOnPage = e.detail.value;
333
334
  const mode = e.detail.mode;
335
+ const settingType = e.detail.settingType;
334
336
  setInteractionIsSelectOnPage(isSelectOnPage);
335
337
  setInteractionSelectType(mode);
338
+ setInteractionSettingType(settingType);
336
339
  }, [
337
340
  setInteractionIsSelectOnPage,
338
- setInteractionSelectType
341
+ setInteractionSelectType,
342
+ setInteractionSettingType
343
+ ]);
344
+ const onUpdateInteractionSettingType = useCallback((e)=>{
345
+ const settingType = e.detail.settingType;
346
+ setInteractionSettingType(settingType);
347
+ }, [
348
+ setInteractionSettingType
339
349
  ]);
340
350
  const onUpdateInteractionItem = useCallback((e)=>{
341
351
  const interactionItem = e.detail;
@@ -372,6 +382,7 @@ const Toolbox = ()=>{
372
382
  window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
373
383
  window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
374
384
  window.addEventListener('update-interaction-item', onUpdateInteractionItem);
385
+ window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
375
386
  return ()=>{
376
387
  window.removeEventListener('update-shop-info', onChangeShopInfo);
377
388
  window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -393,6 +404,7 @@ const Toolbox = ()=>{
393
404
  window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
394
405
  window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
395
406
  window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
407
+ window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
396
408
  };
397
409
  }, [
398
410
  onAddEntity,
@@ -415,7 +427,8 @@ const Toolbox = ()=>{
415
427
  onUpdateProductOffers,
416
428
  onUpdateSalePageProductId,
417
429
  onUpdateInteractionItem,
418
- onUpdateInteractionIsSelectOnPage
430
+ onUpdateInteractionIsSelectOnPage,
431
+ onUpdateInteractionSettingType
419
432
  ]);
420
433
  return /*#__PURE__*/ jsx("div", {
421
434
  className: "toolbox"
package/dist/esm/libs/hooks/useSelectModeInteraction.js ADDED
@@ -0,0 +1,14 @@
1
+ const useSelectModeInteraction = ()=>{
2
+ const changeSelectMode = (mode)=>{
3
+ const event = new CustomEvent('editor:interaction:change-select-mode', {
4
+ bubbles: true,
5
+ detail: mode
6
+ });
7
+ window.dispatchEvent(event);
8
+ };
9
+ return {
10
+ changeSelectMode
11
+ };
12
+ };
13
+
14
+ export { useSelectModeInteraction };
package/dist/esm/pages/builder.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
2
+ import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider } from '@gem-sdk/core';
3
3
  import { NextSeo } from 'next-seo';
4
4
  import Head from 'next/head';
5
5
  import { useState, useMemo, useEffect } from 'react';
6
6
  import Toolbox from '../components/builder/Toolbox.js';
7
7
  import Header from '../components/builder/Header.js';
8
8
  import Footer from '../components/builder/Footer.js';
9
- import CollectionGlobalProvider from './CollectionGlobalProvider.js';
10
9
  import PopupManager from '../components/builder/PopupManager.js';
11
10
  import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
12
11
  import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
13
12
  import Toolbar from '../components/builder/Toolbar.js';
14
13
  import Devices from '../components/builder/SwitchView.js';
14
+ import Body from '../components/builder/Body.js';
15
15
 
16
16
  const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
17
17
  const [loadSuccess, setLoadSuccess] = useState(false);
@@ -75,16 +75,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
75
75
  pageType: pageType,
76
76
  isOriginTemplate: isOriginTemplate
77
77
  })),
78
- /*#__PURE__*/ jsx("div", {
79
- id: "storefront",
80
- className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
81
- children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
82
- children: /*#__PURE__*/ jsx(RenderPreview, {
83
- uid: "ROOT"
84
- })
85
- }) : /*#__PURE__*/ jsx(RenderPreview, {
86
- uid: "ROOT"
87
- })
78
+ /*#__PURE__*/ jsx(Body, {
79
+ pageType: pageType,
80
+ isThemeSectionEditor: isThemeSectionEditor
88
81
  }),
89
82
  /*#__PURE__*/ jsx(ImageToLayout, {
90
83
  editorImageToLayout: editorImageToLayout || false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.53.0-dev.8",
3
+ "version": "1.53.0-dev.82",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
26
26
  "next": "latest"
27
27
  },
28
28
  "devDependencies": {
29
- "@gem-sdk/core": "1.53.0-dev.4",
29
+ "@gem-sdk/core": "1.53.0-dev.79",
30
30
  "@gem-sdk/plugin-cookie-bar": "1.53.0-dev.4",
31
31
  "@gem-sdk/plugin-quick-view": "1.53.0-dev.4",
32
32
  "@gem-sdk/plugin-sticky-add-to-cart": "1.53.0-dev.4"