@gem-sdk/pages 1.12.0-next.37 → 1.12.0-next.50

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.
@@ -36,6 +36,8 @@ const AddSectionImageToLayout = ()=>{
36
36
  }
37
37
  };
38
38
  const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
39
+ const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
40
+ const loaded = core.useBuilderPreviewStore((state)=>state.loaded);
39
41
  const offset = react.useMemo(()=>{
40
42
  let result = 0;
41
43
  if (layoutSetting?.showFooter) {
@@ -45,9 +47,12 @@ const AddSectionImageToLayout = ()=>{
45
47
  }, [
46
48
  layoutSetting?.showFooter
47
49
  ]);
50
+ if (!loaded) {
51
+ return null;
52
+ }
48
53
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
49
54
  id: "gps-add-section-image-to-layout-of-bottom",
50
- className: "gps-base-font-family mobile:mx-[16px] mobile:w-[calc(100%_-_32px)] relative mx-[44px] mb-[24px] mt-[40px] hidden w-[calc(100%_-_88px)] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px]",
55
+ className: `gps-base-font-family mobile:mx-[16px] mobile:w-[calc(100%_-_32px)] relative mx-[44px] mb-[24px] mt-[40px] w-[calc(100%_-_88px)] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px] ${totalSection ? 'flex' : 'hidden'}`,
51
56
  style: {
52
57
  marginBottom: `${offset + 24}px`
53
58
  },
@@ -58,7 +63,7 @@ const AddSectionImageToLayout = ()=>{
58
63
  }),
59
64
  ACTIONS_DATA.map((action, index)=>{
60
65
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
61
- className: `hover:bg-black/10 relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] ${isInput ? 'hidden' : 'flex'}`,
66
+ className: `relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
62
67
  id: action.id,
63
68
  onClick: ()=>onClick(index),
64
69
  "aria-hidden": true,
@@ -146,7 +151,7 @@ const AddSectionImageToLayout = ()=>{
146
151
  /*#__PURE__*/ jsxRuntime.jsx("div", {
147
152
  "aria-hidden": true,
148
153
  onClick: ()=>setIsInput(false),
149
- className: "hover:bg-black/10 mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px]",
154
+ className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
150
155
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
151
156
  width: "16",
152
157
  height: "16",
@@ -13,6 +13,8 @@ const ImageToLayout = ({ editorImageToLayout })=>{
13
13
  const [link, setLink] = react.useState('');
14
14
  const [openSuggestion, setOpenSuggestion] = react.useState(false);
15
15
  const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
16
+ const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
17
+ const loaded = core.useBuilderPreviewStore((state)=>state.loaded);
16
18
  const offset = react.useMemo(()=>{
17
19
  let result = 0;
18
20
  if (layoutSetting?.showFooter) {
@@ -26,10 +28,16 @@ const ImageToLayout = ({ editorImageToLayout })=>{
26
28
  layoutSetting?.showHeader,
27
29
  layoutSetting?.showFooter
28
30
  ]);
31
+ if (!loaded) {
32
+ return null;
33
+ }
29
34
  return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
30
35
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
31
36
  id: "gp-img-to-layout-wrapper",
32
- className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family hidden flex-1 flex-col items-center justify-center bg-[#F4F4F4] p-[16px]`),
37
+ className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col items-center justify-center bg-[#F4F4F4] p-[16px]`, {
38
+ hidden: !editorImageToLayout || !!totalSection,
39
+ flex: editorImageToLayout && !totalSection
40
+ }),
33
41
  style: {
34
42
  height: `calc(100vh - ${offset}px)`,
35
43
  display: editorImageToLayout ? 'flex' : 'none'
@@ -37,7 +45,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
37
45
  children: [
38
46
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
39
47
  id: "gps-gem-ai-input-wrapper",
40
- className: "flex w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white",
48
+ className: "flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white",
41
49
  children: [
42
50
  /*#__PURE__*/ jsxRuntime.jsx("div", {
43
51
  className: "mb-[16px] flex items-center",
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useState, useMemo } from 'react';
3
- import { useShopStore } from '@gem-sdk/core';
3
+ import { useShopStore, useBuilderPreviewStore } from '@gem-sdk/core';
4
4
 
5
5
  const ACTIONS_DATA = [
6
6
  {
@@ -32,6 +32,8 @@ const AddSectionImageToLayout = ()=>{
32
32
  }
33
33
  };
34
34
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
35
+ const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
36
+ const loaded = useBuilderPreviewStore((state)=>state.loaded);
35
37
  const offset = useMemo(()=>{
36
38
  let result = 0;
37
39
  if (layoutSetting?.showFooter) {
@@ -41,9 +43,12 @@ const AddSectionImageToLayout = ()=>{
41
43
  }, [
42
44
  layoutSetting?.showFooter
43
45
  ]);
46
+ if (!loaded) {
47
+ return null;
48
+ }
44
49
  return /*#__PURE__*/ jsxs("div", {
45
50
  id: "gps-add-section-image-to-layout-of-bottom",
46
- className: "gps-base-font-family mobile:mx-[16px] mobile:w-[calc(100%_-_32px)] relative mx-[44px] mb-[24px] mt-[40px] hidden w-[calc(100%_-_88px)] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px]",
51
+ className: `gps-base-font-family mobile:mx-[16px] mobile:w-[calc(100%_-_32px)] relative mx-[44px] mb-[24px] mt-[40px] w-[calc(100%_-_88px)] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px] ${totalSection ? 'flex' : 'hidden'}`,
47
52
  style: {
48
53
  marginBottom: `${offset + 24}px`
49
54
  },
@@ -54,7 +59,7 @@ const AddSectionImageToLayout = ()=>{
54
59
  }),
55
60
  ACTIONS_DATA.map((action, index)=>{
56
61
  return /*#__PURE__*/ jsxs("div", {
57
- className: `hover:bg-black/10 relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] ${isInput ? 'hidden' : 'flex'}`,
62
+ className: `relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
58
63
  id: action.id,
59
64
  onClick: ()=>onClick(index),
60
65
  "aria-hidden": true,
@@ -142,7 +147,7 @@ const AddSectionImageToLayout = ()=>{
142
147
  /*#__PURE__*/ jsx("div", {
143
148
  "aria-hidden": true,
144
149
  onClick: ()=>setIsInput(false),
145
- className: "hover:bg-black/10 mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px]",
150
+ className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
146
151
  children: /*#__PURE__*/ jsx("svg", {
147
152
  width: "16",
148
153
  height: "16",
@@ -1,6 +1,6 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { useState, useMemo } from 'react';
3
- import { useShopStore, cls } from '@gem-sdk/core';
3
+ import { useShopStore, useBuilderPreviewStore, cls } from '@gem-sdk/core';
4
4
  import { PagesSuggestion } from './PagesSuggestion.js';
5
5
 
6
6
  const HEADER_HEIGHT = 40;
@@ -9,6 +9,8 @@ const ImageToLayout = ({ editorImageToLayout })=>{
9
9
  const [link, setLink] = useState('');
10
10
  const [openSuggestion, setOpenSuggestion] = useState(false);
11
11
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
12
+ const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
13
+ const loaded = useBuilderPreviewStore((state)=>state.loaded);
12
14
  const offset = useMemo(()=>{
13
15
  let result = 0;
14
16
  if (layoutSetting?.showFooter) {
@@ -22,10 +24,16 @@ const ImageToLayout = ({ editorImageToLayout })=>{
22
24
  layoutSetting?.showHeader,
23
25
  layoutSetting?.showFooter
24
26
  ]);
27
+ if (!loaded) {
28
+ return null;
29
+ }
25
30
  return /*#__PURE__*/ jsx(Fragment, {
26
31
  children: /*#__PURE__*/ jsxs("div", {
27
32
  id: "gp-img-to-layout-wrapper",
28
- className: cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family hidden flex-1 flex-col items-center justify-center bg-[#F4F4F4] p-[16px]`),
33
+ className: cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col items-center justify-center bg-[#F4F4F4] p-[16px]`, {
34
+ hidden: !editorImageToLayout || !!totalSection,
35
+ flex: editorImageToLayout && !totalSection
36
+ }),
29
37
  style: {
30
38
  height: `calc(100vh - ${offset}px)`,
31
39
  display: editorImageToLayout ? 'flex' : 'none'
@@ -33,7 +41,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
33
41
  children: [
34
42
  /*#__PURE__*/ jsxs("div", {
35
43
  id: "gps-gem-ai-input-wrapper",
36
- className: "flex w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white",
44
+ className: "flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white",
37
45
  children: [
38
46
  /*#__PURE__*/ jsx("div", {
39
47
  className: "mb-[16px] flex items-center",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.12.0-next.37",
3
+ "version": "1.12.0-next.50",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.12.0-next.36",
28
+ "@gem-sdk/core": "1.12.0-next.50",
29
29
  "@gem-sdk/plugin-cookie-bar": "*",
30
30
  "@gem-sdk/plugin-quick-view": "*",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "*"