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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +181 -107
  2. package/dist/cjs/components/ComponentWrapper.js +16 -1
  3. package/dist/cjs/components/ComponentWrapperPreview.js +16 -2
  4. package/dist/cjs/components/InteractionSuffix.js +42 -0
  5. package/dist/cjs/components/Render.liquid.js +22 -7
  6. package/dist/cjs/contexts/PageContext.js +42 -1
  7. package/dist/cjs/contexts/ProductContext.js +10 -0
  8. package/dist/cjs/graphql/fragments/published-theme-page.generated.js +4 -0
  9. package/dist/cjs/helpers/animations.js +17 -8
  10. package/dist/cjs/helpers/background.js +10 -5
  11. package/dist/cjs/helpers/compose-advance-style.js +30 -4
  12. package/dist/cjs/helpers/interaction/index.js +110 -0
  13. package/dist/cjs/helpers/radius.js +11 -1
  14. package/dist/cjs/helpers/shadow.js +5 -4
  15. package/dist/cjs/helpers/third-party/appConfig.js +49 -0
  16. package/dist/cjs/helpers/third-party/appSetting.js +116 -1
  17. package/dist/cjs/helpers/third-party/constant.js +8 -1
  18. package/dist/cjs/helpers/third-party/getAppBlockConfig.js +8 -1
  19. package/dist/cjs/hooks/animation/useAnimationConfig.js +2 -1
  20. package/dist/cjs/hooks/animation/useAnimationTarget.js +5 -2
  21. package/dist/cjs/hooks/animation/useApplyAnimation.js +6 -4
  22. package/dist/cjs/hooks/useInteraction.js +19 -0
  23. package/dist/cjs/hooks/useToolbarPostPurchase.js +2 -2
  24. package/dist/cjs/index.js +14 -1
  25. package/dist/cjs/types/animations.js +2 -0
  26. package/dist/cjs/types/custom.js +52 -0
  27. package/dist/esm/components/ComponentToolbarPreview.js +181 -107
  28. package/dist/esm/components/ComponentWrapper.js +16 -1
  29. package/dist/esm/components/ComponentWrapperPreview.js +16 -2
  30. package/dist/esm/components/InteractionSuffix.js +40 -0
  31. package/dist/esm/components/Render.liquid.js +22 -7
  32. package/dist/esm/contexts/PageContext.js +42 -1
  33. package/dist/esm/contexts/ProductContext.js +10 -0
  34. package/dist/esm/graphql/fragments/published-theme-page.generated.js +4 -0
  35. package/dist/esm/helpers/animations.js +17 -8
  36. package/dist/esm/helpers/background.js +10 -5
  37. package/dist/esm/helpers/compose-advance-style.js +31 -5
  38. package/dist/esm/helpers/interaction/index.js +108 -0
  39. package/dist/esm/helpers/radius.js +11 -1
  40. package/dist/esm/helpers/shadow.js +5 -4
  41. package/dist/esm/helpers/third-party/appConfig.js +43 -1
  42. package/dist/esm/helpers/third-party/appSetting.js +116 -1
  43. package/dist/esm/helpers/third-party/constant.js +9 -2
  44. package/dist/esm/helpers/third-party/getAppBlockConfig.js +8 -1
  45. package/dist/esm/hooks/animation/useAnimationConfig.js +2 -1
  46. package/dist/esm/hooks/animation/useAnimationTarget.js +5 -2
  47. package/dist/esm/hooks/animation/useApplyAnimation.js +6 -4
  48. package/dist/esm/hooks/useInteraction.js +17 -0
  49. package/dist/esm/hooks/useToolbarPostPurchase.js +2 -2
  50. package/dist/esm/index.js +4 -1
  51. package/dist/esm/types/animations.js +2 -0
  52. package/dist/esm/types/custom.js +52 -0
  53. package/dist/types/index.d.ts +547 -184
  54. package/package.json +3 -3
@@ -25,7 +25,14 @@ const mapShopifyAppMeta = {
25
25
  ...appConfig.WhatmoreShoppableVideosreelConfig,
26
26
  ...appConfig.ProductOptionsCustomizerConfig,
27
27
  ...appConfig.AppointmentBookingCowlendarConfig,
28
- ...appConfig.BoldSubscriptionsConfig
28
+ ...appConfig.BoldSubscriptionsConfig,
29
+ ...appConfig.SproutPlantTreesGrowSalesConfig,
30
+ ...appConfig.InstasellShoppableInstagramConfig,
31
+ ...appConfig.GrowaveConfig,
32
+ ...appConfig.KachingBundlesConfig,
33
+ ...appConfig.LoloyalLoyaltyReferralsConfig,
34
+ ...appConfig.PowerfulContactFormBuilderConfig,
35
+ ...appConfig.WishlistKingConfig
29
36
  };
30
37
  const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
31
38
 
@@ -3,10 +3,17 @@
3
3
  var appSetting = require('./appSetting.js');
4
4
  var getAppBlockType = require('./getAppBlockType.js');
5
5
 
6
+ const listAppUpdateNewVersion = [
7
+ 'Growave'
8
+ ];
6
9
  const getAppBlockConfig = (tag, appBlockId, settings)=>{
10
+ let widgetType = settings?.widgetType;
11
+ if (listAppUpdateNewVersion.includes(tag)) {
12
+ widgetType = settings?.widgetTypeV2;
13
+ }
7
14
  const appBlockType = getAppBlockType.getAppBlockType({
8
15
  tag,
9
- widgetType: settings?.widgetType
16
+ widgetType
10
17
  });
11
18
  const settingByWidget = appSetting.composeSettingsByWidgetType[tag][settings?.widgetType];
12
19
  const appSettings = appSetting.overrideSettings(tag, settingByWidget, settings);
@@ -14,7 +14,8 @@ const useAnimationConfig = (props)=>{
14
14
  const { animation, setting } = triggerConfig[trigger];
15
15
  return {
16
16
  type: animation,
17
- setting: setting[animation]
17
+ setting: setting[animation],
18
+ reverse: trigger === "hidden"
18
19
  };
19
20
  }, [
20
21
  configByDevices
@@ -98,9 +98,12 @@ const useAnimationTarget = (props)=>{
98
98
  const initListOfTargets = react.useCallback(()=>{
99
99
  if (!isEnabledAnimation) return;
100
100
  if (!targets.current) {
101
- targets.current = document.querySelectorAll(`[data-uid="${componentUid}"]`);
101
+ const $storefront = document.body.querySelector('#storefront');
102
+ if ($storefront) {
103
+ targets.current = $storefront.querySelectorAll(`[data-uid="${componentUid}"]`);
104
+ }
102
105
  }
103
- const targetsArray = Array.from(targets.current);
106
+ const targetsArray = Array.from(targets.current || []);
104
107
  if (!targetsArray.length) return;
105
108
  const updatedTargetObjects = getUpdatedTargetObjects(targetsArray);
106
109
  targetObjects.current = updatedTargetObjects;
@@ -8,6 +8,7 @@ var useAnimationTarget = require('./useAnimationTarget.js');
8
8
  var useAnimationConfig = require('./useAnimationConfig.js');
9
9
  var useAnimationActions = require('./useAnimationActions.js');
10
10
  var useAnimationPreview = require('./useAnimationPreview.js');
11
+ require('../../types/custom.js');
11
12
  var animations = require('../../types/animations.js');
12
13
 
13
14
  const useApplyAnimation = ({ props })=>{
@@ -24,13 +25,13 @@ const useApplyAnimation = ({ props })=>{
24
25
  setAnimationOnFinish,
25
26
  setToolbarActive
26
27
  });
27
- const generateAnimation = react.useCallback(({ target, setting, type })=>{
28
- return animation[type](target, setting);
28
+ const generateAnimation = react.useCallback(({ target, setting, type, reverse })=>{
29
+ return animation[type](target, setting, reverse);
29
30
  }, [
30
31
  animation
31
32
  ]);
32
33
  const initListAnimations = react.useCallback(()=>{
33
- const { type, setting } = getAnimationConfig();
34
+ const { type, setting, reverse } = getAnimationConfig();
34
35
  if (!type || type === animations.AnimationType.None || !targetObjects.current.length) {
35
36
  cancelAnimation();
36
37
  return;
@@ -38,7 +39,8 @@ const useApplyAnimation = ({ props })=>{
38
39
  const listAnimations = targetObjects.current.map((item)=>generateAnimation({
39
40
  type,
40
41
  setting,
41
- target: item.target
42
+ target: item.target,
43
+ reverse
42
44
  }));
43
45
  cancelAnimation();
44
46
  setAnimation(listAnimations);
@@ -0,0 +1,19 @@
1
+ 'use strict';
2
+
3
+ var PageContext = require('../contexts/PageContext.js');
4
+
5
+ const useInteraction = ()=>{
6
+ const interactionData = PageContext.usePageStore((state)=>state.interactionData);
7
+ const { item } = interactionData || {};
8
+ const getAnimationByUid = (uid)=>{
9
+ const targets = item?.targets;
10
+ const targetByUid = targets?.find((target)=>target.uid === uid);
11
+ const metaDataContainsAnimation = targetByUid?.events?.find((it)=>it.condition?.metaData?.animation);
12
+ return metaDataContainsAnimation?.condition?.metaData?.animation;
13
+ };
14
+ return {
15
+ getAnimationByUid
16
+ };
17
+ };
18
+
19
+ exports.useInteraction = useInteraction;
@@ -31,7 +31,7 @@ const usePostPurchase = (uid, tag)=>{
31
31
  return count <= 1;
32
32
  };
33
33
  const verifyWrapContainsRequireElement = ()=>{
34
- const $component = document.querySelector(`[data-uid="${uid}"]`);
34
+ const $component = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${uid}"]`);
35
35
  if (!$component) return false;
36
36
  for (const requiredElementTag of constant.postPurchaseRequiredElements){
37
37
  const countElementInsidePage = getElementCountInPage(requiredElementTag);
@@ -44,7 +44,7 @@ const usePostPurchase = (uid, tag)=>{
44
44
  };
45
45
  const countRequiredElement = ()=>{
46
46
  return constant.postPurchaseRequiredElements.reduce((acc, requiredElementTag)=>{
47
- const $component = document.querySelector(`[data-uid="${uid}"]`);
47
+ const $component = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${uid}"]`);
48
48
  if (!$component) return 0;
49
49
  const count = $component.querySelectorAll(`[data-component-tag="${requiredElementTag}"]`).length;
50
50
  return acc + count;
package/dist/cjs/index.js CHANGED
@@ -62,6 +62,7 @@ var isDefined = require('./helpers/is-defined.js');
62
62
  var layout = require('./helpers/layout.js');
63
63
  var makeStyle = require('./helpers/make-style.js');
64
64
  var align = require('./helpers/align.js');
65
+ var variant = require('./helpers/variant.js');
65
66
  var product = require('./helpers/product.js');
66
67
  var query = require('./helpers/query.js');
67
68
  var radius = require('./helpers/radius.js');
@@ -99,6 +100,7 @@ var useProductList = require('./hooks/useProductList.js');
99
100
  var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
100
101
  var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
101
102
  var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
103
+ var custom = require('./types/custom.js');
102
104
  var shop$1 = require('./types/shop.js');
103
105
  var appAPI = require('./types/appAPI.js');
104
106
  var globalStyle = require('./types/global-style.js');
@@ -108,6 +110,7 @@ var getProduct = require('./helpers/queries/get-product.js');
108
110
  var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
109
111
  var getAppBlocks = require('./helpers/third-party/getAppBlocks.js');
110
112
  var addAppBlockId = require('./helpers/third-party/addAppBlockId.js');
113
+ var index = require('./helpers/interaction/index.js');
111
114
 
112
115
 
113
116
 
@@ -247,6 +250,7 @@ exports.makeStyleState = makeStyle.makeStyleState;
247
250
  exports.makeWidth = makeStyle.makeWidth;
248
251
  exports.removeNullUndefined = makeStyle.removeNullUndefined;
249
252
  exports.convertTextAlignToJustify = align.convertTextAlignToJustify;
253
+ exports.checkInStock = variant.checkInStock;
250
254
  exports.checkAvailableVariantInStock = product.checkAvailableVariantInStock;
251
255
  exports.getSelectedVariant = product.getSelectedVariant;
252
256
  exports.parseSelectedOption = product.parseSelectedOption;
@@ -268,7 +272,7 @@ exports.removeUndefinedValuesFromObject = render.removeUndefinedValuesFromObject
268
272
  exports.styles = render.styles;
269
273
  exports.template = render.template;
270
274
  exports.composeShadowCss = shadow.composeShadowCss;
271
- exports.getResonsiveStyleShadow = shadow.getResonsiveStyleShadow;
275
+ exports.getResponsiveStyleShadow = shadow.getResponsiveStyleShadow;
272
276
  exports.getStyleShadow = shadow.getStyleShadow;
273
277
  exports.getStyleShadowState = shadow.getStyleShadowState;
274
278
  exports.parseValueWithUnit = shadow.parseValueWithUnit;
@@ -362,6 +366,14 @@ exports.useProductListStyles = useProductList.useProductListStyles;
362
366
  exports.useSuspenseFetch = useSuspenseFetch.default;
363
367
  exports.useSwatchesOptions = useSwatchesOptions.default;
364
368
  exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
369
+ Object.defineProperty(exports, 'InteractionTargetEvent', {
370
+ enumerable: true,
371
+ get: function () { return custom.InteractionTargetEvent; }
372
+ });
373
+ Object.defineProperty(exports, 'InteractionTriggerEvent', {
374
+ enumerable: true,
375
+ get: function () { return custom.InteractionTriggerEvent; }
376
+ });
365
377
  exports.ShopType = shop$1;
366
378
  exports.AppAPIType = appAPI;
367
379
  exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
@@ -398,3 +410,4 @@ exports.getProduct = getProduct.getProduct;
398
410
  exports.getProductBySlug = getProductBySlug.getProductBySlug;
399
411
  exports.getAppBlocks = getAppBlocks.getAppBlocks;
400
412
  exports.addAppBlockId = addAppBlockId.addAppBlockId;
413
+ exports.useInteraction = index.useInteraction;
@@ -32,6 +32,8 @@ exports.AnimationTriggerType = void 0;
32
32
  (function(AnimationTriggerType) {
33
33
  AnimationTriggerType["Appear"] = 'appear';
34
34
  AnimationTriggerType["Hover"] = 'hover';
35
+ AnimationTriggerType["Hidden"] = 'hidden';
36
+ AnimationTriggerType["AppearByTrigger"] = 'appearByTrigger';
35
37
  })(exports.AnimationTriggerType || (exports.AnimationTriggerType = {}));
36
38
  exports.AnimationZoomDirectionType = void 0;
37
39
  (function(AnimationZoomDirectionType) {
@@ -0,0 +1,52 @@
1
+ 'use strict';
2
+
3
+ exports.InteractionTargetEvent = void 0;
4
+ (function(InteractionTargetEvent) {
5
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-background-color'] = 0] = 'gp:change-background-color';
6
+ InteractionTargetEvent[InteractionTargetEvent['gp:run-animation'] = 1] = 'gp:run-animation';
7
+ InteractionTargetEvent[InteractionTargetEvent['gp:toggle-element-visibility'] = 2] = 'gp:toggle-element-visibility';
8
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-text'] = 3] = 'gp:change-text';
9
+ InteractionTargetEvent[InteractionTargetEvent['gp:scroll-to'] = 4] = 'gp:scroll-to';
10
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-text-style'] = 5] = 'gp:change-text-style';
11
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-content'] = 6] = 'gp:change-content';
12
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-button-style'] = 7] = 'gp:change-button-style';
13
+ InteractionTargetEvent[InteractionTargetEvent['gp:copy-text'] = 8] = 'gp:copy-text';
14
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-image'] = 9] = 'gp:change-image';
15
+ InteractionTargetEvent[InteractionTargetEvent['gp:toggle-video-play'] = 10] = 'gp:toggle-video-play';
16
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-slider-ratio'] = 11] = 'gp:change-slider-ratio';
17
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-icon-style'] = 12] = 'gp:change-icon-style';
18
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-expanded-item'] = 13] = 'gp:change-expanded-item';
19
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-active-item'] = 14] = 'gp:change-active-item';
20
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-slide'] = 15] = 'gp:change-slide';
21
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-image-step'] = 16] = 'gp:change-image-step';
22
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-text-value'] = 17] = 'gp:change-text-value';
23
+ InteractionTargetEvent[InteractionTargetEvent['gp:toggle-popup-open'] = 18] = 'gp:toggle-popup-open';
24
+ InteractionTargetEvent[InteractionTargetEvent['gp:show-or-hide'] = 19] = 'gp:show-or-hide';
25
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-banner'] = 20] = 'gp:change-banner';
26
+ InteractionTargetEvent[InteractionTargetEvent['gp:change-open-tab'] = 21] = 'gp:change-open-tab';
27
+ })(exports.InteractionTargetEvent || (exports.InteractionTargetEvent = {}));
28
+ exports.InteractionTriggerEvent = void 0;
29
+ (function(InteractionTriggerEvent) {
30
+ InteractionTriggerEvent[InteractionTriggerEvent['click'] = 0] = 'click';
31
+ InteractionTriggerEvent[InteractionTriggerEvent["active"] = 1] = "active";
32
+ InteractionTriggerEvent[InteractionTriggerEvent['mouseover'] = 2] = 'mouseover';
33
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:appear'] = 3] = 'gp:appear';
34
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:item-selected'] = 4] = 'gp:item-selected';
35
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:item-unselected'] = 5] = 'gp:item-unselected';
36
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:item-hovered'] = 6] = 'gp:item-hovered';
37
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:item-click'] = 7] = 'gp:item-click';
38
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:after-submit'] = 8] = 'gp:after-submit';
39
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:quantity-change'] = 9] = 'gp:quantity-change';
40
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:after-checked-value'] = 10] = 'gp:after-checked-value';
41
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:after-add-to-cart'] = 11] = 'gp:after-add-to-cart';
42
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-open'] = 12] = 'gp:popup-open';
43
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-close'] = 13] = 'gp:popup-close';
44
+ InteractionTriggerEvent[InteractionTriggerEvent['scroll-up'] = 14] = 'scroll-up';
45
+ InteractionTriggerEvent[InteractionTriggerEvent['scroll-down'] = 15] = 'scroll-down';
46
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:price-change'] = 16] = 'gp:price-change';
47
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback-price-change'] = 17] = 'gp:rollback-price-change';
48
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:compare-price-change'] = 18] = 'gp:compare-price-change';
49
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback:compare-price-change'] = 19] = 'gp:rollback:compare-price-change';
50
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:stock-change'] = 20] = 'gp:stock-change';
51
+ InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback:stock-change'] = 21] = 'gp:rollback:stock-change';
52
+ })(exports.InteractionTriggerEvent || (exports.InteractionTriggerEvent = {}));