@gem-sdk/pages 1.57.0-staging.0 → 1.57.0-staging.12

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 (11) hide show
  1. package/dist/cjs/components/builder/Header.js +0 -1
  2. package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js +2 -2
  3. package/dist/cjs/components/builder/Toolbar.js +21 -42
  4. package/dist/cjs/components/builder/toolbar/const.js +0 -4
  5. package/dist/cjs/components/builder/toolbar/utils/waitForElementToExist.js +2 -2
  6. package/dist/esm/components/builder/Header.js +0 -1
  7. package/dist/esm/components/builder/InteractionSelectOnPageHeader.js +2 -2
  8. package/dist/esm/components/builder/Toolbar.js +22 -43
  9. package/dist/esm/components/builder/toolbar/const.js +1 -4
  10. package/dist/esm/components/builder/toolbar/utils/waitForElementToExist.js +2 -2
  11. package/package.json +5 -5
package/dist/cjs/components/builder/Header.js CHANGED
@@ -25,7 +25,6 @@ const Header = (props)=>{
25
25
  const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
26
26
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
27
27
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
28
- console.log('isSelectOnPage', isSelectOnPage);
29
28
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
30
29
  children: [
31
30
  /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),
package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -86,7 +86,7 @@ const InteractionSelectOnPageHeader = ()=>{
86
86
  className: "gp-grow",
87
87
  children: title
88
88
  }),
89
- /*#__PURE__*/ jsxRuntime.jsx("div", {
89
+ settingType === 'TRIGGER' && /*#__PURE__*/ jsxRuntime.jsx("div", {
90
90
  className: "gp-w-[21px]",
91
91
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
92
92
  width: "16",
@@ -104,7 +104,7 @@ const InteractionSelectOnPageHeader = ()=>{
104
104
  })
105
105
  ]
106
106
  }),
107
- openDropdown && /*#__PURE__*/ jsxRuntime.jsxs("div", {
107
+ openDropdown && settingType === 'TRIGGER' && /*#__PURE__*/ jsxRuntime.jsxs("div", {
108
108
  ref: popupRef,
109
109
  className: "gp-p-2 gp-flex gp-flex-col gp-absolute gp-top-[calc(100%_+_4px)] gp-w-[280px] gp-bg-[#151515] gp-rounded-xl gp-text-white",
110
110
  children: [
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -259,32 +259,6 @@ const Toolbar = ()=>{
259
259
  setFocusTextEditor(false);
260
260
  if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
261
261
  }, []);
262
- const watchComponentReRender = ($el, callback)=>{
263
- // editor:component:render
264
- const onComponentReRender = (e)=>{
265
- const detail = e.detail;
266
- if (detail?.componentUid == currentComponentActive.current?.componentUid) {
267
- callback();
268
- }
269
- };
270
- window.removeEventListener('editor:component:render', onComponentReRender);
271
- window.addEventListener('editor:component:render', onComponentReRender);
272
- const componentTag = $el.getAttribute('data-component-tag');
273
- // hotfix cho sale funnel release, nhưng cần tìm solution cho phần này
274
- if (componentTag && !_const.COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(componentTag)) {
275
- const $images = $el.querySelectorAll('img');
276
- if ($images?.length) {
277
- $images.forEach(($img)=>{
278
- $img.addEventListener('load', ()=>{
279
- callback();
280
- });
281
- });
282
- }
283
- }
284
- stopWatchReRenderComponent.current = ()=>{
285
- window.removeEventListener('editor:component:render', onComponentReRender);
286
- };
287
- };
288
262
  const setActiveComponentSpacing = react.useCallback(({ $component })=>{
289
263
  if (!$component) return;
290
264
  const style = getComputedStyle($component);
@@ -375,16 +349,6 @@ const Toolbar = ()=>{
375
349
  $component
376
350
  });
377
351
  removeHoverComponent();
378
- // Reactive when component re-render
379
- watchComponentReRender($component, ()=>{
380
- setActiveComponent({
381
- componentUid,
382
- productId,
383
- articleId,
384
- timeAwait: 2000,
385
- forceReActive: true
386
- });
387
- });
388
352
  }, [
389
353
  removeActiveComponent,
390
354
  removeHoverComponent,
@@ -404,9 +368,10 @@ const Toolbar = ()=>{
404
368
  }
405
369
  } else {
406
370
  if (currentComponentActive.current?.componentUid) {
407
- const componentUid = currentComponentActive.current?.componentUid;
408
- const productId = currentComponentActive.current?.productId;
409
- const $component = await waitForElementToExist.waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
371
+ const selector = getSelectorComponent({
372
+ ...currentComponentActive.current
373
+ });
374
+ const $component = await waitForElementToExist.waitForElementToExist(selector, 500);
410
375
  if ($component) {
411
376
  const $toolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar');
412
377
  const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-outline');
@@ -442,10 +407,13 @@ const Toolbar = ()=>{
442
407
  }
443
408
  }, []);
444
409
  const setShowParents = async ({ value })=>{
445
- if (!value) {
410
+ if (!value || !currentComponentActive.current) {
446
411
  return;
447
412
  }
448
- const $component = await waitForElementToExist.waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
413
+ const selector = getSelectorComponent({
414
+ ...currentComponentActive.current
415
+ });
416
+ const $component = await waitForElementToExist.waitForElementToExist(selector, 500);
449
417
  if ($component) {
450
418
  const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
451
419
  if ($parents.length) {
@@ -685,6 +653,14 @@ const Toolbar = ()=>{
685
653
  }, [
686
654
  isDragging
687
655
  ]);
656
+ const onComponentReRender = (e)=>{
657
+ const detail = e.detail;
658
+ if (currentComponentActive.current?.componentUid && detail?.componentUid == currentComponentActive.current?.componentUid) {
659
+ setActiveComponent({
660
+ ...currentComponentActive.current
661
+ });
662
+ }
663
+ };
688
664
  /* Register event */ react.useEffect(()=>{
689
665
  document.addEventListener('mousemove', onMouseMove);
690
666
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -694,6 +670,7 @@ const Toolbar = ()=>{
694
670
  window.addEventListener('editor:toolbar:show-parents', onShowParents);
695
671
  window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
696
672
  window.addEventListener('editor:hover-component', onHoverComponent);
673
+ window.addEventListener('editor:component:render', onComponentReRender);
697
674
  return ()=>{
698
675
  document.removeEventListener('mousemove', onMouseMove);
699
676
  window.removeEventListener('editor:active-component', onActiveComponent);
@@ -703,6 +680,7 @@ const Toolbar = ()=>{
703
680
  window.removeEventListener('editor:toolbar:show-parents', onShowParents);
704
681
  window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
705
682
  window.removeEventListener('editor:hover-component', onHoverComponent);
683
+ window.removeEventListener('editor:component:render', onComponentReRender);
706
684
  };
707
685
  }, [
708
686
  onMouseMove,
@@ -712,7 +690,8 @@ const Toolbar = ()=>{
712
690
  onIsEditingTextEditor,
713
691
  onShowParents,
714
692
  onResizeSpacing,
715
- onHoverComponent
693
+ onHoverComponent,
694
+ onComponentReRender
716
695
  ]);
717
696
  return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
718
697
  };
package/dist/cjs/components/builder/toolbar/const.js CHANGED
@@ -2,10 +2,6 @@
2
2
 
3
3
  const TOOLBAR_HOVER_HEIGHT = 24;
4
4
  const TOOLBAR_ACTIVE_HEIGHT = 32;
5
- const COMPONENTS_TAG_NOT_LOAD_IMAGES = [
6
- 'PostPurchaseProductImages'
7
- ];
8
5
 
9
- exports.COMPONENTS_TAG_NOT_LOAD_IMAGES = COMPONENTS_TAG_NOT_LOAD_IMAGES;
10
6
  exports.TOOLBAR_ACTIVE_HEIGHT = TOOLBAR_ACTIVE_HEIGHT;
11
7
  exports.TOOLBAR_HOVER_HEIGHT = TOOLBAR_HOVER_HEIGHT;
package/dist/cjs/components/builder/toolbar/utils/waitForElementToExist.js CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  const waitForElementToExist = (selector, timeout = 200)=>{
4
4
  return new Promise((resolve)=>{
5
- let intervalID;
6
- let timeoutID;
5
+ let intervalID = null;
6
+ let timeoutID = null;
7
7
  const findEl = ()=>{
8
8
  const el = document.body.querySelector('#storefront')?.querySelector(selector);
9
9
  if (el) {
package/dist/esm/components/builder/Header.js CHANGED
@@ -21,7 +21,6 @@ const Header = (props)=>{
21
21
  const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
22
22
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
23
23
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
24
- console.log('isSelectOnPage', isSelectOnPage);
25
24
  return /*#__PURE__*/ jsxs(Fragment, {
26
25
  children: [
27
26
  /*#__PURE__*/ jsx(Devices, {}),
package/dist/esm/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -82,7 +82,7 @@ const InteractionSelectOnPageHeader = ()=>{
82
82
  className: "gp-grow",
83
83
  children: title
84
84
  }),
85
- /*#__PURE__*/ jsx("div", {
85
+ settingType === 'TRIGGER' && /*#__PURE__*/ jsx("div", {
86
86
  className: "gp-w-[21px]",
87
87
  children: /*#__PURE__*/ jsx("svg", {
88
88
  width: "16",
@@ -100,7 +100,7 @@ const InteractionSelectOnPageHeader = ()=>{
100
100
  })
101
101
  ]
102
102
  }),
103
- openDropdown && /*#__PURE__*/ jsxs("div", {
103
+ openDropdown && settingType === 'TRIGGER' && /*#__PURE__*/ jsxs("div", {
104
104
  ref: popupRef,
105
105
  className: "gp-p-2 gp-flex gp-flex-col gp-absolute gp-top-[calc(100%_+_4px)] gp-w-[280px] gp-bg-[#151515] gp-rounded-xl gp-text-white",
106
106
  children: [
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { memo, useRef, useCallback, useEffect } from 'react';
3
3
  import { getDOMElementParents } from './toolbar/utils/getDOMElementParents.js';
4
- import { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT, COMPONENTS_TAG_NOT_LOAD_IMAGES } from './toolbar/const.js';
4
+ import { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT } from './toolbar/const.js';
5
5
  import { getChildrenByAttrSelector } from './toolbar/utils/getChildrenByAttrSelector.js';
6
6
  import { findOverflowParent } from './toolbar/utils/findOverflowParent.js';
7
7
  import { waitForElementToExist } from './toolbar/utils/waitForElementToExist.js';
@@ -255,32 +255,6 @@ const Toolbar = ()=>{
255
255
  setFocusTextEditor(false);
256
256
  if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
257
257
  }, []);
258
- const watchComponentReRender = ($el, callback)=>{
259
- // editor:component:render
260
- const onComponentReRender = (e)=>{
261
- const detail = e.detail;
262
- if (detail?.componentUid == currentComponentActive.current?.componentUid) {
263
- callback();
264
- }
265
- };
266
- window.removeEventListener('editor:component:render', onComponentReRender);
267
- window.addEventListener('editor:component:render', onComponentReRender);
268
- const componentTag = $el.getAttribute('data-component-tag');
269
- // hotfix cho sale funnel release, nhưng cần tìm solution cho phần này
270
- if (componentTag && !COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(componentTag)) {
271
- const $images = $el.querySelectorAll('img');
272
- if ($images?.length) {
273
- $images.forEach(($img)=>{
274
- $img.addEventListener('load', ()=>{
275
- callback();
276
- });
277
- });
278
- }
279
- }
280
- stopWatchReRenderComponent.current = ()=>{
281
- window.removeEventListener('editor:component:render', onComponentReRender);
282
- };
283
- };
284
258
  const setActiveComponentSpacing = useCallback(({ $component })=>{
285
259
  if (!$component) return;
286
260
  const style = getComputedStyle($component);
@@ -371,16 +345,6 @@ const Toolbar = ()=>{
371
345
  $component
372
346
  });
373
347
  removeHoverComponent();
374
- // Reactive when component re-render
375
- watchComponentReRender($component, ()=>{
376
- setActiveComponent({
377
- componentUid,
378
- productId,
379
- articleId,
380
- timeAwait: 2000,
381
- forceReActive: true
382
- });
383
- });
384
348
  }, [
385
349
  removeActiveComponent,
386
350
  removeHoverComponent,
@@ -400,9 +364,10 @@ const Toolbar = ()=>{
400
364
  }
401
365
  } else {
402
366
  if (currentComponentActive.current?.componentUid) {
403
- const componentUid = currentComponentActive.current?.componentUid;
404
- const productId = currentComponentActive.current?.productId;
405
- const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
367
+ const selector = getSelectorComponent({
368
+ ...currentComponentActive.current
369
+ });
370
+ const $component = await waitForElementToExist(selector, 500);
406
371
  if ($component) {
407
372
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
408
373
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
@@ -438,10 +403,13 @@ const Toolbar = ()=>{
438
403
  }
439
404
  }, []);
440
405
  const setShowParents = async ({ value })=>{
441
- if (!value) {
406
+ if (!value || !currentComponentActive.current) {
442
407
  return;
443
408
  }
444
- const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
409
+ const selector = getSelectorComponent({
410
+ ...currentComponentActive.current
411
+ });
412
+ const $component = await waitForElementToExist(selector, 500);
445
413
  if ($component) {
446
414
  const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
447
415
  if ($parents.length) {
@@ -681,6 +649,14 @@ const Toolbar = ()=>{
681
649
  }, [
682
650
  isDragging
683
651
  ]);
652
+ const onComponentReRender = (e)=>{
653
+ const detail = e.detail;
654
+ if (currentComponentActive.current?.componentUid && detail?.componentUid == currentComponentActive.current?.componentUid) {
655
+ setActiveComponent({
656
+ ...currentComponentActive.current
657
+ });
658
+ }
659
+ };
684
660
  /* Register event */ useEffect(()=>{
685
661
  document.addEventListener('mousemove', onMouseMove);
686
662
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -690,6 +666,7 @@ const Toolbar = ()=>{
690
666
  window.addEventListener('editor:toolbar:show-parents', onShowParents);
691
667
  window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
692
668
  window.addEventListener('editor:hover-component', onHoverComponent);
669
+ window.addEventListener('editor:component:render', onComponentReRender);
693
670
  return ()=>{
694
671
  document.removeEventListener('mousemove', onMouseMove);
695
672
  window.removeEventListener('editor:active-component', onActiveComponent);
@@ -699,6 +676,7 @@ const Toolbar = ()=>{
699
676
  window.removeEventListener('editor:toolbar:show-parents', onShowParents);
700
677
  window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
701
678
  window.removeEventListener('editor:hover-component', onHoverComponent);
679
+ window.removeEventListener('editor:component:render', onComponentReRender);
702
680
  };
703
681
  }, [
704
682
  onMouseMove,
@@ -708,7 +686,8 @@ const Toolbar = ()=>{
708
686
  onIsEditingTextEditor,
709
687
  onShowParents,
710
688
  onResizeSpacing,
711
- onHoverComponent
689
+ onHoverComponent,
690
+ onComponentReRender
712
691
  ]);
713
692
  return /*#__PURE__*/ jsx(Fragment, {});
714
693
  };
package/dist/esm/components/builder/toolbar/const.js CHANGED
@@ -1,7 +1,4 @@
1
1
  const TOOLBAR_HOVER_HEIGHT = 24;
2
2
  const TOOLBAR_ACTIVE_HEIGHT = 32;
3
- const COMPONENTS_TAG_NOT_LOAD_IMAGES = [
4
- 'PostPurchaseProductImages'
5
- ];
6
3
 
7
- export { COMPONENTS_TAG_NOT_LOAD_IMAGES, TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT };
4
+ export { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT };
package/dist/esm/components/builder/toolbar/utils/waitForElementToExist.js CHANGED
@@ -1,7 +1,7 @@
1
1
  const waitForElementToExist = (selector, timeout = 200)=>{
2
2
  return new Promise((resolve)=>{
3
- let intervalID;
4
- let timeoutID;
3
+ let intervalID = null;
4
+ let timeoutID = null;
5
5
  const findEl = ()=>{
6
6
  const el = document.body.querySelector('#storefront')?.querySelector(selector);
7
7
  if (el) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.57.0-staging.0",
3
+ "version": "1.57.0-staging.12",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
26
26
  "next": "latest"
27
27
  },
28
28
  "devDependencies": {
29
- "@gem-sdk/core": "1.57.0-staging.0",
30
- "@gem-sdk/plugin-cookie-bar": "1.57.0-staging.0",
31
- "@gem-sdk/plugin-quick-view": "1.57.0-staging.0",
32
- "@gem-sdk/plugin-sticky-add-to-cart": "1.57.0-staging.0"
29
+ "@gem-sdk/core": "1.57.0-staging.2",
30
+ "@gem-sdk/plugin-cookie-bar": "1.57.0-staging.2",
31
+ "@gem-sdk/plugin-quick-view": "1.57.0-staging.2",
32
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.57.0-staging.2"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "next": ">=13"