@gem-sdk/core 1.42.3-dev.64 → 1.42.7

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 (72) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +6 -120
  2. package/dist/cjs/components/ComponentWrapperPreview.js +1 -44
  3. package/dist/cjs/components/Render.liquid.js +0 -2
  4. package/dist/cjs/components/RenderCustomCode.js +0 -2
  5. package/dist/cjs/components/constant.js +2 -19
  6. package/dist/cjs/components/resize/Spacing.js +0 -2
  7. package/dist/cjs/components/theme-section/CreateThemeSection.js +0 -2
  8. package/dist/cjs/contexts/BuilderPreviewContext.js +6 -11
  9. package/dist/cjs/contexts/SectionContext.js +0 -1
  10. package/dist/cjs/helpers/carousel.js +10 -7
  11. package/dist/cjs/helpers/colors.js +1 -1
  12. package/dist/cjs/helpers/queries/get-products.js +0 -23
  13. package/dist/cjs/helpers/typography.js +4 -4
  14. package/dist/cjs/hooks/shop/use-products-query.js +0 -29
  15. package/dist/cjs/hooks/useAnimations.js +0 -2
  16. package/dist/cjs/hooks/useInitialSwatchesOptions.js +0 -2
  17. package/dist/cjs/hooks/useProduct.js +0 -2
  18. package/dist/cjs/index.js +15 -26
  19. package/dist/esm/components/ComponentToolbarPreview.js +6 -120
  20. package/dist/esm/components/ComponentWrapperPreview.js +1 -44
  21. package/dist/esm/components/Render.liquid.js +0 -2
  22. package/dist/esm/components/RenderCustomCode.js +0 -2
  23. package/dist/esm/components/constant.js +3 -19
  24. package/dist/esm/components/resize/Spacing.js +0 -2
  25. package/dist/esm/components/theme-section/CreateThemeSection.js +0 -2
  26. package/dist/esm/contexts/BuilderPreviewContext.js +6 -11
  27. package/dist/esm/contexts/SectionContext.js +0 -1
  28. package/dist/esm/helpers/carousel.js +10 -7
  29. package/dist/esm/helpers/colors.js +1 -1
  30. package/dist/esm/helpers/queries/get-products.js +1 -23
  31. package/dist/esm/helpers/typography.js +4 -4
  32. package/dist/esm/hooks/shop/use-products-query.js +2 -30
  33. package/dist/esm/hooks/useAnimations.js +0 -2
  34. package/dist/esm/hooks/useInitialSwatchesOptions.js +0 -2
  35. package/dist/esm/hooks/useProduct.js +0 -2
  36. package/dist/esm/index.js +10 -14
  37. package/dist/types/index.d.ts +86 -227
  38. package/package.json +3 -5
  39. package/dist/cjs/components/ai-generator/AIContentGenerator.js +0 -205
  40. package/dist/cjs/components/ai-generator/AIGenContentLoading.js +0 -85
  41. package/dist/cjs/components/ai-generator/components/PickProduct.js +0 -218
  42. package/dist/cjs/components/ai-generator/components/ToneAndVoice.js +0 -77
  43. package/dist/cjs/components/ai-generator/hooks/useCheckingProductInside.js +0 -47
  44. package/dist/cjs/components/ai-generator/hooks/useFlipPopup.js +0 -110
  45. package/dist/cjs/components/ai-generator/hooks/useGettingGenerateRequest.js +0 -37
  46. package/dist/cjs/components/ai-generator/hooks/useListenEventGenerate.js +0 -63
  47. package/dist/cjs/components/ai-generator/icons/AIIcon.js +0 -67
  48. package/dist/cjs/components/ai-generator/icons/CloseIcon.js +0 -19
  49. package/dist/cjs/components/ai-generator/icons/DropdownIcon.js +0 -37
  50. package/dist/cjs/components/ai-generator/icons/SearchIcon.js +0 -21
  51. package/dist/cjs/components/ai-generator/icons/ShowMoreIcon.js +0 -21
  52. package/dist/cjs/contexts/ArticleContext.js +0 -39
  53. package/dist/cjs/contexts/ArticleListContext.js +0 -32
  54. package/dist/cjs/helpers/align.js +0 -19
  55. package/dist/cjs/hooks/articles/useArticlesQuery.js +0 -152
  56. package/dist/esm/components/ai-generator/AIContentGenerator.js +0 -203
  57. package/dist/esm/components/ai-generator/AIGenContentLoading.js +0 -83
  58. package/dist/esm/components/ai-generator/components/PickProduct.js +0 -216
  59. package/dist/esm/components/ai-generator/components/ToneAndVoice.js +0 -75
  60. package/dist/esm/components/ai-generator/hooks/useCheckingProductInside.js +0 -45
  61. package/dist/esm/components/ai-generator/hooks/useFlipPopup.js +0 -108
  62. package/dist/esm/components/ai-generator/hooks/useGettingGenerateRequest.js +0 -35
  63. package/dist/esm/components/ai-generator/hooks/useListenEventGenerate.js +0 -61
  64. package/dist/esm/components/ai-generator/icons/AIIcon.js +0 -65
  65. package/dist/esm/components/ai-generator/icons/CloseIcon.js +0 -17
  66. package/dist/esm/components/ai-generator/icons/DropdownIcon.js +0 -34
  67. package/dist/esm/components/ai-generator/icons/SearchIcon.js +0 -19
  68. package/dist/esm/components/ai-generator/icons/ShowMoreIcon.js +0 -19
  69. package/dist/esm/contexts/ArticleContext.js +0 -36
  70. package/dist/esm/contexts/ArticleListContext.js +0 -28
  71. package/dist/esm/helpers/align.js +0 -17
  72. package/dist/esm/hooks/articles/useArticlesQuery.js +0 -149
@@ -1,205 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var AIIcon = require('./icons/AIIcon.js');
6
- var CloseIcon = require('./icons/CloseIcon.js');
7
- var ShowMoreIcon = require('./icons/ShowMoreIcon.js');
8
- var PickProduct = require('./components/PickProduct.js');
9
- var ToneAndVoice = require('./components/ToneAndVoice.js');
10
- var classNames = require('classnames');
11
- var useListenEventGenerate = require('./hooks/useListenEventGenerate.js');
12
- var useGettingGenerateRequest = require('./hooks/useGettingGenerateRequest.js');
13
- var useFlipPopup = require('./hooks/useFlipPopup.js');
14
- var useCheckingProductInside = require('./hooks/useCheckingProductInside.js');
15
-
16
- const AIContentGenerator = ({ ...props })=>{
17
- const [isShowPopup, setIsShowPopup] = react.useState(false);
18
- const [isShowMore, setIsShowMore] = react.useState(false);
19
- const genTool = react.useRef(null);
20
- const genPopup = react.useRef(null);
21
- const genPopupHeader = react.useRef(null);
22
- const genButtonWrapper = react.useRef(null);
23
- const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, bodyMaxHeight: popupBodyMaxHeight } = useFlipPopup.useFlipPopup(isShowPopup, {
24
- genTool,
25
- genPopup,
26
- genPopupHeader,
27
- genButtonWrapper
28
- });
29
- const { isGenerating, onGenerate, onOpenProductElementSettings } = useListenEventGenerate.useListenEventGenerate({
30
- uid: props.uid,
31
- tag: String(props.tag)
32
- });
33
- const { getRequestBody, prompt, changeProductName, changePrompt, changeTone } = useGettingGenerateRequest.useGettingGenerateRequest();
34
- const { productElement, checkSectionHasProduct } = useCheckingProductInside.useCheckingProductInside(genTool);
35
- const togglePopup = ()=>{
36
- setIsShowPopup(!isShowPopup);
37
- };
38
- const hidePopup = ()=>{
39
- setIsShowPopup(false);
40
- };
41
- const onChangePrompt = (e)=>{
42
- changePrompt(e.target.value);
43
- };
44
- const onActiveComponent = react.useCallback((e)=>{
45
- const detail = e.detail;
46
- if (detail?.componentUid !== props.uid) {
47
- hidePopup();
48
- return;
49
- }
50
- checkSectionHasProduct();
51
- }, [
52
- props.uid,
53
- checkSectionHasProduct
54
- ]);
55
- const toggleShowMore = ()=>{
56
- setIsShowMore(!isShowMore);
57
- };
58
- const handleGenerateContent = ()=>{
59
- const body = getRequestBody();
60
- onGenerate(body);
61
- hidePopup();
62
- };
63
- const handleOpenProductSetting = ()=>{
64
- onOpenProductElementSettings(productElement.uid ?? '');
65
- };
66
- react.useEffect(()=>{
67
- if (!isGenerating) {
68
- hidePopup();
69
- }
70
- }, [
71
- isGenerating
72
- ]);
73
- react.useEffect(()=>{
74
- if (productElement.productId) {
75
- setIsShowMore(false);
76
- return;
77
- }
78
- setIsShowMore(true);
79
- }, [
80
- productElement
81
- ]);
82
- react.useEffect(()=>{
83
- window.addEventListener('editor:active-component', onActiveComponent);
84
- return ()=>{
85
- window.removeEventListener('editor:active-component', onActiveComponent);
86
- };
87
- }, [
88
- onActiveComponent
89
- ]);
90
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
91
- className: "gp-relative",
92
- ref: genTool,
93
- children: [
94
- /*#__PURE__*/ jsxRuntime.jsx("div", {
95
- className: "gp-gen-content-toolbar gp-border-r-[#6a6a6a] gp-border-r gp-pr-1 gp-mr-1",
96
- children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
97
- className: classNames({
98
- 'gp-bg-[#3B3B3B]': isShowPopup
99
- }, 'gp-p-1 gp-text-xs gp-flex gp-gap-1 gp-items-center gp-rounded-md hover:gp-bg-[#3B3B3B] gp-font-medium'),
100
- onClick: togglePopup,
101
- children: [
102
- /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {}),
103
- "AI Content"
104
- ]
105
- })
106
- }),
107
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
108
- className: classNames({
109
- 'gp-hidden': !isShowPopup,
110
- 'gp-right-0': props.tag === 'Section' || popupPositionX === 'right',
111
- 'gp-left-0': popupPositionX === 'left' && props.tag !== 'Section',
112
- 'gp-top-8': popupPositionY === 'top',
113
- 'gp-bottom-8': popupPositionY === 'bottom',
114
- '!gp-visible': !isValidatingFlipPopup
115
- }, 'gp-absolute gp-invisible gp-rounded-lg gp-bg-[#151515] gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default'),
116
- ref: genPopup,
117
- children: [
118
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
119
- className: "gp-flex gp-items-center gp-justify-between gp-px-4 gp-py-[10px]",
120
- ref: genPopupHeader,
121
- children: [
122
- /*#__PURE__*/ jsxRuntime.jsx("span", {
123
- className: "gp-font-medium gp-text-sm",
124
- children: "Write with GemAI"
125
- }),
126
- /*#__PURE__*/ jsxRuntime.jsx("button", {
127
- className: "gp-p-2 gp-cursor-pointer hover:gp-bg-[#3B3B3B] gp-rounded-md",
128
- onClick: hidePopup,
129
- children: /*#__PURE__*/ jsxRuntime.jsx(CloseIcon.CloseIcon, {})
130
- })
131
- ]
132
- }),
133
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
134
- className: classNames({
135
- 'gp-overflow-auto': popupBodyMaxHeight !== null
136
- }, 'gp-pt-2 gp-text-left gp-px-4 scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl'),
137
- style: {
138
- maxHeight: popupBodyMaxHeight !== null ? `${popupBodyMaxHeight}px` : 'auto'
139
- },
140
- children: [
141
- /*#__PURE__*/ jsxRuntime.jsx("div", {
142
- className: "gp-mb-4",
143
- children: /*#__PURE__*/ jsxRuntime.jsx("span", {
144
- className: "gp-text-xs",
145
- children: "What would you like to describe here?"
146
- })
147
- }),
148
- /*#__PURE__*/ jsxRuntime.jsx("div", {
149
- className: "gp-mb-4 gp-flex",
150
- children: /*#__PURE__*/ jsxRuntime.jsx("textarea", {
151
- className: "gp-p-2 gp-bg-[#333333] gp-rounded-lg gp-w-full gp-text-xs gp-text-white placeholder:gp-text-[#AAAAAA] gp-resize-none focus-visible:gp-outline-none",
152
- placeholder: "e.g: generate feature benefits",
153
- rows: 4,
154
- value: prompt,
155
- onChange: onChangePrompt
156
- })
157
- }),
158
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
159
- className: classNames({
160
- 'gp-hidden': !isShowMore
161
- }, 'gp-mb-4 gp-gap-4 gp-flex gp-flex-col'),
162
- children: [
163
- /*#__PURE__*/ jsxRuntime.jsx(ToneAndVoice.ToneAndVoice, {
164
- changeToneAndVoice: changeTone
165
- }),
166
- /*#__PURE__*/ jsxRuntime.jsx(PickProduct.PickProduct, {
167
- changeProductName: changeProductName,
168
- openProductSetting: handleOpenProductSetting,
169
- productId: productElement.productId
170
- })
171
- ]
172
- }),
173
- /*#__PURE__*/ jsxRuntime.jsx("div", {
174
- children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
175
- className: "gp-flex gp-justify-center gp-items-center gp-w-full gp-bg-[#333333] gp-py-2 gp-rounded-lg gp-gap-2 gp-text-xs gp-font-medium",
176
- onClick: toggleShowMore,
177
- children: [
178
- "Show more",
179
- /*#__PURE__*/ jsxRuntime.jsx("span", {
180
- className: classNames({
181
- 'gp-rotate-180': isShowMore
182
- }),
183
- children: /*#__PURE__*/ jsxRuntime.jsx(ShowMoreIcon.ShowMoreIcon, {})
184
- })
185
- ]
186
- })
187
- })
188
- ]
189
- }),
190
- /*#__PURE__*/ jsxRuntime.jsx("div", {
191
- className: "gp-p-4",
192
- ref: genButtonWrapper,
193
- children: /*#__PURE__*/ jsxRuntime.jsx("button", {
194
- className: "gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",
195
- onClick: handleGenerateContent,
196
- children: isGenerating ? 'Generating...' : 'Generate'
197
- })
198
- })
199
- ]
200
- })
201
- ]
202
- });
203
- };
204
-
205
- exports.AIContentGenerator = AIContentGenerator;
@@ -1,85 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var AIIcon = require('./icons/AIIcon.js');
6
-
7
- function getRandomArbitrary(min, max) {
8
- const randomNum = Math.random();
9
- return randomNum * (max - min) + min;
10
- }
11
- const AIGenContentLoading = ({ ...props })=>{
12
- const [isGenerating, setIsGenerating] = react.useState(false);
13
- const [time, setTime] = react.useState(0);
14
- const interval = react.useRef(null);
15
- const onGenerateContentStatus = react.useCallback((e)=>{
16
- const detail = e.detail;
17
- if (detail?.generatingUid !== props.uid) {
18
- return;
19
- }
20
- if (detail.status === 'loading') {
21
- setIsGenerating(true);
22
- return;
23
- }
24
- if (detail.status === 'success') {
25
- setIsGenerating(false);
26
- return;
27
- }
28
- }, [
29
- props.uid
30
- ]);
31
- react.useEffect(()=>{
32
- if (isGenerating) {
33
- handleFakeLoading();
34
- } else {
35
- setTime(0);
36
- }
37
- return ()=>{
38
- interval.current && clearInterval(interval.current);
39
- };
40
- }, [
41
- isGenerating
42
- ]);
43
- const handleFakeLoading = ()=>{
44
- setTime(0);
45
- interval.current = setInterval(()=>{
46
- setTime((time)=>{
47
- const randomNum = getRandomArbitrary(0, 6);
48
- return time >= 580 ? time : time + randomNum;
49
- });
50
- }, 50);
51
- };
52
- react.useEffect(()=>{
53
- window.addEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
54
- return ()=>{
55
- window.removeEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
56
- };
57
- }, [
58
- onGenerateContentStatus
59
- ]);
60
- return isGenerating ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
61
- className: "gp-absolute gp-top-0 gp-left-0 gp-w-full gp-h-full gp-bg-white gp-bg-opacity-70 gp-flex gp-justify-center gp-items-center gp-z-100 gp-gap-2",
62
- children: [
63
- /*#__PURE__*/ jsxRuntime.jsx("div", {
64
- className: "gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full",
65
- children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
66
- className: `gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md`,
67
- children: [
68
- /*#__PURE__*/ jsxRuntime.jsx("div", {
69
- className: "gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"
70
- }),
71
- /*#__PURE__*/ jsxRuntime.jsx("div", {
72
- className: "gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",
73
- style: {
74
- width: `${time / 600 * 100}%`
75
- }
76
- })
77
- ]
78
- })
79
- }),
80
- /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {})
81
- ]
82
- }) : null;
83
- };
84
-
85
- exports.AIGenContentLoading = AIGenContentLoading;
@@ -1,218 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var SearchIcon = require('../icons/SearchIcon.js');
6
- var useProductsQuery = require('../../../hooks/shop/use-products-query.js');
7
- var classNames = require('classnames');
8
- require('zustand');
9
- require('swr');
10
- require('@gem-sdk/adapter-shopify');
11
- require('swr/mutation');
12
- var useProductQuery = require('../../../hooks/shop/use-product-query.js');
13
- require('vanilla-lazyload');
14
- require('../../../hooks/useCartUI.js');
15
- require('react-transition-group');
16
- require('@gem-sdk/core');
17
- require('../../../helpers/convert.js');
18
-
19
- const PickProduct = (props)=>{
20
- const LIMIT_PRODUCTS = 8;
21
- const [productVariables, setProductVariables] = react.useState(!props.productId ? {
22
- first: LIMIT_PRODUCTS
23
- } : undefined);
24
- const { data: productList, isLoading: isLoadingGetProducts, isValidating: isValidatingGetProducts, size: productsSize, setSize: setProductsSize } = useProductsQuery.useListProductQuery(productVariables, {
25
- revalidateFirstPage: false
26
- });
27
- const { data: sectionProduct } = useProductQuery.useProductQuery(props.productId);
28
- const [activeProduct, setActiveProduct] = react.useState();
29
- const [isShowChooseProduct, setIsShowChooseProduct] = react.useState(false);
30
- const debounceSearch = react.useRef(null);
31
- const debounceScroll = react.useRef(null);
32
- const toggleChooseProduct = ()=>{
33
- if (props.productId) return;
34
- setIsShowChooseProduct(!isShowChooseProduct);
35
- };
36
- const chooseProduct = (product)=>{
37
- setActiveProduct(product);
38
- setIsShowChooseProduct(false);
39
- };
40
- const searchProduct = (e)=>{
41
- debounceSearch.current && clearTimeout(debounceSearch.current);
42
- debounceSearch.current = setTimeout(()=>{
43
- const searchValue = e.target.value ?? '';
44
- if (searchValue) {
45
- setProductVariables({
46
- first: LIMIT_PRODUCTS,
47
- where: {
48
- titleContainsFold: searchValue
49
- }
50
- });
51
- return;
52
- }
53
- setProductVariables({
54
- first: LIMIT_PRODUCTS
55
- });
56
- }, 200);
57
- };
58
- const handleOpenProductElementSettings = ()=>{
59
- props.openProductSetting();
60
- };
61
- const handleLoadMore = (e)=>{
62
- const target = e.target;
63
- if (target.scrollHeight - target.scrollTop === target.clientHeight) {
64
- debounceScroll.current && clearTimeout(debounceScroll.current);
65
- debounceScroll.current = setTimeout(()=>{
66
- setProductsSize(productsSize + 1);
67
- }, 50);
68
- }
69
- };
70
- const products = react.useMemo(()=>{
71
- return productList?.reduce((acc, curr)=>{
72
- return [
73
- ...acc,
74
- ...curr.products?.edges ?? []
75
- ];
76
- }, []) ?? [];
77
- }, [
78
- productList
79
- ]);
80
- react.useEffect(()=>{
81
- if (products.length && !activeProduct && !props.productId) {
82
- const firstProduct = products[0]?.node;
83
- if (!firstProduct) return;
84
- setActiveProduct({
85
- id: firstProduct?.id,
86
- name: firstProduct?.title,
87
- image: firstProduct.featuredImage?.src
88
- });
89
- }
90
- }, [
91
- products,
92
- activeProduct,
93
- props.productId
94
- ]);
95
- react.useEffect(()=>{
96
- if (activeProduct && activeProduct.name) {
97
- props.changeProductName(activeProduct.name);
98
- }
99
- }, [
100
- activeProduct,
101
- props
102
- ]);
103
- react.useEffect(()=>{
104
- if (sectionProduct) {
105
- setActiveProduct({
106
- id: sectionProduct.id,
107
- name: sectionProduct.title,
108
- image: sectionProduct.featuredImage?.src
109
- });
110
- }
111
- }, [
112
- sectionProduct
113
- ]);
114
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
115
- className: "gp-flex gp-flex-col gp-gap-2",
116
- children: [
117
- /*#__PURE__*/ jsxRuntime.jsx("p", {
118
- className: "gp-py-2 gp-text-xs",
119
- children: "Product"
120
- }),
121
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
122
- className: "gp-relative",
123
- children: [
124
- !isLoadingGetProducts || activeProduct ? /*#__PURE__*/ jsxRuntime.jsxs("button", {
125
- className: classNames({
126
- 'gp-cursor-default': props.productId
127
- }, 'gp-flex gp-gap-2 gp-items-center gp-w-full gp-p-2 gp-rounded-lg gp-bg-[#333333] gp-text-xs'),
128
- onClick: toggleChooseProduct,
129
- children: [
130
- /*#__PURE__*/ jsxRuntime.jsx("img", {
131
- className: "gp-rounded-lg gp-w-10 gp-h-10",
132
- src: activeProduct?.image,
133
- alt: "product_image"
134
- }),
135
- /*#__PURE__*/ jsxRuntime.jsx("span", {
136
- className: "gp-truncate gp-max-w-[210px]",
137
- children: activeProduct?.name
138
- })
139
- ]
140
- }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
141
- children: /*#__PURE__*/ jsxRuntime.jsx("span", {
142
- className: "gp-text-xs",
143
- children: "Getting products..."
144
- })
145
- }),
146
- props.productId && /*#__PURE__*/ jsxRuntime.jsx("div", {
147
- className: "gp-mt-2 gp-text-xs",
148
- children: /*#__PURE__*/ jsxRuntime.jsxs("p", {
149
- children: [
150
- "You can manage it in",
151
- ' ',
152
- /*#__PURE__*/ jsxRuntime.jsx("button", {
153
- className: "gp-text-[#8AA4FF] gp-cursor-pointer hover:gp-underline",
154
- onClick: handleOpenProductElementSettings,
155
- children: "Product element"
156
- })
157
- ]
158
- })
159
- }),
160
- isShowChooseProduct && /*#__PURE__*/ jsxRuntime.jsxs("div", {
161
- className: "gp-absolute gp-w-full gp-top-16 gp-left-0 gp-rounded-lg gp-bg-[#333333] gp-p-2 gp-flex gp-flex-col gp-gap-2 gp-z-10",
162
- children: [
163
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
164
- className: "gp-flex gp-items-center gp-gap-2 gp-p-2",
165
- children: [
166
- /*#__PURE__*/ jsxRuntime.jsx(SearchIcon.SearchIcon, {}),
167
- /*#__PURE__*/ jsxRuntime.jsx("input", {
168
- className: "gp-bg-transparent gp-w-full focus-visible:!gp-outline-none gp-text-xs",
169
- placeholder: "Search product...",
170
- onChange: searchProduct
171
- })
172
- ]
173
- }),
174
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
175
- className: "gp-max-h-[168px] gp-overflow-auto scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl",
176
- onScroll: handleLoadMore,
177
- children: [
178
- products?.map((item)=>{
179
- return /*#__PURE__*/ jsxRuntime.jsxs("button", {
180
- className: "gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-2 gp-items-center",
181
- onClick: ()=>{
182
- chooseProduct({
183
- id: item.node?.id,
184
- name: item.node?.title,
185
- image: item.node?.featuredImage?.src
186
- });
187
- },
188
- children: [
189
- /*#__PURE__*/ jsxRuntime.jsx("img", {
190
- className: "gp-rounded-lg gp-w-10 gp-h-10",
191
- src: item.node?.featuredImage?.src,
192
- alt: "product_image"
193
- }),
194
- /*#__PURE__*/ jsxRuntime.jsx("span", {
195
- className: "gp-truncate gp-max-w-[210px] gp-text-xs",
196
- children: item.node?.title
197
- })
198
- ]
199
- }, item.node?.id);
200
- }),
201
- isLoadingGetProducts || isValidatingGetProducts && /*#__PURE__*/ jsxRuntime.jsx("div", {
202
- className: "gp-p-2",
203
- children: /*#__PURE__*/ jsxRuntime.jsx("span", {
204
- className: "gp-text-xs",
205
- children: "Getting products..."
206
- })
207
- })
208
- ]
209
- })
210
- ]
211
- })
212
- ]
213
- })
214
- ]
215
- });
216
- };
217
-
218
- exports.PickProduct = PickProduct;
@@ -1,77 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var DropdownIcon = require('../icons/DropdownIcon.js');
6
- var classNames = require('classnames');
7
-
8
- const ToneAndVoice = (props)=>{
9
- const listToneAndVoice = [
10
- 'Persuasive',
11
- 'Friendly',
12
- 'Professional',
13
- 'Casual'
14
- ];
15
- const [tone, setTone] = react.useState(listToneAndVoice[0]);
16
- const [isShow, setIsShow] = react.useState(false);
17
- const toggle = ()=>{
18
- setIsShow(!isShow);
19
- };
20
- const setValue = (value)=>{
21
- setTone(value);
22
- setIsShow(false);
23
- };
24
- react.useEffect(()=>{
25
- tone && props.changeToneAndVoice(tone);
26
- }, [
27
- tone,
28
- props
29
- ]);
30
- return /*#__PURE__*/ jsxRuntime.jsx("div", {
31
- children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
32
- className: "gp-flex gp-flex-col gp-gap-2",
33
- children: [
34
- /*#__PURE__*/ jsxRuntime.jsx("p", {
35
- className: "gp-py-2 gp-text-xs",
36
- children: "Tone and Voice"
37
- }),
38
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
39
- className: "gp-relative",
40
- children: [
41
- /*#__PURE__*/ jsxRuntime.jsxs("button", {
42
- className: "gp-flex gp-justify-between gp-items-center gp-w-full gp-p-2 gp-rounded-lg gp-bg-[#333333] gp-text-xs",
43
- onClick: toggle,
44
- children: [
45
- tone,
46
- /*#__PURE__*/ jsxRuntime.jsx(DropdownIcon.DropdownIcon, {})
47
- ]
48
- }),
49
- isShow ? /*#__PURE__*/ jsxRuntime.jsx("div", {
50
- className: "gp-absolute gp-w-full gp-top-10 gp-left-0 gp-rounded-lg gp-bg-[#333333] gp-p-2 gp-flex gp-flex-col gp-gap-2 gp-z-10",
51
- children: listToneAndVoice.map((item)=>{
52
- return /*#__PURE__*/ jsxRuntime.jsxs("button", {
53
- className: "gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-3 gp-items-center",
54
- onClick: ()=>setValue(item),
55
- children: [
56
- /*#__PURE__*/ jsxRuntime.jsx("div", {
57
- className: classNames({
58
- 'gp-invisible': tone !== item
59
- }),
60
- children: /*#__PURE__*/ jsxRuntime.jsx(DropdownIcon.TickIcon, {})
61
- }),
62
- /*#__PURE__*/ jsxRuntime.jsx("span", {
63
- className: "gp-text-xs",
64
- children: item
65
- })
66
- ]
67
- }, item);
68
- })
69
- }) : null
70
- ]
71
- })
72
- ]
73
- })
74
- });
75
- };
76
-
77
- exports.ToneAndVoice = ToneAndVoice;
@@ -1,47 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
-
5
- const useCheckingProductInside = (genTool, options)=>{
6
- const [productElement, setProductElement] = react.useState({});
7
- const checkSectionHasProduct = react.useCallback(()=>{
8
- if (!genTool.current) {
9
- setProductElement({
10
- productId: '',
11
- uid: ''
12
- });
13
- return;
14
- }
15
- const sectionEl = genTool.current?.closest('[data-component-tag="Section"]');
16
- const productEl = sectionEl?.querySelector('[data-product-id]:not([data-product-id=""])');
17
- const productId = productEl?.getAttribute('data-product-id');
18
- const productElUid = productEl?.getAttribute('data-uid');
19
- const productListOutSideProduct = productEl?.closest('[data-component-tag="ProductList"]');
20
- if (productListOutSideProduct || !productId) {
21
- setProductElement({
22
- productId: '',
23
- uid: ''
24
- });
25
- return;
26
- }
27
- setProductElement({
28
- productId: productId ? 'gid://shopify/Product/' + productId : '',
29
- uid: productElUid ?? ''
30
- });
31
- }, [
32
- genTool
33
- ]);
34
- react.useEffect(()=>{
35
- if (!options?.isEnabled) return;
36
- checkSectionHasProduct();
37
- }, [
38
- options?.isEnabled,
39
- checkSectionHasProduct
40
- ]);
41
- return {
42
- productElement,
43
- checkSectionHasProduct
44
- };
45
- };
46
-
47
- exports.useCheckingProductInside = useCheckingProductInside;