@gem-sdk/pages 1.43.0 → 1.44.0-dev.123

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 (8) hide show
  1. package/dist/cjs/components/builder/Toolbar.js +54 -35
  2. package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +2 -2
  3. package/dist/cjs/pages/builder.js +6 -4
  4. package/dist/esm/components/builder/Toolbar.js +54 -35
  5. package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +2 -2
  6. package/dist/esm/pages/builder.js +6 -4
  7. package/dist/types/index.d.ts +1 -0
  8. package/package.json +5 -5
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -85,7 +85,7 @@ const Toolbar = ()=>{
85
85
  }
86
86
  }
87
87
  };
88
- const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
88
+ const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
89
89
  if (!$component && !componentUid) return;
90
90
  if (!$component) {
91
91
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -102,7 +102,7 @@ const Toolbar = ()=>{
102
102
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
103
103
  const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
104
104
  const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
105
- if (isThemeSection && $themeSectionStatus) {
105
+ if (isPreventSection && $themeSectionStatus) {
106
106
  $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
107
107
  }
108
108
  if ($toolbar) {
@@ -124,7 +124,7 @@ const Toolbar = ()=>{
124
124
  if (isParent) {
125
125
  $outline.setAttribute('data-outline-parent-hover', 'true');
126
126
  }
127
- if (isThemeSection) {
127
+ if (isPreventSection) {
128
128
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
129
129
  }
130
130
  if (focus) {
@@ -379,25 +379,29 @@ const Toolbar = ()=>{
379
379
  countShowOnboarding,
380
380
  onCloseOnboarding
381
381
  ]);
382
- const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
383
- if (!componentUid) return;
384
- let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`, timeAwait);
385
- // check element fetch data: product, product list
386
- if (!$component) {
387
- const isLoading = document.querySelector(`.gp-loading-placeholder`);
388
- if (!isLoading) {
389
- return;
390
- }
391
- if (isLoading) {
392
- // await element onload
393
- $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
394
- }
382
+ const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
383
+ if (marqueeKey) {
384
+ return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
395
385
  }
396
- if (!$component) {
397
- return;
386
+ if (articleId) {
387
+ return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
388
+ }
389
+ return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
390
+ };
391
+ const setActiveComponent = react.useCallback(async ({ componentUid, productId, articleId, timeAwait = 600, forceReActive, marqueeKey })=>{
392
+ if (!componentUid) return;
393
+ const selector = getSelectorComponent({
394
+ componentUid,
395
+ productId,
396
+ articleId,
397
+ marqueeKey
398
+ });
399
+ const $component = await waitForElementToExist(selector, timeAwait);
400
+ if (!$component) return;
401
+ if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
402
+ if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
403
+ removeActiveComponent();
398
404
  }
399
- if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
400
- if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
401
405
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
402
406
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
403
407
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -405,7 +409,9 @@ const Toolbar = ()=>{
405
409
  if ($toolbar) {
406
410
  currentComponentActive.current = {
407
411
  componentUid,
408
- productId
412
+ productId,
413
+ articleId,
414
+ marqueeKey
409
415
  };
410
416
  $toolbar.removeAttribute('style');
411
417
  $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -424,8 +430,9 @@ const Toolbar = ()=>{
424
430
  if ($btnAddBottom) {
425
431
  $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
426
432
  }
433
+ const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
427
434
  // Active same element in product list
428
- if (productId) {
435
+ if (productId || isChildOfMarquee || articleId) {
429
436
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
430
437
  if ($relatedElements?.length) {
431
438
  $relatedElements.forEach(($relatedElement)=>{
@@ -453,6 +460,7 @@ const Toolbar = ()=>{
453
460
  setActiveComponent({
454
461
  componentUid,
455
462
  productId,
463
+ articleId,
456
464
  timeAwait: 2000,
457
465
  forceReActive: true
458
466
  });
@@ -517,7 +525,7 @@ const Toolbar = ()=>{
517
525
  if (!value) {
518
526
  return;
519
527
  }
520
- const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
528
+ const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : currentComponentActive.current?.articleId ? `[data-article-id="${currentComponentActive.current?.articleId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
521
529
  if ($component) {
522
530
  const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
523
531
  if ($parents.length) {
@@ -555,18 +563,27 @@ const Toolbar = ()=>{
555
563
  const isElementInsideProduct = async ()=>{
556
564
  const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
557
565
  const $product = $component?.closest('[data-product-id]');
558
- const productId = $product?.getAttribute('data-product-id') || '';
559
- return productId ? true : false;
566
+ return !!($product?.getAttribute('data-product-id') || '');
567
+ };
568
+ const isElementInsideArticle = async ()=>{
569
+ const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
570
+ const $article = $component?.closest('[data-article-id]');
571
+ return !!($article?.getAttribute('data-article-id') || '');
560
572
  };
561
573
  let productId = '';
574
+ let articleId = '';
562
575
  if (await isElementInsideProduct()) {
563
576
  productId = currentComponentActive.current?.productId || '';
564
577
  }
578
+ if (await isElementInsideArticle()) {
579
+ articleId = currentComponentActive.current?.articleId || '';
580
+ }
565
581
  const event = new CustomEvent('editor:toolbar:force-active-component', {
566
582
  bubbles: true,
567
583
  detail: {
568
584
  componentUid: uid,
569
- productId: productId
585
+ productId,
586
+ articleId
570
587
  }
571
588
  });
572
589
  outHover($parent);
@@ -632,23 +649,23 @@ const Toolbar = ()=>{
632
649
  }
633
650
  }
634
651
  }
635
- const $themeSection = $target.closest('[data-theme-section]');
636
- if ($themeSection) {
652
+ const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
653
+ if ($preventSection) {
637
654
  setHoverComponent({
638
- $component: $themeSection,
655
+ $component: $preventSection,
639
656
  focus: true,
640
- isThemeSection: true
657
+ isPreventSection: true
641
658
  });
642
659
  } else {
643
660
  return;
644
661
  }
645
662
  }
646
- const $themeSection = $target.closest('[data-theme-section]');
647
- if ($themeSection) {
663
+ const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
664
+ if ($preventSection) {
648
665
  setHoverComponent({
649
- $component: $themeSection,
666
+ $component: $preventSection,
650
667
  focus: true,
651
- isThemeSection: true
668
+ isPreventSection: true
652
669
  });
653
670
  } else {
654
671
  setHoverComponent({
@@ -675,7 +692,9 @@ const Toolbar = ()=>{
675
692
  if (detail?.componentUid) {
676
693
  setActiveComponent({
677
694
  componentUid: detail.componentUid,
678
- productId: detail.productId
695
+ productId: detail.productId,
696
+ articleId: detail.articleId,
697
+ marqueeKey: detail.marqueeKey
679
698
  });
680
699
  } else {
681
700
  removeActiveComponent();
package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js CHANGED
@@ -89,12 +89,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
89
89
  }),
90
90
  ACTIONS_DATA.map((action)=>{
91
91
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
92
- className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
92
+ className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
93
93
  id: action.id,
94
94
  "aria-hidden": true,
95
95
  children: [
96
96
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
97
- className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
97
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121] mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
98
98
  children: [
99
99
  action.title,
100
100
  action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
package/dist/cjs/pages/builder.js CHANGED
@@ -15,7 +15,7 @@ var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionI
15
15
  var Toolbar = require('../components/builder/Toolbar.js');
16
16
  var SwitchView = require('../components/builder/SwitchView.js');
17
17
 
18
- const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName })=>{
18
+ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
19
19
  const [loadSuccess, setLoadSuccess] = react.useState(false);
20
20
  const isDisableHeaderFooter = ()=>{
21
21
  return isThemeSectionEditor;
@@ -71,10 +71,11 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
71
71
  className: "builder gp-z-1 gp-relative",
72
72
  children: [
73
73
  !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsxRuntime.jsx("div", {
74
- className: "gp-h-[40px] bg-[#f4f4f4]",
74
+ className: "gp-h-[40px] gp-bg-[#f4f4f4]",
75
75
  children: /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {})
76
76
  }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
77
- pageType: pageType
77
+ pageType: pageType,
78
+ isOriginTemplate: isOriginTemplate
78
79
  })),
79
80
  /*#__PURE__*/ jsxRuntime.jsx("div", {
80
81
  id: "storefront",
@@ -97,7 +98,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
97
98
  id: "visual-content"
98
99
  }),
99
100
  !isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {
100
- pageType: pageType
101
+ pageType: pageType,
102
+ isOriginTemplate: isOriginTemplate
101
103
  })
102
104
  ]
103
105
  })
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -81,7 +81,7 @@ const Toolbar = ()=>{
81
81
  }
82
82
  }
83
83
  };
84
- const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
84
+ const setHoverComponent = useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
85
85
  if (!$component && !componentUid) return;
86
86
  if (!$component) {
87
87
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -98,7 +98,7 @@ const Toolbar = ()=>{
98
98
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
99
99
  const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
100
100
  const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
101
- if (isThemeSection && $themeSectionStatus) {
101
+ if (isPreventSection && $themeSectionStatus) {
102
102
  $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
103
103
  }
104
104
  if ($toolbar) {
@@ -120,7 +120,7 @@ const Toolbar = ()=>{
120
120
  if (isParent) {
121
121
  $outline.setAttribute('data-outline-parent-hover', 'true');
122
122
  }
123
- if (isThemeSection) {
123
+ if (isPreventSection) {
124
124
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
125
125
  }
126
126
  if (focus) {
@@ -375,25 +375,29 @@ const Toolbar = ()=>{
375
375
  countShowOnboarding,
376
376
  onCloseOnboarding
377
377
  ]);
378
- const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
379
- if (!componentUid) return;
380
- let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`, timeAwait);
381
- // check element fetch data: product, product list
382
- if (!$component) {
383
- const isLoading = document.querySelector(`.gp-loading-placeholder`);
384
- if (!isLoading) {
385
- return;
386
- }
387
- if (isLoading) {
388
- // await element onload
389
- $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
390
- }
378
+ const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
379
+ if (marqueeKey) {
380
+ return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
391
381
  }
392
- if (!$component) {
393
- return;
382
+ if (articleId) {
383
+ return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
384
+ }
385
+ return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
386
+ };
387
+ const setActiveComponent = useCallback(async ({ componentUid, productId, articleId, timeAwait = 600, forceReActive, marqueeKey })=>{
388
+ if (!componentUid) return;
389
+ const selector = getSelectorComponent({
390
+ componentUid,
391
+ productId,
392
+ articleId,
393
+ marqueeKey
394
+ });
395
+ const $component = await waitForElementToExist(selector, timeAwait);
396
+ if (!$component) return;
397
+ if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
398
+ if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
399
+ removeActiveComponent();
394
400
  }
395
- if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
396
- if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
397
401
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
398
402
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
399
403
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -401,7 +405,9 @@ const Toolbar = ()=>{
401
405
  if ($toolbar) {
402
406
  currentComponentActive.current = {
403
407
  componentUid,
404
- productId
408
+ productId,
409
+ articleId,
410
+ marqueeKey
405
411
  };
406
412
  $toolbar.removeAttribute('style');
407
413
  $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -420,8 +426,9 @@ const Toolbar = ()=>{
420
426
  if ($btnAddBottom) {
421
427
  $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
422
428
  }
429
+ const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
423
430
  // Active same element in product list
424
- if (productId) {
431
+ if (productId || isChildOfMarquee || articleId) {
425
432
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
426
433
  if ($relatedElements?.length) {
427
434
  $relatedElements.forEach(($relatedElement)=>{
@@ -449,6 +456,7 @@ const Toolbar = ()=>{
449
456
  setActiveComponent({
450
457
  componentUid,
451
458
  productId,
459
+ articleId,
452
460
  timeAwait: 2000,
453
461
  forceReActive: true
454
462
  });
@@ -513,7 +521,7 @@ const Toolbar = ()=>{
513
521
  if (!value) {
514
522
  return;
515
523
  }
516
- const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
524
+ const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : currentComponentActive.current?.articleId ? `[data-article-id="${currentComponentActive.current?.articleId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
517
525
  if ($component) {
518
526
  const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
519
527
  if ($parents.length) {
@@ -551,18 +559,27 @@ const Toolbar = ()=>{
551
559
  const isElementInsideProduct = async ()=>{
552
560
  const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
553
561
  const $product = $component?.closest('[data-product-id]');
554
- const productId = $product?.getAttribute('data-product-id') || '';
555
- return productId ? true : false;
562
+ return !!($product?.getAttribute('data-product-id') || '');
563
+ };
564
+ const isElementInsideArticle = async ()=>{
565
+ const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
566
+ const $article = $component?.closest('[data-article-id]');
567
+ return !!($article?.getAttribute('data-article-id') || '');
556
568
  };
557
569
  let productId = '';
570
+ let articleId = '';
558
571
  if (await isElementInsideProduct()) {
559
572
  productId = currentComponentActive.current?.productId || '';
560
573
  }
574
+ if (await isElementInsideArticle()) {
575
+ articleId = currentComponentActive.current?.articleId || '';
576
+ }
561
577
  const event = new CustomEvent('editor:toolbar:force-active-component', {
562
578
  bubbles: true,
563
579
  detail: {
564
580
  componentUid: uid,
565
- productId: productId
581
+ productId,
582
+ articleId
566
583
  }
567
584
  });
568
585
  outHover($parent);
@@ -628,23 +645,23 @@ const Toolbar = ()=>{
628
645
  }
629
646
  }
630
647
  }
631
- const $themeSection = $target.closest('[data-theme-section]');
632
- if ($themeSection) {
648
+ const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
649
+ if ($preventSection) {
633
650
  setHoverComponent({
634
- $component: $themeSection,
651
+ $component: $preventSection,
635
652
  focus: true,
636
- isThemeSection: true
653
+ isPreventSection: true
637
654
  });
638
655
  } else {
639
656
  return;
640
657
  }
641
658
  }
642
- const $themeSection = $target.closest('[data-theme-section]');
643
- if ($themeSection) {
659
+ const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
660
+ if ($preventSection) {
644
661
  setHoverComponent({
645
- $component: $themeSection,
662
+ $component: $preventSection,
646
663
  focus: true,
647
- isThemeSection: true
664
+ isPreventSection: true
648
665
  });
649
666
  } else {
650
667
  setHoverComponent({
@@ -671,7 +688,9 @@ const Toolbar = ()=>{
671
688
  if (detail?.componentUid) {
672
689
  setActiveComponent({
673
690
  componentUid: detail.componentUid,
674
- productId: detail.productId
691
+ productId: detail.productId,
692
+ articleId: detail.articleId,
693
+ marqueeKey: detail.marqueeKey
675
694
  });
676
695
  } else {
677
696
  removeActiveComponent();
package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js CHANGED
@@ -85,12 +85,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
85
85
  }),
86
86
  ACTIONS_DATA.map((action)=>{
87
87
  return /*#__PURE__*/ jsxs("div", {
88
- className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
88
+ className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
89
89
  id: action.id,
90
90
  "aria-hidden": true,
91
91
  children: [
92
92
  /*#__PURE__*/ jsxs("div", {
93
- className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
93
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121] mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
94
94
  children: [
95
95
  action.title,
96
96
  action.hasAILogo && /*#__PURE__*/ jsxs("svg", {
package/dist/esm/pages/builder.js CHANGED
@@ -13,7 +13,7 @@ import AddSectionImageToLayout from '../components/image-to-layout/AddSectionIma
13
13
  import Toolbar from '../components/builder/Toolbar.js';
14
14
  import Devices from '../components/builder/SwitchView.js';
15
15
 
16
- const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName })=>{
16
+ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
17
17
  const [loadSuccess, setLoadSuccess] = useState(false);
18
18
  const isDisableHeaderFooter = ()=>{
19
19
  return isThemeSectionEditor;
@@ -69,10 +69,11 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
69
69
  className: "builder gp-z-1 gp-relative",
70
70
  children: [
71
71
  !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsx("div", {
72
- className: "gp-h-[40px] bg-[#f4f4f4]",
72
+ className: "gp-h-[40px] gp-bg-[#f4f4f4]",
73
73
  children: /*#__PURE__*/ jsx(Devices, {})
74
74
  }) : /*#__PURE__*/ jsx(Header, {
75
- pageType: pageType
75
+ pageType: pageType,
76
+ isOriginTemplate: isOriginTemplate
76
77
  })),
77
78
  /*#__PURE__*/ jsx("div", {
78
79
  id: "storefront",
@@ -95,7 +96,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
95
96
  id: "visual-content"
96
97
  }),
97
98
  !isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsx(Footer, {
98
- pageType: pageType
99
+ pageType: pageType,
100
+ isOriginTemplate: isOriginTemplate
99
101
  })
100
102
  ]
101
103
  })
package/dist/types/index.d.ts CHANGED
@@ -177,6 +177,7 @@ type BuilderPageProps = {
177
177
  isThemeSectionEditor?: boolean;
178
178
  hiddenToolbar?: boolean;
179
179
  pageName: string;
180
+ isOriginTemplate?: boolean;
180
181
  };
181
182
  declare const BuilderPage: React.FC<BuilderPageProps>;
182
183
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.43.0",
3
+ "version": "1.44.0-dev.123",
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.43.0",
30
- "@gem-sdk/plugin-cookie-bar": "1.40.0",
31
- "@gem-sdk/plugin-quick-view": "1.40.0",
32
- "@gem-sdk/plugin-sticky-add-to-cart": "1.40.0"
29
+ "@gem-sdk/core": "1.44.0-dev.123",
30
+ "@gem-sdk/plugin-cookie-bar": "1.44.0-dev.123",
31
+ "@gem-sdk/plugin-quick-view": "1.44.0-dev.123",
32
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.44.0-dev.123"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "next": ">=13"