@gem-sdk/components 2.5.6 → 2.6.0-staging.13

package/dist/cjs/banner/setting/presets/heroBannerParallaxPreSalesPage.js

@@ -0,0 +1,134 @@
+'use strict';
+
+const heroBannerParallaxPreSalesPage = {
+    id: 'hero-banner-parallax-pre-sales-page',
+    name: {
+        en: 'Hero Banner Parallax'
+    },
+    icon: {
+        desktop: `
+      <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_21157_36120)">
+<rect width="96" height="48" rx="3" fill="#424242"/>
+<ellipse cx="5" cy="24.5" rx="11" ry="11.5" fill="#5E5E5E"/>
+<path d="M-4.39892 61.8234L13.5988 40.4906C14.2081 39.767 14.9611 39.1816 15.8088 38.7727C16.6564 38.3638 17.5796 38.1406 18.5181 38.1175C19.4566 38.0944 20.3894 38.272 21.2556 38.6387C22.1219 39.0055 22.902 39.5531 23.5453 40.2459L31.9609 49.2989L64.858 9.43075C65.502 8.64956 66.3116 8.02551 67.2264 7.60499C68.1413 7.18447 69.138 6.9783 70.1423 7.00181C71.1467 7.02532 72.1329 7.2779 73.0276 7.74078C73.9223 8.20366 74.7026 8.86493 75.3103 9.67543L114.641 62.0866C115.393 63.0913 115.853 64.2887 115.97 65.5441C116.087 66.7994 115.856 68.063 115.303 69.1926C114.751 70.3222 113.897 71.2732 112.84 71.9384C111.783 72.6037 110.564 72.957 109.319 72.9585L0.685989 73C-0.591779 72.9995 -1.84266 72.6281 -2.91866 71.9299C-3.99467 71.2317 -4.85077 70.2358 -5.38568 69.06C-5.92059 67.8843 -6.11193 66.5779 -5.93706 65.2955C-5.76219 64.0131 -5.22843 62.8082 -4.39892 61.8234Z" fill="#5E5E5E"/>
+<rect x="36" y="21" width="22" height="6" rx="3" fill="#F9F9F9"/>
+</g>
+<defs>
+<clipPath id="clip0_21157_36120">
+<rect width="96" height="48" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+    `
+    },
+    components: [
+        {
+            tag: 'HeroBanner',
+            settings: {
+                layout: {
+                    desktop: {
+                        cols: [
+                            12
+                        ],
+                        display: 'fill'
+                    }
+                },
+                enableParallax: true,
+                speedParallax: 0.6,
+                isGoToSalesPage: true
+            },
+            styles: {
+                contentWidth: {
+                    desktop: '1200px'
+                },
+                sizeSetting: {
+                    desktop: {
+                        shape: 'custom',
+                        widthHeightLinked: false,
+                        width: '100%',
+                        height: '600px'
+                    },
+                    mobile: {
+                        shape: 'custom',
+                        widthHeightLinked: false,
+                        width: '1200px',
+                        height: '600px'
+                    }
+                }
+            },
+            childrens: [
+                {
+                    tag: 'Col',
+                    childrens: [
+                        {
+                            tag: 'Heading',
+                            settings: {
+                                text: 'Click here to edit heading'
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Text',
+                            settings: {
+                                text: "This is your text block. Click to edit and make it your own. Share your product's story<br/>\
+                  or services offered. Get creative and make it yours!"
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Button',
+                            settings: {
+                                label: 'Get started'
+                            },
+                            styles: {
+                                align: {
+                                    desktop: 'center'
+                                }
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+};
+
+exports.heroBannerParallaxPreSalesPage = heroBannerParallaxPreSalesPage;

package/dist/cjs/banner/setting/presets/heroBannerVideoPreSalesPage.js

@@ -0,0 +1,130 @@
+'use strict';
+
+const heroBannerVideoPreSalesPage = {
+    id: 'hero-banner-video-pre-sales-page',
+    name: {
+        en: 'Video Banner'
+    },
+    icon: {
+        desktop: `
+    <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_12567_1327)">
+    <rect width="96" height="48" rx="3" fill="#424242"/>
+    <ellipse cx="4" cy="1.5" rx="11" ry="11.5" fill="#5E5E5E"/>
+    <path d="M25.6011 61.8234L43.5988 40.4906C44.2081 39.767 44.9611 39.1816 45.8088 38.7727C46.6564 38.3638 47.5796 38.1406 48.5181 38.1175C49.4566 38.0944 50.3894 38.272 51.2556 38.6387C52.1219 39.0055 52.902 39.5531 53.5453 40.2459L61.9609 49.2989L94.858 9.43075C95.502 8.64956 96.3116 8.02551 97.2264 7.60499C98.1413 7.18447 99.138 6.9783 100.142 7.00181C101.147 7.02532 102.133 7.2779 103.028 7.74078C103.922 8.20366 104.703 8.86493 105.31 9.67543L144.641 62.0866C145.393 63.0913 145.853 64.2887 145.97 65.5441C146.087 66.7994 145.856 68.063 145.303 69.1926C144.751 70.3222 143.897 71.2732 142.84 71.9384C141.783 72.6037 140.564 72.957 139.319 72.9585L30.686 73C29.4082 72.9995 28.1573 72.6281 27.0813 71.9299C26.0053 71.2317 25.1492 70.2358 24.6143 69.06C24.0794 67.8843 23.8881 66.5779 24.0629 65.2955C24.2378 64.0131 24.7716 62.8082 25.6011 61.8234Z" fill="#5E5E5E"/>
+    <path d="M40 28.4163V14.3838C40 13.2662 41.3774 12.6113 42.3799 13.2521L53.3549 20.2684C54.215 20.8183 54.215 21.9818 53.3549 22.5317L42.3799 29.5479C41.3774 30.1888 40 29.5338 40 28.4163Z" fill="#F9F9F9"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_12567_1327">
+    <rect width="96" height="48" rx="3" fill="white"/>
+    </clipPath>
+    </defs>
+    </svg>
+    `
+    },
+    components: [
+        {
+            tag: 'HeroBanner',
+            settings: {
+                layout: {
+                    desktop: {
+                        cols: [
+                            12
+                        ],
+                        display: 'fill'
+                    }
+                },
+                isGoToSalesPage: true
+            },
+            styles: {
+                contentWidth: {
+                    desktop: '1200px'
+                },
+                background: {
+                    desktop: {
+                        type: 'video',
+                        image: {
+                            src: '',
+                            width: 1920,
+                            height: 900
+                        },
+                        videoType: 'html5',
+                        video: 'https://youtu.be/KOxfzBp72uk',
+                        videoHtml5: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
+                    }
+                }
+            },
+            childrens: [
+                {
+                    tag: 'Col',
+                    childrens: [
+                        {
+                            tag: 'Heading',
+                            settings: {
+                                text: 'Click here to edit heading'
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Text',
+                            settings: {
+                                text: "This is your text block. Click to edit and make it your own. Share your product's story<br/>\
+                  or services offered. Get creative and make it yours!"
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Button',
+                            settings: {
+                                label: 'Get started'
+                            },
+                            styles: {
+                                align: {
+                                    desktop: 'center'
+                                }
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+};
+
+exports.heroBannerVideoPreSalesPage = heroBannerVideoPreSalesPage;

package/dist/cjs/button/components/Button.liquid.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
+var constants = require('../../constants.js');
 
 const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = true })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
-    const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
+    const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true, isGoToSalesPage } = setting;
     const [wrapStyle, restStyle] = core.splitStyle([
         'pos',
         'top',
@@ -16,7 +17,15 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
         'right',
         'z'
     ], style);
-    const { Wrap, urlData, shouldRenderLink } = helpers.getInsertLinkData('button', btnLink, htmlType);
+    let { Wrap, urlData, shouldRenderLink } = helpers.getInsertLinkData('button', btnLink, htmlType);
+    if (isGoToSalesPage) {
+        Wrap = 'a';
+        urlData = {
+            href: constants.HREF_TO_SALES_PAGE,
+            target: '_self'
+        };
+        shouldRenderLink = true;
+    }
     const spacingDefault = {
         desktop: '8px'
     };

package/dist/cjs/button/setting/Button.js

@@ -35,6 +35,17 @@ const config = {
                         target: '_self'
                     }
                 },
+                {
+                    id: 'isGoToSalesPage',
+                    type: 'toggle',
+                    label: 'Go to Sales page',
+                    default: false
+                },
+                {
+                    id: 'linkedToPreSalesPageBanner',
+                    type: 'banner-pre-sales-page',
+                    default: false
+                },
                 {
                     id: 'iconGroup',
                     type: 'group',
@@ -492,14 +503,37 @@ const config = {
             ]
         },
         {
-            type: 'control',
+            type: 'group',
             label: {
                 en: 'Insert link'
             },
-            layout: 'vertical',
-            setting: {
-                id: 'btnLink'
-            }
+            controls: [
+                {
+                    type: 'control',
+                    condition: 'pageType == "GP_PRE_SALE_PAGE"',
+                    setting: {
+                        id: 'linkedToPreSalesPageBanner'
+                    }
+                },
+                {
+                    type: 'control',
+                    condition: 'pageType == "GP_PRE_SALE_PAGE"',
+                    setting: {
+                        id: 'isGoToSalesPage'
+                    },
+                    label: {
+                        en: 'Go to Sales page'
+                    }
+                },
+                {
+                    type: 'control',
+                    condition: 'isGoToSalesPage === false || pageType != "GP_PRE_SALE_PAGE"',
+                    layout: 'vertical',
+                    setting: {
+                        id: 'btnLink'
+                    }
+                }
+            ]
         },
         {
             type: 'group',
@@ -784,6 +818,79 @@ const config = {
                     }
                 }
             ]
+        },
+        {
+            id: 'button-pre-sales-page',
+            name: {
+                en: 'Button'
+            },
+            icon: {
+                desktop: `
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="96" height="48" rx="3" fill="#424242"/>
+          <rect x="21.5" y="20" width="53" height="8" rx="4" fill="#757575"/>
+          </svg>
+        `
+            },
+            components: [
+                {
+                    tag: 'Button',
+                    advanced: {
+                        'spacing-setting': {
+                            desktop: {
+                                margin: {
+                                    bottom: 'var(--g-s-l)'
+                                }
+                            }
+                        },
+                        editorData: {
+                            cssPlaceholder: 'button.{{rootClassName}} {\n\n}'
+                        }
+                    },
+                    settings: {
+                        isGoToSalesPage: true
+                    }
+                }
+            ]
+        },
+        {
+            id: 'button-icon-pre-sales-page',
+            name: {
+                en: 'Button'
+            },
+            icon: {
+                desktop: `
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="96" height="48" rx="3" fill="#424242"/>
+          <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"/>
+          <rect x="40" y="20" width="40" height="8" rx="4" fill="#757575"/>
+          </svg>
+        `
+            },
+            components: [
+                {
+                    tag: 'Button',
+                    settings: {
+                        iconVisible: true,
+                        iconAlign: 'left',
+                        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>',
+                        isGoToSalesPage: true,
+                        enableBtnLink: true
+                    },
+                    advanced: {
+                        'spacing-setting': {
+                            desktop: {
+                                margin: {
+                                    bottom: 0
+                                }
+                            }
+                        },
+                        editorData: {
+                            cssPlaceholder: 'button.{{rootClassName}} {\n\n}'
+                        }
+                    }
+                }
+            ]
         }
     ],
     rootOverride: {

package/dist/cjs/carousel/components/CarouselItem.js

@@ -71,7 +71,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         onClick: onClickItem,
         "aria-hidden": true,
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "gp-w-full",
+            className: "gp-w-full gp-h-full",
             style: {
                 ...itemShadowStyle
             },

package/dist/cjs/carousel/components/CarouselItem.liquid.js

@@ -82,7 +82,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       data-index="${index}"
     >
       <div
-        class="gp-w-full",
+        class="gp-w-full gp-h-full",
         style="${{
         ...itemShadowStyle
     }}"

package/dist/cjs/constants.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const HREF_TO_SALES_PAGE = '{{ page.metafields.sales_funnel.sales_page_url }}';
+
+exports.HREF_TO_SALES_PAGE = HREF_TO_SALES_PAGE;

package/dist/cjs/grid/components/Row.js

@@ -50,7 +50,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         childHasChildren,
         children
     ]);
-    const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, columnGap, height } = styles ?? {};
     const styleObject = helpers.createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
         desktop: false,
         tablet: false,
@@ -69,7 +69,8 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             ...isSection ? restStyle : style,
             ...core.makeStyleResponsive('cg', verticalGutter),
             ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
-            ...core.makeStyleResponsive('w', styleObject.content)
+            ...core.makeStyleResponsive('w', styleObject.content),
+            ...core.makeStyleResponsive('h', height)
         };
         if (pageType === 'POST_PURCHASE') {
             result = {
@@ -123,7 +124,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         "data-id": builderProps?.uidInteraction ?? builderProps?.uid,
         ref: ref,
         style: getStyles(),
-        className: core.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 ', {
+        className: core.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 gp-grid-rows-[1fr]', {
             'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
         children: isDisplaySection ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {

package/dist/cjs/grid/components/Row.liquid.js

@@ -8,7 +8,7 @@ var helpers = require('../../helpers.js');
 
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, rawChildren, advanced, ...props })=>{
     const { isSection, horizontalAlign, verticalAlign, order, layout, responsive } = setting ?? {};
-    const { fullWidth, width, verticalGutter, background } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, height } = styles ?? {};
     const styleObject = helpers$1.createStyleObject(width, fullWidth);
     const [wrapStyle, restStyle] = core.splitStyle([
         'pos',
@@ -31,6 +31,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ...core.makeStyleResponsive('pc', horizontalAlign),
         ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
         ...core.makeStyleResponsive('w', styleObject.content),
+        ...core.makeStyleResponsive('h', height),
         ...core.getStyleBackgroundByDevice(background, {
             liquid: true
         }),

package/dist/cjs/grid/setting/Row.js

@@ -254,6 +254,27 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'height',
+                    type: 'segment',
+                    devices: {
+                        desktop: {
+                            default: 'auto'
+                        }
+                    },
+                    options: [
+                        {
+                            label: 'Full',
+                            value: '100%',
+                            tooltip: 'Stretch to fill <br> vertical space around'
+                        },
+                        {
+                            label: 'Fit',
+                            value: 'auto',
+                            tooltip: 'Auto-resize <br> based on content'
+                        }
+                    ]
+                },
                 {
                     id: 'verticalGutter',
                     type: 'input:unit-spacing',
@@ -408,6 +429,16 @@ const config = {
                     },
                     layout: 'horizontal'
                 },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'height'
+                    },
+                    label: {
+                        en: 'Height'
+                    },
+                    layout: 'horizontal'
+                },
                 {
                     type: 'control',
                     label: {

package/dist/cjs/icon/components/Icon.liquid.js

@@ -4,11 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
+var constants = require('../../constants.js');
 
 const Icon = ({ className, style, builderAttrs, builderProps, setting = {}, styles, advanced })=>{
-    const { iconSvg, iconLink } = setting;
+    const { iconSvg, iconLink, isGoToSalesPage } = setting;
     const { bgColor, color, iconBorder, align, iconRotate, spin, iconRounded, globalSize } = styles ?? {};
-    const { Wrap: WrapLink, urlData } = helpers.getInsertLinkData('div', iconLink);
+    let { Wrap: WrapLink, urlData } = helpers.getInsertLinkData('div', iconLink);
+    if (isGoToSalesPage) {
+        WrapLink = 'a';
+        urlData = {
+            href: constants.HREF_TO_SALES_PAGE,
+            target: '_self'
+        };
+    }
     const composeGlobalSize = core.makeGlobalSizeIcon(globalSize);
     const setRotateIcon = ()=>{
         if (spin) return 0;

package/dist/cjs/icon/setting/Icon.js

@@ -23,6 +23,17 @@ const config = {
                     default: `<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414815326568808">
           <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>`
                 },
+                {
+                    id: 'isGoToSalesPage',
+                    type: 'toggle',
+                    label: 'Go to Sales page',
+                    default: false
+                },
+                {
+                    id: 'linkedToPreSalesPageBanner',
+                    type: 'banner-pre-sales-page',
+                    default: false
+                },
                 {
                     id: 'iconLink',
                     type: 'pick-link',
@@ -234,14 +245,37 @@ const config = {
             ]
         },
         {
-            type: 'control',
+            type: 'group',
             label: {
                 en: 'Insert link'
             },
-            layout: 'vertical',
-            setting: {
-                id: 'iconLink'
-            }
+            controls: [
+                {
+                    type: 'control',
+                    condition: 'pageType == "GP_PRE_SALE_PAGE"',
+                    setting: {
+                        id: 'linkedToPreSalesPageBanner'
+                    }
+                },
+                {
+                    type: 'control',
+                    condition: 'pageType == "GP_PRE_SALE_PAGE"',
+                    setting: {
+                        id: 'isGoToSalesPage'
+                    },
+                    label: {
+                        en: 'Go to Sales page'
+                    }
+                },
+                {
+                    type: 'control',
+                    condition: 'isGoToSalesPage === false || pageType != "GP_PRE_SALE_PAGE"',
+                    layout: 'vertical',
+                    setting: {
+                        id: 'iconLink'
+                    }
+                }
+            ]
         },
         {
             type: 'group',
@@ -346,6 +380,36 @@ const config = {
                     }
                 }
             ]
+        },
+        {
+            id: 'icon-pre-sales-page',
+            name: {
+                en: 'Icon'
+            },
+            icon: {
+                desktop: `
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <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"/>
+          </svg>
+        `
+            },
+            components: [
+                {
+                    tag: 'Icon',
+                    advanced: {
+                        'spacing-setting': {
+                            desktop: {
+                                margin: {
+                                    bottom: 0
+                                }
+                            }
+                        }
+                    },
+                    settings: {
+                        isGoToSalesPage: true
+                    }
+                }
+            ]
         }
     ],
     rootOverride: {