@gem-sdk/pages 2.0.0-staging.711 → 2.0.0-staging.764

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 (145) hide show
  1. package/dist/cjs/components/ErrorBoundary.js +1 -40
  2. package/dist/cjs/components/ErrorFallback.js +1 -26
  3. package/dist/cjs/components/FacebookPixel.js +3 -33
  4. package/dist/cjs/components/FooterForPostPurchase.js +1 -34
  5. package/dist/cjs/components/GoogleAnalytic.js +5 -65
  6. package/dist/cjs/components/TikTokPixel.js +3 -19
  7. package/dist/cjs/components/builder/Body.js +1 -36
  8. package/dist/cjs/components/builder/Footer.js +1 -154
  9. package/dist/cjs/components/builder/Header.js +1 -186
  10. package/dist/cjs/components/builder/PopupManager.js +1 -63
  11. package/dist/cjs/components/builder/SwitchView.js +1 -184
  12. package/dist/cjs/components/builder/Toolbar.js +1 -706
  13. package/dist/cjs/components/builder/Toolbox.js +1 -508
  14. package/dist/cjs/components/builder/const.js +1 -56
  15. package/dist/cjs/components/builder/toolbar/const.js +1 -7
  16. package/dist/cjs/components/builder/toolbar/utils/findDOMClosest.js +1 -41
  17. package/dist/cjs/components/builder/toolbar/utils/findOverflowParent.js +1 -20
  18. package/dist/cjs/components/builder/toolbar/utils/getChildrenByAttrSelector.js +1 -18
  19. package/dist/cjs/components/builder/toolbar/utils/getDOMElementParents.js +1 -32
  20. package/dist/cjs/components/builder/toolbar/utils/isOverParent.js +1 -16
  21. package/dist/cjs/components/builder/toolbar/utils/isOverToolbarPosition.js +1 -12
  22. package/dist/cjs/components/builder/toolbar/utils/isSection.js +1 -8
  23. package/dist/cjs/components/builder/toolbar/utils/notVisible.js +1 -8
  24. package/dist/cjs/components/builder/toolbar/utils/waitForElementToExist.js +1 -27
  25. package/dist/cjs/components/composable/getListFontWeightTypos.js +1 -14
  26. package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +1 -151
  27. package/dist/cjs/components/image-to-layout/DropElement.js +1 -191
  28. package/dist/cjs/components/image-to-layout/ImageToLayout.js +1 -41
  29. package/dist/cjs/constants/index.js +1 -15
  30. package/dist/cjs/index.js +1 -80
  31. package/dist/cjs/layouts/main.js +1 -30
  32. package/dist/cjs/libs/api/get-builder-props.js +1 -46
  33. package/dist/cjs/libs/api/get-collection-props.js +1 -68
  34. package/dist/cjs/libs/api/get-home-page-props-v2.js +1 -157
  35. package/dist/cjs/libs/api/get-home-page-props.js +1 -163
  36. package/dist/cjs/libs/api/get-post-purchase-props-preview.js +1 -301
  37. package/dist/cjs/libs/api/get-preview-props.js +1 -18
  38. package/dist/cjs/libs/api/get-product-props.js +1 -73
  39. package/dist/cjs/libs/api/get-static-page-props-preview.js +1 -160
  40. package/dist/cjs/libs/api/get-static-page-props-v2.js +1 -173
  41. package/dist/cjs/libs/api/get-static-page-props.js +1 -161
  42. package/dist/cjs/libs/custom-fonts.js +6 -60
  43. package/dist/cjs/libs/fetcher.js +1 -100
  44. package/dist/cjs/libs/get-layout.js +1 -13
  45. package/dist/cjs/libs/get-storefront-api.js +1 -12
  46. package/dist/cjs/libs/getStaticPaths.js +1 -10
  47. package/dist/cjs/libs/google-fonts.js +1 -138
  48. package/dist/cjs/libs/helpers/check-option-font.js +1 -65
  49. package/dist/cjs/libs/helpers/common.js +1 -27
  50. package/dist/cjs/libs/helpers/gen-css.js +1 -135
  51. package/dist/cjs/libs/helpers/gen-fonts.js +1 -96
  52. package/dist/cjs/libs/helpers/generate-manifres.js +1 -5
  53. package/dist/cjs/libs/helpers/get-fallback.js +1 -34
  54. package/dist/cjs/libs/helpers/get-metafield.js +1 -7
  55. package/dist/cjs/libs/helpers/normalize.js +1 -112
  56. package/dist/cjs/libs/helpers/parse-json.js +1 -16
  57. package/dist/cjs/libs/helpers/sentry.js +1 -17
  58. package/dist/cjs/libs/helpers/user-agent.js +1 -7
  59. package/dist/cjs/libs/hooks/use-tracking-view.js +1 -42
  60. package/dist/cjs/libs/hooks/usePagePreview.js +1 -92
  61. package/dist/cjs/libs/parse-html.js +1 -34
  62. package/dist/cjs/libs/shopify-cdn-with-google-fonts.js +1 -1845
  63. package/dist/cjs/pages/404.js +1 -43
  64. package/dist/cjs/pages/500.js +1 -74
  65. package/dist/cjs/pages/CollectionGlobalProvider.js +1 -59
  66. package/dist/cjs/pages/builder.js +1 -119
  67. package/dist/cjs/pages/collection-detail.js +1 -64
  68. package/dist/cjs/pages/preview.js +1 -26
  69. package/dist/cjs/pages/product-detail.js +1 -69
  70. package/dist/cjs/pages/static-v2.js +3 -142
  71. package/dist/cjs/pages/static.js +1 -75
  72. package/dist/cjs/store/libs-store.js +1 -14
  73. package/dist/esm/components/ErrorBoundary.js +1 -38
  74. package/dist/esm/components/ErrorFallback.js +1 -24
  75. package/dist/esm/components/FacebookPixel.js +3 -31
  76. package/dist/esm/components/FooterForPostPurchase.js +1 -30
  77. package/dist/esm/components/GoogleAnalytic.js +5 -63
  78. package/dist/esm/components/TikTokPixel.js +3 -17
  79. package/dist/esm/components/builder/Body.js +1 -32
  80. package/dist/esm/components/builder/Footer.js +1 -150
  81. package/dist/esm/components/builder/Header.js +1 -182
  82. package/dist/esm/components/builder/PopupManager.js +1 -59
  83. package/dist/esm/components/builder/SwitchView.js +1 -180
  84. package/dist/esm/components/builder/Toolbar.js +1 -702
  85. package/dist/esm/components/builder/Toolbox.js +1 -504
  86. package/dist/esm/components/builder/const.js +1 -54
  87. package/dist/esm/components/builder/toolbar/const.js +1 -4
  88. package/dist/esm/components/builder/toolbar/utils/findDOMClosest.js +1 -39
  89. package/dist/esm/components/builder/toolbar/utils/findOverflowParent.js +1 -18
  90. package/dist/esm/components/builder/toolbar/utils/getChildrenByAttrSelector.js +1 -16
  91. package/dist/esm/components/builder/toolbar/utils/getDOMElementParents.js +1 -30
  92. package/dist/esm/components/builder/toolbar/utils/isOverParent.js +1 -14
  93. package/dist/esm/components/builder/toolbar/utils/isOverToolbarPosition.js +1 -10
  94. package/dist/esm/components/builder/toolbar/utils/isSection.js +1 -6
  95. package/dist/esm/components/builder/toolbar/utils/notVisible.js +1 -6
  96. package/dist/esm/components/builder/toolbar/utils/waitForElementToExist.js +1 -25
  97. package/dist/esm/components/composable/getListFontWeightTypos.js +1 -12
  98. package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +1 -147
  99. package/dist/esm/components/image-to-layout/DropElement.js +1 -189
  100. package/dist/esm/components/image-to-layout/ImageToLayout.js +1 -37
  101. package/dist/esm/constants/index.js +1 -15
  102. package/dist/esm/index.js +1 -35
  103. package/dist/esm/layouts/main.js +1 -26
  104. package/dist/esm/libs/api/get-builder-props.js +1 -44
  105. package/dist/esm/libs/api/get-collection-props.js +1 -66
  106. package/dist/esm/libs/api/get-home-page-props-v2.js +1 -155
  107. package/dist/esm/libs/api/get-home-page-props.js +1 -161
  108. package/dist/esm/libs/api/get-post-purchase-props-preview.js +1 -293
  109. package/dist/esm/libs/api/get-preview-props.js +1 -16
  110. package/dist/esm/libs/api/get-product-props.js +1 -71
  111. package/dist/esm/libs/api/get-static-page-props-preview.js +1 -158
  112. package/dist/esm/libs/api/get-static-page-props-v2.js +1 -171
  113. package/dist/esm/libs/api/get-static-page-props.js +1 -159
  114. package/dist/esm/libs/custom-fonts.js +6 -55
  115. package/dist/esm/libs/fetcher.js +1 -96
  116. package/dist/esm/libs/get-layout.js +1 -11
  117. package/dist/esm/libs/get-storefront-api.js +1 -10
  118. package/dist/esm/libs/getStaticPaths.js +1 -8
  119. package/dist/esm/libs/google-fonts.js +1 -132
  120. package/dist/esm/libs/helpers/check-option-font.js +1 -63
  121. package/dist/esm/libs/helpers/common.js +1 -24
  122. package/dist/esm/libs/helpers/gen-css.js +1 -133
  123. package/dist/esm/libs/helpers/gen-fonts.js +1 -93
  124. package/dist/esm/libs/helpers/generate-manifres.js +1 -3
  125. package/dist/esm/libs/helpers/get-fallback.js +1 -32
  126. package/dist/esm/libs/helpers/get-metafield.js +1 -5
  127. package/dist/esm/libs/helpers/normalize.js +1 -104
  128. package/dist/esm/libs/helpers/parse-json.js +1 -13
  129. package/dist/esm/libs/helpers/sentry.js +1 -15
  130. package/dist/esm/libs/helpers/user-agent.js +1 -5
  131. package/dist/esm/libs/hooks/use-tracking-view.js +1 -40
  132. package/dist/esm/libs/hooks/usePagePreview.js +1 -90
  133. package/dist/esm/libs/parse-html.js +1 -32
  134. package/dist/esm/libs/shopify-cdn-with-google-fonts.js +1 -1843
  135. package/dist/esm/pages/404.js +1 -41
  136. package/dist/esm/pages/500.js +1 -72
  137. package/dist/esm/pages/CollectionGlobalProvider.js +1 -55
  138. package/dist/esm/pages/builder.js +1 -117
  139. package/dist/esm/pages/collection-detail.js +1 -60
  140. package/dist/esm/pages/preview.js +1 -24
  141. package/dist/esm/pages/product-detail.js +1 -65
  142. package/dist/esm/pages/static-v2.js +3 -140
  143. package/dist/esm/pages/static.js +1 -71
  144. package/dist/esm/store/libs-store.js +1 -12
  145. package/package.json +2 -2
@@ -1,505 +1,2 @@
1
1
  'use client';
2
- import { jsx } from 'react/jsx-runtime';
3
- import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
4
- import { memo, useMemo, useCallback, useEffect } from 'react';
5
- import { getStorefrontApi } from '../../libs/get-storefront-api.js';
6
- import { createFontUrl } from '../../libs/google-fonts.js';
7
- import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
8
- import { genCSS } from '../../libs/helpers/gen-css.js';
9
- import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
10
- import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
11
- import { libsStore } from '../../store/libs-store.js';
12
- import { getListFontWeightTypos } from '../composable/getListFontWeightTypos.js';
13
-
14
- const globalStyleId = 'global-style';
15
- const Toolbox = ()=>{
16
- const matchMutate = useMatchMutate();
17
- const provider = useShopStore((s)=>s.provider);
18
- const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
19
- const setDynamicProduct = usePageStore((s)=>s.setDynamicProduct);
20
- const setPostPurchaseProductOffers = usePageStore((s)=>s.setPostPurchaseProductOffers);
21
- const setDynamicDiscountOffer = usePageStore((s)=>s.setDynamicDiscountOffer);
22
- const setSalePageProductId = usePageStore((s)=>s.setSalePageProductId);
23
- const setDynamicCollection = usePageStore((s)=>s.setDynamicCollection);
24
- const initState = useBuilderPreviewStore((s)=>s.initState);
25
- const state = useBuilderPreviewStore((s)=>s.state);
26
- const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
27
- const forceChangeItemProp = useBuilderPreviewStore((s)=>s.forceChangeItemProp);
28
- const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
29
- const addItem = useBuilderPreviewStore((s)=>s.addItem);
30
- const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
31
- const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
32
- const addSection = useSectionStore((s)=>s.addSection);
33
- const changeSwatches = useShopStore((s)=>s.changeSwatches);
34
- const updateItemName = useBuilderPreviewStore((s)=>s.updateItemName);
35
- const updateItemAttribute = useBuilderPreviewStore((s)=>s.updateItemAttribute);
36
- const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
37
- const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
38
- const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
39
- const updatePriceWithCurrency = useShopStore((s)=>s.updatePriceWithCurrency);
40
- const changeFontType = libsStore((s)=>s.changeFontType);
41
- const fontType = libsStore((s)=>s.fontType);
42
- const clearModal = useModalStore((s)=>s.clearModal);
43
- const changeLimitCreateThemeSection = useShopStore((s)=>s.changeLimitCreateThemeSection);
44
- const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
45
- const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
46
- const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
47
- const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
48
- const setSidebarMode = usePageStore((s)=>s.setSidebarMode);
49
- const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
50
- state
51
- ]);
52
- const setFontsToHead = (className, fonts)=>{
53
- // clear fonts
54
- if (!fonts?.length) {
55
- const googleFonts = document.querySelectorAll(`.${className}`);
56
- googleFonts.forEach((googleFont)=>{
57
- googleFont.remove();
58
- });
59
- return;
60
- }
61
- // clear fonts not use
62
- const googleFonts = document.querySelectorAll(`.${className}`);
63
- googleFonts.forEach((googleFont)=>{
64
- const fontName = googleFont.getAttribute('data-font');
65
- const variantName = googleFont.getAttribute('data-font-variant');
66
- if (!fontName || !variantName) {
67
- googleFont.remove();
68
- } else {
69
- const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
70
- if (!isUse) {
71
- googleFont.remove();
72
- }
73
- }
74
- });
75
- // append new fonts
76
- for (const font of fonts){
77
- if ([
78
- 'bunny',
79
- 'google'
80
- ].includes(font.type) && checkNotInOptionFont(font.family, fontType)) {
81
- continue;
82
- }
83
- if (font.type !== 'custom') {
84
- if (font.variants?.length) {
85
- for (const variant of font.variants){
86
- const cloneFont = JSON.parse(JSON.stringify(font));
87
- cloneFont.variants = [
88
- variant
89
- ]; // set single variant. Fix error reload font when change href other variant
90
- const fontName = cloneFont.family;
91
- const variantName = variant;
92
- const url = createFontUrl([
93
- cloneFont
94
- ], undefined, fontType);
95
- if (url) {
96
- const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
97
- if (googleFont) {
98
- continue;
99
- } else {
100
- const link = document.createElement('link');
101
- link.className = className;
102
- link.dataset.font = fontName;
103
- link.dataset.fontVariant = variantName;
104
- link.href = url;
105
- link.rel = 'stylesheet';
106
- document.head.appendChild(link);
107
- }
108
- }
109
- }
110
- }
111
- }
112
- }
113
- };
114
- // Revalidate all query with key match query/
115
- const onRevalidateQuery = useCallback(()=>{
116
- matchMutate(/query\//, {
117
- revalidate: true
118
- });
119
- }, [
120
- matchMutate
121
- ]);
122
- // Update shop info
123
- const onChangeShopInfo = useCallback((e)=>{
124
- const detail = e.detail;
125
- changeStorefrontInfo({
126
- url: detail.shopHandle ? getStorefrontApi(detail.shopHandle, provider) : undefined,
127
- token: detail.shopToken
128
- });
129
- }, [
130
- changeStorefrontInfo,
131
- provider
132
- ]);
133
- const onChangeGlobalStyle = useCallback((e)=>{
134
- const detail = e.detail;
135
- try {
136
- if (detail.data) {
137
- const themeStyle = genCSS(detail.data, detail.mobileOnly);
138
- const fontWeights = getListFontWeightTypos(detail.data?.typography);
139
- const font = Object.entries(detail.data?.font).map(([, value])=>({
140
- ...value,
141
- variants: value.variants.filter((variant)=>fontWeights.includes(variant) || variant === 'regular' && fontWeights.includes('400')).map((variant)=>variant === 'regular' ? '400' : variant)
142
- })).map((item)=>{
143
- if (item.type == 'custom') {
144
- const isGoogleFont = shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
145
- if (isGoogleFont) {
146
- return isGoogleFont;
147
- }
148
- }
149
- return item;
150
- });
151
- const globalStyle = document.getElementById(globalStyleId);
152
- setFontsToHead('google-font-builder', font);
153
- if (globalStyle) {
154
- globalStyle.innerHTML = themeStyle;
155
- } else {
156
- const style = document.createElement('style');
157
- style.id = globalStyleId;
158
- style.innerHTML = themeStyle;
159
- document.head.appendChild(style);
160
- }
161
- }
162
- } catch {
163
- //
164
- }
165
- }, []);
166
- // Init builder data
167
- const onInitBuilder = useCallback((e)=>{
168
- clearModal();
169
- try {
170
- const detail = e.detail;
171
- if (detail.data) {
172
- if (detail.type === 'flat') {
173
- initNormalizeState(detail.data);
174
- } else {
175
- initState(detail.data);
176
- }
177
- }
178
- } catch {
179
- //
180
- }
181
- }, [
182
- initNormalizeState,
183
- initState,
184
- clearModal
185
- ]);
186
- // Add new entity
187
- const onAddEntity = useCallback((e)=>{
188
- try {
189
- const detail = e.detail;
190
- if (detail.entity) {
191
- addItem({
192
- data: detail.entity,
193
- id: detail.id,
194
- position: detail.position,
195
- type: detail.type ?? 'component'
196
- });
197
- if (detail?.type === 'section' && !Array.isArray(detail.entity)) {
198
- addSection(detail.entity.uid, detail.entity);
199
- }
200
- }
201
- } catch {
202
- //
203
- }
204
- }, [
205
- addItem,
206
- addSection
207
- ]);
208
- // Update props of entity
209
- const onUpdateEntityProp = useCallback((e)=>{
210
- try {
211
- const detail = e.detail;
212
- if (detail.uid && detail.propName) {
213
- changeItemPropByKey({
214
- id: detail.uid,
215
- key: detail.propName,
216
- data: detail.propValue,
217
- group: detail.group
218
- });
219
- }
220
- } catch {
221
- //
222
- }
223
- }, [
224
- changeItemPropByKey
225
- ]);
226
- // Update props of entity
227
- const onForceUpdateEntityProps = useCallback((e)=>{
228
- try {
229
- const detail = e.detail;
230
- if (detail.uid) {
231
- forceChangeItemProp(detail.uid, detail.data, detail.group);
232
- }
233
- } catch {
234
- //
235
- }
236
- }, [
237
- forceChangeItemProp
238
- ]);
239
- // Move entity
240
- const onMoveEntity = useCallback((e)=>{
241
- try {
242
- const detail = e.detail;
243
- if (detail.to && detail.uid) {
244
- moveItem(detail.uid, detail.to, Number(detail.position) ?? 0);
245
- }
246
- } catch {
247
- //
248
- }
249
- }, [
250
- moveItem
251
- ]);
252
- // Remove entity
253
- const onRemoveEntity = useCallback((e)=>{
254
- try {
255
- const detail = e.detail;
256
- if (detail.uid) {
257
- removeItem(detail.uid);
258
- }
259
- } catch {
260
- //
261
- }
262
- }, [
263
- removeItem
264
- ]);
265
- // Change Swatches Data
266
- const onChangeSwatchesData = useCallback((e)=>{
267
- const detail = e.detail;
268
- try {
269
- if (detail.data) {
270
- changeSwatches(detail.data);
271
- }
272
- } catch {
273
- //
274
- }
275
- }, [
276
- changeSwatches
277
- ]);
278
- const onChangeLayoutSettingData = useCallback((e)=>{
279
- const detail = e.detail;
280
- if (!detail) return;
281
- changeLayoutSettings(detail);
282
- }, [
283
- changeLayoutSettings
284
- ]);
285
- const onUpdateCreateThemeSectionCount = useCallback((e)=>{
286
- const count = e.detail;
287
- if (!count) return;
288
- changeCreateThemeSectionCount(count);
289
- }, [
290
- changeCreateThemeSectionCount
291
- ]);
292
- const onUpdateShopPlan = useCallback((e)=>{
293
- const shopPlan = e.detail;
294
- if (!shopPlan) return;
295
- changeShopPlan(shopPlan);
296
- }, [
297
- changeShopPlan
298
- ]);
299
- const onUpdatePriceWithCurrency = useCallback((e)=>{
300
- const showPriceCurrency = e.detail;
301
- if (!showPriceCurrency) return;
302
- updatePriceWithCurrency(showPriceCurrency);
303
- }, [
304
- updatePriceWithCurrency
305
- ]);
306
- const onUpdateFontType = useCallback((e)=>{
307
- const fontType = e.detail;
308
- if (!fontType) return;
309
- changeFontType(fontType);
310
- }, [
311
- changeFontType
312
- ]);
313
- const onUpdateDynamicProduct = useCallback((e)=>{
314
- const product = e.detail;
315
- if (!product) return;
316
- setDynamicProduct(product);
317
- }, [
318
- setDynamicProduct
319
- ]);
320
- const onUpdateDynamicCollection = useCallback((e)=>{
321
- const collection = e.detail;
322
- if (!collection) return;
323
- setDynamicCollection(collection);
324
- }, [
325
- setDynamicCollection
326
- ]);
327
- useEffect(()=>{
328
- if (fonts) {
329
- setFontsToHead('google-font-element', fonts);
330
- }
331
- }, [
332
- fonts
333
- ]);
334
- const onUpdateItemName = useCallback((e)=>{
335
- const detail = e.detail;
336
- if (detail.uid) {
337
- updateItemName(detail.uid, detail.name || '');
338
- }
339
- }, [
340
- updateItemName
341
- ]);
342
- const onUpdateItemAttribute = useCallback((e)=>{
343
- const detail = e.detail;
344
- if (detail.uid) {
345
- updateItemAttribute(detail.uid, detail.value || '', detail.attr || '');
346
- }
347
- }, [
348
- updateItemAttribute
349
- ]);
350
- const onUpdateProductOffers = useCallback((e)=>{
351
- const productOffers = e.detail;
352
- if (!productOffers?.length) return;
353
- setPostPurchaseProductOffers(productOffers);
354
- }, [
355
- setPostPurchaseProductOffers
356
- ]);
357
- const onUpdateDynamicDiscountOffer = useCallback((e)=>{
358
- const dynamicDiscountOffer = e.detail;
359
- if (!dynamicDiscountOffer) return;
360
- setDynamicDiscountOffer(dynamicDiscountOffer);
361
- }, [
362
- setDynamicDiscountOffer
363
- ]);
364
- const onUpdateSalePageProductId = useCallback((e)=>{
365
- const id = e.detail;
366
- if (!id) return;
367
- setSalePageProductId(id);
368
- }, [
369
- setSalePageProductId
370
- ]);
371
- const onLimitCreateThemeSection = useCallback((e)=>{
372
- const data = e.detail;
373
- if (!data) return;
374
- changeLimitCreateThemeSection(data);
375
- }, [
376
- changeLimitCreateThemeSection
377
- ]);
378
- const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
379
- const isSelectOnPage = e.detail.value;
380
- const mode = e.detail.mode;
381
- const settingType = e.detail.settingType;
382
- setInteractionIsSelectOnPage(isSelectOnPage);
383
- setInteractionSelectType(mode);
384
- setInteractionSettingType(settingType);
385
- }, [
386
- setInteractionIsSelectOnPage,
387
- setInteractionSelectType,
388
- setInteractionSettingType
389
- ]);
390
- const onUpdateInteractionSettingType = useCallback((e)=>{
391
- const settingType = e.detail.settingType;
392
- setInteractionSettingType(settingType);
393
- }, [
394
- setInteractionSettingType
395
- ]);
396
- const onChangeSidebarMode = useCallback((e)=>{
397
- const mode = e.detail.mode;
398
- console.log(mode);
399
- setSidebarMode(mode);
400
- }, [
401
- setSidebarMode
402
- ]);
403
- const onUpdateInteractionItem = useCallback((e)=>{
404
- const interactionItem = e.detail;
405
- setInteractionItem(interactionItem);
406
- }, [
407
- setInteractionItem
408
- ]);
409
- useEffect(()=>{
410
- if (fonts) {
411
- setFontsToHead('google-font-element', fonts);
412
- }
413
- }, [
414
- fonts
415
- ]);
416
- useEffect(()=>{
417
- window.addEventListener('update-shop-info', onChangeShopInfo);
418
- window.addEventListener('revalidate-query', onRevalidateQuery);
419
- window.addEventListener('init-builder', onInitBuilder);
420
- window.addEventListener('add-entity', onAddEntity);
421
- window.addEventListener('remove-entity', onRemoveEntity);
422
- window.addEventListener('move-entity', onMoveEntity);
423
- window.addEventListener('force-update-entity-props', onForceUpdateEntityProps);
424
- window.addEventListener('update-entity-prop', onUpdateEntityProp);
425
- window.addEventListener('set-global-style', onChangeGlobalStyle);
426
- window.addEventListener('update-global-swatches-data', onChangeSwatchesData);
427
- window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
428
- window.addEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
429
- window.addEventListener('update-shop-plan', onUpdateShopPlan);
430
- window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
431
- window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
432
- window.addEventListener('update-item-name', onUpdateItemName);
433
- window.addEventListener('update-item-attribute', onUpdateItemAttribute);
434
- window.addEventListener('set-product-offer', onUpdateProductOffers);
435
- window.addEventListener('set-dynamic-discount-offer', onUpdateDynamicDiscountOffer);
436
- window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
437
- window.addEventListener('limit-create-theme-section', onLimitCreateThemeSection);
438
- window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
439
- window.addEventListener('update-interaction-item', onUpdateInteractionItem);
440
- window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
441
- window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
442
- window.addEventListener('update-font-type', onUpdateFontType);
443
- window.addEventListener('update-price-with-currency', onUpdatePriceWithCurrency);
444
- return ()=>{
445
- window.removeEventListener('update-shop-info', onChangeShopInfo);
446
- window.removeEventListener('revalidate-query', onRevalidateQuery);
447
- window.removeEventListener('init-builder', onInitBuilder);
448
- window.removeEventListener('add-entity', onAddEntity);
449
- window.removeEventListener('remove-entity', onRemoveEntity);
450
- window.removeEventListener('move-entity', onMoveEntity);
451
- window.removeEventListener('update-entity-prop', onUpdateEntityProp);
452
- window.removeEventListener('set-global-style', onChangeGlobalStyle);
453
- window.removeEventListener('update-global-swatches-data', onChangeSwatchesData);
454
- window.removeEventListener('on-off-header-footer', onChangeLayoutSettingData);
455
- window.removeEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
456
- window.removeEventListener('update-shop-plan', onUpdateShopPlan);
457
- window.removeEventListener('update-price-with-currency', onUpdatePriceWithCurrency);
458
- window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
459
- window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
460
- window.removeEventListener('update-item-name', onUpdateItemName);
461
- window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
462
- window.removeEventListener('set-product-offer', onUpdateProductOffers);
463
- window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
464
- window.removeEventListener('limit-create-theme-section', onLimitCreateThemeSection);
465
- window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
466
- window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
467
- window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
468
- window.removeEventListener('update-font-type', onUpdateFontType);
469
- };
470
- }, [
471
- onAddEntity,
472
- onUpdateShopPlan,
473
- onForceUpdateEntityProps,
474
- onUpdateEntityProp,
475
- onInitBuilder,
476
- onMoveEntity,
477
- onRemoveEntity,
478
- onChangeGlobalStyle,
479
- onChangeSwatchesData,
480
- onRevalidateQuery,
481
- onChangeShopInfo,
482
- onChangeLayoutSettingData,
483
- onUpdateCreateThemeSectionCount,
484
- onUpdateDynamicProduct,
485
- onUpdateDynamicCollection,
486
- onUpdateItemName,
487
- onUpdateItemAttribute,
488
- onUpdateProductOffers,
489
- onUpdateSalePageProductId,
490
- onLimitCreateThemeSection,
491
- onUpdateInteractionItem,
492
- onUpdateInteractionIsSelectOnPage,
493
- onUpdateInteractionSettingType,
494
- onUpdateFontType,
495
- onChangeSidebarMode,
496
- onUpdateDynamicDiscountOffer,
497
- onUpdatePriceWithCurrency
498
- ]);
499
- return /*#__PURE__*/ jsx("div", {
500
- className: "toolbox"
501
- });
502
- };
503
- var Toolbox$1 = /*#__PURE__*/ memo(Toolbox);
504
-
505
- export { Toolbox$1 as default };
2
+ import{jsx as e}from"react/jsx-runtime";import{useMatchMutate as t,useShopStore as n,usePageStore as i,useBuilderPreviewStore as o,useSectionStore as a,useModalStore as d}from"@gem-sdk/core";import{memo as r,useMemo as l,useCallback as s,useEffect as c}from"react";import{getStorefrontApi as m}from"../../libs/get-storefront-api.js";import{createFontUrl as p}from"../../libs/google-fonts.js";import{checkNotInOptionFont as u}from"../../libs/helpers/check-option-font.js";import{genCSS as w}from"../../libs/helpers/gen-css.js";import{getFontsFromDataBuilder as v}from"../../libs/helpers/gen-fonts.js";import{shopifyCdnWithGoogleFonts as y}from"../../libs/shopify-cdn-with-google-fonts.js";import{libsStore as f}from"../../store/libs-store.js";import{getListFontWeightTypos as g}from"../composable/getListFontWeightTypos.js";let globalStyleId="global-style",Toolbox=()=>{let r=t(),h=n(e=>e.provider),E=n(e=>e.changeStorefrontInfo),L=i(e=>e.setDynamicProduct),b=i(e=>e.setPostPurchaseProductOffers),S=i(e=>e.setDynamicDiscountOffer),I=i(e=>e.setSalePageProductId),T=i(e=>e.setDynamicCollection),P=o(e=>e.initState),j=o(e=>e.state),C=o(e=>e.forceChangeState),N=o(e=>e.forceChangeItemProp),x=o(e=>e.changeItemPropByKey),A=o(e=>e.addItem),O=o(e=>e.moveItem),$=o(e=>e.removeItem),k=a(e=>e.addSection),q=n(e=>e.changeSwatches),D=o(e=>e.updateItemName),H=o(e=>e.updateItemAttribute),M=n(e=>e.changeLayoutSettings),B=n(e=>e.changeCreateThemeSectionCount),F=n(e=>e.changeShopPlan),J=n(e=>e.updatePriceWithCurrency),V=f(e=>e.changeFontType),W=f(e=>e.fontType),K=d(e=>e.clearModal),z=n(e=>e.changeLimitCreateThemeSection),G=i(e=>e.setInteractionIsSelectOnPage),Q=i(e=>e.setInteractionItem),R=i(e=>e.setInteractionSelectType),U=i(e=>e.setInteractionSettingType),X=i(e=>e.setSidebarMode),Y=l(()=>v(j),[j]),Z=(e,t)=>{if(!t?.length){let t=document.querySelectorAll(`.${e}`);t.forEach(e=>{e.remove()});return}let n=document.querySelectorAll(`.${e}`);for(let i of(n.forEach(e=>{let n=e.getAttribute("data-font"),i=e.getAttribute("data-font-variant");if(n&&i){let o=t.find(e=>e.family==n&&e.variants.includes(i));o||e.remove()}else e.remove()}),t))if(!(["bunny","google"].includes(i.type)&&u(i.family,W))&&"custom"!==i.type&&i.variants?.length)for(let t of i.variants){let n=JSON.parse(JSON.stringify(i));n.variants=[t];let o=n.family,a=p([n],void 0,W);if(a){let n=document.querySelector(`.${e}[data-font="${o}"][data-font-variant="${t}"]`);if(n)continue;{let n=document.createElement("link");n.className=e,n.dataset.font=o,n.dataset.fontVariant=t,n.href=a,n.rel="stylesheet",document.head.appendChild(n)}}}},_=s(()=>{r(/query\//,{revalidate:!0})},[r]),ee=s(e=>{let t=e.detail;E({url:t.shopHandle?m(t.shopHandle,h):void 0,token:t.shopToken})},[E,h]),et=s(e=>{let t=e.detail;try{if(t.data){let e=w(t.data,t.mobileOnly),n=g(t.data?.typography),i=Object.entries(t.data?.font).map(([,e])=>({...e,variants:e.variants.filter(e=>n.includes(e)||"regular"===e&&n.includes("400")).map(e=>"regular"===e?"400":e)})).map(e=>{if("custom"==e.type){let t=y.find(t=>t.family==e.family);if(t)return t}return e}),o=document.getElementById(globalStyleId);if(Z("google-font-builder",i),o)o.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),en=s(e=>{K();try{let t=e.detail;t.data&&("flat"===t.type?C(t.data):P(t.data))}catch{}},[C,P,K]),ei=s(e=>{try{let t=e.detail;t.entity&&(A({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||k(t.entity.uid,t.entity))}catch{}},[A,k]),eo=s(e=>{try{let t=e.detail;t.uid&&t.propName&&x({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[x]),ea=s(e=>{try{let t=e.detail;t.uid&&N(t.uid,t.data,t.group)}catch{}},[N]),ed=s(e=>{try{let t=e.detail;t.to&&t.uid&&O(t.uid,t.to,Number(t.position)??0)}catch{}},[O]),er=s(e=>{try{let t=e.detail;t.uid&&$(t.uid)}catch{}},[$]),el=s(e=>{let t=e.detail;try{t.data&&q(t.data)}catch{}},[q]),es=s(e=>{let t=e.detail;t&&M(t)},[M]),ec=s(e=>{let t=e.detail;t&&B(t)},[B]),em=s(e=>{let t=e.detail;t&&F(t)},[F]),ep=s(e=>{let t=e.detail;t&&J(t)},[J]),eu=s(e=>{let t=e.detail;t&&V(t)},[V]),ew=s(e=>{let t=e.detail;t&&L(t)},[L]),ev=s(e=>{let t=e.detail;t&&T(t)},[T]);c(()=>{Y&&Z("google-font-element",Y)},[Y]);let ey=s(e=>{let t=e.detail;t.uid&&D(t.uid,t.name||"")},[D]),ef=s(e=>{let t=e.detail;t.uid&&H(t.uid,t.value||"",t.attr||"")},[H]),eg=s(e=>{let t=e.detail;t?.length&&b(t)},[b]),eh=s(e=>{let t=e.detail;t&&S(t)},[S]),eE=s(e=>{let t=e.detail;t&&I(t)},[I]),eL=s(e=>{let t=e.detail;t&&z(t)},[z]),eb=s(e=>{let t=e.detail.value,n=e.detail.mode,i=e.detail.settingType;G(t),R(n),U(i)},[G,R,U]),eS=s(e=>{let t=e.detail.settingType;U(t)},[U]),eI=s(e=>{let t=e.detail.mode;console.log(t),X(t)},[X]),eT=s(e=>{let t=e.detail;Q(t)},[Q]);return c(()=>{Y&&Z("google-font-element",Y)},[Y]),c(()=>(window.addEventListener("update-shop-info",ee),window.addEventListener("revalidate-query",_),window.addEventListener("init-builder",en),window.addEventListener("add-entity",ei),window.addEventListener("remove-entity",er),window.addEventListener("move-entity",ed),window.addEventListener("force-update-entity-props",ea),window.addEventListener("update-entity-prop",eo),window.addEventListener("set-global-style",et),window.addEventListener("update-global-swatches-data",el),window.addEventListener("on-off-header-footer",es),window.addEventListener("update-create-theme-section-count",ec),window.addEventListener("update-shop-plan",em),window.addEventListener("set-dynamic-product",ew),window.addEventListener("set-dynamic-collection",ev),window.addEventListener("update-item-name",ey),window.addEventListener("update-item-attribute",ef),window.addEventListener("set-product-offer",eg),window.addEventListener("set-dynamic-discount-offer",eh),window.addEventListener("update-sale-page-product-id",eE),window.addEventListener("limit-create-theme-section",eL),window.addEventListener("update-interaction-is-select-on-page",eb),window.addEventListener("update-interaction-item",eT),window.addEventListener("update-interaction-setting-type",eS),window.addEventListener("change-sidebar-mode",eI),window.addEventListener("update-font-type",eu),window.addEventListener("update-price-with-currency",ep),()=>{window.removeEventListener("update-shop-info",ee),window.removeEventListener("revalidate-query",_),window.removeEventListener("init-builder",en),window.removeEventListener("add-entity",ei),window.removeEventListener("remove-entity",er),window.removeEventListener("move-entity",ed),window.removeEventListener("update-entity-prop",eo),window.removeEventListener("set-global-style",et),window.removeEventListener("update-global-swatches-data",el),window.removeEventListener("on-off-header-footer",es),window.removeEventListener("update-create-theme-section-count",ec),window.removeEventListener("update-shop-plan",em),window.removeEventListener("update-price-with-currency",ep),window.removeEventListener("set-dynamic-product",ew),window.removeEventListener("set-dynamic-collection",ev),window.removeEventListener("update-item-name",ey),window.removeEventListener("update-item-attribute",ef),window.removeEventListener("set-product-offer",eg),window.removeEventListener("update-sale-page-product-id",eE),window.removeEventListener("limit-create-theme-section",eL),window.removeEventListener("update-interaction-is-select-on-page",eb),window.removeEventListener("update-interaction-item",eT),window.removeEventListener("update-interaction-setting-type",eS),window.removeEventListener("update-font-type",eu)}),[ei,em,ea,eo,en,ed,er,et,el,_,ee,es,ec,ew,ev,ey,ef,eg,eE,eL,eT,eb,eS,eu,eI,eh,ep]),e("div",{className:"toolbox"})};var Toolbox$1=r(Toolbox);export{Toolbox$1 as default};
@@ -1,54 +1 @@
1
- const devices = [
2
- {
3
- id: 'iphone-13-mini',
4
- name: 'iPhone 13 Mini',
5
- width: 375
6
- },
7
- {
8
- id: 'iphone-13-pro',
9
- name: 'iPhone 13 Pro',
10
- width: 390
11
- },
12
- {
13
- id: 'iphone-11-pro-max',
14
- name: 'iPhone 11 Pro Max',
15
- width: 414
16
- },
17
- {
18
- id: 'iphone-15-pro-max',
19
- name: 'iPhone 15 Pro Max',
20
- width: 430
21
- },
22
- {
23
- id: 'pixel-7',
24
- name: 'Pixel 7',
25
- width: 412
26
- },
27
- {
28
- id: 'galaxy-s8-plus',
29
- name: 'Galaxy S8+',
30
- width: 360
31
- },
32
- {
33
- id: 'galaxy-s20-ultra',
34
- name: 'Galaxy S20 Ultra',
35
- width: 412
36
- },
37
- {
38
- id: 'ipad-mini',
39
- name: 'iPad Mini',
40
- width: 768
41
- },
42
- {
43
- id: 'ipad-air',
44
- name: 'iPad Air',
45
- width: 820
46
- },
47
- {
48
- id: 'ipad-pro',
49
- name: 'iPad Pro',
50
- width: 1024
51
- }
52
- ];
53
-
54
- export { devices };
1
+ let devices=[{id:"iphone-13-mini",name:"iPhone 13 Mini",width:375},{id:"iphone-13-pro",name:"iPhone 13 Pro",width:390},{id:"iphone-11-pro-max",name:"iPhone 11 Pro Max",width:414},{id:"iphone-15-pro-max",name:"iPhone 15 Pro Max",width:430},{id:"pixel-7",name:"Pixel 7",width:412},{id:"galaxy-s8-plus",name:"Galaxy S8+",width:360},{id:"galaxy-s20-ultra",name:"Galaxy S20 Ultra",width:412},{id:"ipad-mini",name:"iPad Mini",width:768},{id:"ipad-air",name:"iPad Air",width:820},{id:"ipad-pro",name:"iPad Pro",width:1024}];export{devices};
@@ -1,4 +1 @@
1
- const TOOLBAR_HOVER_HEIGHT = 24;
2
- const TOOLBAR_ACTIVE_HEIGHT = 32;
3
-
4
- export { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT };
1
+ let TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32;export{TOOLBAR_ACTIVE_HEIGHT,TOOLBAR_HOVER_HEIGHT};
@@ -1,39 +1 @@
1
- const findDOMClosest = ($target, selectors)=>{
2
- const closestElements = {
3
- $childrenSlot: null,
4
- $productFeatureImg: null,
5
- $section: null,
6
- $component: null,
7
- $disableIframeClick: null,
8
- $stickyMinimize: null,
9
- $toolbar: null,
10
- $gpText: null,
11
- $imageDetection: null,
12
- $popupTriggerButton: null
13
- };
14
- let currentElement = $target;
15
- while(currentElement){
16
- // Check for stop conditions
17
- if (currentElement.matches('[data-uid="ROOT"], .builder, #storefront')) {
18
- break;
19
- }
20
- // Check if currentElement matches any of the selectors
21
- for (const [key, selector] of Object.entries(selectors)){
22
- if (!closestElements[key] && currentElement.matches(selector)) {
23
- closestElements[key] = currentElement;
24
- }
25
- }
26
- // If all closest elements are found, break the loop
27
- if (Object.values(closestElements).every((el)=>el !== null)) {
28
- break;
29
- }
30
- // Move up to the parent element
31
- currentElement = currentElement.parentElement;
32
- }
33
- // Reset ram
34
- currentElement = null;
35
- // Return
36
- return closestElements;
37
- };
38
-
39
- export { findDOMClosest };
1
+ let findDOMClosest=(l,e)=>{let t={$childrenSlot:null,$productFeatureImg:null,$section:null,$component:null,$disableIframeClick:null,$stickyMinimize:null,$toolbar:null,$gpText:null,$imageDetection:null,$popupTriggerButton:null},n=l;for(;n&&!n.matches('[data-uid="ROOT"], .builder, #storefront');){for(let[l,u]of Object.entries(e))!t[l]&&n.matches(u)&&(t[l]=n);if(Object.values(t).every(l=>null!==l))break;n=n.parentElement}return n=null,t};export{findDOMClosest};
@@ -1,18 +1 @@
1
- import { isOverToolbarPosition } from './isOverToolbarPosition.js';
2
- import { isSection } from './isSection.js';
3
- import { notVisible } from './notVisible.js';
4
-
5
- const findOverflowParent = (element, initEl)=>{
6
- const thisEl = element;
7
- const origEl = initEl || thisEl;
8
- if (!thisEl) return;
9
- if (isSection(thisEl)) return;
10
- if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
11
- if (thisEl.parentElement) {
12
- return findOverflowParent(thisEl.parentElement, origEl);
13
- } else {
14
- return;
15
- }
16
- };
17
-
18
- export { findOverflowParent };
1
+ import{isOverToolbarPosition as e}from"./isOverToolbarPosition.js";import{isSection as r}from"./isSection.js";import{notVisible as o}from"./notVisible.js";let findOverflowParent=(t,i)=>{let n=i||t;if(t&&!r(t))return o(t)&&e(i,t)?t:t.parentElement?findOverflowParent(t.parentElement,n):void 0};export{findOverflowParent};
@@ -1,16 +1 @@
1
- const getChildrenByAttrSelector = ($el, attrSelector)=>{
2
- const childLen = $el.children.length;
3
- if (childLen) {
4
- for(let i = 0; i < childLen; i++){
5
- const children = $el.children[i];
6
- if (children) {
7
- const is = children.getAttribute(attrSelector);
8
- if (is) {
9
- return children;
10
- }
11
- }
12
- }
13
- }
14
- };
15
-
16
- export { getChildrenByAttrSelector };
1
+ let getChildrenByAttrSelector=(e,t)=>{let r=e.children.length;if(r)for(let l=0;l<r;l++){let r=e.children[l];if(r){let e=r.getAttribute(t);if(e)return r}}};export{getChildrenByAttrSelector};