@gem-sdk/components 2.1.13-staging.20 → 2.1.13-staging.22

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

@@ -20,12 +20,20 @@ const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, on
     const { onListener, ref } = core.useInteraction();
     let delayTimeout;
     const mode = core.useEditorMode();
-    const imageActiveIndex = React.useMemo(()=>{
+    const getImageActiveIndex = React.useCallback(()=>{
         const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        return index;
+        return index ?? 0;
     }, [
-        productImages,
-        featuredImageGlobal
+        featuredImageGlobal?.id,
+        productImages
+    ]);
+    const [imageActiveIndex, setImageActiveIndex] = React.useState(getImageActiveIndex());
+    React.useEffect(()=>{
+        setImageActiveIndex(getImageActiveIndex());
+    }, [
+        featuredImageGlobal,
+        getImageActiveIndex,
+        productImages
     ]);
     const imageActive = React.useMemo(()=>{
         if (productImages?.length) return featuredImageGlobal || productImages?.[0];

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

@@ -2,54 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var core = require('@gem-sdk/core');
+var thirdParty = require('../helpers/thirdParty.js');
 
 const QikifyUpsell = ({ setting, advanced })=>{
-    const { align, widgetType } = setting ?? {};
-    const prefix = ()=>{
-        switch(widgetType){
-            // case 'bogo':
-            //   return 'qbk-bogo-offer';
-            case 'bundle':
-                return 'qbk-bundle-offer';
-            case 'volume':
-                return 'qbk-volume-offer';
-            case 'upsurge':
-                return 'qbk-upsurge-offer';
-            // case 'free-gift':
-            //   return 'qbk-free-gift-offer';
-            default:
-                return '';
-        }
-    };
-    return core.template`
-    <div
-      class="${advanced?.cssClass}"
-      style="${{
-        ...core.makeStyleResponsive('ta', align)
-    }}"
-    >
-    {% assign productData = product %}
-    {% if productData %}
-    {% liquid
-      assign triggerId = productData.selected_or_first_available_variant.id
-      assign handle = productData.handle
-      assign productId = productData.id
-      assign blockId = block.id
-    %}
-    <div id="${prefix()}-{{ productId }}"></div>
-    <qbk-inject-offer
-      mount-id="${prefix()}-{{ productId }}"
-      handle="{{ handle }}"
-      section-id="{{ section.id }}"
-      trigger-id="{{ triggerId }}"
-      product-id="{{ productId }}"
-      type="${widgetType}"
-    >
-    </qbk-inject-offer>
-    {% endif %}
-    </div>
-  `;
+    const { align, appBlockId } = setting ?? {};
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
 };
 
 exports.default = QikifyUpsell;

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

@@ -44,6 +44,11 @@ const config = {
         {
             id: 'setting',
             controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -64,9 +69,14 @@ const config = {
                     id: 'widgetType',
                     label: 'Choose widget',
                     type: 'select',
-                    default: 'bogo',
+                    default: 'bogo_offer',
                     options: QikifyUpsell.WidgetOptions
                 },
+                {
+                    id: 'productHandle',
+                    type: 'product-handle',
+                    hide: true
+                },
                 {
                     id: 'align',
                     label: 'Alignment',

package/dist/esm/product/components/ProductImagesV2/jsx/components/ProductFeaturedImageCarousel.js

@@ -6,7 +6,7 @@ import { getAspectRatio } from '../../common/common.js';
 import { checkRenderFeaturedCarousel, getDotSettingByLayout } from '../../common/productFeaturedImage.js';
 import { handleMouseMove, handleMouseOut } from '../../common/hoverAction.js';
 import ProductFeaturedImageOnly from './ProductFeaturedImageOnly.js';
-import { memo, useMemo, useCallback, useEffect, createRef } from 'react';
+import { memo, useCallback, useState, useEffect, useMemo, createRef } from 'react';
 import { handleSetSrcForFeatureProductImage } from '../../../../../image/helpers/getSrcSet.js';
 
 const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, onClickArrow, onHandleLoaded, onHandleUpdateActiveIndex, builderPropUID, builderPropsClass, children, parentUid, ...setting })=>{
@@ -16,12 +16,20 @@ const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, on
     const { onListener, ref } = useInteraction();
     let delayTimeout;
     const mode = useEditorMode();
-    const imageActiveIndex = useMemo(()=>{
+    const getImageActiveIndex = useCallback(()=>{
         const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        return index;
+        return index ?? 0;
     }, [
-        productImages,
-        featuredImageGlobal
+        featuredImageGlobal?.id,
+        productImages
+    ]);
+    const [imageActiveIndex, setImageActiveIndex] = useState(getImageActiveIndex());
+    useEffect(()=>{
+        setImageActiveIndex(getImageActiveIndex());
+    }, [
+        featuredImageGlobal,
+        getImageActiveIndex,
+        productImages
     ]);
     const imageActive = useMemo(()=>{
         if (productImages?.length) return featuredImageGlobal || productImages?.[0];

package/dist/esm/third-party/components/QikifyUpsell.liquid.js

@@ -1,51 +1,8 @@
-import { template, makeStyleResponsive } from '@gem-sdk/core';
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
 
 const QikifyUpsell = ({ setting, advanced })=>{
-    const { align, widgetType } = setting ?? {};
-    const prefix = ()=>{
-        switch(widgetType){
-            // case 'bogo':
-            //   return 'qbk-bogo-offer';
-            case 'bundle':
-                return 'qbk-bundle-offer';
-            case 'volume':
-                return 'qbk-volume-offer';
-            case 'upsurge':
-                return 'qbk-upsurge-offer';
-            // case 'free-gift':
-            //   return 'qbk-free-gift-offer';
-            default:
-                return '';
-        }
-    };
-    return template`
-    <div
-      class="${advanced?.cssClass}"
-      style="${{
-        ...makeStyleResponsive('ta', align)
-    }}"
-    >
-    {% assign productData = product %}
-    {% if productData %}
-    {% liquid
-      assign triggerId = productData.selected_or_first_available_variant.id
-      assign handle = productData.handle
-      assign productId = productData.id
-      assign blockId = block.id
-    %}
-    <div id="${prefix()}-{{ productId }}"></div>
-    <qbk-inject-offer
-      mount-id="${prefix()}-{{ productId }}"
-      handle="{{ handle }}"
-      section-id="{{ section.id }}"
-      trigger-id="{{ triggerId }}"
-      product-id="{{ productId }}"
-      type="${widgetType}"
-    >
-    </qbk-inject-offer>
-    {% endif %}
-    </div>
-  `;
+    const { align, appBlockId } = setting ?? {};
+    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
 };
 
 export { QikifyUpsell as default };

package/dist/esm/third-party/setting/QikifyUpsell.js

@@ -40,6 +40,11 @@ const config = {
         {
             id: 'setting',
             controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -60,9 +65,14 @@ const config = {
                     id: 'widgetType',
                     label: 'Choose widget',
                     type: 'select',
-                    default: 'bogo',
+                    default: 'bogo_offer',
                     options: WidgetOptions
                 },
+                {
+                    id: 'productHandle',
+                    type: 'product-handle',
+                    hide: true
+                },
                 {
                     id: 'align',
                     label: 'Alignment',

package/dist/types/index.d.ts

@@ -2848,6 +2848,8 @@ type QikifyUpsellProps = BaseProps<{
     align?: ObjectDevices<AlignProp>;
     openApp?: any;
     install?: any;
+    appBlockId?: string;
+    productHandle?: string;
 }>;
 declare const QikifyUpsell$1: React.FC<QikifyUpsellProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.1.13-staging.20",
+  "version": "2.1.13-staging.22",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",