@gem-sdk/core 1.56.2 → 1.57.0-dev.45

package/dist/esm/contexts/PageContext.js

@@ -29,6 +29,44 @@ const createPageStoreProvider = (data)=>createStore((set)=>({
                 set({
                     publicStoreFrontData: publicStoreFrontData
                 });
+            },
+            setInteractionIsSelectOnPage: (value)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            isSelectOnPage: value
+                        }
+                    }));
+            },
+            setInteractionItem: (item)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            item,
+                            isSelectOnPage: state.interactionData?.isSelectOnPage || false
+                        }
+                    }));
+            },
+            setInteractionSelectType: (selectType)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            selectType
+                        }
+                    }));
+            },
+            setInteractionSettingType: (settingType)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            settingType
+                        }
+                    }));
+            },
+            setSidebarMode: (mode)=>{
+                set(()=>({
+                        sidebarMode: mode
+                    }));
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
@@ -36,7 +74,10 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             dynamicProduct,
             dynamicCollection,
             productOffers,
-            publicStoreFrontData
+            publicStoreFrontData,
+            interactionData: {
+                selectType: 'ELEMENT'
+            }
         }), [
         dynamicProduct,
         dynamicCollection,

package/dist/esm/contexts/ProductContext.js

@@ -23,6 +23,16 @@ const createProductStoreProvider = (data)=>createStore((set, get)=>({
                     };
                 });
             },
+            setShouldRequireUploadMessage: (value)=>{
+                set({
+                    shouldRequireUploadMessage: value
+                });
+            },
+            setRequireUpload: (value)=>{
+                set({
+                    requireUpload: value
+                });
+            },
             addProperty: (data)=>{
                 const properties = get().properties;
                 if (!properties?.some((v)=>v.key === data.key)) {

package/dist/esm/graphql/fragments/published-theme-page.generated.js

@@ -26,6 +26,10 @@
   themePageCustomFonts {
     ...CustomFontSelect
   }
+  interaction {
+    id
+    value
+  }
 }
     `;
 const PreviewThemePageSelect = `

package/dist/esm/helpers/animations.js

@@ -44,17 +44,23 @@ const animations = ()=>{
         });
         return cloneOptions;
     };
-    const slide = (target, options)=>{
+    const slide = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const { direction, distance } = normalizedOptions;
         const coordinate = [
             'left',
             'right'
         ].includes(direction ?? '') ? 'X' : 'Y';
-        const isNeg = [
+        let isNeg = [
             'left',
             'down'
         ].includes(direction ?? '') ? '-' : '';
+        if (reverse) {
+            isNeg = [
+                'left',
+                'down'
+            ].includes(direction ?? '') ? '' : '-';
+        }
         const preset = [
             {
                 opacity: 0,
@@ -65,11 +71,11 @@ const animations = ()=>{
                 transform: `translate${coordinate}(0)`
             }
         ];
-        return generateAnimationInstance(target, preset, {
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
             ...generateOptions(normalizedOptions, 500)
         });
     };
-    const fade = (target, options)=>{
+    const fade = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const preset = [
             {
@@ -79,7 +85,7 @@ const animations = ()=>{
                 opacity: 1
             }
         ];
-        return generateAnimationInstance(target, preset, {
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
             ...generateOptions(normalizedOptions, 500)
         });
     };
@@ -99,7 +105,7 @@ const animations = ()=>{
             easing: EASING[easing ?? 'linear']
         };
     };
-    const zoom = (target, options)=>{
+    const zoom = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const { scale, zoomDirection, isFade } = normalizedOptions;
         const [i1, i2] = scale.in;
@@ -124,8 +130,11 @@ const animations = ()=>{
                 opacity: 1
             }
         ];
-        const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
-        return generateAnimationInstance(target, zoomPreset, {
+        let zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
+        if (reverse) {
+            zoomPreset = zoomDirection === 'in' ? zoomOutPreset : zoomInPreset;
+        }
+        return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
             ...generateOptions(normalizedOptions, 700)
         });
     };

package/dist/esm/helpers/background.js

@@ -11,7 +11,9 @@ const getStyleBackgroundByDevice = (background, options)=>{
             ...getStyleBgColor(background)
         } : {},
         ...!options?.ignoreBackgroundImage ? {
-            ...getStyleBgImage(background, options),
+            ...getStyleBgImage(background, options)
+        } : {},
+        ...!options?.ignoreBackgroundImageProperties ? {
             ...getStyleBgPosition(background),
             ...getStyleBgSize(background),
             ...getStyleBgRepeat(background)
@@ -72,6 +74,9 @@ const getBgImageByDevice = (background, device, options)=>{
     if (typeof imageByDevice === 'string') {
         return `url(${imageByDevice})`;
     }
+    if (imageByDevice !== undefined) {
+        return 'none';
+    }
 };
 const getStyleBgPosition = (background)=>{
     const bgPosition = {
@@ -119,7 +124,7 @@ const getBgAttachmentByDevice = (background, device)=>{
     return background?.[device]?.attachment;
 };
 const composeBackgroundCss = (backgroundColor)=>{
-    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
+    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)};` : undefined}`;
 };
 const makeFixedBgAttachment = (background)=>{
     if (!background) return;
@@ -203,7 +208,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
     });
     return bgrStyle;
 };
-const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = false)=>{
+const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
     if (!backgroundStyle) return;
     const bgrStyle = {};
     [
@@ -213,8 +218,8 @@ const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = fa
     ].forEach((device)=>{
         if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
             Object.assign(bgrStyle, {
-                [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: 'transparent',
-                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: ignoreBackgroundImage ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
+                [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: backgroundStyle[device]?.color,
+                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: !ignoreBackgroundImage?.[device] ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
             });
         }
     });

package/dist/esm/helpers/compose-advance-style.js

@@ -3,7 +3,7 @@ import { isColor } from './colors.js';
 import { layoutComponent } from './constant.js';
 import { makeStyleKey } from './make-style.js';
 import { composeRadius, getCornerCSSFromGlobal } from './radius.js';
-import { getResonsiveStyleShadow, getStyleShadowState, getStyleShadow } from './shadow.js';
+import { getResponsiveStyleShadow, getStyleShadowState, getStyleShadow } from './shadow.js';
 
 const composeSpacing = ({ source, spacing, type, suffix = '' })=>{
     const { top, left, bottom, right } = spacing;
@@ -38,6 +38,16 @@ const getAttrValue = (attr, value, tag)=>{
             if (!value) return 'none';
             if (value && tag && layoutComponent.includes(tag)) return 'grid';
             return 'block';
+        case 'animation':
+            return undefined;
+        case 'hasBoxShadow':
+            return undefined;
+        case 'rounded':
+            return undefined;
+        case 'boxShadow':
+            return undefined;
+        case 'border':
+            return undefined;
         default:
             return value;
     }
@@ -100,8 +110,23 @@ function composeAdvanceStyle(data, tag, pageType) {
                             Object.assign(styles, composeRadius(value));
                         }
                         if (attr === 'boxShadow') {
-                            Object.assign(styles, getResonsiveStyleShadow(value, 'box-shadow', hasBoxShadow));
+                            const listElementShadowV2 = [
+                                'Row',
+                                'Section',
+                                'Text',
+                                'Heading'
+                            ];
+                            let hasBoxShadowV2 = hasBoxShadow;
+                            if (listElementShadowV2.includes(tag || '')) {
+                                hasBoxShadowV2 = {
+                                    desktop: value.desktop ?? {},
+                                    tablet: value.tablet ?? value.desktop ?? {},
+                                    mobile: value.mobile ?? value.tablet ?? value.desktop ?? {}
+                                };
+                            }
+                            Object.assign(styles, getResponsiveStyleShadow(value, 'box-shadow', hasBoxShadowV2 ?? hasBoxShadow));
                         }
+                        const styleValue = getAttrValue(attr, deviceValue, tag);
                         if (composeAttr === 'desktop') {
                             switch(attr){
                                 case 'padding':
@@ -129,7 +154,7 @@ function composeAdvanceStyle(data, tag, pageType) {
                                 case 'p':
                                     break;
                                 default:
-                                    styles[`--${attr}`] = getAttrValue(attr, deviceValue, tag);
+                                    styleValue && (styles[`--${attr}`] = styleValue);
                                     break;
                             }
                         } else {
@@ -162,7 +187,7 @@ function composeAdvanceStyle(data, tag, pageType) {
                                 case 'p':
                                     break;
                                 default:
-                                    styles[`--${attr}-${composeAttr}`] = getAttrValue(attr, deviceValue, tag);
+                                    styleValue && (styles[`--${attr}-${composeAttr}`] = styleValue);
                                     break;
                             }
                         }
@@ -207,7 +232,8 @@ function composeAdvanceStyle(data, tag, pageType) {
                 }
             });
         } else {
-            styles[`--${attr}`] = getAttrValue(attr, value, tag);
+            const styleValue = getAttrValue(attr, value, tag);
+            styleValue && (styles[`--${attr}`] = styleValue);
             if (attr === 'hasBoxShadow' && data.boxShadow) {
                 Object.assign(styles, getStyleShadow({
                     value: data.boxShadow,

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

@@ -0,0 +1,108 @@
+import { useRef } from 'react';
+import 'react/jsx-runtime';
+import 'zustand';
+import 'swr';
+import { usePageStore } from '../../contexts/PageContext.js';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'swr/infinite';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import 'classnames';
+import 'dayjs';
+import '../convert.js';
+
+const useInteraction = ()=>{
+    const ref = useRef();
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    function findElementIncludingSelf(element, selector) {
+        if (!(element instanceof Document) && element?.matches(selector)) {
+            return element;
+        } else {
+            return element?.querySelector(selector);
+        }
+    }
+    const handleOnListener = (element, event, callback)=>{
+        const eventListener = (e)=>{
+            const customEvent = e;
+            const params = customEvent.detail;
+            if (callback) callback(params);
+        };
+        element.addEventListener(event, eventListener);
+        return ()=>element.removeEventListener(event, eventListener);
+    };
+    const onListener = ({ event, selector, elementRef }, callback)=>{
+        const element = findElementIncludingSelf(elementRef?.current || ref.current || document, selector);
+        if (!element) return;
+        return handleOnListener(element, event, callback);
+    };
+    const trigger = ({ event, data, selector, element: elementParam })=>{
+        const element = elementParam || document.body?.querySelector(selector);
+        if (!element) return;
+        const eventDispatch = new CustomEvent(event, {
+            bubbles: false,
+            cancelable: true,
+            detail: {
+                data
+            }
+        });
+        element.dispatchEvent(eventDispatch);
+    };
+    const saveToElementInteractionData = (element, key, value)=>{
+        const interactionData = element.getAttribute('gp-data-interaction');
+        const interactionDataJson = JSON.parse(interactionData || '{}');
+        element.setAttribute('gp-data-interaction', JSON.stringify({
+            ...interactionDataJson,
+            [key]: value
+        }));
+    };
+    const getInteractionPreviousData = (element, key)=>{
+        const interactionData = element.getAttribute('gp-data-interaction');
+        const interactionDataJson = JSON.parse(interactionData || '{}');
+        return {
+            previousData: interactionDataJson[key],
+            interactionDataJson
+        };
+    };
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    const changeSelectMode = (mode)=>{
+        const event = new CustomEvent('editor:interaction:change-select-mode', {
+            bubbles: true,
+            detail: mode
+        });
+        window.dispatchEvent(event);
+    };
+    const selectInteractionElement = ({ componentUid, settingType, $target })=>{
+        const event = new CustomEvent('editor:interaction:select-element', {
+            bubbles: true,
+            detail: {
+                componentUid,
+                settingType,
+                $target
+            }
+        });
+        window.dispatchEvent(event);
+    };
+    return {
+        onListener,
+        trigger,
+        saveToElementInteractionData,
+        closeSelectOnPage,
+        ref,
+        findElementIncludingSelf,
+        getInteractionPreviousData,
+        changeSelectMode,
+        selectInteractionElement
+    };
+};
+
+export { useInteraction };

package/dist/esm/helpers/radius.js

@@ -25,7 +25,14 @@ const getRadiusCSSFromGlobal = (state, key, device)=>{
     };
 };
 const getCustomRadius = (state, radius, device)=>{
-    if (!radius || !state || radius?.radiusType !== 'custom') return {};
+    const list = [
+        'custom',
+        'pill',
+        'rounded',
+        'single',
+        'none'
+    ];
+    if (!radius || !state || !list.includes(radius?.radiusType ?? '')) return {};
     const suffix = device && device !== 'desktop' ? devicesMapping?.[device] : '';
     const mState = stateMapping?.[state];
     return {
@@ -60,6 +67,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('normal', radiusValue.normal, device));
             break;
     }
@@ -72,6 +80,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('hover', radiusValue.hover, device));
             break;
     }
@@ -84,6 +93,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('focus', radiusValue.focus, device));
             break;
     }

package/dist/esm/helpers/shadow.js

@@ -22,10 +22,11 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     let { state } = shadowStyle || {};
     if (!state) state = 'normal';
     if (!styleAppliedFor || !value) return {};
-    if (typeof value.distance == 'undefined') return {};
+    const isNoneValue = value.type === 'none';
+    if (typeof value.distance == 'undefined' && !isNoneValue) return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
     return {
-        [`-${!isActiveState ? stateMapping?.[state] || '' : ''}-${getShortName(styleAppliedFor)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? stateMapping?.[state] || '' : ''}-${getShortName(styleAppliedFor)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: isEnableShadow && !isNoneValue ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
@@ -42,7 +43,7 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
     }
     return style;
 };
-const getResonsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
+const getResponsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
         return {
@@ -60,4 +61,4 @@ const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
     return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${getSingleColorVariable(boxShadowValue?.color)}${sub};`;
 };
 
-export { composeShadowCss, getResonsiveStyleShadow, getStyleShadow, getStyleShadowState, parseValueWithUnit };
+export { composeShadowCss, getResponsiveStyleShadow, getStyleShadow, getStyleShadowState, parseValueWithUnit };

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

@@ -136,5 +136,47 @@ const BoldSubscriptionsConfig = {
         appId: '9ceb49f0-5fe5-4b5e-943d-f8af8985167d'
     }
 };
+const SproutPlantTreesGrowSalesConfig = {
+    SproutPlantTreesGrowSales: {
+        appName: 'sprout-plant-trees',
+        appId: '7db5ee24-2195-4099-b98e-1547c600e4aa'
+    }
+};
+const InstasellShoppableInstagramConfig = {
+    InstasellShoppableInstagram: {
+        appName: 'instasell-instagram-gallery',
+        appId: '38d643ac-410a-4b2c-a727-6125ff08e444'
+    }
+};
+const GrowaveConfig = {
+    Growave: {
+        appName: 'growave-loyalty-wishlist',
+        appId: 'b3d2efbe-110a-4e27-84a8-1f2ed63996a4'
+    }
+};
+const KachingBundlesConfig = {
+    KachingBundles: {
+        appName: 'kaching-bundles',
+        appId: '6c637362-a106-4a32-94ac-94dcfd68cdb8'
+    }
+};
+const LoloyalLoyaltyReferralsConfig = {
+    LoloyalLoyaltyReferrals: {
+        appName: 'loloyal-com',
+        appId: '930ac91f-2bf2-4655-9ba0-574771f782d6'
+    }
+};
+const PowerfulContactFormBuilderConfig = {
+    PowerfulContactFormBuilder: {
+        appName: 'powerful-form-builder',
+        appId: 'e4bcb1eb-35b2-42e6-bc37-bfe0e1542c9d'
+    }
+};
+const WishlistKingConfig = {
+    WishlistKing: {
+        appName: 'wishlist-king',
+        appId: '194f5011-a43c-4b22-b12e-eaf20dc4506a'
+    }
+};
 
-export { AppointmentBookingCowlendarConfig, BoldSubscriptionsConfig, BonLoyaltyRewardsReferralsConfig, EasyBundleBuilderSkailamaConfig, FastBundleBundlesDiscountsConfig, FlyBundlesUpsellsFbtConfig, JunipProductReviewsUgcConfig, KiteFreeGiftDiscountConfig, LoopSubscriptionsConfig, PreorderNowPreOrderPqConfig, PreorderNowWodPresaleConfig, ProductOptionsCustomizerConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SubifySubscriptionsConfig, UnlimitedBundlesDiscountsConfig, WhatmoreShoppableVideosreelConfig, YotpoReviewsV3UgcConfig };
+export { AppointmentBookingCowlendarConfig, BoldSubscriptionsConfig, BonLoyaltyRewardsReferralsConfig, EasyBundleBuilderSkailamaConfig, FastBundleBundlesDiscountsConfig, FlyBundlesUpsellsFbtConfig, GrowaveConfig, InstasellShoppableInstagramConfig, JunipProductReviewsUgcConfig, KachingBundlesConfig, KiteFreeGiftDiscountConfig, LoloyalLoyaltyReferralsConfig, LoopSubscriptionsConfig, PowerfulContactFormBuilderConfig, PreorderNowPreOrderPqConfig, PreorderNowWodPresaleConfig, ProductOptionsCustomizerConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SproutPlantTreesGrowSalesConfig, SubifySubscriptionsConfig, UnlimitedBundlesDiscountsConfig, WhatmoreShoppableVideosreelConfig, WishlistKingConfig, YotpoReviewsV3UgcConfig };

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

@@ -72,6 +72,13 @@ const ShopifyForms = {
         }
     }
 };
+const KachingBundles = {
+    KachingBundles: {
+        'app-block': {
+            product: '{{product}}'
+        }
+    }
+};
 const overrideSettings = (tag, currentSetting, appSetting)=>{
     switch(tag){
         case 'ShopifyForms':
@@ -93,6 +100,20 @@ const overrideSettings = (tag, currentSetting, appSetting)=>{
                     selected_product: appSetting?.['productHandle'] || '{{ product }}'
                 };
             }
+        case 'WhatmoreShoppableVideosreel':
+            {
+                return {
+                    ...currentSetting,
+                    ['show-views']: appSetting?.showViews
+                };
+            }
+        case 'PowerfulContactFormBuilder':
+            {
+                return {
+                    ...currentSetting,
+                    shortcode: appSetting?.shortcode
+                };
+            }
         default:
             return currentSetting;
     }
@@ -328,7 +349,99 @@ const BoldSubscriptions = {
         }
     }
 };
+const SproutPlantTreesGrowSales = {
+    SproutPlantTreesGrowSales: {
+        badge: null,
+        'impact-banner': null
+    }
+};
+const InstasellShoppableInstagram = {
+    InstasellShoppableInstagram: {
+        'app-block': {
+            heading: 'InstaSell: Instagram Gallery+',
+            description: 'Showcase your Instagram Feed on your Shopify Storefront'
+        }
+    }
+};
+const Growave = {
+    Growave: {
+        'block.product.faveButton': {
+            option_button_class: ''
+        },
+        'block.product.reviewWidget': null,
+        'block.product.reviewAvgProfile': null,
+        'v2.product.reviewsMiniSlider': null
+    }
+};
+const LoloyalSettingCommon = {
+    title_font_size: 30,
+    subtitle_font_size: 13,
+    name_font_size: 20,
+    details_font_size: 14,
+    corner_radius: 8,
+    btn_radius: 8,
+    top_padding: 32,
+    bottom_padding: 32,
+    icon_color: '',
+    title_color: '#000000',
+    subtitle_color: '#000000',
+    name_color: '#000000',
+    details_color: '#000000',
+    card_bg_color: '#FFFFFF',
+    background_color: '#ffffff',
+    border_color: '#ececec',
+    primary_button_color: '#000000',
+    primary_button_text_color: '#FFFFFF',
+    secondary_button_color: '#FFFFFF',
+    secondary_button_text_color: '#000000',
+    hover_btn: '#000000',
+    hover_text_color: '#FFFFFF',
+    custom_css: '/* Add your custom styles here */'
+};
+const LoloyalLoyaltyReferrals = {
+    LoloyalLoyaltyReferrals: {
+        'app-banner': {
+            img_opacity: 0,
+            bg_color: '#F6F6F6',
+            banner_height: '400',
+            content_position: 'll-middle-left',
+            content_alignment: 'left',
+            title_font_size: 40,
+            subtitle_font_size: 13,
+            title_color: '#000000',
+            subtitle_color: '#000000',
+            btn_radius: 30,
+            primary_button_color: '#000000',
+            primary_button_text_color: '#FFFFFF',
+            secondary_button_color: '#FFFFFF',
+            secondary_button_text_color: '#000000',
+            hover_btn: '#000000',
+            hover_text_color: '#FFFFFF',
+            custom_css: '/* Add your custom styles here */'
+        },
+        'app-ways-to-earn': LoloyalSettingCommon,
+        'app-ways-to-redeem': LoloyalSettingCommon,
+        'app-referrals': LoloyalSettingCommon
+    }
+};
+const PowerfulContactFormBuilder = {
+    PowerfulContactFormBuilder: {
+        'app-block': {
+            shortcode: ''
+        }
+    }
+};
+const WishlistKing = {
+    WishlistKing: {
+        'wishlist-button-block': null
+    }
+};
 const composeSettingsByWidgetType = {
+    ...WishlistKing,
+    ...LoloyalLoyaltyReferrals,
+    ...PowerfulContactFormBuilder,
+    ...InstasellShoppableInstagram,
+    ...SproutPlantTreesGrowSales,
     ...AppointmentBookingCowlendar,
     ...ProductOptionsCustomizer,
     ...WhatmoreShoppableVideosreel,
@@ -351,7 +464,9 @@ const composeSettingsByWidgetType = {
     ...SubifySubscriptions,
     ...SelleasyWidget,
     ...YotpoReviews,
-    ...BoldSubscriptions
+    ...BoldSubscriptions,
+    ...Growave,
+    ...KachingBundles
 };
 
 export { composeSettingsByWidgetType, overrideSettings };