@gem-sdk/components 2.1.13-staging.2 → 2.1.13-staging.5

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

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OkendoReviewsLoyalty = require('../configs/OkendoReviewsLoyalty.js');
+
+const config = {
+    tag: OkendoReviewsLoyalty.default.tag,
+    label: OkendoReviewsLoyalty.default.label,
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/fe55626671bd5da73785c606c2b0752f/icon/CNKRrIWatfoCEAE=.png">',
+    editorConfigs: {
+        placeholder: {
+            flowTag: [
+                'Product'
+            ]
+        },
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: OkendoReviewsLoyalty.default.id,
+            name: {
+                en: OkendoReviewsLoyalty.default.label
+            },
+            hideTextContent: true,
+            icon: {
+                desktop: `<div class="w-full flex flex-col items-center">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/fe55626671bd5da73785c606c2b0752f/icon/CNKRrIWatfoCEAE=.png">
+        <span class="preset-item-title">Okendo: Reviews & Loyalty</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: OkendoReviewsLoyalty.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'productHandle',
+                    type: 'product-handle',
+                    hide: true
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Reviews Widget',
+                            value: 'reviews-widget'
+                        },
+                        {
+                            label: 'Reviews Badge',
+                            value: 'reviews-badge'
+                        },
+                        {
+                            label: 'Media Carousel',
+                            value: 'media-carousel'
+                        },
+                        {
+                            label: 'Media Grid',
+                            value: 'media-grid'
+                        },
+                        {
+                            label: 'Reviews Carousel',
+                            value: 'reviews-carousel'
+                        },
+                        {
+                            label: 'Star Rating',
+                            value: 'star-rating'
+                        },
+                        {
+                            label: 'Questions Widget',
+                            value: 'questions-widget'
+                        }
+                    ],
+                    default: 'reviews-widget'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/okendo-reviews?utm_source=gempages',
+                    appName: OkendoReviewsLoyalty.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://admin.shopify.com/?redirect=/apps/okendo-reviews',
+                    appName: OkendoReviewsLoyalty.default.label
+                },
+                {
+                    id: 'align',
+                    label: 'Alignment',
+                    type: 'segment',
+                    options: [
+                        {
+                            label: 'Left',
+                            value: 'left',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Center',
+                            value: 'center',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Right',
+                            value: 'right',
+                            type: 'align'
+                        }
+                    ],
+                    devices: {
+                        desktop: {
+                            default: 'left'
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    ui: [
+        {
+            type: 'control',
+            setting: {
+                id: 'install'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Choose Widget'
+            },
+            setting: {
+                id: 'widgetType'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var StellarDeliveryDatePickup = require('../configs/StellarDeliveryDatePickup.js');
+
+const config = {
+    tag: StellarDeliveryDatePickup.default.tag,
+    label: StellarDeliveryDatePickup.default.label,
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/568eee7424b5f70382db5178dd815f6a/icon/CMTw3rn0lu8CEAE=.jpg">',
+    editorConfigs: {
+        placeholder: {
+            flowPage: 'GP_PRODUCT'
+        },
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: StellarDeliveryDatePickup.default.id,
+            name: {
+                en: StellarDeliveryDatePickup.default.label
+            },
+            hideTextContent: true,
+            icon: {
+                desktop: `<div class="w-full flex flex-col items-center">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/568eee7424b5f70382db5178dd815f6a/icon/CMTw3rn0lu8CEAE=.jpg">
+        <span class="preset-item-title">Stellar Delivery Date & Pickup</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: StellarDeliveryDatePickup.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/order-delivery-date-by-identixweb?utm_source=gempages',
+                    appName: StellarDeliveryDatePickup.default.label
+                },
+                {
+                    id: 'guideId',
+                    type: 'group'
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://admin.shopify.com/?redirect=/apps/order-delivery-date-by-identixweb',
+                    appName: StellarDeliveryDatePickup.default.label
+                },
+                {
+                    id: 'align',
+                    label: 'Alignment',
+                    type: 'segment',
+                    options: [
+                        {
+                            label: 'Left',
+                            value: 'left',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Center',
+                            value: 'center',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Right',
+                            value: 'right',
+                            type: 'align'
+                        }
+                    ],
+                    devices: {
+                        desktop: {
+                            default: 'left'
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    ui: [
+        {
+            type: 'control',
+            setting: {
+                id: 'install'
+            }
+        },
+        {
+            type: 'control',
+            info: {
+                en: '<span>To make this element work, copy the class <strong>.gp-integration-stellar-delivery__position</strong> and paste it into the Selector input field in the Run Wizard settings. For more details, check the instructions on<a style="text-decoration: none; color: #8AA4FF" href="https://www.identixweb.com/helpdesk/order-delivery-date/general-settings/setup-wizard/" target="_blank"> how to set up the Run Wizard.</a></span>'
+            },
+            setting: {
+                id: 'guideId'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -0,0 +1,177 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TrustedsiteTrustBadges = require('../configs/TrustedsiteTrustBadges.js');
+
+const config = {
+    tag: TrustedsiteTrustBadges.default.tag,
+    label: TrustedsiteTrustBadges.default.label,
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/38fdc008d044b95511d73b59ae0cc83f/icon/CIX8yLf0lu8CEAE=.png">',
+    editorConfigs: {
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: TrustedsiteTrustBadges.default.id,
+            name: {
+                en: TrustedsiteTrustBadges.default.label
+            },
+            hideTextContent: true,
+            icon: {
+                desktop: `<div class="w-full flex flex-col items-center">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/38fdc008d044b95511d73b59ae0cc83f/icon/CIX8yLf0lu8CEAE=.png">
+        <span class="preset-item-title">TrustedSite ‑ Trust Badges</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: TrustedsiteTrustBadges.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Engagement',
+                            value: 'engagement'
+                        }
+                    ],
+                    default: 'engagement'
+                },
+                {
+                    id: 'trustId',
+                    label: 'Trustmark Type',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Certified Secure',
+                            value: '202'
+                        },
+                        {
+                            label: 'Secure Form',
+                            value: '211'
+                        },
+                        {
+                            label: 'Secure Checkout',
+                            value: '212'
+                        },
+                        {
+                            label: 'Secure Login',
+                            value: '213'
+                        },
+                        {
+                            label: 'Issue-Free Orders',
+                            value: '214'
+                        },
+                        {
+                            label: 'Spam-Free',
+                            value: '216'
+                        },
+                        {
+                            label: 'Banner',
+                            value: '1001'
+                        },
+                        {
+                            label: 'Testimonial',
+                            value: '1002'
+                        }
+                    ],
+                    default: '202'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/mcafee-secure?utm_source=gempages',
+                    appName: TrustedsiteTrustBadges.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://www.trustedsite.com/',
+                    appName: TrustedsiteTrustBadges.default.label
+                },
+                {
+                    id: 'align',
+                    label: 'Alignment',
+                    type: 'segment',
+                    options: [
+                        {
+                            label: 'Left',
+                            value: 'left',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Center',
+                            value: 'center',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Right',
+                            value: 'right',
+                            type: 'align'
+                        }
+                    ],
+                    devices: {
+                        desktop: {
+                            default: 'left'
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    ui: [
+        {
+            type: 'control',
+            setting: {
+                id: 'install'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'trustId'
+            },
+            label: {
+                en: 'Trustmark Type'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -103,11 +103,26 @@ var TrustreviewsProductReviews = require('./TrustreviewsProductReviews.js');
 var MyappgurusProductReviews = require('./MyappgurusProductReviews.js');
 var HulkProductOptions = require('./HulkProductOptions.js');
 var TrustshopProductReviews = require('./TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./EstimatedDeliveryDatePlus.js');
 var HextomCountdownTimerBar = require('./HextomCountdownTimerBar.js');
 var TrustBadgesBear = require('./TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./HextomFreeShippingBar.js');
 
 var index = {
     HextomCountdownTimerBar: HextomCountdownTimerBar.default,
+    EstimatedDeliveryDatePlus: EstimatedDeliveryDatePlus.default,
+    OkendoReviewsLoyalty: OkendoReviewsLoyalty.default,
+    EssentialAnnouncementBar: EssentialAnnouncementBar.default,
+    EssentialCountdownTimerBar: EssentialCountdownTimerBar.default,
+    StellarDeliveryDatePickup: StellarDeliveryDatePickup.default,
     TrustshopProductReviews: TrustshopProductReviews.default,
     HulkProductOptions: HulkProductOptions.default,
     TrustreviewsProductReviews: TrustreviewsProductReviews.default,
@@ -209,7 +224,12 @@ var index = {
     RequestQuoteHidePrice: RequestQuoteHidePrice.default,
     BirdChime: BirdChime.default,
     FordeerProductLabels: FordeerProductLabels.default,
-    TrustBadgesBear: TrustBadgesBear.default
+    TrustBadgesBear: TrustBadgesBear.default,
+    TrustedsiteTrustBadges: TrustedsiteTrustBadges.default,
+    GloColorSwatchvariantImage: GloColorSwatchvariantImage.default,
+    BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
+    AlsoBoughtCbb: AlsoBoughtCbb.default,
+    HextomFreeShippingBar: HextomFreeShippingBar.default
 };
 
 exports.default = index;

package/dist/cjs/video/components/HTML5Embed.js

@@ -51,14 +51,14 @@ const HTML5Embed = (props)=>{
             }),
             props.thumbnail && showThumbnail && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 role: "presentation",
-                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full",
+                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full",
                 onClick: playVideoAndTurnOffThumbnail,
                 style: props.style,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("img", {
                         id: "video-thumbnail",
                         src: props.thumbnail,
-                        className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
+                        className: "gp-w-full gp-h-full gp-object-contain gp-thumbnail-video",
                         alt: "Video Thumbnail"
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("button", {

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -72,14 +72,14 @@ const HTML5Embed = (props)=>{
   </video>
     <div
           style="${props.style}"
-           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video', {
+           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full gp-thumbnail-video', {
         'gp-hidden': !props.thumbnail || props.autoplay
     })}"
         >
           <img
             id="video-thumbnail"
             src="${props.thumbnail ?? ''}"
-            class="gp-w-full gp-h-full gp-object-cover"
+            class="gp-w-full gp-h-full gp-object-contain"
             alt="Video Thumbnail"
           ></img>
           <button

package/dist/esm/builder.js

@@ -107,8 +107,18 @@ import TrustreviewsProductReviews from './third-party/components/TrustreviewsPro
 import MyappgurusProductReviews from './third-party/components/MyappgurusProductReviews.js';
 import HulkProductOptions from './third-party/components/HulkProductOptions.js';
 import TrustshopProductReviews from './third-party/components/TrustshopProductReviews.js';
+import StellarDeliveryDatePickup from './third-party/components/StellarDeliveryDatePickup.js';
+import EssentialCountdownTimerBar from './third-party/components/EssentialCountdownTimerBar.js';
+import EssentialAnnouncementBar from './third-party/components/EssentialAnnouncementBar.js';
+import OkendoReviewsLoyalty from './third-party/components/OkendoReviewsLoyalty.js';
+import EstimatedDeliveryDatePlus from './third-party/components/EstimatedDeliveryDatePlus.js';
 import HextomCountdownTimerBar from './third-party/components/HextomCountdownTimerBar.js';
 import TrustBadgesBear from './third-party/components/TrustBadgesBear.js';
+import TrustedsiteTrustBadges from './third-party/components/TrustedsiteTrustBadges.js';
+import GloColorSwatchvariantImage from './third-party/components/GloColorSwatchvariantImage.js';
+import BfSizeChartSizeGuide from './third-party/components/BfSizeChartSizeGuide.js';
+import AlsoBoughtCbb from './third-party/components/AlsoBoughtCbb.js';
+import HextomFreeShippingBar from './third-party/components/HextomFreeShippingBar.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -243,6 +253,11 @@ import PostPurchaseCountdownTimer from './post-purchase/countdown-timer/componen
 import Text$1 from './post-purchase/text/Text.js';
 
 var builder = {
+    EstimatedDeliveryDatePlus,
+    OkendoReviewsLoyalty,
+    EssentialAnnouncementBar,
+    EssentialCountdownTimerBar,
+    StellarDeliveryDatePickup,
     TrustshopProductReviews,
     HulkProductOptions,
     TrustreviewsProductReviews,
@@ -479,7 +494,12 @@ var builder = {
     MarqueeItem,
     ProductBadge,
     HextomCountdownTimerBar,
-    TrustBadgesBear
+    TrustBadgesBear,
+    TrustedsiteTrustBadges,
+    GloColorSwatchvariantImage,
+    BfSizeChartSizeGuide,
+    AlsoBoughtCbb,
+    HextomFreeShippingBar
 };
 
 export { builder as default };

package/dist/esm/common/const.js

@@ -1,5 +1,5 @@
 const ELEMENT_Z_INDEX = {
-    STICKY: 100000,
+    STICKY: 1000,
     DIALOG: 100001,
     CART_DRAWER: 100002,
     CART_DRAWER_CONFIRM_MODAL: 100003

package/dist/esm/image/components/Image.js

@@ -1,13 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { useCurrentDevice, makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
 import { composeAspectRatio } from './helpers.js';
+import NoDataImage from './NoDataImage.js';
+import { useMemo } from 'react';
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
+    const currentDevice = useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link : 'div';
     const opacity = {
@@ -52,6 +55,18 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
+    const isShowNoDataState = useMemo(()=>{
+        if (setting?.disableNoDataState) return false;
+        if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
+        if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
+        return !setting?.srcSet?.desktop?.src;
+    }, [
+        currentDevice,
+        setting?.disableNoDataState,
+        setting?.srcSet?.desktop?.src,
+        setting?.srcSet?.mobile?.src,
+        setting?.srcSet?.tablet?.src
+    ]);
     return /*#__PURE__*/ jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -80,10 +95,15 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     ...makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
+                    isShowNoDataState ? /*#__PURE__*/ jsx(NoDataImage, {
+                        style: {
+                            ...imageWidth,
+                            ...imageHeight
+                        }
+                    }) : setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
+                        className: cls(className, 'gp-inline-block gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,