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

package/dist/cjs/contexts/PageContext.js

@@ -31,6 +31,44 @@ const createPageStoreProvider = (data)=>zustand.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 })=>{
@@ -38,7 +76,10 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             dynamicProduct,
             dynamicCollection,
             productOffers,
-            publicStoreFrontData
+            publicStoreFrontData,
+            interactionData: {
+                selectType: 'ELEMENT'
+            }
         }), [
         dynamicProduct,
         dynamicCollection,

package/dist/cjs/contexts/ProductContext.js

@@ -25,6 +25,16 @@ const createProductStoreProvider = (data)=>zustand.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/cjs/graphql/fragments/published-theme-page.generated.js

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

package/dist/cjs/helpers/animations.js

@@ -46,17 +46,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,
@@ -67,11 +73,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 = [
             {
@@ -81,7 +87,7 @@ const animations = ()=>{
                 opacity: 1
             }
         ];
-        return generateAnimationInstance(target, preset, {
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
             ...generateOptions(normalizedOptions, 500)
         });
     };
@@ -101,7 +107,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;
@@ -126,8 +132,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/cjs/helpers/background.js

@@ -13,7 +13,9 @@ const getStyleBackgroundByDevice = (background, options)=>{
             ...getStyleBgColor(background)
         } : {},
         ...!options?.ignoreBackgroundImage ? {
-            ...getStyleBgImage(background, options),
+            ...getStyleBgImage(background, options)
+        } : {},
+        ...!options?.ignoreBackgroundImageProperties ? {
             ...getStyleBgPosition(background),
             ...getStyleBgSize(background),
             ...getStyleBgRepeat(background)
@@ -74,6 +76,9 @@ const getBgImageByDevice = (background, device, options)=>{
     if (typeof imageByDevice === 'string') {
         return `url(${imageByDevice})`;
     }
+    if (imageByDevice !== undefined) {
+        return 'none';
+    }
 };
 const getStyleBgPosition = (background)=>{
     const bgPosition = {
@@ -121,7 +126,7 @@ const getBgAttachmentByDevice = (background, device)=>{
     return background?.[device]?.attachment;
 };
 const composeBackgroundCss = (backgroundColor)=>{
-    return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
+    return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)};` : undefined}`;
 };
 const makeFixedBgAttachment = (background)=>{
     if (!background) return;
@@ -205,7 +210,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
     });
     return bgrStyle;
 };
-const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = false)=>{
+const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
     if (!backgroundStyle) return;
     const bgrStyle = {};
     [
@@ -215,8 +220,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/cjs/helpers/compose-advance-style.js

@@ -40,6 +40,16 @@ const getAttrValue = (attr, value, tag)=>{
             if (!value) return 'none';
             if (value && tag && constant.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;
     }
@@ -102,8 +112,23 @@ function composeAdvanceStyle(data, tag, pageType) {
                             Object.assign(styles, radius.composeRadius(value));
                         }
                         if (attr === 'boxShadow') {
-                            Object.assign(styles, shadow.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, shadow.getResponsiveStyleShadow(value, 'box-shadow', hasBoxShadowV2 ?? hasBoxShadow));
                         }
+                        const styleValue = getAttrValue(attr, deviceValue, tag);
                         if (composeAttr === 'desktop') {
                             switch(attr){
                                 case 'padding':
@@ -131,7 +156,7 @@ function composeAdvanceStyle(data, tag, pageType) {
                                 case 'p':
                                     break;
                                 default:
-                                    styles[`--${attr}`] = getAttrValue(attr, deviceValue, tag);
+                                    styleValue && (styles[`--${attr}`] = styleValue);
                                     break;
                             }
                         } else {
@@ -164,7 +189,7 @@ function composeAdvanceStyle(data, tag, pageType) {
                                 case 'p':
                                     break;
                                 default:
-                                    styles[`--${attr}-${composeAttr}`] = getAttrValue(attr, deviceValue, tag);
+                                    styleValue && (styles[`--${attr}-${composeAttr}`] = styleValue);
                                     break;
                             }
                         }
@@ -209,7 +234,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, shadow.getStyleShadow({
                     value: data.boxShadow,

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

@@ -0,0 +1,110 @@
+'use strict';
+
+var react = require('react');
+require('react/jsx-runtime');
+require('zustand');
+require('swr');
+var PageContext = require('../../contexts/PageContext.js');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('swr/infinite');
+require('vanilla-lazyload');
+require('../../hooks/useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+require('classnames');
+require('dayjs');
+require('../convert.js');
+
+const useInteraction = ()=>{
+    const ref = react.useRef();
+    const setInteractionIsSelectOnPage = PageContext.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
+    };
+};
+
+exports.useInteraction = useInteraction;

package/dist/cjs/helpers/radius.js

@@ -27,7 +27,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' ? constant.devicesMapping?.[device] : '';
     const mState = constant.stateMapping?.[state];
     return {
@@ -62,6 +69,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('normal', radiusValue.normal, device));
             break;
     }
@@ -74,6 +82,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('hover', radiusValue.hover, device));
             break;
     }
@@ -86,6 +95,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('focus', radiusValue.focus, device));
             break;
     }

package/dist/cjs/helpers/shadow.js

@@ -24,10 +24,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 ? constant.stateMapping?.[state] || '' : ''}-${getShortname.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 + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.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 + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
@@ -44,7 +45,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 {
@@ -63,7 +64,7 @@ const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
 };
 
 exports.composeShadowCss = composeShadowCss;
-exports.getResonsiveStyleShadow = getResonsiveStyleShadow;
+exports.getResponsiveStyleShadow = getResponsiveStyleShadow;
 exports.getStyleShadow = getStyleShadow;
 exports.getStyleShadowState = getStyleShadowState;
 exports.parseValueWithUnit = parseValueWithUnit;

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

@@ -138,6 +138,54 @@ 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'
+    }
+};
+const GloboProductOptionsVariantConfig = {
+    GloboProductOptionsVariant: {
+        appName: 'globo-product-option',
+        appId: 'fdc9fad5-1a0f-4bd4-9c8a-1af6a6eef6b8'
+    }
+};
 
 exports.AppointmentBookingCowlendarConfig = AppointmentBookingCowlendarConfig;
 exports.BoldSubscriptionsConfig = BoldSubscriptionsConfig;
@@ -145,9 +193,15 @@ exports.BonLoyaltyRewardsReferralsConfig = BonLoyaltyRewardsReferralsConfig;
 exports.EasyBundleBuilderSkailamaConfig = EasyBundleBuilderSkailamaConfig;
 exports.FastBundleBundlesDiscountsConfig = FastBundleBundlesDiscountsConfig;
 exports.FlyBundlesUpsellsFbtConfig = FlyBundlesUpsellsFbtConfig;
+exports.GloboProductOptionsVariantConfig = GloboProductOptionsVariantConfig;
+exports.GrowaveConfig = GrowaveConfig;
+exports.InstasellShoppableInstagramConfig = InstasellShoppableInstagramConfig;
 exports.JunipProductReviewsUgcConfig = JunipProductReviewsUgcConfig;
+exports.KachingBundlesConfig = KachingBundlesConfig;
 exports.KiteFreeGiftDiscountConfig = KiteFreeGiftDiscountConfig;
+exports.LoloyalLoyaltyReferralsConfig = LoloyalLoyaltyReferralsConfig;
 exports.LoopSubscriptionsConfig = LoopSubscriptionsConfig;
+exports.PowerfulContactFormBuilderConfig = PowerfulContactFormBuilderConfig;
 exports.PreorderNowPreOrderPqConfig = PreorderNowPreOrderPqConfig;
 exports.PreorderNowWodPresaleConfig = PreorderNowWodPresaleConfig;
 exports.ProductOptionsCustomizerConfig = ProductOptionsCustomizerConfig;
@@ -158,7 +212,9 @@ exports.SelleasyConfig = SelleasyConfig;
 exports.ShopifyFormsConfig = ShopifyFormsConfig;
 exports.SimpleBundlesKitsConfig = SimpleBundlesKitsConfig;
 exports.SkioSubscriptionsYcS20Config = SkioSubscriptionsYcS20Config;
+exports.SproutPlantTreesGrowSalesConfig = SproutPlantTreesGrowSalesConfig;
 exports.SubifySubscriptionsConfig = SubifySubscriptionsConfig;
 exports.UnlimitedBundlesDiscountsConfig = UnlimitedBundlesDiscountsConfig;
 exports.WhatmoreShoppableVideosreelConfig = WhatmoreShoppableVideosreelConfig;
+exports.WishlistKingConfig = WishlistKingConfig;
 exports.YotpoReviewsV3UgcConfig = YotpoReviewsV3UgcConfig;