@gem-sdk/core 1.53.0-dev.4 → 1.53.0-dev.45

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -60,7 +60,33 @@ const ComponentToolbarPreview = (props)=>{
         editingPageType
     ]);
     const isSelectOnPage = react.useMemo(()=>interactionData?.isSelectOnPage, [
-        interactionData
+        interactionData?.isSelectOnPage
+    ]);
+    const settingType = react.useMemo(()=>interactionData?.settingType, [
+        interactionData?.settingType
+    ]);
+    const isShowIconInteractionTarget = react.useMemo(()=>{
+        return interactionData?.item?.targets?.find((t)=>t.uid === props.uid && t?.type !== 'PAGE') && isSelectOnPage && settingType === 'TARGET';
+    }, [
+        interactionData?.item?.targets,
+        isSelectOnPage,
+        props.uid,
+        settingType
+    ]);
+    const isShowIconInteractionTrigger = react.useMemo(()=>{
+        return interactionData?.item?.self?.uid === props.uid && interactionData?.item?.self.type !== 'PAGE' && isSelectOnPage && settingType === 'TRIGGER';
+    }, [
+        interactionData?.item?.self?.type,
+        interactionData?.item?.self?.uid,
+        isSelectOnPage,
+        props.uid,
+        settingType
+    ]);
+    const isDisplayIconDrag = react.useMemo(()=>{
+        return !isShowIconInteractionTarget && !isShowIconInteractionTrigger;
+    }, [
+        isShowIconInteractionTarget,
+        isShowIconInteractionTrigger
     ]);
     const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = useToolbarPostPurchase.usePostPurchase(props.uid, props.tag || '');
     const editProductElementList = [
@@ -338,7 +364,6 @@ const ComponentToolbarPreview = (props)=>{
         if (isShopifySection || isThemeSection && !isThemeSectionEditor) return false;
         return constant.ableGenerateContentElements.includes(tag);
     };
-    // if (!isActive) return null;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -353,7 +378,39 @@ const ComponentToolbarPreview = (props)=>{
                         onClick: (e)=>onShowParent(e),
                         "aria-hidden": "true",
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            isShowIconInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "gp-hidden interaction-use-custom-element",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                                    width: "12",
+                                    height: "13",
+                                    viewBox: "0 0 12 13",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M4.36823 0.430157C4.51621 0.205309 4.76733 0.0699463 5.0365 0.0699463H9.886C10.2045 0.0699463 10.3952 0.424012 10.2201 0.689974L8.36993 3.49883C8.28234 3.63182 8.37772 3.80885 8.53695 3.80885H10.7492C11.1114 3.80885 11.2871 4.25167 11.0235 4.5L3.03995 12.0213C2.75745 12.2874 2.29956 12.0357 2.37286 11.6546L3.28019 6.93662C3.30391 6.81327 3.20939 6.69885 3.08379 6.69885H0.984895C0.666494 6.69885 0.475723 6.34493 0.650759 6.07895L4.36823 0.430157ZM5.48883 1.20046C5.35424 1.20046 5.22868 1.26814 5.15469 1.38057L2.6027 5.25839C2.51518 5.39137 2.61056 5.56833 2.76976 5.56833H4.27861C4.52982 5.56833 4.71885 5.79718 4.67141 6.04387L4.12087 8.9066C4.08422 9.09717 4.31317 9.22301 4.45442 9.08994L8.49328 5.28494C8.62508 5.16077 8.53721 4.93936 8.35614 4.93936H6.75127C6.4328 4.93936 6.24204 4.5853 6.41722 4.31934L8.26734 1.51048C8.35494 1.37749 8.25956 1.20046 8.10032 1.20046H5.48883Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                })
+                            }),
+                            isShowIconInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "gp-hidden interaction-use-custom-element",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                                    width: "14",
+                                    height: "14",
+                                    viewBox: "0 0 14 14",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M6.2941 2.19513C6.70415 2.13657 6.9891 1.75669 6.93054 1.34663C6.87198 0.936581 6.49209 0.651638 6.08204 0.710196C2.98687 1.15221 0.607666 3.8125 0.607666 7.02978C0.607666 10.5556 3.46588 13.4138 6.99166 13.4138C10.1798 13.4138 12.8209 11.0775 13.2987 8.02354C13.3627 7.61431 13.0828 7.23065 12.6736 7.16663C12.2644 7.1026 11.8807 7.38245 11.8167 7.79169C11.4513 10.127 9.42946 11.9138 6.99166 11.9138C4.2943 11.9138 2.10767 9.72714 2.10767 7.02978C2.10767 4.56958 3.92742 2.53311 6.2941 2.19513ZM9.32325 0.978487C9.59794 0.703796 10.0673 0.833594 10.1618 1.21039L10.648 3.14898C10.6705 3.2384 10.7403 3.30822 10.8297 3.33065L12.7683 3.81691C13.1451 3.91143 13.2749 4.38075 13.0002 4.65544L11.3265 6.32911C11.099 6.55668 10.7758 6.66082 10.4581 6.60891L9.03886 6.37696C8.72123 6.32505 8.39804 6.42918 8.17046 6.65676L7.40064 7.42658C7.16633 7.66089 6.78643 7.66089 6.55211 7.42658C6.3178 7.19227 6.3178 6.81237 6.55211 6.57805L7.32193 5.80823C7.54951 5.58066 7.65364 5.25746 7.60173 4.93983L7.36978 3.52055C7.31787 3.20293 7.42201 2.87973 7.64958 2.65216L9.32325 0.978487ZM8.79074 4.77514C8.82538 4.98713 8.99156 5.15331 9.20355 5.18795L10.2975 5.36674C10.4564 5.3927 10.618 5.34063 10.7317 5.22684L10.9663 4.99227C11.1037 4.85492 11.0388 4.62026 10.8504 4.573L9.98586 4.35615C9.80703 4.3113 9.66739 4.17166 9.62254 3.99283L9.40569 3.12832C9.35843 2.93992 9.12377 2.87502 8.98642 3.01237L8.75185 3.24695C8.63806 3.36073 8.58599 3.52233 8.61195 3.68114L8.79074 4.77514ZM7.02213 4.44284C7.14103 4.83962 6.91577 5.25766 6.51899 5.37657C5.8172 5.58687 5.30708 6.2382 5.30708 7.00672C5.30708 7.94638 6.06883 8.70813 7.00849 8.70813C7.77819 8.70813 8.43033 8.19644 8.6396 7.49302C8.75772 7.096 9.17531 6.86991 9.57233 6.98802C9.96934 7.10614 10.1954 7.52373 10.0773 7.92075C9.68401 9.24279 8.45997 10.2081 7.00849 10.2081C5.2404 10.2081 3.80708 8.77481 3.80708 7.00672C3.80708 5.55746 4.76949 4.33493 6.0884 3.9397C6.48518 3.82079 6.90323 4.04606 7.02213 4.44284Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                })
+                            }),
+                            isDisplayIconDrag && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-icon-drag": true,
                                 children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                                     width: "16",

package/dist/cjs/components/ComponentWrapper.js

@@ -12,6 +12,16 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
     if (props.type === 'section') return null;
     const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag, pageType);
     const advanced = props.advanced;
+    const interactionAttributes = ()=>{
+        let result = {};
+        if (props.advanced?.displayInitInteraction !== undefined) {
+            result = {
+                'display-init': props.advanced?.displayInitInteraction === false ? 'hide' : 'show',
+                'gp-interaction-wrapper': ''
+            };
+        }
+        return result;
+    };
     if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
         return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [
@@ -23,7 +33,11 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
                     className: advanced?.cssClass,
                     ...children.props,
                     style,
-                    advanced
+                    advanced,
+                    builderAttrs: {
+                        ...children.props.builderAttrs,
+                        ...interactionAttributes()
+                    }
                 })
             ]
         });
@@ -36,6 +50,7 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: style,
+                ...interactionAttributes(),
                 className: `${props.uid} ${advanced?.cssClass}`,
                 children: children
             })

package/dist/cjs/components/InteractionSuffix.js

@@ -17,18 +17,18 @@ require('dayjs');
 var index = require('../helpers/interaction/index.js');
 require('../helpers/convert.js');
 
-const InteractionSuffix = ({ tag, uid })=>{
+const InteractionSuffix = ({ uid })=>{
     const { closeSelectOnPage } = index.useInteraction();
     const currentInteraction = PageContext.usePageStore((s)=>s.interactionData?.item);
     const isSelectOnPage = PageContext.usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const isCurrentInteractionTarget = react.useMemo(()=>{
-        return currentInteraction?.targets?.find((t)=>t.uid === uid);
+        return currentInteraction?.targets?.find((t)=>t.uid === uid && t.type !== 'PAGE');
     }, [
         currentInteraction,
         uid
     ]);
     const isCurrentInteractionTrigger = react.useMemo(()=>{
-        return currentInteraction?.self?.uid === uid;
+        return currentInteraction?.self?.uid === uid && currentInteraction?.self?.type !== 'PAGE';
     }, [
         currentInteraction,
         uid
@@ -39,76 +39,15 @@ const InteractionSuffix = ({ tag, uid })=>{
         isCurrentInteractionTarget,
         isCurrentInteractionTrigger
     ]);
-    const positionOffset = react.useMemo(()=>{
-        if (isCurrentInteractionTrigger && isCurrentInteractionTarget) {
-            return 80;
-        }
-        return 40;
-    }, [
-        isCurrentInteractionTrigger,
-        isCurrentInteractionTarget
-    ]);
     if (!isDisplay) {
         return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                className: "gp-bg-[#F4F4F4]  gp-px-2  gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-element-btn",
-                onClick: closeSelectOnPage,
-                children: "Use element"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: `gp-hidden gp-absolute interaction-suffix gp-gap-[8px] ${tag == 'Section' ? `gp-left-[-${positionOffset}px]` : `gp-right-[-${positionOffset}px]`}`,
-                children: [
-                    isCurrentInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: `gp-h-8  gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center `,
-                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
-                            width: "16",
-                            height: "16",
-                            viewBox: "0 0 16 16",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                fillRule: "evenodd",
-                                clipRule: "evenodd",
-                                d: "M12.9196 5.80449C13.0989 5.80449 13.1876 6.02216 13.0595 6.14749L4.83569 14.1892C4.69517 14.3267 4.46149 14.2002 4.49967 14.0074L5.50422 8.93537C5.53483 8.7808 5.41656 8.6368 5.25898 8.6368H3.08019C2.92551 8.6368 2.82938 8.46874 2.90779 8.33541L6.72099 1.85154C6.75692 1.79045 6.8225 1.75293 6.89338 1.75293H12.5729C12.7386 1.75293 12.8324 1.94273 12.7319 2.07435L10.1891 5.40272C10.0634 5.56724 10.1807 5.80449 10.3877 5.80449H12.9196Z",
-                                fill: "#F9F9F9"
-                            })
-                        })
-                    }),
-                    isCurrentInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: `gp-h-8 min-w-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center`,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
-                            width: "16",
-                            height: "16",
-                            viewBox: "0 0 16 16",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                    d: "M8.58987 2.11238C8.62815 2.66333 8.21254 3.141 7.66158 3.17928C6.73192 3.24386 5.84034 3.57396 5.09276 4.13034C4.34519 4.68673 3.77304 5.44602 3.44429 6.31801C3.11554 7.19 3.04401 8.13803 3.23821 9.04947C3.4324 9.96092 3.88415 10.7975 4.53978 11.4597C5.19541 12.122 6.02737 12.5821 6.93682 12.7854C7.84626 12.9888 8.79496 12.9268 9.67021 12.6068C10.5455 12.2869 11.3105 11.7224 11.8743 10.9804C12.4382 10.2385 12.7772 9.35025 12.8512 8.42129C12.895 7.87074 13.3768 7.45996 13.9273 7.50377C14.4779 7.54758 14.8887 8.0294 14.8449 8.57994C14.7406 9.8906 14.2622 11.1438 13.4667 12.1906C12.6711 13.2374 11.5918 14.0338 10.3569 14.4852C9.12204 14.9367 7.78353 15.0241 6.50041 14.7373C5.2173 14.4504 4.0435 13.8012 3.11848 12.8668C2.19345 11.9324 1.55609 10.7522 1.28211 9.46624C1.00813 8.1803 1.10905 6.84274 1.57287 5.61247C2.03669 4.3822 2.84393 3.31093 3.89867 2.52593C4.95342 1.74093 6.21133 1.27521 7.52297 1.18409C8.07393 1.14581 8.5516 1.56142 8.58987 2.11238Z",
-                                    fill: "#F9F9F9"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                    fillRule: "evenodd",
-                                    clipRule: "evenodd",
-                                    d: "M11.9757 1.25658C12.184 1.31428 12.3452 1.47958 12.3976 1.68929L12.7872 3.24774L14.3457 3.63736C14.5554 3.68978 14.7207 3.85096 14.7784 4.05928C14.8361 4.2676 14.7773 4.49085 14.6244 4.64371L12.7167 6.55141C12.5677 6.70044 12.3514 6.76035 12.1469 6.70924L10.5688 6.3147L8.42436 8.45912C8.19005 8.69344 7.81015 8.69344 7.57583 8.45912C7.34152 8.22481 7.34152 7.84491 7.57583 7.61059L9.72025 5.46617L9.32572 3.88804C9.2746 3.68357 9.33451 3.46728 9.48354 3.31825L11.3912 1.41054C11.5441 1.25769 11.7674 1.19888 11.9757 1.25658ZM10.8795 5.15545L12.1084 5.46267L13.0266 4.54451L12.1469 4.3246C11.9319 4.27086 11.7641 4.10301 11.7104 3.88804L11.4904 3.0084L10.5723 3.92656L10.8795 5.15545Z",
-                                    fill: "#F9F9F9"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                    d: "M7.35783 6.45343C7.87208 6.25201 8.12568 5.67185 7.92426 5.15761C7.72284 4.64336 7.14268 4.38976 6.62844 4.59118C6.05705 4.81498 5.55049 5.17772 5.15453 5.64655C4.75858 6.11538 4.4857 6.67552 4.36055 7.27631C4.23539 7.87709 4.26189 8.49961 4.43764 9.08758C4.6134 9.67555 4.93289 10.2105 5.36727 10.6439C5.80165 11.0774 6.33722 11.3958 6.92556 11.5702C7.51391 11.7445 8.13643 11.7695 8.73683 11.6427C9.33723 11.5158 9.89652 11.2413 10.3641 10.8439C10.8318 10.4465 11.1929 9.93885 11.4151 9.36679C11.615 8.85196 11.3597 8.27254 10.8449 8.07262C10.3301 7.87269 9.75066 8.12797 9.55073 8.6428C9.44887 8.9051 9.28329 9.1378 9.06901 9.3199C8.85474 9.50199 8.59851 9.62774 8.32352 9.68582C8.04853 9.7439 7.76341 9.73249 7.49394 9.65262C7.22445 9.57274 6.97907 9.42691 6.78001 9.22825C6.58093 9.0296 6.43446 8.78439 6.35386 8.51478C6.27327 8.24517 6.26112 7.9597 6.31851 7.6842C6.37591 7.4087 6.50102 7.1519 6.68251 6.93702C6.86399 6.72214 7.0961 6.55595 7.35783 6.45343Z",
-                                    fill: "#F9F9F9"
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        ]
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("button", {
+            className: "gp-bg-[#F4F4F4]  gp-px-2  gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-custom-element",
+            onClick: closeSelectOnPage,
+            children: "Use element"
+        })
     });
 };
 

package/dist/cjs/components/Render.liquid.js

@@ -215,7 +215,7 @@ const RenderCustomCode = (item)=>{
 };
 const appendAnimation = (props, liquid)=>{
     const { advanced, tag } = props;
-    const { animation, op: opacity, hasAnimationInteraction, displayInitInteraction = true } = advanced ?? {};
+    const { animation, op: opacity, hasAnimationInteraction, displayInitInteraction } = advanced ?? {};
     const getAnimationType = (settings, type)=>{
         return settings?.triggerConfig?.[type]?.animation ?? 'none';
     };
@@ -243,7 +243,8 @@ const appendAnimation = (props, liquid)=>{
     };
     return render.template`
   <gp-animation
-    display-init="${!displayInitInteraction ? 'hide' : 'show'}"
+    gp-interaction-wrapper
+    display-init="${displayInitInteraction === false ? 'hide' : 'show'}"
     gp-data='${JSON.stringify({
         config: animation,
         tag,

package/dist/cjs/contexts/PageContext.js

@@ -56,6 +56,14 @@ const createPageStoreProvider = (data)=>zustand.createStore((set)=>({
                             selectType
                         }
                     }));
+            },
+            setInteractionSettingType: (settingType)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            settingType
+                        }
+                    }));
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
@@ -65,7 +73,7 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             productOffers,
             publicStoreFrontData,
             interactionData: {
-                selectType: 'element'
+                selectType: 'ELEMENT'
             }
         }), [
         dynamicProduct,

package/dist/cjs/helpers/interaction/index.js

@@ -27,8 +27,8 @@ const useInteraction = ()=>{
             if (callback) callback(params);
         });
     };
-    const trigger = ({ event, data, selector })=>{
-        const element = document.querySelector(selector);
+    const trigger = ({ event, data, selector, element: elementParam })=>{
+        const element = elementParam || document.querySelector(selector);
         if (!element) return;
         const eventDispatch = new CustomEvent(event, {
             bubbles: false,

package/dist/cjs/helpers/third-party/appConfig.js

@@ -108,6 +108,24 @@ const PreorderNowWodPresaleConfig = {
         appId: 'fdf17d17-ef12-4a7b-8383-20cc1fc2a4b6'
     }
 };
+const YotpoReviewsV3UgcConfig = {
+    YotpoReviews: {
+        appName: 'yotpo-product-reviews-ugc',
+        appId: 'eb7dfd7d-db44-4334-bc49-c893b51b36cf'
+    }
+};
+const WhatmoreShoppableVideosreelConfig = {
+    WhatmoreShoppableVideosreel: {
+        appName: 'whatmore-shoppable-videos',
+        appId: '20db8a72-315a-4364-8885-64219ee48303'
+    }
+};
+const ProductOptionsCustomizerConfig = {
+    ProductOptionsCustomizer: {
+        appName: 'product-options-customizer',
+        appId: '6857ca6c-35eb-4b6f-9d58-a039f31d9406'
+    }
+};
 
 exports.BonLoyaltyRewardsReferralsConfig = BonLoyaltyRewardsReferralsConfig;
 exports.EasyBundleBuilderSkailamaConfig = EasyBundleBuilderSkailamaConfig;
@@ -118,6 +136,7 @@ exports.KiteFreeGiftDiscountConfig = KiteFreeGiftDiscountConfig;
 exports.LoopSubscriptionsConfig = LoopSubscriptionsConfig;
 exports.PreorderNowPreOrderPqConfig = PreorderNowPreOrderPqConfig;
 exports.PreorderNowWodPresaleConfig = PreorderNowWodPresaleConfig;
+exports.ProductOptionsCustomizerConfig = ProductOptionsCustomizerConfig;
 exports.PumperBundlesVolumeDiscountConfig = PumperBundlesVolumeDiscountConfig;
 exports.RechargeSubscriptionsConfig = RechargeSubscriptionsConfig;
 exports.ReviewxpoProductReviewsAppConfig = ReviewxpoProductReviewsAppConfig;
@@ -127,3 +146,5 @@ exports.SimpleBundlesKitsConfig = SimpleBundlesKitsConfig;
 exports.SkioSubscriptionsYcS20Config = SkioSubscriptionsYcS20Config;
 exports.SubifySubscriptionsConfig = SubifySubscriptionsConfig;
 exports.UnlimitedBundlesDiscountsConfig = UnlimitedBundlesDiscountsConfig;
+exports.WhatmoreShoppableVideosreelConfig = WhatmoreShoppableVideosreelConfig;
+exports.YotpoReviewsV3UgcConfig = YotpoReviewsV3UgcConfig;

package/dist/cjs/helpers/third-party/appSetting.js

@@ -88,6 +88,13 @@ const overrideSettings = (tag, currentSetting, appSetting)=>{
                     bundle_id: appSetting?.['customBundleId']
                 };
             }
+        case 'PumperBundlesVolumeDiscount':
+            {
+                return {
+                    ...currentSetting,
+                    selected_product: appSetting?.['productHandle'] || '{{ product }}'
+                };
+            }
         default:
             return currentSetting;
     }
@@ -107,7 +114,7 @@ const ReviewxpoProductReviewsApp = {
 const PumperBundlesVolumeDiscount = {
     PumperBundlesVolumeDiscount: {
         'app-block': {
-            selected_product: '{{product}}',
+            selected_product: '{{ product }}',
             using_page_builder: false
         }
     }
@@ -197,7 +204,96 @@ const PreorderNowWodPresale = {
         'popups-block': null
     }
 };
+const YotpoReviews = {
+    YotpoReviews: {
+        reviews: {
+            product: '{{ product }}'
+        },
+        'star-rating': {
+            product: '{{ product }}'
+        }
+    }
+};
+const WhatmoreShoppableVideosreel = {
+    WhatmoreShoppableVideosreel: {
+        'app-block': {
+            "heading": "Watch and Buy",
+            "template-type": "template-f",
+            "show-views": "show",
+            "ui-theme": "round",
+            "color-primary": "#343434",
+            "color-secondary": "#343434",
+            "title-font": "poppins_n4",
+            "primary-font": "poppins_n4",
+            "title-font-size": 40,
+            "title-font-size-portrait": 24,
+            "landscape-padding": 40,
+            "top-bottom-padding": 20,
+            "scroll-video-tile-size": 80,
+            "scroll-video-tile-size-portrait": 80,
+            "min-height": 380
+        },
+        'app-block-banner': {
+            "template-type": "template-banner-a",
+            "ui-theme": "round",
+            "banner-video-tile-size": 80
+        },
+        'app-block-collections': {
+            "collectionHeading": "W",
+            "template-type": "template-collections-b",
+            "ui-theme": "round",
+            "color-secondary": "#343434",
+            "primary-font": "poppins_n4",
+            "tile-size": 60,
+            "tile-size-portrait": 60,
+            "min-height": 250
+        },
+        'app-block-stories': {
+            "template-type": "template-stories-a",
+            "ui-theme": "round",
+            "color-primary": "#343434",
+            "color-secondary": "#343434",
+            "primary-font": "poppins_n4",
+            "stories-top-bottom-padding": 0,
+            "story-tile-size": 40,
+            "story-tile-size-desktop": 40
+        }
+    }
+};
+const ProductOptionsCustomizer = {
+    ProductOptionsCustomizer: {
+        'product-page-customizer': {
+            "pc_container_size": 100,
+            "pc_show_options_total": "initial",
+            "pc_customizations_total_text": "Customizations Total:",
+            "pc_show_preloader": "hide",
+            "pc_preloader_color": "",
+            "pc_ignore_redirect_command": true,
+            "pc_basic_label_text_color": "#000000",
+            "pc_basic_label_font_size": 14,
+            "pc_basic_label_bolden": "unset",
+            "pc_basic_label_space_above": 0,
+            "pc_basic_option_background_color": "#FFFFFF",
+            "pc_basic_option_text_color": "#000000",
+            "pc_basic_option_border_color": "#000000",
+            "pc_basic_option_border_style": "solid",
+            "pc_basic_option_border_width": 1,
+            "pc_basic_option_curve_the_corners": "none",
+            "pc_basic_option_font_size": 14,
+            "pc_basic_option_bolden": "none",
+            "pc_basic_option_width": 100,
+            "pc_basic_option_space_above": 0,
+            "pc_basic_option_space_below": 0,
+            "pc_basic_option_space_inside": 10,
+            "pc_advanced_custom_css": "",
+            "pc_advanced_custom_js": "",
+            "pc_show_image_swatch_preview": false
+        }
+    }
+};
 const composeSettingsByWidgetType = {
+    ...ProductOptionsCustomizer,
+    ...WhatmoreShoppableVideosreel,
     ...JunipProductReviewsUgc,
     ...FlyBundlesUpsellsFbt,
     ...PreorderNowWodPresale,
@@ -215,7 +311,8 @@ const composeSettingsByWidgetType = {
     ...RechargeSubscriptions,
     ...LoyaltyRewardsReferrals,
     ...SubifySubscriptions,
-    ...SelleasyWidget
+    ...SelleasyWidget,
+    ...YotpoReviews
 };
 
 exports.composeSettingsByWidgetType = composeSettingsByWidgetType;

package/dist/cjs/helpers/third-party/constant.js

@@ -20,7 +20,10 @@ const mapShopifyAppMeta = {
     ...appConfig.PreorderNowPreOrderPqConfig,
     ...appConfig.FlyBundlesUpsellsFbtConfig,
     ...appConfig.JunipProductReviewsUgcConfig,
-    ...appConfig.PreorderNowWodPresaleConfig
+    ...appConfig.PreorderNowWodPresaleConfig,
+    ...appConfig.YotpoReviewsV3UgcConfig,
+    ...appConfig.WhatmoreShoppableVideosreelConfig,
+    ...appConfig.ProductOptionsCustomizerConfig
 };
 const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
 

package/dist/cjs/hooks/animation/useAnimationConfig.js

@@ -14,7 +14,8 @@ const useAnimationConfig = (props)=>{
         const { animation, setting } = triggerConfig[trigger];
         return {
             type: animation,
-            setting: setting[animation]
+            setting: setting[animation],
+            reverse: trigger === "hidden"
         };
     }, [
         configByDevices

package/dist/cjs/hooks/animation/useApplyAnimation.js

@@ -25,13 +25,13 @@ const useApplyAnimation = ({ props })=>{
         setAnimationOnFinish,
         setToolbarActive
     });
-    const generateAnimation = react.useCallback(({ target, setting, type })=>{
-        return animation[type](target, setting);
+    const generateAnimation = react.useCallback(({ target, setting, type, reverse })=>{
+        return animation[type](target, setting, reverse);
     }, [
         animation
     ]);
     const initListAnimations = react.useCallback(()=>{
-        const { type, setting } = getAnimationConfig();
+        const { type, setting, reverse } = getAnimationConfig();
         if (!type || type === animations.AnimationType.None || !targetObjects.current.length) {
             cancelAnimation();
             return;
@@ -39,9 +39,9 @@ const useApplyAnimation = ({ props })=>{
         const listAnimations = targetObjects.current.map((item)=>generateAnimation({
                 type,
                 setting,
-                target: item.target
+                target: item.target,
+                reverse
             }));
-        console.log('listAnimations', listAnimations);
         cancelAnimation();
         setAnimation(listAnimations);
     }, [

package/dist/esm/components/ComponentToolbarPreview.js

@@ -56,7 +56,33 @@ const ComponentToolbarPreview = (props)=>{
         editingPageType
     ]);
     const isSelectOnPage = useMemo(()=>interactionData?.isSelectOnPage, [
-        interactionData
+        interactionData?.isSelectOnPage
+    ]);
+    const settingType = useMemo(()=>interactionData?.settingType, [
+        interactionData?.settingType
+    ]);
+    const isShowIconInteractionTarget = useMemo(()=>{
+        return interactionData?.item?.targets?.find((t)=>t.uid === props.uid && t?.type !== 'PAGE') && isSelectOnPage && settingType === 'TARGET';
+    }, [
+        interactionData?.item?.targets,
+        isSelectOnPage,
+        props.uid,
+        settingType
+    ]);
+    const isShowIconInteractionTrigger = useMemo(()=>{
+        return interactionData?.item?.self?.uid === props.uid && interactionData?.item?.self.type !== 'PAGE' && isSelectOnPage && settingType === 'TRIGGER';
+    }, [
+        interactionData?.item?.self?.type,
+        interactionData?.item?.self?.uid,
+        isSelectOnPage,
+        props.uid,
+        settingType
+    ]);
+    const isDisplayIconDrag = useMemo(()=>{
+        return !isShowIconInteractionTarget && !isShowIconInteractionTrigger;
+    }, [
+        isShowIconInteractionTarget,
+        isShowIconInteractionTrigger
     ]);
     const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = usePostPurchase(props.uid, props.tag || '');
     const editProductElementList = [
@@ -334,7 +360,6 @@ const ComponentToolbarPreview = (props)=>{
         if (isShopifySection || isThemeSection && !isThemeSectionEditor) return false;
         return ableGenerateContentElements.includes(tag);
     };
-    // if (!isActive) return null;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxs("div", {
@@ -349,7 +374,39 @@ const ComponentToolbarPreview = (props)=>{
                         onClick: (e)=>onShowParent(e),
                         "aria-hidden": "true",
                         children: [
-                            /*#__PURE__*/ jsx("div", {
+                            isShowIconInteractionTrigger && /*#__PURE__*/ jsx("div", {
+                                className: "gp-hidden interaction-use-custom-element",
+                                children: /*#__PURE__*/ jsx("svg", {
+                                    width: "12",
+                                    height: "13",
+                                    viewBox: "0 0 12 13",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M4.36823 0.430157C4.51621 0.205309 4.76733 0.0699463 5.0365 0.0699463H9.886C10.2045 0.0699463 10.3952 0.424012 10.2201 0.689974L8.36993 3.49883C8.28234 3.63182 8.37772 3.80885 8.53695 3.80885H10.7492C11.1114 3.80885 11.2871 4.25167 11.0235 4.5L3.03995 12.0213C2.75745 12.2874 2.29956 12.0357 2.37286 11.6546L3.28019 6.93662C3.30391 6.81327 3.20939 6.69885 3.08379 6.69885H0.984895C0.666494 6.69885 0.475723 6.34493 0.650759 6.07895L4.36823 0.430157ZM5.48883 1.20046C5.35424 1.20046 5.22868 1.26814 5.15469 1.38057L2.6027 5.25839C2.51518 5.39137 2.61056 5.56833 2.76976 5.56833H4.27861C4.52982 5.56833 4.71885 5.79718 4.67141 6.04387L4.12087 8.9066C4.08422 9.09717 4.31317 9.22301 4.45442 9.08994L8.49328 5.28494C8.62508 5.16077 8.53721 4.93936 8.35614 4.93936H6.75127C6.4328 4.93936 6.24204 4.5853 6.41722 4.31934L8.26734 1.51048C8.35494 1.37749 8.25956 1.20046 8.10032 1.20046H5.48883Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                })
+                            }),
+                            isShowIconInteractionTarget && /*#__PURE__*/ jsx("div", {
+                                className: "gp-hidden interaction-use-custom-element",
+                                children: /*#__PURE__*/ jsx("svg", {
+                                    width: "14",
+                                    height: "14",
+                                    viewBox: "0 0 14 14",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M6.2941 2.19513C6.70415 2.13657 6.9891 1.75669 6.93054 1.34663C6.87198 0.936581 6.49209 0.651638 6.08204 0.710196C2.98687 1.15221 0.607666 3.8125 0.607666 7.02978C0.607666 10.5556 3.46588 13.4138 6.99166 13.4138C10.1798 13.4138 12.8209 11.0775 13.2987 8.02354C13.3627 7.61431 13.0828 7.23065 12.6736 7.16663C12.2644 7.1026 11.8807 7.38245 11.8167 7.79169C11.4513 10.127 9.42946 11.9138 6.99166 11.9138C4.2943 11.9138 2.10767 9.72714 2.10767 7.02978C2.10767 4.56958 3.92742 2.53311 6.2941 2.19513ZM9.32325 0.978487C9.59794 0.703796 10.0673 0.833594 10.1618 1.21039L10.648 3.14898C10.6705 3.2384 10.7403 3.30822 10.8297 3.33065L12.7683 3.81691C13.1451 3.91143 13.2749 4.38075 13.0002 4.65544L11.3265 6.32911C11.099 6.55668 10.7758 6.66082 10.4581 6.60891L9.03886 6.37696C8.72123 6.32505 8.39804 6.42918 8.17046 6.65676L7.40064 7.42658C7.16633 7.66089 6.78643 7.66089 6.55211 7.42658C6.3178 7.19227 6.3178 6.81237 6.55211 6.57805L7.32193 5.80823C7.54951 5.58066 7.65364 5.25746 7.60173 4.93983L7.36978 3.52055C7.31787 3.20293 7.42201 2.87973 7.64958 2.65216L9.32325 0.978487ZM8.79074 4.77514C8.82538 4.98713 8.99156 5.15331 9.20355 5.18795L10.2975 5.36674C10.4564 5.3927 10.618 5.34063 10.7317 5.22684L10.9663 4.99227C11.1037 4.85492 11.0388 4.62026 10.8504 4.573L9.98586 4.35615C9.80703 4.3113 9.66739 4.17166 9.62254 3.99283L9.40569 3.12832C9.35843 2.93992 9.12377 2.87502 8.98642 3.01237L8.75185 3.24695C8.63806 3.36073 8.58599 3.52233 8.61195 3.68114L8.79074 4.77514ZM7.02213 4.44284C7.14103 4.83962 6.91577 5.25766 6.51899 5.37657C5.8172 5.58687 5.30708 6.2382 5.30708 7.00672C5.30708 7.94638 6.06883 8.70813 7.00849 8.70813C7.77819 8.70813 8.43033 8.19644 8.6396 7.49302C8.75772 7.096 9.17531 6.86991 9.57233 6.98802C9.96934 7.10614 10.1954 7.52373 10.0773 7.92075C9.68401 9.24279 8.45997 10.2081 7.00849 10.2081C5.2404 10.2081 3.80708 8.77481 3.80708 7.00672C3.80708 5.55746 4.76949 4.33493 6.0884 3.9397C6.48518 3.82079 6.90323 4.04606 7.02213 4.44284Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                })
+                            }),
+                            isDisplayIconDrag && /*#__PURE__*/ jsx("div", {
                                 "data-toolbar-icon-drag": true,
                                 children: /*#__PURE__*/ jsxs("svg", {
                                     width: "16",

package/dist/esm/components/ComponentWrapper.js

@@ -8,6 +8,16 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
     if (props.type === 'section') return null;
     const style = composeAdvanceStyle(props.advanced, props.tag, pageType);
     const advanced = props.advanced;
+    const interactionAttributes = ()=>{
+        let result = {};
+        if (props.advanced?.displayInitInteraction !== undefined) {
+            result = {
+                'display-init': props.advanced?.displayInitInteraction === false ? 'hide' : 'show',
+                'gp-interaction-wrapper': ''
+            };
+        }
+        return result;
+    };
     if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
@@ -19,7 +29,11 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
                     className: advanced?.cssClass,
                     ...children.props,
                     style,
-                    advanced
+                    advanced,
+                    builderAttrs: {
+                        ...children.props.builderAttrs,
+                        ...interactionAttributes()
+                    }
                 })
             ]
         });
@@ -32,6 +46,7 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
             }),
             /*#__PURE__*/ jsx("div", {
                 style: style,
+                ...interactionAttributes(),
                 className: `${props.uid} ${advanced?.cssClass}`,
                 children: children
             })

package/dist/esm/components/InteractionSuffix.js

@@ -1,4 +1,4 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import 'zustand';
 import 'swr';
@@ -15,18 +15,18 @@ import 'dayjs';
 import { useInteraction } from '../helpers/interaction/index.js';
 import '../helpers/convert.js';
 
-const InteractionSuffix = ({ tag, uid })=>{
+const InteractionSuffix = ({ uid })=>{
     const { closeSelectOnPage } = useInteraction();
     const currentInteraction = usePageStore((s)=>s.interactionData?.item);
     const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const isCurrentInteractionTarget = useMemo(()=>{
-        return currentInteraction?.targets?.find((t)=>t.uid === uid);
+        return currentInteraction?.targets?.find((t)=>t.uid === uid && t.type !== 'PAGE');
     }, [
         currentInteraction,
         uid
     ]);
     const isCurrentInteractionTrigger = useMemo(()=>{
-        return currentInteraction?.self?.uid === uid;
+        return currentInteraction?.self?.uid === uid && currentInteraction?.self?.type !== 'PAGE';
     }, [
         currentInteraction,
         uid
@@ -37,76 +37,15 @@ const InteractionSuffix = ({ tag, uid })=>{
         isCurrentInteractionTarget,
         isCurrentInteractionTrigger
     ]);
-    const positionOffset = useMemo(()=>{
-        if (isCurrentInteractionTrigger && isCurrentInteractionTarget) {
-            return 80;
-        }
-        return 40;
-    }, [
-        isCurrentInteractionTrigger,
-        isCurrentInteractionTarget
-    ]);
     if (!isDisplay) {
         return /*#__PURE__*/ jsx(Fragment, {});
     }
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            isSelectOnPage && /*#__PURE__*/ jsx("button", {
-                className: "gp-bg-[#F4F4F4]  gp-px-2  gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-element-btn",
-                onClick: closeSelectOnPage,
-                children: "Use element"
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: `gp-hidden gp-absolute interaction-suffix gp-gap-[8px] ${tag == 'Section' ? `gp-left-[-${positionOffset}px]` : `gp-right-[-${positionOffset}px]`}`,
-                children: [
-                    isCurrentInteractionTrigger && /*#__PURE__*/ jsx("div", {
-                        className: `gp-h-8  gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center `,
-                        children: /*#__PURE__*/ jsx("svg", {
-                            width: "16",
-                            height: "16",
-                            viewBox: "0 0 16 16",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: /*#__PURE__*/ jsx("path", {
-                                fillRule: "evenodd",
-                                clipRule: "evenodd",
-                                d: "M12.9196 5.80449C13.0989 5.80449 13.1876 6.02216 13.0595 6.14749L4.83569 14.1892C4.69517 14.3267 4.46149 14.2002 4.49967 14.0074L5.50422 8.93537C5.53483 8.7808 5.41656 8.6368 5.25898 8.6368H3.08019C2.92551 8.6368 2.82938 8.46874 2.90779 8.33541L6.72099 1.85154C6.75692 1.79045 6.8225 1.75293 6.89338 1.75293H12.5729C12.7386 1.75293 12.8324 1.94273 12.7319 2.07435L10.1891 5.40272C10.0634 5.56724 10.1807 5.80449 10.3877 5.80449H12.9196Z",
-                                fill: "#F9F9F9"
-                            })
-                        })
-                    }),
-                    isCurrentInteractionTarget && /*#__PURE__*/ jsx("div", {
-                        className: `gp-h-8 min-w-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center`,
-                        children: /*#__PURE__*/ jsxs("svg", {
-                            width: "16",
-                            height: "16",
-                            viewBox: "0 0 16 16",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: [
-                                /*#__PURE__*/ jsx("path", {
-                                    d: "M8.58987 2.11238C8.62815 2.66333 8.21254 3.141 7.66158 3.17928C6.73192 3.24386 5.84034 3.57396 5.09276 4.13034C4.34519 4.68673 3.77304 5.44602 3.44429 6.31801C3.11554 7.19 3.04401 8.13803 3.23821 9.04947C3.4324 9.96092 3.88415 10.7975 4.53978 11.4597C5.19541 12.122 6.02737 12.5821 6.93682 12.7854C7.84626 12.9888 8.79496 12.9268 9.67021 12.6068C10.5455 12.2869 11.3105 11.7224 11.8743 10.9804C12.4382 10.2385 12.7772 9.35025 12.8512 8.42129C12.895 7.87074 13.3768 7.45996 13.9273 7.50377C14.4779 7.54758 14.8887 8.0294 14.8449 8.57994C14.7406 9.8906 14.2622 11.1438 13.4667 12.1906C12.6711 13.2374 11.5918 14.0338 10.3569 14.4852C9.12204 14.9367 7.78353 15.0241 6.50041 14.7373C5.2173 14.4504 4.0435 13.8012 3.11848 12.8668C2.19345 11.9324 1.55609 10.7522 1.28211 9.46624C1.00813 8.1803 1.10905 6.84274 1.57287 5.61247C2.03669 4.3822 2.84393 3.31093 3.89867 2.52593C4.95342 1.74093 6.21133 1.27521 7.52297 1.18409C8.07393 1.14581 8.5516 1.56142 8.58987 2.11238Z",
-                                    fill: "#F9F9F9"
-                                }),
-                                /*#__PURE__*/ jsx("path", {
-                                    fillRule: "evenodd",
-                                    clipRule: "evenodd",
-                                    d: "M11.9757 1.25658C12.184 1.31428 12.3452 1.47958 12.3976 1.68929L12.7872 3.24774L14.3457 3.63736C14.5554 3.68978 14.7207 3.85096 14.7784 4.05928C14.8361 4.2676 14.7773 4.49085 14.6244 4.64371L12.7167 6.55141C12.5677 6.70044 12.3514 6.76035 12.1469 6.70924L10.5688 6.3147L8.42436 8.45912C8.19005 8.69344 7.81015 8.69344 7.57583 8.45912C7.34152 8.22481 7.34152 7.84491 7.57583 7.61059L9.72025 5.46617L9.32572 3.88804C9.2746 3.68357 9.33451 3.46728 9.48354 3.31825L11.3912 1.41054C11.5441 1.25769 11.7674 1.19888 11.9757 1.25658ZM10.8795 5.15545L12.1084 5.46267L13.0266 4.54451L12.1469 4.3246C11.9319 4.27086 11.7641 4.10301 11.7104 3.88804L11.4904 3.0084L10.5723 3.92656L10.8795 5.15545Z",
-                                    fill: "#F9F9F9"
-                                }),
-                                /*#__PURE__*/ jsx("path", {
-                                    d: "M7.35783 6.45343C7.87208 6.25201 8.12568 5.67185 7.92426 5.15761C7.72284 4.64336 7.14268 4.38976 6.62844 4.59118C6.05705 4.81498 5.55049 5.17772 5.15453 5.64655C4.75858 6.11538 4.4857 6.67552 4.36055 7.27631C4.23539 7.87709 4.26189 8.49961 4.43764 9.08758C4.6134 9.67555 4.93289 10.2105 5.36727 10.6439C5.80165 11.0774 6.33722 11.3958 6.92556 11.5702C7.51391 11.7445 8.13643 11.7695 8.73683 11.6427C9.33723 11.5158 9.89652 11.2413 10.3641 10.8439C10.8318 10.4465 11.1929 9.93885 11.4151 9.36679C11.615 8.85196 11.3597 8.27254 10.8449 8.07262C10.3301 7.87269 9.75066 8.12797 9.55073 8.6428C9.44887 8.9051 9.28329 9.1378 9.06901 9.3199C8.85474 9.50199 8.59851 9.62774 8.32352 9.68582C8.04853 9.7439 7.76341 9.73249 7.49394 9.65262C7.22445 9.57274 6.97907 9.42691 6.78001 9.22825C6.58093 9.0296 6.43446 8.78439 6.35386 8.51478C6.27327 8.24517 6.26112 7.9597 6.31851 7.6842C6.37591 7.4087 6.50102 7.1519 6.68251 6.93702C6.86399 6.72214 7.0961 6.55595 7.35783 6.45343Z",
-                                    fill: "#F9F9F9"
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        ]
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: isSelectOnPage && /*#__PURE__*/ jsx("button", {
+            className: "gp-bg-[#F4F4F4]  gp-px-2  gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-custom-element",
+            onClick: closeSelectOnPage,
+            children: "Use element"
+        })
     });
 };
 

package/dist/esm/components/Render.liquid.js

@@ -211,7 +211,7 @@ const RenderCustomCode = (item)=>{
 };
 const appendAnimation = (props, liquid)=>{
     const { advanced, tag } = props;
-    const { animation, op: opacity, hasAnimationInteraction, displayInitInteraction = true } = advanced ?? {};
+    const { animation, op: opacity, hasAnimationInteraction, displayInitInteraction } = advanced ?? {};
     const getAnimationType = (settings, type)=>{
         return settings?.triggerConfig?.[type]?.animation ?? 'none';
     };
@@ -239,7 +239,8 @@ const appendAnimation = (props, liquid)=>{
     };
     return template`
   <gp-animation
-    display-init="${!displayInitInteraction ? 'hide' : 'show'}"
+    gp-interaction-wrapper
+    display-init="${displayInitInteraction === false ? 'hide' : 'show'}"
     gp-data='${JSON.stringify({
         config: animation,
         tag,

package/dist/esm/contexts/PageContext.js

@@ -54,6 +54,14 @@ const createPageStoreProvider = (data)=>createStore((set)=>({
                             selectType
                         }
                     }));
+            },
+            setInteractionSettingType: (settingType)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            settingType
+                        }
+                    }));
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
@@ -63,7 +71,7 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             productOffers,
             publicStoreFrontData,
             interactionData: {
-                selectType: 'element'
+                selectType: 'ELEMENT'
             }
         }), [
         dynamicProduct,

package/dist/esm/helpers/interaction/index.js

@@ -25,8 +25,8 @@ const useInteraction = ()=>{
             if (callback) callback(params);
         });
     };
-    const trigger = ({ event, data, selector })=>{
-        const element = document.querySelector(selector);
+    const trigger = ({ event, data, selector, element: elementParam })=>{
+        const element = elementParam || document.querySelector(selector);
         if (!element) return;
         const eventDispatch = new CustomEvent(event, {
             bubbles: false,

package/dist/esm/helpers/third-party/appConfig.js

@@ -106,5 +106,23 @@ const PreorderNowWodPresaleConfig = {
         appId: 'fdf17d17-ef12-4a7b-8383-20cc1fc2a4b6'
     }
 };
+const YotpoReviewsV3UgcConfig = {
+    YotpoReviews: {
+        appName: 'yotpo-product-reviews-ugc',
+        appId: 'eb7dfd7d-db44-4334-bc49-c893b51b36cf'
+    }
+};
+const WhatmoreShoppableVideosreelConfig = {
+    WhatmoreShoppableVideosreel: {
+        appName: 'whatmore-shoppable-videos',
+        appId: '20db8a72-315a-4364-8885-64219ee48303'
+    }
+};
+const ProductOptionsCustomizerConfig = {
+    ProductOptionsCustomizer: {
+        appName: 'product-options-customizer',
+        appId: '6857ca6c-35eb-4b6f-9d58-a039f31d9406'
+    }
+};
 
-export { BonLoyaltyRewardsReferralsConfig, EasyBundleBuilderSkailamaConfig, FastBundleBundlesDiscountsConfig, FlyBundlesUpsellsFbtConfig, JunipProductReviewsUgcConfig, KiteFreeGiftDiscountConfig, LoopSubscriptionsConfig, PreorderNowPreOrderPqConfig, PreorderNowWodPresaleConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SubifySubscriptionsConfig, UnlimitedBundlesDiscountsConfig };
+export { BonLoyaltyRewardsReferralsConfig, EasyBundleBuilderSkailamaConfig, FastBundleBundlesDiscountsConfig, FlyBundlesUpsellsFbtConfig, JunipProductReviewsUgcConfig, KiteFreeGiftDiscountConfig, LoopSubscriptionsConfig, PreorderNowPreOrderPqConfig, PreorderNowWodPresaleConfig, ProductOptionsCustomizerConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SubifySubscriptionsConfig, UnlimitedBundlesDiscountsConfig, WhatmoreShoppableVideosreelConfig, YotpoReviewsV3UgcConfig };

package/dist/esm/helpers/third-party/appSetting.js

@@ -86,6 +86,13 @@ const overrideSettings = (tag, currentSetting, appSetting)=>{
                     bundle_id: appSetting?.['customBundleId']
                 };
             }
+        case 'PumperBundlesVolumeDiscount':
+            {
+                return {
+                    ...currentSetting,
+                    selected_product: appSetting?.['productHandle'] || '{{ product }}'
+                };
+            }
         default:
             return currentSetting;
     }
@@ -105,7 +112,7 @@ const ReviewxpoProductReviewsApp = {
 const PumperBundlesVolumeDiscount = {
     PumperBundlesVolumeDiscount: {
         'app-block': {
-            selected_product: '{{product}}',
+            selected_product: '{{ product }}',
             using_page_builder: false
         }
     }
@@ -195,7 +202,96 @@ const PreorderNowWodPresale = {
         'popups-block': null
     }
 };
+const YotpoReviews = {
+    YotpoReviews: {
+        reviews: {
+            product: '{{ product }}'
+        },
+        'star-rating': {
+            product: '{{ product }}'
+        }
+    }
+};
+const WhatmoreShoppableVideosreel = {
+    WhatmoreShoppableVideosreel: {
+        'app-block': {
+            "heading": "Watch and Buy",
+            "template-type": "template-f",
+            "show-views": "show",
+            "ui-theme": "round",
+            "color-primary": "#343434",
+            "color-secondary": "#343434",
+            "title-font": "poppins_n4",
+            "primary-font": "poppins_n4",
+            "title-font-size": 40,
+            "title-font-size-portrait": 24,
+            "landscape-padding": 40,
+            "top-bottom-padding": 20,
+            "scroll-video-tile-size": 80,
+            "scroll-video-tile-size-portrait": 80,
+            "min-height": 380
+        },
+        'app-block-banner': {
+            "template-type": "template-banner-a",
+            "ui-theme": "round",
+            "banner-video-tile-size": 80
+        },
+        'app-block-collections': {
+            "collectionHeading": "W",
+            "template-type": "template-collections-b",
+            "ui-theme": "round",
+            "color-secondary": "#343434",
+            "primary-font": "poppins_n4",
+            "tile-size": 60,
+            "tile-size-portrait": 60,
+            "min-height": 250
+        },
+        'app-block-stories': {
+            "template-type": "template-stories-a",
+            "ui-theme": "round",
+            "color-primary": "#343434",
+            "color-secondary": "#343434",
+            "primary-font": "poppins_n4",
+            "stories-top-bottom-padding": 0,
+            "story-tile-size": 40,
+            "story-tile-size-desktop": 40
+        }
+    }
+};
+const ProductOptionsCustomizer = {
+    ProductOptionsCustomizer: {
+        'product-page-customizer': {
+            "pc_container_size": 100,
+            "pc_show_options_total": "initial",
+            "pc_customizations_total_text": "Customizations Total:",
+            "pc_show_preloader": "hide",
+            "pc_preloader_color": "",
+            "pc_ignore_redirect_command": true,
+            "pc_basic_label_text_color": "#000000",
+            "pc_basic_label_font_size": 14,
+            "pc_basic_label_bolden": "unset",
+            "pc_basic_label_space_above": 0,
+            "pc_basic_option_background_color": "#FFFFFF",
+            "pc_basic_option_text_color": "#000000",
+            "pc_basic_option_border_color": "#000000",
+            "pc_basic_option_border_style": "solid",
+            "pc_basic_option_border_width": 1,
+            "pc_basic_option_curve_the_corners": "none",
+            "pc_basic_option_font_size": 14,
+            "pc_basic_option_bolden": "none",
+            "pc_basic_option_width": 100,
+            "pc_basic_option_space_above": 0,
+            "pc_basic_option_space_below": 0,
+            "pc_basic_option_space_inside": 10,
+            "pc_advanced_custom_css": "",
+            "pc_advanced_custom_js": "",
+            "pc_show_image_swatch_preview": false
+        }
+    }
+};
 const composeSettingsByWidgetType = {
+    ...ProductOptionsCustomizer,
+    ...WhatmoreShoppableVideosreel,
     ...JunipProductReviewsUgc,
     ...FlyBundlesUpsellsFbt,
     ...PreorderNowWodPresale,
@@ -213,7 +309,8 @@ const composeSettingsByWidgetType = {
     ...RechargeSubscriptions,
     ...LoyaltyRewardsReferrals,
     ...SubifySubscriptions,
-    ...SelleasyWidget
+    ...SelleasyWidget,
+    ...YotpoReviews
 };
 
 export { composeSettingsByWidgetType, overrideSettings };

package/dist/esm/helpers/third-party/constant.js

@@ -1,4 +1,4 @@
-import { RechargeSubscriptionsConfig, BonLoyaltyRewardsReferralsConfig, SubifySubscriptionsConfig, SelleasyConfig, LoopSubscriptionsConfig, SkioSubscriptionsYcS20Config, ShopifyFormsConfig, ReviewxpoProductReviewsAppConfig, PumperBundlesVolumeDiscountConfig, UnlimitedBundlesDiscountsConfig, KiteFreeGiftDiscountConfig, FastBundleBundlesDiscountsConfig, SimpleBundlesKitsConfig, EasyBundleBuilderSkailamaConfig, PreorderNowPreOrderPqConfig, FlyBundlesUpsellsFbtConfig, JunipProductReviewsUgcConfig, PreorderNowWodPresaleConfig } from './appConfig.js';
+import { RechargeSubscriptionsConfig, BonLoyaltyRewardsReferralsConfig, SubifySubscriptionsConfig, SelleasyConfig, LoopSubscriptionsConfig, SkioSubscriptionsYcS20Config, ShopifyFormsConfig, ReviewxpoProductReviewsAppConfig, PumperBundlesVolumeDiscountConfig, UnlimitedBundlesDiscountsConfig, KiteFreeGiftDiscountConfig, FastBundleBundlesDiscountsConfig, SimpleBundlesKitsConfig, EasyBundleBuilderSkailamaConfig, PreorderNowPreOrderPqConfig, FlyBundlesUpsellsFbtConfig, JunipProductReviewsUgcConfig, PreorderNowWodPresaleConfig, YotpoReviewsV3UgcConfig, WhatmoreShoppableVideosreelConfig, ProductOptionsCustomizerConfig } from './appConfig.js';
 
 const mapShopifyAppMeta = {
     ...RechargeSubscriptionsConfig,
@@ -18,7 +18,10 @@ const mapShopifyAppMeta = {
     ...PreorderNowPreOrderPqConfig,
     ...FlyBundlesUpsellsFbtConfig,
     ...JunipProductReviewsUgcConfig,
-    ...PreorderNowWodPresaleConfig
+    ...PreorderNowWodPresaleConfig,
+    ...YotpoReviewsV3UgcConfig,
+    ...WhatmoreShoppableVideosreelConfig,
+    ...ProductOptionsCustomizerConfig
 };
 const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
 

package/dist/esm/hooks/animation/useAnimationConfig.js

@@ -12,7 +12,8 @@ const useAnimationConfig = (props)=>{
         const { animation, setting } = triggerConfig[trigger];
         return {
             type: animation,
-            setting: setting[animation]
+            setting: setting[animation],
+            reverse: trigger === "hidden"
         };
     }, [
         configByDevices

package/dist/esm/hooks/animation/useApplyAnimation.js

@@ -21,13 +21,13 @@ const useApplyAnimation = ({ props })=>{
         setAnimationOnFinish,
         setToolbarActive
     });
-    const generateAnimation = useCallback(({ target, setting, type })=>{
-        return animation[type](target, setting);
+    const generateAnimation = useCallback(({ target, setting, type, reverse })=>{
+        return animation[type](target, setting, reverse);
     }, [
         animation
     ]);
     const initListAnimations = useCallback(()=>{
-        const { type, setting } = getAnimationConfig();
+        const { type, setting, reverse } = getAnimationConfig();
         if (!type || type === AnimationType.None || !targetObjects.current.length) {
             cancelAnimation();
             return;
@@ -35,9 +35,9 @@ const useApplyAnimation = ({ props })=>{
         const listAnimations = targetObjects.current.map((item)=>generateAnimation({
                 type,
                 setting,
-                target: item.target
+                target: item.target,
+                reverse
             }));
-        console.log('listAnimations', listAnimations);
         cancelAnimation();
         setAnimation(listAnimations);
     }, [

package/dist/types/index.d.ts

@@ -6887,7 +6887,7 @@ type VitalsWidgetType = 'addToWishlist' | 'goToWishlist' | 'paymentLogos' | 'rec
 type FeraReviewsWidgetType = 'productReviews' | 'testimonialCarousel' | 'allReviews' | 'averageStoreRatingBadge' | 'inStoreMedia' | 'averageRatingBadge' | 'productPageMedia';
 type FeraReviewsV3WidgetType = 'allReviews' | 'testimonialCarousel' | 'mediaGallery' | 'productDetailRating' | 'productReviews' | 'productCollectionRating' | 'otherWidget';
 type GrowaveWidgetType = 'reviews' | 'badge' | 'productListBadge' | 'wishList' | 'socialShare' | 'favorite';
-type AliReviewsWidgetType = 'section' | 'starRating' | 'starBadge' | 'starBadgeCollection' | 'carouselSlider';
+type AliReviewsWidgetType = 'starRating' | 'reviewBox';
 type OpinewWidgetType = 'reviews' | 'badge' | 'badgeCollection' | 'carousel' | 'allReviews' | 'allReviewsBadge';
 type OpinewDesignWidgetType = 'opinew_badge_wide_average' | 'opinew_badge_wide' | 'opinew_badge_small';
 type UltimateSalesBoostWidgetType = 'sticker' | 'message' | 'getItByTimer' | 'buyXGetTY' | 'countdownTimer' | 'stockInventoryNumber' | 'trustBadge' | 'advancedTrustBadge';
@@ -6910,10 +6910,11 @@ type InstantKlaviyoWidgetType = 'popup_widget' | 'flyout_widget' | 'embed_widget
 type StampedWidgetType = 'main-widget' | 'carousel' | 'full-page' | 'visual-gallery' | 'wall-photos' | 'site-badge' | 'instagram-feed' | 'checkout-reviews' | 'single-highlight' | 'top-rated' | 'badge-single' | 'badge-double' | 'badge-ribbon' | 'product-rating';
 type LaiProductReviewsWidgetType = 'reviews_widget' | 'star_ratings' | 'homepage_reviews' | 'happy_customer_reviews' | 'star_ratings_in_list' | 'advanced_widget';
 type LaiProductReviewsAdvancedWidgetType = 'cardCarousel' | 'testimonialCarousel' | 'mediaGallery' | 'cardGrid';
-type YotpoReviewsWidgetType = 'reviews' | 'badge' | 'reviewHighlights';
+type YotpoReviewsWidgetType = 'reviews' | 'star-rating' | 'reviewHighlights';
 type BogosWidgetType = 'icon' | 'thumnail' | 'slider' | 'message' | 'classic-bundle' | 'quantity-break';
 type PreOrderNowWodWidgetType = 'app-block' | 'popups-block';
 type TagShopWidgetType = 'homeLandingGalleries' | 'productGalleries' | 'tagGalleries';
+type AirProductReview = 'review_box' | 'star_rating' | 'review_carousel';
 
 type ResponsiveConfig<T> = {
     desktop: {
@@ -7755,6 +7756,7 @@ type TypographyV2ControlType<T> = SharedControlType<T> & {
     hiddenSetting?: {
         color?: boolean;
         transform?: boolean;
+        fontWeight?: boolean;
     };
     disableCollapse?: boolean;
 };
@@ -8239,7 +8241,11 @@ type SettingUIGroup = {
     };
 };
 
-type ControlProp<T> = ProductBundleChildControlType<T> | SelectProductBundleControlType<T> | AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | OpenLinkControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | LayoutBannerControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | VariantSwatchesOnlyDefaultVariantControlType<T> | ProductListControlType<T> | ArticleListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T> | ImageShape<T> | GridArrange<T> | SizeSetting$1<T> | ChildIconType<T> | DropdownInput<T> | Dropdown<T> | AliPickSectionControlType<T> | ParallaxScrollingType<T> | BackgroundColorPickerType<T> | PlayPauseControlType<T> | LayoutCustomSegmentControlType<T> | SneakPeakRange<T> | SneakPeakTypeControlType<T> | SneakPeakControlType<T> | ProductInputCurrencyUnitControlType<T> | TypographyPostPurchaseControlType<T> | ProductOffersControlType<T> | DiscountAndShippingFee<T> | PostPurchaseTextareaControlType<T> | NotesControlType<T> | ButtonLayoutType<T> | ShapeSelectorControlType<T> | DisplayTriggerControlType<T> | CustomPositionControlType<T> | DealControlType<T>;
+type ProductHandleType<T> = SharedControlType<T> & {
+    type: 'product-handle';
+};
+
+type ControlProp<T> = ProductBundleChildControlType<T> | SelectProductBundleControlType<T> | AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | OpenLinkControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | LayoutBannerControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | VariantSwatchesOnlyDefaultVariantControlType<T> | ProductListControlType<T> | ArticleListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T> | ImageShape<T> | GridArrange<T> | SizeSetting$1<T> | ChildIconType<T> | DropdownInput<T> | Dropdown<T> | AliPickSectionControlType<T> | ParallaxScrollingType<T> | BackgroundColorPickerType<T> | PlayPauseControlType<T> | LayoutCustomSegmentControlType<T> | SneakPeakRange<T> | SneakPeakTypeControlType<T> | SneakPeakControlType<T> | ProductInputCurrencyUnitControlType<T> | TypographyPostPurchaseControlType<T> | ProductOffersControlType<T> | DiscountAndShippingFee<T> | PostPurchaseTextareaControlType<T> | NotesControlType<T> | ButtonLayoutType<T> | ShapeSelectorControlType<T> | DisplayTriggerControlType<T> | CustomPositionControlType<T> | DealControlType<T> | ProductHandleType<T>;
 type ControlTriggerAction = {
     controlId: string;
     newValue?: any;
@@ -8433,6 +8439,7 @@ type InteractionElement<E, T> = {
     elementTag?: string;
     targetOutsideSelector?: string;
     targetInsideSelector?: string;
+    type?: 'ELEMENT' | 'PAGE';
 };
 declare enum InteractionTargetEvent {
     'gp:change-background-color' = 0,
@@ -8496,6 +8503,7 @@ type InteractionTarget = {
     targetOutsideSelector?: string;
     targetInsideSelector?: string;
     events?: InteractionTargetEventObject[];
+    type?: 'ELEMENT' | 'PAGE';
 };
 type InteractionTargetEventObject = {
     event: InteractionTargetEvent;
@@ -31381,7 +31389,8 @@ type PageContextProps = {
     interactionData?: {
         item?: Interaction;
         isSelectOnPage?: boolean;
-        selectType?: 'element' | 'page';
+        selectType?: 'ELEMENT' | 'PAGE';
+        settingType?: 'TRIGGER' | 'TARGET';
     };
     setDynamicProduct: (data: DynamicProduct) => void;
     setDynamicCollection: (data: DynamicCollection) => void;
@@ -31390,7 +31399,8 @@ type PageContextProps = {
     setPublicStoreFrontData: (publicStoreFrontData: PublicStoreFrontData | null) => void;
     setInteractionItem: (item: Interaction) => void;
     setInteractionIsSelectOnPage: (value: boolean) => void;
-    setInteractionSelectType: (selectType: 'element' | 'page') => void;
+    setInteractionSelectType: (selectType: 'ELEMENT' | 'PAGE') => void;
+    setInteractionSettingType: (settingType: 'TRIGGER' | 'TARGET') => void;
 };
 type PageProviderProps = Pick<PageContextProps, 'dynamicProduct' | 'dynamicCollection' | 'productOffers'> & {
     children: React.ReactNode;
@@ -31913,6 +31923,7 @@ declare namespace tiktokpixel {
   };
 }
 
+type CSSStateKey<T extends ShortHandProperty> = `--${T}` | `--hvr-${T}` | `--focus-${T}`;
 type ResponsiveKey<T extends ShortHandProperty> = `--${T}` | `--${T}-tablet` | `--${T}-mobile`;
 declare const removeNullUndefined: <T extends Record<string, any>>(obj: T) => T;
 declare const makeStyleKey: <T extends ShortHandProperty>(name: T) => string[];
@@ -41611,13 +41622,14 @@ declare const useInteraction: () => {
         event: string;
         selector: string;
     }, callback: (data: any) => void) => void;
-    trigger: ({ event, data, selector }: {
+    trigger: ({ event, data, selector, element: elementParam }: {
         event: string;
         data?: any;
         selector: string;
+        element?: HTMLElement | undefined;
     }) => void;
     saveToElementInteractionData: (element: HTMLElement, key: string, value: string) => void;
     closeSelectOnPage: () => void;
 };
 
-export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, ArticleListProvider, ArticleListProviderProps, ArticleProvider, ArticleProviderProps, Background, BaseProps, BasePropsWrap, BlockEntity, BogosWidgetType, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlTriggerAction, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, Interaction, InteractionCondition, InteractionElement, InteractionTarget, InteractionTargetEvent, InteractionTargetEventObject, InteractionTriggerEvent, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibrarySaleFunnelDocument, LibrarySaleFunnelQueryResponse, LibrarySaleFunnelQueryVariables, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OnlyOne, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, Options, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreOrderNowWodWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublicStoreFrontData, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RawChild, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveKey, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SaleFunnelDiscount$1 as SaleFunnelDiscount, SaleFunnelDiscountEdge$1 as SaleFunnelDiscountEdge, SaleFunnelDiscountObjectType$1 as SaleFunnelDiscountObjectType, SaleFunnelDiscountType$1 as SaleFunnelDiscountType, SaleFunnelDiscountValueType$1 as SaleFunnelDiscountValueType, SaleFunnelDiscountsDocument, SaleFunnelDiscountsQueryResponse, SaleFunnelDiscountsQueryVariables, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, SettingByAnimationType, SettingByAnimationValues, SettingUIGroup, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopLibraryPageDocument, ShopLibraryPageQueryResponse, ShopLibraryPageQueryVariables, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TagShopWidgetType, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, ThemeSectionStatus$1 as ThemeSectionStatus, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, addAppBlockId, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBorderCss, composeCornerCss, composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertHTML, convertOldLayout, convertTextAlignToJustify, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterCornerInStyle, filterToolbarPreview, flattenConnection, formatMoney, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAppBlocks, getAspectRatioGlobalSize, getBgImageByDevice, getBorderRadiusStyle, getBorderStyle, getCarouselContainerHeight, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResonsiveStyleShadow, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleBgColor, getStyleShadow, getStyleShadowState, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeIcon, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, removeUndefinedValuesFromObject, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useArticleListStore, useArticleStore, useArticlesQuery, useBlogsQuery, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useHasPreSelected, useInitialSwatchesOptions, useInteraction, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useProductsQueryAll, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AirProductReview, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, ArticleListProvider, ArticleListProviderProps, ArticleProvider, ArticleProviderProps, Background, BaseProps, BasePropsWrap, BlockEntity, BogosWidgetType, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CSSStateKey, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlTriggerAction, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, Interaction, InteractionCondition, InteractionElement, InteractionTarget, InteractionTargetEvent, InteractionTargetEventObject, InteractionTriggerEvent, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibrarySaleFunnelDocument, LibrarySaleFunnelQueryResponse, LibrarySaleFunnelQueryVariables, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OnlyOne, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, Options, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreOrderNowWodWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublicStoreFrontData, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RawChild, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveKey, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SaleFunnelDiscount$1 as SaleFunnelDiscount, SaleFunnelDiscountEdge$1 as SaleFunnelDiscountEdge, SaleFunnelDiscountObjectType$1 as SaleFunnelDiscountObjectType, SaleFunnelDiscountType$1 as SaleFunnelDiscountType, SaleFunnelDiscountValueType$1 as SaleFunnelDiscountValueType, SaleFunnelDiscountsDocument, SaleFunnelDiscountsQueryResponse, SaleFunnelDiscountsQueryVariables, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, SettingByAnimationType, SettingByAnimationValues, SettingUIGroup, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopLibraryPageDocument, ShopLibraryPageQueryResponse, ShopLibraryPageQueryVariables, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TagShopWidgetType, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, ThemeSectionStatus$1 as ThemeSectionStatus, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, addAppBlockId, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBorderCss, composeCornerCss, composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertHTML, convertOldLayout, convertTextAlignToJustify, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterCornerInStyle, filterToolbarPreview, flattenConnection, formatMoney, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAppBlocks, getAspectRatioGlobalSize, getBgImageByDevice, getBorderRadiusStyle, getBorderStyle, getCarouselContainerHeight, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResonsiveStyleShadow, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleBgColor, getStyleShadow, getStyleShadowState, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeIcon, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, removeUndefinedValuesFromObject, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useArticleListStore, useArticleStore, useArticlesQuery, useBlogsQuery, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useHasPreSelected, useInitialSwatchesOptions, useInteraction, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useProductsQueryAll, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.53.0-dev.4",
+  "version": "1.53.0-dev.45",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.53.0-dev.4",
-    "@gem-sdk/styles": "1.53.0-dev.4",
+    "@gem-sdk/styles": "1.53.0-dev.39",
     "@types/classnames": "^2.3.1"
   },
   "dependencies": {