@gem-sdk/components 2.5.3-staging.5 → 2.5.3

package/dist/cjs/image/setting/Image.js

@@ -64,17 +64,6 @@ 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: 'seo',
                     type: 'group',
@@ -405,37 +394,14 @@ const config = {
             ]
         },
         {
-            type: 'group',
+            type: 'control',
             label: {
                 en: 'Insert link'
             },
-            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: 'imageLink'
-                    }
-                }
-            ]
+            setting: {
+                id: 'imageLink'
+            },
+            layout: 'vertical'
         },
         {
             type: 'group',
@@ -641,19 +607,19 @@ const config = {
                             }
                         },
                         borderRadius: {
-                            btrr: '999999px',
-                            bblr: '999999px',
-                            bbrr: '999999px',
-                            btlr: '999999px',
-                            radiusType: 'custom'
+                            btrr: "999999px",
+                            bblr: "999999px",
+                            bbrr: "999999px",
+                            btlr: "999999px",
+                            radiusType: "custom"
                         },
                         wrapperBorder: {
-                            borderType: 'none',
-                            border: 'none',
-                            width: '1px 1px 1px 1px',
-                            position: 'all',
-                            borderWidth: '1px',
-                            color: '#000000',
+                            borderType: "none",
+                            border: "none",
+                            width: "1px 1px 1px 1px",
+                            position: "all",
+                            borderWidth: "1px",
+                            color: "#000000",
                             isCustom: true
                         }
                     },
@@ -671,163 +637,6 @@ const config = {
                     }
                 }
             ]
-        },
-        {
-            id: 'image-pre-sales-page',
-            name: {
-                en: 'Image'
-            },
-            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"/>
-            <circle cx="37" cy="17" r="3" fill="#D6D6D6"/>
-            <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"/>
-            </svg>
-          `
-            },
-            components: [
-                {
-                    tag: 'Image',
-                    advanced: {
-                        'spacing-setting': {
-                            desktop: {
-                                margin: {
-                                    bottom: 'var(--g-s-l)'
-                                }
-                            }
-                        },
-                        editorData: {
-                            cssPlaceholder: '.{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}'
-                        }
-                    },
-                    settings: {
-                        isGoToSalesPage: true
-                    }
-                }
-            ],
-            flowTagComponents: {
-                Marquee: [
-                    {
-                        tag: 'Image',
-                        styles: {
-                            shape: {
-                                desktop: {
-                                    width: 'auto',
-                                    height: 'auto'
-                                }
-                            },
-                            enableBorder: 'none'
-                        },
-                        advanced: {
-                            'spacing-setting': {
-                                desktop: {
-                                    margin: {
-                                        bottom: 'var(--g-s-l)'
-                                    }
-                                }
-                            },
-                            editorData: {
-                                rootClassName: '{{rootClassName}}',
-                                css: '.{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}'
-                            }
-                        },
-                        settings: {
-                            isNotLazyload: true
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            id: 'image-circle-pre-sales-page',
-            name: {
-                en: 'Image'
-            },
-            icon: {
-                desktop: `
-          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect x="2" y="2" width="52" height="52" rx="26" fill="#424242"/>
-          <ellipse cx="20.4375" cy="22.9688" rx="2.0625" ry="1.96875" fill="#F9F9F9"/>
-          <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"/>
-          </svg>
-          `
-            },
-            components: [
-                {
-                    tag: 'Image',
-                    settings: {
-                        imageStyle: 'circle',
-                        isGoToSalesPage: true
-                    },
-                    styles: {
-                        shape: {
-                            desktop: {
-                                shape: 'square',
-                                shapeValue: '1/1',
-                                width: '80px',
-                                shapeLinked: true
-                            }
-                        },
-                        borderRadius: {
-                            btrr: '999999px',
-                            bblr: '999999px',
-                            bbrr: '999999px',
-                            btlr: '999999px',
-                            radiusType: 'custom'
-                        },
-                        wrapperBorder: {
-                            borderType: 'none',
-                            border: 'none',
-                            width: '1px 1px 1px 1px',
-                            position: 'all',
-                            borderWidth: '1px',
-                            color: '#000000',
-                            isCustom: true
-                        }
-                    },
-                    advanced: {
-                        'spacing-setting': {
-                            desktop: {
-                                margin: {
-                                    bottom: 'var(--g-s-l)'
-                                }
-                            }
-                        },
-                        editorData: {
-                            cssplaceholder: '.{{rootClassName}} {\n\n}\n.{{rootClassName}} > figure > img {\n\n}'
-                        }
-                    }
-                }
-            ],
-            rootOverride: {
-                styles: {
-                    shape: {
-                        desktop: {
-                            shape: 'square',
-                            shapeValue: '1/1',
-                            width: '80px',
-                            shapeLinked: true
-                        }
-                    },
-                    borderRadius: {
-                        btrr: '999999px',
-                        bblr: '999999px',
-                        bbrr: '999999px',
-                        btlr: '999999px',
-                        radiusType: 'custom'
-                    }
-                },
-                advanced: {
-                    'spacing-setting': {
-                        desktop: {
-                            margin: {
-                                bottom: 0
-                            }
-                        }
-                    }
-                }
-            }
         }
     ],
     rootOverride: {

package/dist/cjs/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js

@@ -123,12 +123,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
         return core.template`
     {% assign src = featureMedia.src %}
     ${hasHoverEffect && setting.hoverEffect == 'other' ? `
-      {% assign media_length = product.media | size %}
-      {% assign other_image_index = ${setting.otherImage} | plus: 0 %}
-      {% if other_image_index >= media_length %}
-        {% assign other_image_index = media_length | minus: 1 %}
-      {% endif %}
-      {% assign otherImage = product.media[other_image_index] %}
+      {% assign otherImage = product.media[${setting.otherImage}] %}
       {% assign src = otherImage.src %}
       {% if otherImage.media_type != 'image' %}
         {% assign src = otherImage.preview_image.src %}

package/dist/cjs/product/setting/product-image-v2/ProductFeatureImage.js

@@ -70,28 +70,23 @@ const productFeatureImageSetting = [
     {
         id: 'otherImage',
         label: 'Other image',
-        type: 'dropdown:input',
-        inputType: 'number',
-        useOnlyUnitInit: true,
-        hideUnit: true,
-        isReturnNumber: true,
-        isIndexValue: true,
-        displayOptions: [
+        type: 'select',
+        options: [
             {
                 label: 'Image 1',
-                value: 1
+                value: 0
             },
             {
                 label: 'Image 2',
-                value: 2
+                value: 1
             },
             {
                 label: 'Image 3',
-                value: 3
+                value: 2
             },
             {
                 label: 'Image 4',
-                value: 4
+                value: 3
             },
             {
                 label: 'Last image',

package/dist/cjs/third-party/components/Trustoo.liquid.js

@@ -8,17 +8,13 @@ var thirdParty = require('../helpers/thirdParty.js');
 
 const Trustoo = ({ setting, advanced })=>{
     const { widgetType, align, version, appBlockId } = setting ?? {};
-    const widgetTypeMap = {
-        'review-widget': '<div class="custom-vstar-review-widget" style="width:100%"></div>',
-        'star-rating-widget': '<div class="custom-vstar-rating-widget" data-product-id="{{product.id}}"></div>',
-        'text-carousel': '<div id="trustoo-text-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
-        'barrage-carousel': '<div id="trustoo-barrage-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
-        'card-carousel': '<div id="trustoo-card-carousel-widget" style="display:block;max-width:1200px;margin:0 auto"></div>',
-        'photo-carousel': '<div id="trustoo-photo-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>'
-    };
-    const renderOldVersionTrustoo = ()=>{
-        return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : core.template`
-    <div>
+    return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : core.template`
+    <div
+      class="${advanced?.cssClass}"
+      style="${{
+        ...core.makeStyleResponsive('ta', align)
+    }}"
+    >
       {% if '${widgetType}' == 'starRatingInList' %}
         {% if request.page_type != 'product' %}
           <div class="custom-vstar-rating-widget" product-id="{{ product.id }}"></div>
@@ -41,19 +37,6 @@ const Trustoo = ({ setting, advanced })=>{
       {% endif %}
     </div>
   `;
-    };
-    return !!version ? renderOldVersionTrustoo() : core.template`
-  <div
-    class="${advanced?.cssClass}"
-    style="${{
-        ...core.makeStyleResponsive('ta', align)
-    }}"
-  >
-    ${widgetType && widgetTypeMap?.[widgetType]}
-    <script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="https://cdn.vstar.app/static/dist/js/swiper-reviews.min.js" defer="defer"></script>
-    <link ${helpers.getSettingPreloadData('class="gps-link" delay', 'href')}="https://cdn.vstar.app/static/css/swiper-reviews.min.css" rel="stylesheet" type="text/css" media="all">
-  </div>
-  `;
 };
 
 exports.default = Trustoo;

package/dist/cjs/third-party/setting/Trustoo.js

@@ -65,11 +65,76 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/sealapps-product-review',
                     appName: Trustoo.default.label
                 },
+                {
+                    id: 'version',
+                    label: 'Choose version',
+                    type: 'select',
+                    default: 'v1',
+                    options: [
+                        {
+                            label: 'V1',
+                            value: 'v1'
+                        },
+                        {
+                            label: 'V2',
+                            value: 'v2'
+                        }
+                    ]
+                },
                 {
                     id: 'widgetType',
                     label: 'Choose widget',
                     type: 'select',
-                    default: 'star-rating-widget',
+                    default: 'starRating',
+                    options: [
+                        {
+                            label: 'Star Rating',
+                            value: 'starRating',
+                            hideOnPage: [
+                                'GP_ARTICLE',
+                                'GP_BLOG',
+                                'GP_COLLECTION',
+                                'GP_INDEX',
+                                'GP_STATIC'
+                            ],
+                            flowTag: [
+                                'Product'
+                            ],
+                            condition: 'or'
+                        },
+                        {
+                            label: 'Star Rating List',
+                            value: 'starRatingInList',
+                            hideOnPage: [
+                                'GP_ARTICLE',
+                                'GP_BLOG',
+                                'GP_COLLECTION',
+                                'GP_INDEX',
+                                'GP_STATIC'
+                            ],
+                            flowTag: [
+                                'ProductList'
+                            ],
+                            condition: 'or'
+                        },
+                        {
+                            label: 'Reviews',
+                            value: 'reviews',
+                            hideOnPage: [
+                                'GP_ARTICLE',
+                                'GP_BLOG',
+                                'GP_COLLECTION',
+                                'GP_INDEX',
+                                'GP_STATIC'
+                            ]
+                        }
+                    ]
+                },
+                {
+                    id: 'widgetTypeV2',
+                    label: 'Choose widget',
+                    type: 'select',
+                    default: 'barrage-carousel',
                     options: [
                         {
                             label: 'Testimonials',
@@ -85,11 +150,33 @@ const config = {
                         },
                         {
                             label: 'Review Widget',
-                            value: 'review-widget'
+                            value: 'review-widget',
+                            hideOnPage: [
+                                'ARTICLE',
+                                'BLOG',
+                                'COLLECTION',
+                                'GP_ARTICLE',
+                                'GP_BLOG',
+                                'GP_COLLECTION',
+                                'GP_INDEX',
+                                'GP_STATIC',
+                                'STATIC'
+                            ]
                         },
                         {
                             label: 'Star Rating Widget',
-                            value: 'star-rating-widget'
+                            value: 'star-rating-widget',
+                            hideOnPage: [
+                                'ARTICLE',
+                                'BLOG',
+                                'COLLECTION',
+                                'GP_ARTICLE',
+                                'GP_BLOG',
+                                'GP_COLLECTION',
+                                'GP_INDEX',
+                                'GP_STATIC',
+                                'STATIC'
+                            ]
                         },
                         {
                             label: 'Text Carousel',
@@ -139,6 +226,15 @@ const config = {
                 id: 'install'
             }
         },
+        {
+            type: 'control',
+            label: {
+                en: 'Choose version'
+            },
+            setting: {
+                id: 'version'
+            }
+        },
         {
             type: 'control',
             label: {
@@ -146,7 +242,18 @@ const config = {
             },
             setting: {
                 id: 'widgetType'
-            }
+            },
+            condition: 'version === "v1"'
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Choose widget'
+            },
+            setting: {
+                id: 'widgetTypeV2'
+            },
+            condition: 'version === "v2"'
         },
         {
             type: 'control',

package/dist/esm/banner/components/hero-banner/index.liquid.js

@@ -9,21 +9,9 @@ import useAspectRatioSettings from './hooks/useAspectRatioSettings.js';
 import NextImage from '../../../image/components/NextImage.liquid.js';
 import { getImageSrc, DEVICES } from '../../../image/helpers/getSrcSet.js';
 import { createBlurDataURL } from '../../../image/components/helpers.js';
-import { HREF_TO_SALES_PAGE } from '../../../constants.js';
 
 const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
-    const { link: rawLink, layout, verticalAlign, order, alignBanner, alt, title, isGoToSalesPage } = setting ?? {};
-    const link = isGoToSalesPage ? {
-        link: HREF_TO_SALES_PAGE,
-        target: '_self'
-    } : rawLink;
-    let { urlData } = getInsertLinkData('', link);
-    if (isGoToSalesPage) {
-        urlData = {
-            href: HREF_TO_SALES_PAGE,
-            target: '_self'
-        };
-    }
+    const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
     const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
     const enableParallax = setting?.enableParallax || false;
     const speedParallax = Number(setting?.speedParallax) || 0;
@@ -136,6 +124,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         }
         return;
     };
+    const { urlData } = getInsertLinkData('', link);
     const imagePlaceholder = {
         desktop: createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0),
         tablet: createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),

package/dist/esm/banner/setting/HeroBanner.js

@@ -1,13 +1,8 @@
 import { heroBanner1Col } from './presets/heroBanner1Col.js';
-import { heroBanner1ColPreSalesPage } from './presets/heroBanner1ColPreSalesPage.js';
 import { heroBannerContentLeft } from './presets/heroBannerContentLeft.js';
-import { heroBannerContentLeftPreSalesPage } from './presets/heroBannerContentLeftPreSalesPage.js';
 import { heroBannerContentRight } from './presets/heroBannerContentRight.js';
-import { heroBannerContentRightPreSalesPage } from './presets/heroBannerContentRightPreSalesPage.js';
 import { heroBannerVideo } from './presets/heroBannerVideo.js';
-import { heroBannerVideoPreSalesPage } from './presets/heroBannerVideoPreSalesPage.js';
 import { heroBannerParallax } from './presets/heroBannerParallax.js';
-import { heroBannerParallaxPreSalesPage } from './presets/heroBannerParallaxPreSalesPage.js';
 
 const config = {
     tag: 'HeroBanner',
@@ -197,17 +192,6 @@ const config = {
                     label: 'Preload',
                     default: false
                 },
-                {
-                    id: 'isGoToSalesPage',
-                    type: 'toggle',
-                    label: 'Go to Sales page',
-                    default: false
-                },
-                {
-                    id: 'linkedToPreSalesPageBanner',
-                    type: 'banner-pre-sales-page',
-                    default: false
-                },
                 {
                     id: 'link',
                     type: 'pick-link',
@@ -1082,37 +1066,14 @@ const config = {
             ]
         },
         {
-            type: 'group',
+            type: 'control',
             label: {
                 en: 'Link'
             },
-            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: 'link'
-                    }
-                }
-            ]
+            setting: {
+                id: 'link'
+            },
+            layout: 'vertical'
         },
         {
             type: 'group',
@@ -1392,15 +1353,10 @@ const config = {
     ],
     presets: [
         heroBanner1Col,
-        heroBanner1ColPreSalesPage,
         heroBannerContentLeft,
-        heroBannerContentLeftPreSalesPage,
         heroBannerContentRight,
-        heroBannerContentRightPreSalesPage,
         heroBannerVideo,
-        heroBannerVideoPreSalesPage,
-        heroBannerParallax,
-        heroBannerParallaxPreSalesPage
+        heroBannerParallax
     ],
     editorConfigs: {
         slots: {

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

@@ -1,10 +1,9 @@
 import { splitStyle, makeStyleResponsive, makeGlobalSize, composeTypographyClassName, composeTypographyStyle, composeBorderCss, composeCornerCss, getSingleColorVariable, template, cls, getGlobalColorStateClass, getGlobalColorStateStyle, composeRadius, getStyleShadowState, composeSize, getGradientBgrStyleForButton, RenderIf } from '@gem-sdk/core';
 import { getInsertLinkData, getDynamicSourceLocales } from '../../helpers.js';
-import { HREF_TO_SALES_PAGE } from '../../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, isGoToSalesPage } = setting;
+    const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = splitStyle([
         'pos',
         'top',
@@ -13,15 +12,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
         'right',
         'z'
     ], style);
-    let { Wrap, urlData, shouldRenderLink } = getInsertLinkData('button', btnLink, htmlType);
-    if (isGoToSalesPage) {
-        Wrap = 'a';
-        urlData = {
-            href: HREF_TO_SALES_PAGE,
-            target: '_self'
-        };
-        shouldRenderLink = true;
-    }
+    const { Wrap, urlData, shouldRenderLink } = getInsertLinkData('button', btnLink, htmlType);
     const spacingDefault = {
         desktop: '8px'
     };