@gem-sdk/pages 1.41.0-dev.21 → 1.41.0-dev.22

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/Footer.js +153 -0
  2. package/dist/cjs/components/{Header.js → builder/Header.js} +46 -37
  3. package/dist/cjs/components/builder/SwitchView.js +181 -0
  4. package/dist/cjs/components/builder/const.js +56 -0
  5. package/dist/cjs/pages/builder.js +2 -2
  6. package/dist/cjs/pages/static-v2.js +1 -1
  7. package/dist/esm/components/builder/Footer.js +149 -0
  8. package/dist/esm/components/{Header.js → builder/Header.js} +46 -37
  9. package/dist/esm/components/builder/SwitchView.js +177 -0
  10. package/dist/esm/components/builder/const.js +54 -0
  11. package/dist/esm/pages/builder.js +2 -2
  12. package/dist/esm/pages/static-v2.js +1 -1
  13. package/package.json +1 -1
  14. package/dist/cjs/components/Footer.js +0 -150
  15. package/dist/esm/components/Footer.js +0 -146
package/dist/cjs/components/builder/Footer.js ADDED
@@ -0,0 +1,153 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var core = require('@gem-sdk/core');
7
+ var react = require('react');
8
+
9
+ const defaultMargin = {
10
+ desktop: '16px',
11
+ tablet: '16px',
12
+ mobile: '16px'
13
+ };
14
+ const FOOTER_ON_COLOR = '#E2E2E2';
15
+ const FOOTER_OFF_COLOR = '#F4F4F4';
16
+ const Footer = (props)=>{
17
+ const { pageType, isOriginTemplate } = props;
18
+ const urlParams = new URLSearchParams(window.location.search);
19
+ const shopName = urlParams.get('storefrontHandle');
20
+ const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
21
+ const activeFooter = layoutSetting?.showFooter || isOriginTemplate;
22
+ const footerColor = activeFooter ? FOOTER_ON_COLOR : FOOTER_OFF_COLOR;
23
+ const [shouldFixed, setShouldFixed] = react.useState(false);
24
+ react.useEffect(()=>{
25
+ const $iframe = parent.document.querySelector('.iframe');
26
+ if (!$iframe) return;
27
+ const $storefront = document.querySelector('#storefront');
28
+ if (!$storefront) return;
29
+ const headerHeight = 40;
30
+ const footerHeight = 48;
31
+ const iframeHeight = $iframe.clientHeight;
32
+ const comparedHeight = layoutSetting?.showHeader ? iframeHeight - headerHeight - footerHeight : iframeHeight - footerHeight;
33
+ const observer = new ResizeObserver((entries)=>{
34
+ // Handle set fixed footer
35
+ const currentEditingFrameHeight = entries[0]?.target.clientHeight;
36
+ if (currentEditingFrameHeight && comparedHeight) setShouldFixed(currentEditingFrameHeight < comparedHeight);
37
+ });
38
+ observer.observe($storefront);
39
+ return ()=>{
40
+ observer.unobserve($storefront);
41
+ };
42
+ }, [
43
+ layoutSetting
44
+ ]);
45
+ return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
46
+ children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
47
+ className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans'),
48
+ children: /*#__PURE__*/ jsxRuntime.jsx("div", {
49
+ className: "gp-flex gp-flex-1 gp-items-center gp-justify-between gp-py-6",
50
+ style: {
51
+ maxWidth: `var(--g-ct-w, 1200px)`,
52
+ ...core.makeStyleResponsive('ml', defaultMargin),
53
+ ...core.makeStyleResponsive('mr', defaultMargin)
54
+ },
55
+ children: /*#__PURE__*/ jsxRuntime.jsxs("p", {
56
+ className: "gp-text-lg",
57
+ children: [
58
+ "All rights reserved ",
59
+ shopName
60
+ ]
61
+ })
62
+ })
63
+ }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
64
+ className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans', {
65
+ 'gp-fixed gp-bottom-0 gp-w-full': shouldFixed
66
+ }),
67
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
68
+ className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
69
+ style: {
70
+ maxWidth: `var(--g-ct-w)`,
71
+ ...core.makeStyleResponsive('ml', defaultMargin),
72
+ ...core.makeStyleResponsive('mr', defaultMargin)
73
+ },
74
+ children: [
75
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
76
+ width: "68",
77
+ height: "8",
78
+ viewBox: "0 0 68 8",
79
+ fill: "none",
80
+ xmlns: "http://www.w3.org/2000/svg",
81
+ children: [
82
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
83
+ d: "M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4C32 6.20914 30.2091 8 28 8H4C1.79086 8 0 6.20914 0 4Z",
84
+ fill: footerColor
85
+ }),
86
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
87
+ d: "M36 4C36 1.79086 37.7909 0 40 0H64C66.2091 0 68 1.79086 68 4C68 6.20914 66.2091 8 64 8H40C37.7909 8 36 6.20914 36 4Z",
88
+ fill: footerColor
89
+ })
90
+ ]
91
+ }),
92
+ !isOriginTemplate && /*#__PURE__*/ jsxRuntime.jsx("div", {
93
+ className: "gp-footer gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px]gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
94
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
95
+ className: "gp-gap-2 gp-flex gp-px-1 gp-h-[24px] gp-items-center gp-justify-center gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]",
96
+ children: [
97
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
98
+ children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
99
+ width: "14",
100
+ height: "14",
101
+ viewBox: "0 0 14 14",
102
+ fill: "none",
103
+ xmlns: "http://www.w3.org/2000/svg",
104
+ children: [
105
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
106
+ fillRule: "evenodd",
107
+ clipRule: "evenodd",
108
+ d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
109
+ fill: "#212121"
110
+ }),
111
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
112
+ fillRule: "evenodd",
113
+ clipRule: "evenodd",
114
+ d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
115
+ fill: "#212121"
116
+ })
117
+ ]
118
+ })
119
+ }),
120
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
121
+ children: "Footer"
122
+ })
123
+ ]
124
+ })
125
+ }),
126
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
127
+ width: "104",
128
+ height: "8",
129
+ viewBox: "0 0 104 8",
130
+ fill: "none",
131
+ xmlns: "http://www.w3.org/2000/svg",
132
+ children: [
133
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
134
+ d: "M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4C32 6.20914 30.2091 8 28 8H4C1.79086 8 0 6.20914 0 4Z",
135
+ fill: footerColor
136
+ }),
137
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
138
+ d: "M36 4C36 1.79086 37.7909 0 40 0H64C66.2091 0 68 1.79086 68 4C68 6.20914 66.2091 8 64 8H40C37.7909 8 36 6.20914 36 4Z",
139
+ fill: footerColor
140
+ }),
141
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
142
+ d: "M72 4C72 1.79086 73.7909 0 76 0H100C102.209 0 104 1.79086 104 4C104 6.20914 102.209 8 100 8H76C73.7909 8 72 6.20914 72 4Z",
143
+ fill: footerColor
144
+ })
145
+ ]
146
+ })
147
+ ]
148
+ })
149
+ })
150
+ });
151
+ };
152
+
153
+ exports.default = Footer;
package/dist/cjs/components/{Header.js → builder/Header.js} RENAMED
@@ -4,13 +4,14 @@ 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 SwitchView = require('./SwitchView.js');
7
8
 
8
9
  const defaultMargin = {
9
- desktop: '40px',
10
- tablet: '40px',
11
- mobile: '40px'
10
+ desktop: '16px',
11
+ tablet: '16px',
12
+ mobile: '16px'
12
13
  };
13
- const HEADER_ON_COLOR = '#D6D6D6';
14
+ const HEADER_ON_COLOR = '#E2E2E2';
14
15
  const HEADER_OFF_COLOR = '#F4F4F4';
15
16
  const sizeCheck = {
16
17
  desktop: '24px',
@@ -100,66 +101,74 @@ const Header = (props)=>{
100
101
  },
101
102
  children: [
102
103
  /*#__PURE__*/ jsxRuntime.jsxs("svg", {
103
- width: "84",
104
+ width: "60",
104
105
  height: "8",
105
- viewBox: "0 0 84 8",
106
+ viewBox: "0 0 60 8",
106
107
  fill: "none",
107
108
  xmlns: "http://www.w3.org/2000/svg",
108
109
  children: [
109
110
  /*#__PURE__*/ jsxRuntime.jsx("path", {
110
- d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
111
- fill: activeHeader ? '#9E9E9E' : HEADER_OFF_COLOR
111
+ d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
112
+ fill: "#9E9E9E"
112
113
  }),
113
114
  /*#__PURE__*/ jsxRuntime.jsx("path", {
114
- d: "M28 4C28 1.79086 29.7909 0 32 0H80C82.2091 0 84 1.79086 84 4C84 6.20914 82.2091 8 80 8H32C29.7909 8 28 6.20914 28 4Z",
115
+ d: "M28 4C28 1.79086 29.7909 0 32 0H56C58.2091 0 60 1.79086 60 4C60 6.20914 58.2091 8 56 8H32C29.7909 8 28 6.20914 28 4Z",
115
116
  fill: headerColor
116
117
  })
117
118
  ]
118
119
  }),
120
+ /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),
119
121
  !isOriginTemplate && /*#__PURE__*/ jsxRuntime.jsx("div", {
120
- className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
121
- children: /*#__PURE__*/ jsxRuntime.jsx("div", {
122
- className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
123
- children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
124
- width: "14",
125
- height: "14",
126
- viewBox: "0 0 14 14",
127
- fill: "none",
128
- xmlns: "http://www.w3.org/2000/svg",
129
- children: [
130
- /*#__PURE__*/ jsxRuntime.jsx("path", {
131
- fillRule: "evenodd",
132
- clipRule: "evenodd",
133
- d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
134
- fill: "#212121"
135
- }),
136
- /*#__PURE__*/ jsxRuntime.jsx("path", {
137
- fillRule: "evenodd",
138
- clipRule: "evenodd",
139
- d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
140
- fill: "#212121"
122
+ className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
123
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
124
+ className: "gp-gap-2 gp-flex gp-px-1 gp-h-[24px] gp-items-center gp-justify-center gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]",
125
+ children: [
126
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
127
+ children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
128
+ width: "14",
129
+ height: "14",
130
+ viewBox: "0 0 14 14",
131
+ fill: "none",
132
+ xmlns: "http://www.w3.org/2000/svg",
133
+ children: [
134
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
135
+ fillRule: "evenodd",
136
+ clipRule: "evenodd",
137
+ d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
138
+ fill: "#212121"
139
+ }),
140
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
141
+ fillRule: "evenodd",
142
+ clipRule: "evenodd",
143
+ d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
144
+ fill: "#212121"
145
+ })
146
+ ]
141
147
  })
142
- ]
143
- })
148
+ }),
149
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
150
+ children: "Header"
151
+ })
152
+ ]
144
153
  })
145
154
  }),
146
155
  /*#__PURE__*/ jsxRuntime.jsxs("svg", {
147
- width: "192",
156
+ width: "80",
148
157
  height: "8",
149
- viewBox: "0 0 192 8",
158
+ viewBox: "0 0 80 8",
150
159
  fill: "none",
151
160
  xmlns: "http://www.w3.org/2000/svg",
152
161
  children: [
153
162
  /*#__PURE__*/ jsxRuntime.jsx("path", {
154
- d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
163
+ d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
155
164
  fill: headerColor
156
165
  }),
157
166
  /*#__PURE__*/ jsxRuntime.jsx("path", {
158
- d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
167
+ d: "M28 4C28 1.79086 29.7909 0 32 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H32C29.7909 8 28 6.20914 28 4Z",
159
168
  fill: headerColor
160
169
  }),
161
170
  /*#__PURE__*/ jsxRuntime.jsx("path", {
162
- d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
171
+ d: "M56 4C56 1.79086 57.7909 0 60 0H76C78.2091 0 80 1.79086 80 4C80 6.20914 78.2091 8 76 8H60C57.7909 8 56 6.20914 56 4Z",
163
172
  fill: headerColor
164
173
  })
165
174
  ]
package/dist/cjs/components/builder/SwitchView.js ADDED
@@ -0,0 +1,181 @@
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 _const = require('./const.js');
8
+
9
+ const Devices = ()=>{
10
+ const [isOpen, setIsOpen] = react.useState(false);
11
+ const initialDeviceState = {
12
+ width: 0,
13
+ name: '',
14
+ activeId: null
15
+ };
16
+ const [deviceState, setDeviceState] = react.useState(initialDeviceState);
17
+ const updateDeviceState = react.useCallback((updates)=>{
18
+ setDeviceState((prevState)=>({
19
+ ...prevState,
20
+ ...updates
21
+ }));
22
+ }, [
23
+ setDeviceState
24
+ ]);
25
+ react.useEffect(()=>{
26
+ if (!deviceState.name) {
27
+ const activeDevice = _const.devices[0];
28
+ if (activeDevice) {
29
+ updateDeviceState({
30
+ width: activeDevice.width,
31
+ name: activeDevice.name,
32
+ activeId: activeDevice.id
33
+ });
34
+ }
35
+ }
36
+ }, [
37
+ deviceState.name,
38
+ updateDeviceState
39
+ ]);
40
+ const onHandleClick = (id)=>{
41
+ const activeDevice = _const.devices.find((v)=>v.id === id);
42
+ if (activeDevice) {
43
+ updateDeviceState({
44
+ width: activeDevice.width,
45
+ name: activeDevice.name,
46
+ activeId: activeDevice.id
47
+ });
48
+ emitChangeDevice(activeDevice.id);
49
+ }
50
+ setIsOpen(!isOpen);
51
+ };
52
+ const emitChangeDevice = (id)=>{
53
+ const event = new CustomEvent('editor:change-device', {
54
+ bubbles: true,
55
+ detail: {
56
+ id
57
+ }
58
+ });
59
+ window.dispatchEvent(event);
60
+ };
61
+ const switchViewRef = react.useRef(null);
62
+ const onClickOutside = (event)=>{
63
+ if (switchViewRef.current && !switchViewRef.current.contains(event.target)) {
64
+ setIsOpen(false);
65
+ }
66
+ };
67
+ const getDisplayName = (width)=>{
68
+ const activeDevice = _const.devices.find((v)=>v.width === width);
69
+ if (activeDevice) return activeDevice.name;
70
+ let displayName = 'Desktop';
71
+ if (width <= 480) return displayName = 'Mobile';
72
+ if (width <= 1025) return displayName = 'Tablet';
73
+ return displayName;
74
+ };
75
+ const onResizePreviewScreen = react.useCallback((e)=>{
76
+ const detail = e.detail;
77
+ if (!detail) return;
78
+ updateDeviceState({
79
+ width: detail.width,
80
+ name: getDisplayName(detail.width),
81
+ activeId: null
82
+ });
83
+ }, [
84
+ updateDeviceState
85
+ ]);
86
+ react.useEffect(()=>{
87
+ window.addEventListener('mousedown', onClickOutside);
88
+ window.addEventListener('editor:resize-preview-screen', onResizePreviewScreen);
89
+ return ()=>{
90
+ window.removeEventListener('mousedown', onClickOutside);
91
+ window.removeEventListener('editor:resize-preview-screen', onResizePreviewScreen);
92
+ };
93
+ }, [
94
+ onResizePreviewScreen
95
+ ]);
96
+ const isActiveDevice = (id)=>{
97
+ return id === deviceState.activeId;
98
+ };
99
+ const handleToggleDropdown = ()=>setIsOpen(!isOpen);
100
+ if (deviceState.width > 1024) return null;
101
+ return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
102
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
103
+ ref: switchViewRef,
104
+ className: `gp-switch-view gp-absolute gp-top-2 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-z-50 devices-selector gp-bg-[#F4F4F4] gp-gap-2 gp-rounded-md gp-px-2 gp-py-1 hover:gp-bg-[#E2E2E2] gp-items-center gp-justify-center gp-cursor-pointer gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]
105
+ ${isOpen ? 'gp-border-[1px] gp-border-[#3C67FF]' : ''}`,
106
+ children: [
107
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
108
+ className: "gp-flex gp-gap-1 gp-justify-between gp-items-center gp-min-w-[176px]",
109
+ onClick: (e)=>{
110
+ e.preventDefault();
111
+ handleToggleDropdown();
112
+ },
113
+ role: "presentation",
114
+ children: [
115
+ /*#__PURE__*/ jsxRuntime.jsxs("span", {
116
+ children: [
117
+ deviceState.name,
118
+ " (",
119
+ deviceState.width,
120
+ "px)"
121
+ ]
122
+ }),
123
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
124
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
125
+ width: "9",
126
+ height: "5",
127
+ viewBox: "0 0 9 5",
128
+ fill: "none",
129
+ xmlns: "http://www.w3.org/2000/svg",
130
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
131
+ fillRule: "evenodd",
132
+ clipRule: "evenodd",
133
+ d: "M1.07564 0.775834C1.30995 0.541519 1.68985 0.541519 1.92417 0.775834L4.6999 3.55157L7.47564 0.775834C7.70995 0.541519 8.08985 0.541519 8.32417 0.775834C8.55848 1.01015 8.55848 1.39005 8.32417 1.62436L5.12417 4.82436C4.88985 5.05868 4.50995 5.05868 4.27564 4.82436L1.07564 1.62436C0.841324 1.39005 0.841324 1.01015 1.07564 0.775834Z",
134
+ fill: "#212121"
135
+ })
136
+ })
137
+ })
138
+ ]
139
+ }),
140
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
141
+ className: `gp-absolute gp-top-8 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-bg-[#212121] gp-rounded-xl gp-p-2 gp-text-[#F9F9F9] gp-w-[176px] gp-z-50 ${!isOpen ? 'gp-hidden' : ''}`,
142
+ children: _const.devices.map((device)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
143
+ className: "gp-p-2 hover:gp-bg-[#3E3E3E] gp-rounded-md",
144
+ onClick: (e)=>{
145
+ e.preventDefault();
146
+ e.stopPropagation();
147
+ onHandleClick(device.id);
148
+ },
149
+ role: "presentation",
150
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
151
+ className: 'gp-flex gp-gap-2 gp-w-full gp-text-left gp-justify-space-between gp-cursor-pointer gp-leading-5 gp-text-xs gp-font-regular gp-text-[#212121]"',
152
+ children: [
153
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
154
+ className: "gp-min-w-[16px]",
155
+ children: isActiveDevice(device.id) && /*#__PURE__*/ jsxRuntime.jsx("svg", {
156
+ width: "16",
157
+ height: "17",
158
+ viewBox: "0 0 16 17",
159
+ fill: "none",
160
+ xmlns: "http://www.w3.org/2000/svg",
161
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
162
+ fillRule: "evenodd",
163
+ clipRule: "evenodd",
164
+ d: "M12.6348 4.89265C12.792 5.07861 12.7878 5.37537 12.6255 5.55547L6.71176 12.118C6.55312 12.294 6.30118 12.294 6.14255 12.118L3.87448 9.60098C3.71219 9.42088 3.70805 9.12412 3.86523 8.93815C4.02241 8.75219 4.2814 8.74744 4.4437 8.92755L6.42716 11.1287L12.0563 4.88203C12.2186 4.70192 12.4776 4.70668 12.6348 4.89265Z",
165
+ fill: "#00C853"
166
+ })
167
+ })
168
+ }),
169
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
170
+ children: device.name
171
+ })
172
+ ]
173
+ })
174
+ }, device.id))
175
+ })
176
+ ]
177
+ })
178
+ });
179
+ };
180
+
181
+ exports.default = Devices;
package/dist/cjs/components/builder/const.js ADDED
@@ -0,0 +1,56 @@
1
+ 'use strict';
2
+
3
+ const devices = [
4
+ {
5
+ id: 'iphone-13-mini',
6
+ name: 'iPhone 13 Mini',
7
+ width: 375
8
+ },
9
+ {
10
+ id: 'iphone-13-pro',
11
+ name: 'iPhone 13 Pro',
12
+ width: 390
13
+ },
14
+ {
15
+ id: 'iphone-11-pro-max',
16
+ name: 'iPhone 11 Pro Max',
17
+ width: 414
18
+ },
19
+ {
20
+ id: 'iphone-15-pro-max',
21
+ name: 'iPhone 15 Pro Max',
22
+ width: 430
23
+ },
24
+ {
25
+ id: 'pixel-7',
26
+ name: 'Pixel 7',
27
+ width: 412
28
+ },
29
+ {
30
+ id: 'galaxy-s8-plus',
31
+ name: 'Galaxy S8+',
32
+ width: 360
33
+ },
34
+ {
35
+ id: 'galaxy-s20-ultra',
36
+ name: 'Galaxy S20 Ultra',
37
+ width: 412
38
+ },
39
+ {
40
+ id: 'ipad-mini',
41
+ name: 'iPad Mini',
42
+ width: 768
43
+ },
44
+ {
45
+ id: 'ipad-air',
46
+ name: 'iPad Air',
47
+ width: 820
48
+ },
49
+ {
50
+ id: 'ipad-pro',
51
+ name: 'iPad Pro',
52
+ width: 1024
53
+ }
54
+ ];
55
+
56
+ exports.devices = devices;
package/dist/cjs/pages/builder.js CHANGED
@@ -6,8 +6,8 @@ var nextSeo = require('next-seo');
6
6
  var Head = require('next/head');
7
7
  var react = require('react');
8
8
  var Toolbox = require('../components/builder/Toolbox.js');
9
- var Header = require('../components/Header.js');
10
- var Footer = require('../components/Footer.js');
9
+ var Header = require('../components/builder/Header.js');
10
+ var Footer = require('../components/builder/Footer.js');
11
11
  var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
12
12
  var PopupManager = require('../components/builder/PopupManager.js');
13
13
  var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
package/dist/cjs/pages/static-v2.js CHANGED
@@ -7,7 +7,7 @@ var Head = require('next/head');
7
7
  var router = require('next/router');
8
8
  var useTrackingView = require('../libs/hooks/use-tracking-view.js');
9
9
  var parseHtml = require('../libs/parse-html.js');
10
- var Header = require('../components/Header.js');
10
+ var Header = require('../components/builder/Header.js');
11
11
  var FooterForPostPurchase = require('../components/FooterForPostPurchase.js');
12
12
 
13
13
  const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview })=>{