@gem-sdk/components 2.5.3-staging.6 → 2.5.4

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 (36) hide show
  1. package/dist/cjs/banner/components/hero-banner/index.liquid.js +2 -13
  2. package/dist/cjs/banner/setting/HeroBanner.js +6 -50
  3. package/dist/cjs/button/components/Button.liquid.js +2 -11
  4. package/dist/cjs/button/setting/Button.js +5 -112
  5. package/dist/cjs/grid/components/Row.js +2 -9
  6. package/dist/cjs/icon/components/Icon.liquid.js +2 -10
  7. package/dist/cjs/icon/setting/Icon.js +5 -69
  8. package/dist/cjs/image/components/Image.liquid.js +3 -12
  9. package/dist/cjs/image/setting/Image.js +16 -207
  10. package/dist/cjs/third-party/components/Trustoo.liquid.js +7 -24
  11. package/dist/cjs/third-party/setting/Trustoo.js +111 -4
  12. package/dist/esm/banner/components/hero-banner/index.liquid.js +2 -13
  13. package/dist/esm/banner/setting/HeroBanner.js +6 -50
  14. package/dist/esm/button/components/Button.liquid.js +2 -11
  15. package/dist/esm/button/setting/Button.js +5 -112
  16. package/dist/esm/grid/components/Row.js +3 -10
  17. package/dist/esm/icon/components/Icon.liquid.js +2 -10
  18. package/dist/esm/icon/setting/Icon.js +5 -69
  19. package/dist/esm/image/components/Image.liquid.js +3 -12
  20. package/dist/esm/image/setting/Image.js +16 -207
  21. package/dist/esm/third-party/components/Trustoo.liquid.js +7 -24
  22. package/dist/esm/third-party/setting/Trustoo.js +111 -4
  23. package/dist/types/index.d.ts +2 -26
  24. package/package.json +2 -2
  25. package/dist/cjs/banner/setting/presets/heroBanner1ColPreSalesPage.js +0 -134
  26. package/dist/cjs/banner/setting/presets/heroBannerContentLeftPreSalesPage.js +0 -154
  27. package/dist/cjs/banner/setting/presets/heroBannerContentRightPreSalesPage.js +0 -162
  28. package/dist/cjs/banner/setting/presets/heroBannerParallaxPreSalesPage.js +0 -134
  29. package/dist/cjs/banner/setting/presets/heroBannerVideoPreSalesPage.js +0 -130
  30. package/dist/cjs/constants.js +0 -5
  31. package/dist/esm/banner/setting/presets/heroBanner1ColPreSalesPage.js +0 -132
  32. package/dist/esm/banner/setting/presets/heroBannerContentLeftPreSalesPage.js +0 -152
  33. package/dist/esm/banner/setting/presets/heroBannerContentRightPreSalesPage.js +0 -160
  34. package/dist/esm/banner/setting/presets/heroBannerParallaxPreSalesPage.js +0 -132
  35. package/dist/esm/banner/setting/presets/heroBannerVideoPreSalesPage.js +0 -128
  36. package/dist/esm/constants.js +0 -3
@@ -31,17 +31,6 @@ const config = {
31
31
  target: '_self'
32
32
  }
33
33
  },
34
- {
35
- id: 'isGoToSalesPage',
36
- type: 'toggle',
37
- label: 'Go to Sales page',
38
- default: false
39
- },
40
- {
41
- id: 'linkedToPreSalesPageBanner',
42
- type: 'banner-pre-sales-page',
43
- default: false
44
- },
45
34
  {
46
35
  id: 'iconGroup',
47
36
  type: 'group',
@@ -499,37 +488,14 @@ const config = {
499
488
  ]
500
489
  },
501
490
  {
502
- type: 'group',
491
+ type: 'control',
503
492
  label: {
504
493
  en: 'Insert link'
505
494
  },
506
- controls: [
507
- {
508
- type: 'control',
509
- condition: 'pageType == "GP_PRE_SALE_PAGE"',
510
- setting: {
511
- id: 'linkedToPreSalesPageBanner'
512
- }
513
- },
514
- {
515
- type: 'control',
516
- condition: 'pageType == "GP_PRE_SALE_PAGE"',
517
- setting: {
518
- id: 'isGoToSalesPage'
519
- },
520
- label: {
521
- en: 'Go to Sales page'
522
- }
523
- },
524
- {
525
- type: 'control',
526
- condition: 'isGoToSalesPage === false || pageType != "GP_PRE_SALE_PAGE"',
527
- layout: 'vertical',
528
- setting: {
529
- id: 'btnLink'
530
- }
531
- }
532
- ]
495
+ layout: 'vertical',
496
+ setting: {
497
+ id: 'btnLink'
498
+ }
533
499
  },
534
500
  {
535
501
  type: 'group',
@@ -814,79 +780,6 @@ const config = {
814
780
  }
815
781
  }
816
782
  ]
817
- },
818
- {
819
- id: 'button-pre-sales-page',
820
- name: {
821
- en: 'Button'
822
- },
823
- icon: {
824
- desktop: `
825
- <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
826
- <rect width="96" height="48" rx="3" fill="#424242"/>
827
- <rect x="21.5" y="20" width="53" height="8" rx="4" fill="#757575"/>
828
- </svg>
829
- `
830
- },
831
- components: [
832
- {
833
- tag: 'Button',
834
- advanced: {
835
- 'spacing-setting': {
836
- desktop: {
837
- margin: {
838
- bottom: 'var(--g-s-l)'
839
- }
840
- }
841
- },
842
- editorData: {
843
- cssPlaceholder: 'button.{{rootClassName}} {\n\n}'
844
- }
845
- },
846
- settings: {
847
- isGoToSalesPage: true
848
- }
849
- }
850
- ]
851
- },
852
- {
853
- id: 'button-icon-pre-sales-page',
854
- name: {
855
- en: 'Button'
856
- },
857
- icon: {
858
- desktop: `
859
- <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
860
- <rect width="96" height="48" rx="3" fill="#424242"/>
861
- <path d="M23.6415 17.8126C23.7882 17.5153 24.2121 17.5153 24.3589 17.8126L26.1255 21.3922C26.1838 21.5102 26.2964 21.5921 26.4267 21.611L30.377 22.185C30.7051 22.2327 30.8361 22.6359 30.5987 22.8673L27.7402 25.6536C27.6459 25.7455 27.6029 25.8779 27.6252 26.0077L28.3 29.9421C28.356 30.2688 28.0131 30.518 27.7196 30.3638L24.1863 28.5062C24.0698 28.4449 23.9306 28.4449 23.814 28.5062L20.2807 30.3637C19.9873 30.518 19.6443 30.2688 19.7004 29.9421L20.3752 26.0077C20.3974 25.8779 20.3544 25.7455 20.2601 25.6536L17.4016 22.8673C17.1642 22.6359 17.2952 22.2327 17.6233 22.185L21.5737 21.611C21.7039 21.5921 21.8166 21.5102 21.8748 21.3922L23.6415 17.8126Z" fill="#F9F9F9"/>
862
- <rect x="40" y="20" width="40" height="8" rx="4" fill="#757575"/>
863
- </svg>
864
- `
865
- },
866
- components: [
867
- {
868
- tag: 'Button',
869
- settings: {
870
- iconVisible: true,
871
- iconAlign: 'left',
872
- iconSvg: '<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" viewBox="0 0 512 512" fill="currentColor"> <path fill="currentColor" strokeLinecap="round" strokeLinejoin="round" fill="currentColor" d="M115.584 494.176c-12.352 6.336 -26.368 -4.768 -23.872 -18.944l26.56 -151.36L5.536 216.48c-10.528 -10.048 -5.056 -28.416 9.056 -30.4l156.736 -22.272L241.216 25.344c6.304 -12.48 23.36 -12.48 29.664 0l69.888 138.464 156.736 22.272c14.112 1.984 19.584 20.352 9.024 30.4l-112.704 107.392 26.56 151.36c2.496 14.176 -11.52 25.28 -23.872 18.944L256 421.984l-140.448 72.192z" /></svg>',
873
- isGoToSalesPage: true,
874
- enableBtnLink: true
875
- },
876
- advanced: {
877
- 'spacing-setting': {
878
- desktop: {
879
- margin: {
880
- bottom: 0
881
- }
882
- }
883
- },
884
- editorData: {
885
- cssPlaceholder: 'button.{{rootClassName}} {\n\n}'
886
- }
887
- }
888
- }
889
- ]
890
783
  }
891
784
  ],
892
785
  rootOverride: {
@@ -1,6 +1,6 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { useState, useMemo, Children, isValidElement, createElement } from 'react';
3
- import { useEditorMode, usePageType, useCurrentDevice, isEmptyChildren, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
3
+ import { useEditorMode, useCurrentDevice, isEmptyChildren, usePageType, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
4
4
  import Head from 'next/head';
5
5
  import { useInView } from '../../intersection-observer/useInView.js';
6
6
  import { createStyleObject } from './helpers.js';
@@ -9,7 +9,6 @@ import ChildrenDroppable from './ChildrenDroppable.js';
9
9
  const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
10
10
  const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
11
11
  const mode = useEditorMode();
12
- const pageType = usePageType();
13
12
  //=== START lazyload section ====
14
13
  const [cacheHeightOutViewport, setCacheHeightOutViewport] = useState(500);
15
14
  const [ref, inView] = useInView({
@@ -26,13 +25,6 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
26
25
  }
27
26
  }
28
27
  });
29
- const isDisplaySection = useMemo(()=>{
30
- return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
31
- }, [
32
- inView,
33
- mode,
34
- pageType
35
- ]);
36
28
  //=== END lazyload section ====
37
29
  const childHasChildren = useMemo(()=>{
38
30
  return builderProps?.builderData?.childrens?.length;
@@ -47,6 +39,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
47
39
  children
48
40
  ]);
49
41
  const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
42
+ const pageType = usePageType();
50
43
  const styleObject = createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
51
44
  desktop: false,
52
45
  tablet: false,
@@ -122,7 +115,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
122
115
  className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
123
116
  'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
124
117
  }),
125
- children: isDisplaySection ? /*#__PURE__*/ jsx(Fragment, {
118
+ children: inView || mode !== 'edit' ? /*#__PURE__*/ jsx(Fragment, {
126
119
  children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : Children.map(children, (el)=>{
127
120
  if (/*#__PURE__*/ isValidElement(el)) return /*#__PURE__*/ createElement(el.type, {
128
121
  ...el.props,
@@ -1,18 +1,10 @@
1
1
  import { makeGlobalSizeIcon, template, makeStyleResponsive, cls, handleConvertClassColor, getGlobalColorStateClass, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, composeRadius, getGlobalColorStateStyle, RenderIf, makeStyle } from '@gem-sdk/core';
2
2
  import { getInsertLinkData } from '../../helpers.js';
3
- import { HREF_TO_SALES_PAGE } from '../../constants.js';
4
3
 
5
4
  const Icon = ({ className, style, builderAttrs, builderProps, setting = {}, styles, advanced })=>{
6
- const { iconSvg, iconLink, isGoToSalesPage } = setting;
5
+ const { iconSvg, iconLink } = setting;
7
6
  const { bgColor, color, iconBorder, align, iconRotate, spin, iconRounded, globalSize } = styles ?? {};
8
- let { Wrap: WrapLink, urlData } = getInsertLinkData('div', iconLink);
9
- if (isGoToSalesPage) {
10
- WrapLink = 'a';
11
- urlData = {
12
- href: HREF_TO_SALES_PAGE,
13
- target: '_self'
14
- };
15
- }
7
+ const { Wrap: WrapLink, urlData } = getInsertLinkData('div', iconLink);
16
8
  const composeGlobalSize = makeGlobalSizeIcon(globalSize);
17
9
  const setRotateIcon = ()=>{
18
10
  if (spin) return 0;
@@ -19,17 +19,6 @@ const config = {
19
19
  default: `<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414815326568808">
20
20
  <path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg>`
21
21
  },
22
- {
23
- id: 'isGoToSalesPage',
24
- type: 'toggle',
25
- label: 'Go to Sales page',
26
- default: false
27
- },
28
- {
29
- id: 'linkedToPreSalesPageBanner',
30
- type: 'banner-pre-sales-page',
31
- default: false
32
- },
33
22
  {
34
23
  id: 'iconLink',
35
24
  type: 'pick-link',
@@ -241,37 +230,14 @@ const config = {
241
230
  ]
242
231
  },
243
232
  {
244
- type: 'group',
233
+ type: 'control',
245
234
  label: {
246
235
  en: 'Insert link'
247
236
  },
248
- controls: [
249
- {
250
- type: 'control',
251
- condition: 'pageType == "GP_PRE_SALE_PAGE"',
252
- setting: {
253
- id: 'linkedToPreSalesPageBanner'
254
- }
255
- },
256
- {
257
- type: 'control',
258
- condition: 'pageType == "GP_PRE_SALE_PAGE"',
259
- setting: {
260
- id: 'isGoToSalesPage'
261
- },
262
- label: {
263
- en: 'Go to Sales page'
264
- }
265
- },
266
- {
267
- type: 'control',
268
- condition: 'isGoToSalesPage === false || pageType != "GP_PRE_SALE_PAGE"',
269
- layout: 'vertical',
270
- setting: {
271
- id: 'iconLink'
272
- }
273
- }
274
- ]
237
+ layout: 'vertical',
238
+ setting: {
239
+ id: 'iconLink'
240
+ }
275
241
  },
276
242
  {
277
243
  type: 'group',
@@ -376,36 +342,6 @@ const config = {
376
342
  }
377
343
  }
378
344
  ]
379
- },
380
- {
381
- id: 'icon-pre-sales-page',
382
- name: {
383
- en: 'Icon'
384
- },
385
- icon: {
386
- desktop: `
387
- <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
388
- <path d="M47.283 7.62515C47.5764 7.03055 48.4243 7.03055 48.7177 7.62515L52.251 14.7844C52.3676 15.0205 52.5928 15.1842 52.8534 15.222L60.7541 16.3701C61.4102 16.4654 61.6722 17.2718 61.1974 17.7346L55.4804 23.3073C55.2919 23.4911 55.2059 23.7559 55.2504 24.0154L56.6 31.8842C56.7121 32.5377 56.0261 33.0361 55.4392 32.7275L48.3726 29.0124C48.1396 28.8899 47.8611 28.8898 47.6281 29.0124L40.5615 32.7275C39.9746 33.0361 39.2886 32.5377 39.4007 31.8842L40.7503 24.0154C40.7948 23.7559 40.7088 23.4911 40.5202 23.3073L34.8033 17.7346C34.3284 17.2718 34.5904 16.4654 35.2466 16.3701L43.1473 15.222C43.4079 15.1842 43.6331 15.0205 43.7497 14.7844L47.283 7.62515Z" fill="#D6D6D6"/>
389
- </svg>
390
- `
391
- },
392
- components: [
393
- {
394
- tag: 'Icon',
395
- advanced: {
396
- 'spacing-setting': {
397
- desktop: {
398
- margin: {
399
- bottom: 0
400
- }
401
- }
402
- }
403
- },
404
- settings: {
405
- isGoToSalesPage: true
406
- }
407
- }
408
- ]
409
345
  }
410
346
  ],
411
347
  rootOverride: {
@@ -2,20 +2,11 @@ import { makeStyleResponsive, getWidthByShapeGlobalSize, getHeightByShapeGlobalS
2
2
  import AdaptiveImage from './AdaptiveImage.liquid.js';
3
3
  import NextImage from './NextImage.liquid.js';
4
4
  import { getInsertLinkData } from '../../helpers.js';
5
- import { HREF_TO_SALES_PAGE } from '../../constants.js';
6
5
 
7
6
  const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
8
- const { imageLink, isNotLazyload, isGoToSalesPage } = setting ?? {};
9
- let { Wrap: WrapLink, urlData, shouldRenderLink } = getInsertLinkData('div', imageLink);
10
- if (isGoToSalesPage) {
11
- WrapLink = 'a';
12
- urlData = {
13
- href: HREF_TO_SALES_PAGE,
14
- target: '_self'
15
- };
16
- shouldRenderLink = true;
17
- }
7
+ const { imageLink, isNotLazyload } = setting ?? {};
18
8
  const { shape } = styles ?? {};
9
+ const { Wrap: WrapLink, urlData } = getInsertLinkData('div', imageLink);
19
10
  const overwriteDefaultRadius = (cornerRadius)=>{
20
11
  const radius = {
21
12
  ...cornerRadius
@@ -47,7 +38,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
47
38
  >
48
39
  <${WrapLink}
49
40
  class="pointer-events-auto h-full gp-flex"
50
- ${shouldRenderLink ? {
41
+ ${imageLink?.link ? {
51
42
  ...urlData,
52
43
  title: setting?.title
53
44
  } : {}}
@@ -60,17 +60,6 @@ const config = {
60
60
  target: '_self'
61
61
  }
62
62
  },
63
- {
64
- id: 'isGoToSalesPage',
65
- type: 'toggle',
66
- label: 'Go to Sales page',
67
- default: false
68
- },
69
- {
70
- id: 'linkedToPreSalesPageBanner',
71
- type: 'banner-pre-sales-page',
72
- default: false
73
- },
74
63
  {
75
64
  id: 'seo',
76
65
  type: 'group',
@@ -401,37 +390,14 @@ const config = {
401
390
  ]
402
391
  },
403
392
  {
404
- type: 'group',
393
+ type: 'control',
405
394
  label: {
406
395
  en: 'Insert link'
407
396
  },
408
- controls: [
409
- {
410
- type: 'control',
411
- condition: 'pageType == "GP_PRE_SALE_PAGE"',
412
- setting: {
413
- id: 'linkedToPreSalesPageBanner'
414
- }
415
- },
416
- {
417
- type: 'control',
418
- condition: 'pageType == "GP_PRE_SALE_PAGE"',
419
- setting: {
420
- id: 'isGoToSalesPage'
421
- },
422
- label: {
423
- en: 'Go to Sales page'
424
- }
425
- },
426
- {
427
- type: 'control',
428
- condition: 'isGoToSalesPage === false || pageType != "GP_PRE_SALE_PAGE"',
429
- layout: 'vertical',
430
- setting: {
431
- id: 'imageLink'
432
- }
433
- }
434
- ]
397
+ setting: {
398
+ id: 'imageLink'
399
+ },
400
+ layout: 'vertical'
435
401
  },
436
402
  {
437
403
  type: 'group',
@@ -637,19 +603,19 @@ const config = {
637
603
  }
638
604
  },
639
605
  borderRadius: {
640
- btrr: '999999px',
641
- bblr: '999999px',
642
- bbrr: '999999px',
643
- btlr: '999999px',
644
- radiusType: 'custom'
606
+ btrr: "999999px",
607
+ bblr: "999999px",
608
+ bbrr: "999999px",
609
+ btlr: "999999px",
610
+ radiusType: "custom"
645
611
  },
646
612
  wrapperBorder: {
647
- borderType: 'none',
648
- border: 'none',
649
- width: '1px 1px 1px 1px',
650
- position: 'all',
651
- borderWidth: '1px',
652
- color: '#000000',
613
+ borderType: "none",
614
+ border: "none",
615
+ width: "1px 1px 1px 1px",
616
+ position: "all",
617
+ borderWidth: "1px",
618
+ color: "#000000",
653
619
  isCustom: true
654
620
  }
655
621
  },
@@ -667,163 +633,6 @@ const config = {
667
633
  }
668
634
  }
669
635
  ]
670
- },
671
- {
672
- id: 'image-pre-sales-page',
673
- name: {
674
- en: 'Image'
675
- },
676
- icon: {
677
- desktop: `
678
- <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
679
- <rect width="96" height="48" rx="3" fill="#424242"/>
680
- <circle cx="37" cy="17" r="3" fill="#D6D6D6"/>
681
- <path d="M32.42 30.9518L37.1407 25.1338C37.3005 24.9364 37.498 24.7768 37.7203 24.6653C37.9427 24.5538 38.1848 24.4929 38.431 24.4866C38.6772 24.4803 38.9218 24.5287 39.149 24.6287C39.3762 24.7288 39.5809 24.8781 39.7496 25.0671L41.957 27.5361L50.5857 16.6629C50.7546 16.4499 50.967 16.2797 51.2069 16.165C51.4469 16.0503 51.7083 15.9941 51.9718 16.0005C52.2352 16.0069 52.4939 16.0758 52.7285 16.202C52.9632 16.3283 53.1679 16.5086 53.3273 16.7297L63.6435 31.0236C63.8408 31.2976 63.9615 31.6242 63.9922 31.9666C64.0229 32.3089 63.9623 32.6535 63.8173 32.9616C63.6723 33.2697 63.4485 33.529 63.1712 33.7105C62.8939 33.8919 62.5741 33.9883 62.2476 33.9887L33.7537 34C33.4185 33.9999 33.0904 33.8986 32.8082 33.7082C32.526 33.5177 32.3014 33.2461 32.1611 32.9255C32.0208 32.6048 31.9706 32.2485 32.0165 31.8988C32.0624 31.549 32.2024 31.2204 32.42 30.9518Z" fill="#D6D6D6"/>
682
- </svg>
683
- `
684
- },
685
- components: [
686
- {
687
- tag: 'Image',
688
- advanced: {
689
- 'spacing-setting': {
690
- desktop: {
691
- margin: {
692
- bottom: 'var(--g-s-l)'
693
- }
694
- }
695
- },
696
- editorData: {
697
- cssPlaceholder: '.{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}'
698
- }
699
- },
700
- settings: {
701
- isGoToSalesPage: true
702
- }
703
- }
704
- ],
705
- flowTagComponents: {
706
- Marquee: [
707
- {
708
- tag: 'Image',
709
- styles: {
710
- shape: {
711
- desktop: {
712
- width: 'auto',
713
- height: 'auto'
714
- }
715
- },
716
- enableBorder: 'none'
717
- },
718
- advanced: {
719
- 'spacing-setting': {
720
- desktop: {
721
- margin: {
722
- bottom: 'var(--g-s-l)'
723
- }
724
- }
725
- },
726
- editorData: {
727
- rootClassName: '{{rootClassName}}',
728
- css: '.{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}'
729
- }
730
- },
731
- settings: {
732
- isNotLazyload: true
733
- }
734
- }
735
- ]
736
- }
737
- },
738
- {
739
- id: 'image-circle-pre-sales-page',
740
- name: {
741
- en: 'Image'
742
- },
743
- icon: {
744
- desktop: `
745
- <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
746
- <rect x="2" y="2" width="52" height="52" rx="26" fill="#424242"/>
747
- <ellipse cx="20.4375" cy="22.9688" rx="2.0625" ry="1.96875" fill="#F9F9F9"/>
748
- <path d="M17.2887 32.9997L20.5342 29.1816C20.6441 29.052 20.7799 28.9473 20.9327 28.8741C21.0856 28.8009 21.2521 28.761 21.4213 28.7568C21.5905 28.7527 21.7587 28.7845 21.915 28.8501C22.0712 28.9158 22.2118 29.0138 22.3278 29.1378L23.8454 30.758L29.7777 23.6225C29.8938 23.4827 30.0398 23.371 30.2048 23.2958C30.3697 23.2205 30.5495 23.1836 30.7306 23.1878C30.9117 23.192 31.0895 23.2372 31.2509 23.3201C31.4122 23.4029 31.5529 23.5213 31.6625 23.6663L38.7549 33.0467C38.8905 33.2266 38.9735 33.4409 38.9947 33.6656C39.0158 33.8902 38.9741 34.1164 38.8744 34.3186C38.7747 34.5207 38.6209 34.6909 38.4302 34.81C38.2396 34.9291 38.0197 34.9923 37.7952 34.9926L18.2057 35C17.9753 34.9999 17.7497 34.9334 17.5557 34.8085C17.3616 34.6835 17.2072 34.5053 17.1108 34.2948C17.0143 34.0844 16.9798 33.8506 17.0113 33.6211C17.0429 33.3915 17.1391 33.1759 17.2887 32.9997Z" fill="#F9F9F9"/>
749
- </svg>
750
- `
751
- },
752
- components: [
753
- {
754
- tag: 'Image',
755
- settings: {
756
- imageStyle: 'circle',
757
- isGoToSalesPage: true
758
- },
759
- styles: {
760
- shape: {
761
- desktop: {
762
- shape: 'square',
763
- shapeValue: '1/1',
764
- width: '80px',
765
- shapeLinked: true
766
- }
767
- },
768
- borderRadius: {
769
- btrr: '999999px',
770
- bblr: '999999px',
771
- bbrr: '999999px',
772
- btlr: '999999px',
773
- radiusType: 'custom'
774
- },
775
- wrapperBorder: {
776
- borderType: 'none',
777
- border: 'none',
778
- width: '1px 1px 1px 1px',
779
- position: 'all',
780
- borderWidth: '1px',
781
- color: '#000000',
782
- isCustom: true
783
- }
784
- },
785
- advanced: {
786
- 'spacing-setting': {
787
- desktop: {
788
- margin: {
789
- bottom: 'var(--g-s-l)'
790
- }
791
- }
792
- },
793
- editorData: {
794
- cssplaceholder: '.{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}'
795
- }
796
- }
797
- }
798
- ],
799
- rootOverride: {
800
- styles: {
801
- shape: {
802
- desktop: {
803
- shape: 'square',
804
- shapeValue: '1/1',
805
- width: '80px',
806
- shapeLinked: true
807
- }
808
- },
809
- borderRadius: {
810
- btrr: '999999px',
811
- bblr: '999999px',
812
- bbrr: '999999px',
813
- btlr: '999999px',
814
- radiusType: 'custom'
815
- }
816
- },
817
- advanced: {
818
- 'spacing-setting': {
819
- desktop: {
820
- margin: {
821
- bottom: 0
822
- }
823
- }
824
- }
825
- }
826
- }
827
636
  }
828
637
  ],
829
638
  rootOverride: {
@@ -4,17 +4,13 @@ import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
4
4
 
5
5
  const Trustoo = ({ setting, advanced })=>{
6
6
  const { widgetType, align, version, appBlockId } = setting ?? {};
7
- const widgetTypeMap = {
8
- 'review-widget': '<div class="custom-vstar-review-widget" style="width:100%"></div>',
9
- 'star-rating-widget': '<div class="custom-vstar-rating-widget" data-product-id="{{product.id}}"></div>',
10
- 'text-carousel': '<div id="trustoo-text-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
11
- 'barrage-carousel': '<div id="trustoo-barrage-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
12
- 'card-carousel': '<div id="trustoo-card-carousel-widget" style="display:block;max-width:1200px;margin:0 auto"></div>',
13
- 'photo-carousel': '<div id="trustoo-photo-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>'
14
- };
15
- const renderOldVersionTrustoo = ()=>{
16
- return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : template`
17
- <div>
7
+ return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : template`
8
+ <div
9
+ class="${advanced?.cssClass}"
10
+ style="${{
11
+ ...makeStyleResponsive('ta', align)
12
+ }}"
13
+ >
18
14
  {% if '${widgetType}' == 'starRatingInList' %}
19
15
  {% if request.page_type != 'product' %}
20
16
  <div class="custom-vstar-rating-widget" product-id="{{ product.id }}"></div>
@@ -37,19 +33,6 @@ const Trustoo = ({ setting, advanced })=>{
37
33
  {% endif %}
38
34
  </div>
39
35
  `;
40
- };
41
- return !!version ? renderOldVersionTrustoo() : template`
42
- <div
43
- class="${advanced?.cssClass}"
44
- style="${{
45
- ...makeStyleResponsive('ta', align)
46
- }}"
47
- >
48
- ${widgetType && widgetTypeMap?.[widgetType]}
49
- <script ${getSettingPreloadData('class="gps-link" delay', 'src')}="https://cdn.vstar.app/static/dist/js/swiper-reviews.min.js" defer="defer"></script>
50
- <link ${getSettingPreloadData('class="gps-link" delay', 'href')}="https://cdn.vstar.app/static/css/swiper-reviews.min.css" rel="stylesheet" type="text/css" media="all">
51
- </div>
52
- `;
53
36
  };
54
37
 
55
38
  export { Trustoo as default };