@gem-sdk/pages 1.46.2 → 1.47.0-dev.4

package/dist/cjs/components/builder/Header.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var SwitchView = require('./SwitchView.js');
+var InteractionSelectOnPageHeader = require('./InteractionSelectOnPageHeader.js');
 
 const defaultMargin = {
     desktop: '16px',
@@ -21,6 +22,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate } = props;
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
+    const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -177,7 +179,8 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            })
+            }),
+            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
         ]
     });
 };

package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
+    const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("header", {
+                className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "gp-h-10 gp-w-10"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("section", {
+                        className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                onClick: ()=>setInteractionSelectType('element'),
+                                className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                                children: "Select an element"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                onClick: ()=>setInteractionSelectType('page'),
+                                className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                                children: "Choose entire page"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        onClick: closeSelectOnPage,
+                        className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "20",
+                            height: "20",
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
+                                fill: "#3C67FF"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-h-full gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[2px]"
+            })
+        ]
+    });
+};
+
+exports.default = InteractionSelectOnPageHeader;

package/dist/cjs/components/builder/Toolbox.js

@@ -36,6 +36,8 @@ const Toolbox = ()=>{
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
     const clearModal = core.useModalStore((s)=>s.clearModal);
+    const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
@@ -329,6 +331,18 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
+        const isSelectOnPage = e.detail;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+    }, [
+        setInteractionIsSelectOnPage
+    ]);
+    const onUpdateInteractionItem = react.useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     react.useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -356,6 +370,8 @@ const Toolbox = ()=>{
         window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         window.addEventListener('set-product-offer', onUpdateProductOffers);
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+        window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+        window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -375,6 +391,8 @@ const Toolbox = ()=>{
             window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
             window.removeEventListener('set-product-offer', onUpdateProductOffers);
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+            window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+            window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
         };
     }, [
         onAddEntity,
@@ -395,7 +413,9 @@ const Toolbox = ()=>{
         onUpdateItemName,
         onUpdateItemAttribute,
         onUpdateProductOffers,
-        onUpdateSalePageProductId
+        onUpdateSalePageProductId,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/esm/components/builder/Header.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
+import { useShopStore, usePageStore, cls, makeStyleResponsive } from '@gem-sdk/core';
 import Devices from './SwitchView.js';
+import InteractionSelectOnPageHeader from './InteractionSelectOnPageHeader.js';
 
 const defaultMargin = {
     desktop: '16px',
@@ -17,6 +18,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate } = props;
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
+    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -173,7 +175,8 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            })
+            }),
+            isSelectOnPage && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
         ]
     });
 };

package/dist/esm/components/builder/InteractionSelectOnPageHeader.js

@@ -0,0 +1,63 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { usePageStore } from '@gem-sdk/core';
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = usePageStore((s)=>s.interactionData?.selectType);
+    const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("header", {
+                className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gp-h-10 gp-w-10"
+                    }),
+                    /*#__PURE__*/ jsxs("section", {
+                        className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                onClick: ()=>setInteractionSelectType('element'),
+                                className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                                children: "Select an element"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                onClick: ()=>setInteractionSelectType('page'),
+                                className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                                children: "Choose entire page"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        onClick: closeSelectOnPage,
+                        className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: "20",
+                            height: "20",
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
+                                fill: "#3C67FF"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "gp-h-full gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[2px]"
+            })
+        ]
+    });
+};
+
+export { InteractionSelectOnPageHeader as default };

package/dist/esm/components/builder/Toolbox.js

@@ -32,6 +32,8 @@ const Toolbox = ()=>{
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
     const clearModal = useModalStore((s)=>s.clearModal);
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -325,6 +327,18 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
+        const isSelectOnPage = e.detail;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+    }, [
+        setInteractionIsSelectOnPage
+    ]);
+    const onUpdateInteractionItem = useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -352,6 +366,8 @@ const Toolbox = ()=>{
         window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         window.addEventListener('set-product-offer', onUpdateProductOffers);
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+        window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+        window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -371,6 +387,8 @@ const Toolbox = ()=>{
             window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
             window.removeEventListener('set-product-offer', onUpdateProductOffers);
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+            window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+            window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
         };
     }, [
         onAddEntity,
@@ -391,7 +409,9 @@ const Toolbox = ()=>{
         onUpdateItemName,
         onUpdateItemAttribute,
         onUpdateProductOffers,
-        onUpdateSalePageProductId
+        onUpdateSalePageProductId,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.46.2",
+  "version": "1.47.0-dev.4",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.46.1",
-    "@gem-sdk/plugin-cookie-bar": "1.46.0",
-    "@gem-sdk/plugin-quick-view": "1.46.0",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.46.0"
+    "@gem-sdk/core": "1.47.0-dev.4",
+    "@gem-sdk/plugin-cookie-bar": "1.47.0-dev.4",
+    "@gem-sdk/plugin-quick-view": "1.47.0-dev.4",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.47.0-dev.4"
   },
   "peerDependencies": {
     "next": ">=13"