@gem-sdk/pages 1.13.8 → 1.13.27

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 (17) hide show
  1. package/dist/cjs/components/{AddSectionImageToLayout.js → image-to-layout/AddSectionImageToLayout.js} +44 -10
  2. package/dist/cjs/components/image-to-layout/DropElement.js +123 -0
  3. package/dist/cjs/components/image-to-layout/ImageToLayout.js +62 -0
  4. package/dist/cjs/components/image-to-layout/ImageToLayoutInput.js +162 -0
  5. package/dist/cjs/components/image-to-layout/PagesSuggestion.js +80 -0
  6. package/dist/cjs/pages/builder.js +2 -2
  7. package/dist/esm/components/{AddSectionImageToLayout.js → image-to-layout/AddSectionImageToLayout.js} +45 -11
  8. package/dist/esm/components/image-to-layout/DropElement.js +121 -0
  9. package/dist/esm/components/image-to-layout/ImageToLayout.js +58 -0
  10. package/dist/esm/components/image-to-layout/ImageToLayoutInput.js +160 -0
  11. package/dist/esm/components/image-to-layout/PagesSuggestion.js +78 -0
  12. package/dist/esm/pages/builder.js +2 -2
  13. package/package.json +2 -2
  14. package/dist/cjs/components/ImageToLayout.js +0 -279
  15. package/dist/cjs/components/PagesSuggestion.js +0 -184
  16. package/dist/esm/components/ImageToLayout.js +0 -275
  17. package/dist/esm/components/PagesSuggestion.js +0 -182
package/dist/cjs/components/{AddSectionImageToLayout.js → image-to-layout/AddSectionImageToLayout.js} RENAMED
@@ -33,6 +33,8 @@ const defaultPadding = {
33
33
  mobile: 'var(--g-ct-p)'
34
34
  };
35
35
  const AddSectionImageToLayout = ({ editorImageToLayout })=>{
36
+ const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
37
+ const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
36
38
  const [link, setLink] = react.useState('');
37
39
  const [isInput, setIsInput] = react.useState(false);
38
40
  const onClick = (index)=>{
@@ -40,8 +42,15 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
40
42
  setIsInput(true);
41
43
  }
42
44
  };
43
- const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
44
- const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
45
+ react.useEffect(()=>{
46
+ if (!isInput || totalSection === 0) {
47
+ setLink('');
48
+ setIsInput(false);
49
+ }
50
+ }, [
51
+ isInput,
52
+ totalSection
53
+ ]);
45
54
  const loaded = core.useBuilderPreviewStore((state)=>state.loaded);
46
55
  const offset = react.useMemo(()=>{
47
56
  let result = 0;
@@ -57,7 +66,7 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
57
66
  }
58
67
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
59
68
  id: "gps-add-section-image-to-layout-of-bottom",
60
- className: `justify-center ${totalSection ? 'flex' : 'hidden'}`,
69
+ className: `justify-center ${totalSection && editorImageToLayout ? 'flex' : 'hidden'}`,
61
70
  style: {
62
71
  ...core.makeStyleResponsive('pl', defaultPadding),
63
72
  ...core.makeStyleResponsive('pr', defaultPadding)
@@ -74,8 +83,10 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
74
83
  children: "Add section"
75
84
  }),
76
85
  ACTIONS_DATA.map((action, index)=>{
77
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
86
+ const CustomTag = index === 1 ? `label` : `div`;
87
+ return /*#__PURE__*/ jsxRuntime.jsxs(CustomTag, {
78
88
  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'}`,
89
+ htmlFor: "gp-add-section-bottom-from-select-image",
79
90
  id: action.id,
80
91
  onClick: ()=>onClick(index),
81
92
  "aria-hidden": true,
@@ -148,7 +159,7 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
148
159
  }),
149
160
  action.id === 'gps-add-section-bottom-from-image' && /*#__PURE__*/ jsxRuntime.jsx("input", {
150
161
  id: "gp-add-section-bottom-from-select-image",
151
- className: "rounded-medium z-2 absolute left-0 top-0 h-full w-full cursor-pointer opacity-0 outline-none",
162
+ className: "rounded-medium z-2 absolute left-0 top-0 hidden h-full w-full cursor-pointer opacity-0 outline-none",
152
163
  type: "file",
153
164
  accept: ".png, .jpg, .jpeg"
154
165
  })
@@ -158,10 +169,11 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
158
169
  }, action.id);
159
170
  }),
160
171
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
161
- className: `max-w-[calc(100%_-_32px)] items-center ${isInput ? 'flex' : 'hidden'}`,
172
+ className: `relative max-w-[calc(100%_-_32px)] items-center ${isInput ? 'flex' : 'hidden'}`,
162
173
  children: [
163
174
  /*#__PURE__*/ jsxRuntime.jsx("div", {
164
175
  "aria-hidden": true,
176
+ id: "image-to-layout-input-wrapper-add-section-close",
165
177
  onClick: ()=>setIsInput(false),
166
178
  className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
167
179
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
@@ -237,21 +249,43 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
237
249
  ]
238
250
  }),
239
251
  /*#__PURE__*/ jsxRuntime.jsx("input", {
240
- value: link,
241
252
  onChange: (event)=>{
242
253
  setLink(event.target.value);
243
254
  },
244
255
  autoComplete: "off",
245
256
  id: "gp-img-to-layout-bottom-input-link",
246
- placeholder: "Paste an URL to create layout",
247
- className: "ml-2 mr-2 flex-1 text-[14px] text-[#676767] outline-none"
257
+ placeholder: "Paste your link",
258
+ className: "ml-2 mr-2 h-[56px] flex-1 text-[14px] text-[#676767] outline-none"
248
259
  }),
249
260
  /*#__PURE__*/ jsxRuntime.jsx("div", {
261
+ "aria-disabled": !link,
250
262
  id: "gp-img-to-layout-bottom-generate-btn",
251
- className: "generate-image-to-layout-btn flex h-[36px] w-[86px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
263
+ className: `generate-image-to-layout-btn flex h-[36px] w-[86px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
252
264
  children: "Generate"
253
265
  })
254
266
  ]
267
+ }),
268
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
269
+ className: "error-url-bottom-add-section absolute bottom-[-20px] left-[40px] mx-[-1px] flex hidden w-[600px] max-w-[100%] items-center",
270
+ children: [
271
+ /*#__PURE__*/ jsxRuntime.jsx("svg", {
272
+ width: "16",
273
+ height: "16",
274
+ viewBox: "0 0 16 16",
275
+ fill: "none",
276
+ xmlns: "http://www.w3.org/2000/svg",
277
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
278
+ fillRule: "evenodd",
279
+ clipRule: "evenodd",
280
+ d: "M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8 10.5C7.58579 10.5 7.25 10.8358 7.25 11.25C7.25 11.6642 7.58579 12 8 12C8.41421 12 8.75 11.6642 8.75 11.25C8.75 10.8358 8.41421 10.5 8 10.5ZM8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4V9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9V4Z",
281
+ fill: "#F44336"
282
+ })
283
+ }),
284
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
285
+ className: "ml-[8px] text-[12px] text-[#F44336]",
286
+ children: "Please use an valid URL to generate"
287
+ })
288
+ ]
255
289
  })
256
290
  ]
257
291
  })
package/dist/cjs/components/image-to-layout/DropElement.js ADDED
@@ -0,0 +1,123 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+
5
+ const DropElement = ()=>{
6
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
7
+ className: "flex w-full flex-1 flex-col items-center justify-center",
8
+ children: [
9
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
10
+ className: "mb-[24px] text-[14px] font-normal text-[#9E9E9E]",
11
+ children: "Drag element from sidebar here"
12
+ }),
13
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
14
+ width: "276",
15
+ height: "129",
16
+ viewBox: "0 0 276 129",
17
+ fill: "none",
18
+ xmlns: "http://www.w3.org/2000/svg",
19
+ children: [
20
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
21
+ x: "47",
22
+ y: "0.5",
23
+ width: "182",
24
+ height: "128",
25
+ rx: "8",
26
+ fill: "#E8E9EC"
27
+ }),
28
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
29
+ x: "124",
30
+ y: "12.5",
31
+ width: "94",
32
+ height: "104",
33
+ rx: "6",
34
+ fill: "white",
35
+ stroke: "#AEB6CD",
36
+ strokeWidth: "1.5",
37
+ strokeLinecap: "round",
38
+ strokeDasharray: "2 4"
39
+ }),
40
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
41
+ x: "59",
42
+ y: "14.5",
43
+ width: "44",
44
+ height: "22",
45
+ rx: "2",
46
+ fill: "white"
47
+ }),
48
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
49
+ x: "59",
50
+ y: "67.5",
51
+ width: "44",
52
+ height: "22",
53
+ rx: "2",
54
+ fill: "white"
55
+ }),
56
+ /*#__PURE__*/ jsxRuntime.jsx("g", {
57
+ clipPath: "url(#clip0_3791_281943)",
58
+ children: /*#__PURE__*/ jsxRuntime.jsx("rect", {
59
+ x: "59",
60
+ y: "41.5",
61
+ width: "44",
62
+ height: "22",
63
+ rx: "2",
64
+ fill: "#BDCEFF"
65
+ })
66
+ }),
67
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
68
+ x: "59",
69
+ y: "94.5",
70
+ width: "44",
71
+ height: "22",
72
+ rx: "2",
73
+ fill: "white"
74
+ }),
75
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
76
+ x: "112",
77
+ y: "39.5",
78
+ width: "71",
79
+ height: "50.0492",
80
+ rx: "3.4918",
81
+ fill: "#3C67FF"
82
+ }),
83
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
84
+ opacity: "0.8",
85
+ d: "M147.819 73.2147C148.963 74.508 148.04 76.5453 146.314 76.5395L131.719 76.4905C129.999 76.4848 129.088 74.456 130.226 73.1671L137.495 64.9309C138.291 64.0294 139.697 64.0288 140.493 64.9296L147.819 73.2147Z",
86
+ fill: "white",
87
+ fillOpacity: "0.84"
88
+ }),
89
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
90
+ d: "M167.258 73.1989C168.397 74.4947 167.471 76.5281 165.746 76.5193L140.732 76.3927C139.006 76.384 138.101 74.3387 139.256 73.0551L151.851 59.0548C152.652 58.1648 154.05 58.1728 154.84 59.072L167.258 73.1989Z",
91
+ fill: "white"
92
+ }),
93
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
94
+ opacity: "0.8",
95
+ d: "M136.608 58.3724C139.141 58.0841 140.904 55.8675 140.616 53.3346C140.328 50.8017 138.111 49.0381 135.578 49.3263C133.045 49.6145 131.282 51.8311 131.57 54.364C131.858 56.8969 134.075 58.6606 136.608 58.3724Z",
96
+ fill: "white",
97
+ fillOpacity: "0.84"
98
+ }),
99
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
100
+ d: "M189.56 94.5C189.7 94.6393 189.81 94.8047 189.886 94.9867C189.961 95.1687 190 95.3638 190 95.5608C190 95.7578 189.961 95.9529 189.886 96.1349C189.81 96.3169 189.7 96.4823 189.56 96.6216L189.122 97.0603C188.982 97.1997 188.817 97.3102 188.635 97.3856C188.453 97.461 188.258 97.4998 188.061 97.4998C187.864 97.4998 187.669 97.461 187.487 97.3856C187.305 97.3102 187.139 97.1997 187 97.0603L181.82 91.8816L179.769 96.601C179.654 96.8687 179.463 97.0966 179.219 97.2565C178.976 97.4163 178.691 97.501 178.399 97.5H178.326C178.023 97.4873 177.73 97.3816 177.488 97.1971C177.247 97.0126 177.068 96.7584 176.975 96.4688L172.075 81.4613C171.989 81.1987 171.978 80.9174 172.042 80.6486C172.106 80.3799 172.243 80.1342 172.439 79.9388C172.634 79.7434 172.88 79.606 173.149 79.5418C173.417 79.4776 173.699 79.4891 173.961 79.575L188.969 84.4753C189.256 84.5713 189.507 84.7517 189.689 84.9929C189.872 85.2341 189.977 85.5249 189.991 85.827C190.006 86.1291 189.928 86.4285 189.769 86.6858C189.61 86.9432 189.377 87.1465 189.101 87.2691L184.382 89.3203L189.56 94.5Z",
101
+ fill: "#2B2D34",
102
+ stroke: "#E8E8E8"
103
+ }),
104
+ /*#__PURE__*/ jsxRuntime.jsx("defs", {
105
+ children: /*#__PURE__*/ jsxRuntime.jsx("clipPath", {
106
+ id: "clip0_3791_281943",
107
+ children: /*#__PURE__*/ jsxRuntime.jsx("rect", {
108
+ x: "59",
109
+ y: "41.5",
110
+ width: "44",
111
+ height: "22",
112
+ rx: "2",
113
+ fill: "white"
114
+ })
115
+ })
116
+ })
117
+ ]
118
+ })
119
+ ]
120
+ });
121
+ };
122
+
123
+ exports.DropElement = DropElement;
package/dist/cjs/components/image-to-layout/ImageToLayout.js ADDED
@@ -0,0 +1,62 @@
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 DropElement = require('./DropElement.js');
9
+ var ImageToLayoutInput = require('./ImageToLayoutInput.js');
10
+
11
+ const HEADER_HEIGHT = 40;
12
+ const FOOTER_HEIGHT = 50;
13
+ const ImageToLayout = ({ editorImageToLayout })=>{
14
+ const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
15
+ const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
16
+ const loaded = core.useBuilderPreviewStore((state)=>state.loaded);
17
+ const offset = react.useMemo(()=>{
18
+ let result = 0;
19
+ if (layoutSetting?.showFooter) {
20
+ result += FOOTER_HEIGHT;
21
+ }
22
+ if (layoutSetting?.showHeader) {
23
+ result += HEADER_HEIGHT;
24
+ }
25
+ return result;
26
+ }, [
27
+ layoutSetting?.showHeader,
28
+ layoutSetting?.showFooter
29
+ ]);
30
+ if (!loaded) {
31
+ return null;
32
+ }
33
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
34
+ children: [
35
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
36
+ id: "gp-img-to-layout-wrapper",
37
+ className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
38
+ hidden: !editorImageToLayout || !!totalSection,
39
+ flex: editorImageToLayout && !totalSection
40
+ }),
41
+ style: {
42
+ height: `calc(100vh - ${offset}px)`
43
+ },
44
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
45
+ id: "gps-gem-ai-input-wrapper",
46
+ className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
47
+ children: [
48
+ /*#__PURE__*/ jsxRuntime.jsx(DropElement.DropElement, {}),
49
+ /*#__PURE__*/ jsxRuntime.jsx(ImageToLayoutInput.ImageToLayoutInput, {
50
+ totalSection: totalSection || 0
51
+ })
52
+ ]
53
+ })
54
+ }),
55
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
56
+ className: "limited-section"
57
+ })
58
+ ]
59
+ });
60
+ };
61
+
62
+ exports.default = ImageToLayout;
package/dist/cjs/components/image-to-layout/ImageToLayoutInput.js ADDED
@@ -0,0 +1,162 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ var PagesSuggestion = require('./PagesSuggestion.js');
6
+
7
+ const ImageToLayoutInput = ({ totalSection })=>{
8
+ const [link, setLink] = react.useState('');
9
+ const [isFocus, setIsFocus] = react.useState(false);
10
+ const [openSuggestion, setOpenSuggestion] = react.useState(false);
11
+ react.useEffect(()=>{
12
+ const isOpenSuggestion = isFocus && !link ? true : link ? false : openSuggestion;
13
+ setOpenSuggestion(isOpenSuggestion);
14
+ }, [
15
+ link,
16
+ isFocus,
17
+ openSuggestion
18
+ ]);
19
+ react.useEffect(()=>{
20
+ if (totalSection > 0) {
21
+ setLink('');
22
+ }
23
+ }, [
24
+ totalSection
25
+ ]);
26
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
27
+ className: "relative mt-[64px] flex w-full max-w-[calc(100%_-_32px)] flex-col items-center rounded-[3px] border border-[#EEEEEE] px-[16px] pb-[24px] pt-[32px]",
28
+ children: [
29
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
30
+ className: "absolute top-[-15px] z-10 bg-white px-[8px] py-[4px] text-[14px] font-normal leading-[21px] text-[#9E9E9E]",
31
+ children: "Or use Image to Layout"
32
+ }),
33
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
34
+ className: "image-to-layout-input-border relative max-w-[calc(100%)]",
35
+ children: [
36
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
37
+ className: "image-to-layout-input-wrapper flex h-[60px] w-[600px] max-w-[100%] items-center rounded-[3px] py-[10px] pl-3 pr-2",
38
+ children: [
39
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
40
+ width: "54",
41
+ height: "22",
42
+ viewBox: "0 0 54 22",
43
+ fill: "none",
44
+ xmlns: "http://www.w3.org/2000/svg",
45
+ children: [
46
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
47
+ d: "M8.12314 9.5696C8.04028 9.30114 7.92593 9.06084 7.7801 8.84872C7.63758 8.63329 7.46523 8.44934 7.26305 8.29688C7.06419 8.14441 6.83549 8.03007 6.57697 7.95383C6.31845 7.87429 6.03672 7.83452 5.7318 7.83452C5.18493 7.83452 4.69771 7.97206 4.27015 8.24716C3.8426 8.52225 3.50618 8.92661 3.26092 9.46023C3.01897 9.99053 2.89799 10.6368 2.89799 11.3991C2.89799 12.1681 3.01897 12.8194 3.26092 13.353C3.50287 13.8866 3.83928 14.2926 4.27015 14.571C4.70102 14.8461 5.2015 14.9837 5.77157 14.9837C6.28862 14.9837 6.73606 14.8842 7.1139 14.6854C7.49506 14.4865 7.78838 14.2048 7.99387 13.8402C8.19937 13.4723 8.30211 13.0414 8.30211 12.5476L8.71973 12.6122H5.95552V11.1705H10.0869V12.3935C10.0869 13.2652 9.90131 14.0192 9.5301 14.6555C9.15888 15.2919 8.64847 15.7824 7.99885 16.1271C7.34922 16.4685 6.60349 16.6392 5.76163 16.6392C4.82366 16.6392 4.00003 16.4287 3.29075 16.0078C2.58478 15.5836 2.03294 14.982 1.63521 14.2031C1.2408 13.4209 1.04359 12.4929 1.04359 11.419C1.04359 10.5971 1.15959 9.86293 1.3916 9.21662C1.62692 8.57031 1.95505 8.02178 2.37598 7.57102C2.7969 7.11695 3.29075 6.77225 3.85751 6.53693C4.42427 6.2983 5.04075 6.17898 5.70694 6.17898C6.27039 6.17898 6.79572 6.26184 7.28294 6.42756C7.77015 6.58996 8.20268 6.82197 8.58052 7.12358C8.96168 7.42519 9.27489 7.78314 9.52015 8.19744C9.76542 8.61174 9.92617 9.06913 10.0024 9.5696H8.12314ZM15.1716 16.6491C14.406 16.6491 13.7448 16.4901 13.1879 16.1719C12.6344 15.8504 12.2085 15.3963 11.9102 14.8097C11.6119 14.2197 11.4628 13.5253 11.4628 12.7266C11.4628 11.9411 11.6119 11.2517 11.9102 10.6584C12.2119 10.0618 12.6328 9.59777 13.173 9.26633C13.7133 8.93158 14.348 8.7642 15.0771 8.7642C15.5478 8.7642 15.9919 8.84044 16.4095 8.9929C16.8305 9.14205 17.2017 9.37405 17.5232 9.68892C17.848 10.0038 18.1032 10.4048 18.2888 10.892C18.4744 11.3759 18.5672 11.9527 18.5672 12.6222V13.174H12.308V11.9609H16.8421C16.8387 11.6162 16.7642 11.3097 16.6183 11.0412C16.4725 10.7694 16.2687 10.5556 16.0068 10.3999C15.7483 10.2441 15.4467 10.1662 15.102 10.1662C14.7341 10.1662 14.411 10.2557 14.1325 10.4347C13.8541 10.6103 13.637 10.8423 13.4813 11.1307C13.3288 11.4157 13.2509 11.7289 13.2476 12.0703V13.1293C13.2476 13.5734 13.3288 13.9545 13.4912 14.2727C13.6536 14.5876 13.8807 14.8295 14.1723 14.9986C14.464 15.1643 14.8054 15.2472 15.1965 15.2472C15.4583 15.2472 15.6953 15.2107 15.9074 15.1378C16.1195 15.0616 16.3035 14.9505 16.4593 14.8047C16.615 14.6589 16.7327 14.4782 16.8122 14.2628L18.4926 14.4517C18.3866 14.8958 18.1844 15.2836 17.8861 15.6151C17.5911 15.9432 17.2133 16.1984 16.7526 16.3807C16.2919 16.5597 15.7649 16.6491 15.1716 16.6491ZM20.0898 16.5V8.86364H21.8099V10.1612H21.8994C22.0585 9.72372 22.322 9.38234 22.6899 9.13707C23.0578 8.88849 23.497 8.7642 24.0074 8.7642C24.5244 8.7642 24.9603 8.89015 25.3149 9.14205C25.6729 9.39062 25.9247 9.73035 26.0706 10.1612H26.1501C26.3192 9.73698 26.6042 9.39891 27.0052 9.14702C27.4096 8.89181 27.8885 8.7642 28.442 8.7642C29.1447 8.7642 29.7181 8.98627 30.1622 9.4304C30.6063 9.87453 30.8284 10.5225 30.8284 11.3743V16.5H29.0237V11.6527C29.0237 11.1787 28.8978 10.8324 28.6459 10.6136C28.394 10.3916 28.0857 10.2805 27.7211 10.2805C27.287 10.2805 26.9472 10.4164 26.702 10.6882C26.46 10.9567 26.339 11.3063 26.339 11.7372V16.5H24.5741V11.5781C24.5741 11.1837 24.4548 10.8688 24.2162 10.6335C23.9809 10.3982 23.6726 10.2805 23.2915 10.2805C23.0329 10.2805 22.7976 10.3468 22.5855 10.4794C22.3734 10.6087 22.2043 10.7926 22.0784 11.0312C21.9524 11.2666 21.8895 11.5417 21.8895 11.8565V16.5H20.0898ZM34.0413 16.5H32.0725L35.657 6.31818H37.934L41.5235 16.5H39.5548L36.8353 8.40625H36.7558L34.0413 16.5ZM34.1059 12.5078H39.4752V13.9893H34.1059V12.5078ZM44.7091 6.31818V16.5H42.8646V6.31818H44.7091Z",
48
+ fill: "url(#paint0_linear_2814_111126)"
49
+ }),
50
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
51
+ d: "M49.761 1.5282C49.8333 1.29268 50.1667 1.29268 50.239 1.5282L50.7182 3.08942C50.8113 3.39264 51.0427 3.63372 51.3419 3.73913L52.8309 4.26382C53.0534 4.34224 53.0534 4.65698 52.8309 4.7354L51.3419 5.26008C51.0427 5.36549 50.8113 5.60658 50.7182 5.9098L50.239 7.47101C50.1667 7.70653 49.8333 7.70653 49.761 7.47101L49.2818 5.9098C49.1887 5.60658 48.9573 5.36549 48.6582 5.26008L47.1692 4.7354C46.9466 4.65698 46.9466 4.34224 47.1692 4.26382L48.6582 3.73913C48.9573 3.63372 49.1887 3.39264 49.2818 3.08942L49.761 1.5282Z",
52
+ fill: "url(#paint1_linear_2814_111126)"
53
+ }),
54
+ /*#__PURE__*/ jsxRuntime.jsxs("defs", {
55
+ children: [
56
+ /*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
57
+ id: "paint0_linear_2814_111126",
58
+ x1: "46",
59
+ y1: "16.5338",
60
+ x2: "-0.000777919",
61
+ y2: "16.4189",
62
+ gradientUnits: "userSpaceOnUse",
63
+ children: [
64
+ /*#__PURE__*/ jsxRuntime.jsx("stop", {
65
+ stopColor: "#874CFD"
66
+ }),
67
+ /*#__PURE__*/ jsxRuntime.jsx("stop", {
68
+ offset: "1",
69
+ stopColor: "#3C38E1"
70
+ })
71
+ ]
72
+ }),
73
+ /*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
74
+ id: "paint1_linear_2814_111126",
75
+ x1: "52.1048",
76
+ y1: "3.12234",
77
+ x2: "47.7265",
78
+ y2: "3.42341",
79
+ gradientUnits: "userSpaceOnUse",
80
+ children: [
81
+ /*#__PURE__*/ jsxRuntime.jsx("stop", {
82
+ stopColor: "#3C67FF"
83
+ }),
84
+ /*#__PURE__*/ jsxRuntime.jsx("stop", {
85
+ offset: "1",
86
+ stopColor: "#874CFD"
87
+ })
88
+ ]
89
+ })
90
+ ]
91
+ })
92
+ ]
93
+ }),
94
+ /*#__PURE__*/ jsxRuntime.jsx("input", {
95
+ onFocus: ()=>setIsFocus(true),
96
+ onChange: (event)=>{
97
+ setLink(event.target.value);
98
+ },
99
+ onBlur: ()=>setIsFocus(false),
100
+ autoComplete: "off",
101
+ id: "gp-img-to-layout-input-link",
102
+ placeholder: "Paste your link",
103
+ className: "mx-4 h-[60px] flex-1 text-[14px] text-[#676767] outline-none"
104
+ }),
105
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
106
+ "aria-disabled": !link,
107
+ id: "gp-img-to-layout-generate-btn",
108
+ className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
109
+ children: "Generate"
110
+ })
111
+ ]
112
+ }),
113
+ /*#__PURE__*/ jsxRuntime.jsx(PagesSuggestion.PagesSuggestion, {
114
+ setUrl: setLink,
115
+ setOpenSuggestion: setOpenSuggestion,
116
+ isOpen: openSuggestion
117
+ })
118
+ ]
119
+ }),
120
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
121
+ className: "error-url bottom-[-24px] mx-[-1px] mb-[-1px] mt-[16px] hidden w-[600px] max-w-[100%] items-center",
122
+ children: [
123
+ /*#__PURE__*/ jsxRuntime.jsx("svg", {
124
+ width: "16",
125
+ height: "16",
126
+ viewBox: "0 0 16 16",
127
+ fill: "none",
128
+ xmlns: "http://www.w3.org/2000/svg",
129
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
130
+ fillRule: "evenodd",
131
+ clipRule: "evenodd",
132
+ d: "M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8 10.5C7.58579 10.5 7.25 10.8358 7.25 11.25C7.25 11.6642 7.58579 12 8 12C8.41421 12 8.75 11.6642 8.75 11.25C8.75 10.8358 8.41421 10.5 8 10.5ZM8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4V9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9V4Z",
133
+ fill: "#F44336"
134
+ })
135
+ }),
136
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
137
+ className: "ml-[8px] text-[12px] text-[#F44336]",
138
+ children: "Please use an valid URL to generate"
139
+ })
140
+ ]
141
+ }),
142
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
143
+ className: "mt-[16px] flex items-center text-xs",
144
+ children: [
145
+ /*#__PURE__*/ jsxRuntime.jsx("label", {
146
+ htmlFor: "gp-img-to-layout-gallery-btn",
147
+ className: " relative mx-[5px] cursor-pointer font-medium text-[#3C67FF]",
148
+ children: "Upload your designed image"
149
+ }),
150
+ /*#__PURE__*/ jsxRuntime.jsx("input", {
151
+ id: "gp-img-to-layout-gallery-btn",
152
+ className: "rounded-medium z-2 absolute hidden h-full w-full cursor-pointer opacity-0 outline-none",
153
+ type: "file",
154
+ accept: ".png, .jpg, .jpeg"
155
+ })
156
+ ]
157
+ })
158
+ ]
159
+ });
160
+ };
161
+
162
+ exports.ImageToLayoutInput = ImageToLayoutInput;
package/dist/cjs/components/image-to-layout/PagesSuggestion.js ADDED
@@ -0,0 +1,80 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+
5
+ const PagesSuggestion = ({ isOpen , setOpenSuggestion , setUrl })=>{
6
+ const pages = [
7
+ 'https://seal-commerce-asia.myshopify.com/pages/image-to-layout-demo-page'
8
+ ];
9
+ const clickItem = (page)=>{
10
+ setUrl(page);
11
+ setOpenSuggestion(false);
12
+ };
13
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
14
+ children: [
15
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
16
+ className: `z-9 gps-page-suggestion w-full max-w-[calc(100%)] bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[0px] top-[66px]`,
17
+ children: /*#__PURE__*/ jsxRuntime.jsx("div", {
18
+ className: "h-full w-full overflow-hidden rounded-[3px]",
19
+ children: /*#__PURE__*/ jsxRuntime.jsx("div", {
20
+ className: "mt-[-1px] max-h-[500px] bg-white p-[8px]",
21
+ children: pages.map((page)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
22
+ onClick: ()=>clickItem(page),
23
+ className: "gps-suggestion-item mb-2 flex h-[56px] cursor-pointer items-center justify-between rounded-[3px] px-[16px] py-[12px] last:mb-0 hover:bg-[#F4F4F4]",
24
+ "data-url": page,
25
+ "aria-hidden": true,
26
+ children: [
27
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
28
+ className: "flex flex-1 items-center",
29
+ children: [
30
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
31
+ width: "32",
32
+ height: "32",
33
+ viewBox: "0 0 32 32",
34
+ fill: "none",
35
+ className: "min-h-[32px] min-w-[32px]",
36
+ xmlns: "http://www.w3.org/2000/svg",
37
+ children: [
38
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
39
+ d: "M28.6272 2.00862L3.27047 9.94579C3.17042 9.97914 3.11484 10.0903 3.13707 10.2015L5.09357 16.6379C5.12692 16.738 5.23808 16.8047 5.33813 16.7713L23.936 10.9463C24.8253 10.6684 25.5701 10.0458 26.0037 9.2121C27.1598 6.9888 28.1158 4.67657 28.8495 2.27541C28.9162 2.09755 28.7828 1.96415 28.6272 2.00862Z",
40
+ fill: "#FFBB1C"
41
+ }),
42
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
43
+ d: "M22.5462 13.1363L6.79417 18.0609C6.70523 18.0942 6.64965 18.1831 6.683 18.2721L8.33936 23.708C8.37271 23.797 8.46164 23.8525 8.53945 23.8192L18.5888 20.6732C19.3447 20.4398 19.9672 19.9062 20.334 19.2059C21.3123 17.3272 22.1238 15.3707 22.7352 13.3475C22.7908 13.2141 22.6685 13.0918 22.5462 13.1363Z",
44
+ fill: "#E8486C"
45
+ }),
46
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
47
+ d: "M16.5555 23.0745L9.98571 25.1311C9.90789 25.1533 9.87454 25.2311 9.89678 25.3089L11.2975 29.9001C11.3197 29.9779 11.3975 30.0223 11.4753 29.989L13.2206 29.4443C13.8542 29.2442 14.3878 28.7995 14.6991 28.1992C15.5328 26.6096 16.2109 24.9643 16.7334 23.2413C16.7668 23.1412 16.6667 23.0301 16.5555 23.0745Z",
48
+ fill: "#476DF2"
49
+ })
50
+ ]
51
+ }),
52
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
53
+ className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
54
+ children: page
55
+ })
56
+ ]
57
+ }),
58
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
59
+ "data-url": page,
60
+ className: "gps-suggestion-item-btn mobile:ml-0 ml-[24px] cursor-pointer items-center",
61
+ children: /*#__PURE__*/ jsxRuntime.jsx("span", {
62
+ className: "ml-2 text-xs font-medium text-[#9E9E9E]",
63
+ children: "Try with this page"
64
+ })
65
+ })
66
+ ]
67
+ }, page))
68
+ })
69
+ })
70
+ }),
71
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
72
+ onClick: ()=>setOpenSuggestion(false),
73
+ "aria-hidden": true,
74
+ className: `gps-bg-fixed fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
75
+ })
76
+ ]
77
+ });
78
+ };
79
+
80
+ exports.PagesSuggestion = PagesSuggestion;
package/dist/cjs/pages/builder.js CHANGED
@@ -10,8 +10,8 @@ var Header = require('../components/Header.js');
10
10
  var Footer = require('../components/Footer.js');
11
11
  var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
12
12
  var PopupManager = require('../components/builder/PopupManager.js');
13
- var ImageToLayout = require('../components/ImageToLayout.js');
14
- var AddSectionImageToLayout = require('../components/AddSectionImageToLayout.js');
13
+ var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
14
+ var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
15
15
 
16
16
  const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData , pageType , editorImageToLayout })=>{
17
17
  const [loadSuccess, setLoadSuccess] = react.useState(false);