@gem-sdk/core 1.50.2 → 1.51.0-dev.64

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 (56) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +115 -104
  2. package/dist/cjs/components/ComponentWrapperPreview.js +16 -2
  3. package/dist/cjs/components/InteractionSuffix.js +115 -0
  4. package/dist/cjs/components/Render.liquid.js +21 -7
  5. package/dist/cjs/components/RenderPreview.js +1 -0
  6. package/dist/cjs/components/constant.js +2 -1
  7. package/dist/cjs/contexts/PageContext.js +29 -1
  8. package/dist/cjs/contexts/SectionContext.js +0 -1
  9. package/dist/cjs/graphql/fragments/product-little.generated.js +1 -0
  10. package/dist/cjs/graphql/fragments/published-theme-page.generated.js +8 -0
  11. package/dist/cjs/graphql-app-api/queries/ShopLibraryPage.generated.js +17 -0
  12. package/dist/cjs/helpers/align.js +19 -0
  13. package/dist/cjs/helpers/animations.js +6 -6
  14. package/dist/cjs/helpers/background.js +1 -1
  15. package/dist/cjs/helpers/colors.js +1 -1
  16. package/dist/cjs/helpers/interaction/index.js +66 -0
  17. package/dist/cjs/helpers/shadow.js +1 -1
  18. package/dist/cjs/helpers/third-party/appConfig.js +28 -0
  19. package/dist/cjs/helpers/third-party/appSetting.js +66 -0
  20. package/dist/cjs/helpers/third-party/constant.js +5 -1
  21. package/dist/cjs/helpers/typography.js +9 -5
  22. package/dist/cjs/hooks/animation/useApplyAnimation.js +2 -0
  23. package/dist/cjs/hooks/useFormatMoney.js +61 -60
  24. package/dist/cjs/hooks/useInteraction.js +19 -0
  25. package/dist/cjs/index.js +16 -0
  26. package/dist/cjs/types/animations.js +2 -0
  27. package/dist/cjs/types/custom.js +51 -0
  28. package/dist/esm/components/ComponentToolbarPreview.js +115 -104
  29. package/dist/esm/components/ComponentWrapperPreview.js +16 -2
  30. package/dist/esm/components/InteractionSuffix.js +113 -0
  31. package/dist/esm/components/Render.liquid.js +21 -7
  32. package/dist/esm/components/RenderPreview.js +1 -0
  33. package/dist/esm/components/constant.js +2 -1
  34. package/dist/esm/contexts/PageContext.js +29 -1
  35. package/dist/esm/contexts/SectionContext.js +0 -1
  36. package/dist/esm/graphql/fragments/product-little.generated.js +1 -0
  37. package/dist/esm/graphql/fragments/published-theme-page.generated.js +8 -0
  38. package/dist/esm/graphql-app-api/queries/ShopLibraryPage.generated.js +15 -0
  39. package/dist/esm/helpers/align.js +17 -0
  40. package/dist/esm/helpers/animations.js +6 -6
  41. package/dist/esm/helpers/background.js +1 -1
  42. package/dist/esm/helpers/colors.js +1 -1
  43. package/dist/esm/helpers/interaction/index.js +64 -0
  44. package/dist/esm/helpers/shadow.js +1 -1
  45. package/dist/esm/helpers/third-party/appConfig.js +25 -1
  46. package/dist/esm/helpers/third-party/appSetting.js +66 -0
  47. package/dist/esm/helpers/third-party/constant.js +6 -2
  48. package/dist/esm/helpers/typography.js +9 -5
  49. package/dist/esm/hooks/animation/useApplyAnimation.js +2 -0
  50. package/dist/esm/hooks/useFormatMoney.js +61 -61
  51. package/dist/esm/hooks/useInteraction.js +17 -0
  52. package/dist/esm/index.js +5 -1
  53. package/dist/esm/types/animations.js +2 -0
  54. package/dist/esm/types/custom.js +51 -0
  55. package/dist/types/index.d.ts +3408 -747
  56. package/package.json +3 -3
@@ -28,6 +28,10 @@
28
28
  themePageCustomFonts {
29
29
  ...CustomFontSelect
30
30
  }
31
+ interaction {
32
+ id
33
+ value
34
+ }
31
35
  }
32
36
  `;
33
37
  const PreviewThemePageSelect = `
@@ -55,6 +59,10 @@ const PreviewThemePageSelect = `
55
59
  themePageCustomCode {
56
60
  ...CustomCodeSelect
57
61
  }
62
+ interaction {
63
+ id
64
+ value
65
+ }
58
66
  }
59
67
  `;
60
68
 
@@ -0,0 +1,17 @@
1
+ 'use strict';
2
+
3
+ /* eslint-disable */ const ShopLibraryPageDocument = `
4
+ query ShopLibraryPage($shopLibraryPageId: ID!) {
5
+ shopLibraryPage(id: $shopLibraryPageId) {
6
+ id
7
+ name
8
+ sectionPosition
9
+ shopLibrarySections {
10
+ id
11
+ component
12
+ }
13
+ }
14
+ }
15
+ `;
16
+
17
+ exports.ShopLibraryPageDocument = ShopLibraryPageDocument;
@@ -0,0 +1,19 @@
1
+ 'use strict';
2
+
3
+ const convertTextAlignToJustify = (align)=>{
4
+ const devices = [
5
+ 'desktop',
6
+ 'tablet',
7
+ 'mobile'
8
+ ];
9
+ const result = {};
10
+ devices.forEach((device)=>{
11
+ const deviceType = device === 'desktop' ? '' : `${device}:`;
12
+ result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
13
+ result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
14
+ result[`${deviceType}gp-justify-end`] = align?.[device] === 'right';
15
+ });
16
+ return result;
17
+ };
18
+
19
+ exports.convertTextAlignToJustify = convertTextAlignToJustify;
@@ -46,7 +46,7 @@ const animations = ()=>{
46
46
  });
47
47
  return cloneOptions;
48
48
  };
49
- const slide = (target, options)=>{
49
+ const slide = (target, options, reverse)=>{
50
50
  const normalizedOptions = normalizeOptions(options);
51
51
  const { direction, distance } = normalizedOptions;
52
52
  const coordinate = [
@@ -67,11 +67,11 @@ const animations = ()=>{
67
67
  transform: `translate${coordinate}(0)`
68
68
  }
69
69
  ];
70
- return generateAnimationInstance(target, preset, {
70
+ return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
71
71
  ...generateOptions(normalizedOptions, 500)
72
72
  });
73
73
  };
74
- const fade = (target, options)=>{
74
+ const fade = (target, options, reverse)=>{
75
75
  const normalizedOptions = normalizeOptions(options);
76
76
  const preset = [
77
77
  {
@@ -81,7 +81,7 @@ const animations = ()=>{
81
81
  opacity: 1
82
82
  }
83
83
  ];
84
- return generateAnimationInstance(target, preset, {
84
+ return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
85
85
  ...generateOptions(normalizedOptions, 500)
86
86
  });
87
87
  };
@@ -101,7 +101,7 @@ const animations = ()=>{
101
101
  easing: EASING[easing ?? 'linear']
102
102
  };
103
103
  };
104
- const zoom = (target, options)=>{
104
+ const zoom = (target, options, reverse)=>{
105
105
  const normalizedOptions = normalizeOptions(options);
106
106
  const { scale, zoomDirection, isFade } = normalizedOptions;
107
107
  const [i1, i2] = scale.in;
@@ -127,7 +127,7 @@ const animations = ()=>{
127
127
  }
128
128
  ];
129
129
  const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
130
- return generateAnimationInstance(target, zoomPreset, {
130
+ return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
131
131
  ...generateOptions(normalizedOptions, 700)
132
132
  });
133
133
  };
@@ -121,7 +121,7 @@ const getBgAttachmentByDevice = (background, device)=>{
121
121
  return background?.[device]?.attachment;
122
122
  };
123
123
  const composeBackgroundCss = (backgroundColor)=>{
124
- return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
124
+ return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)};` : undefined}`;
125
125
  };
126
126
  const makeFixedBgAttachment = (background)=>{
127
127
  if (!background) return;
@@ -119,7 +119,7 @@ const getGlobalColorStateStyle = (type, data)=>{
119
119
  return Object.fromEntries(Object.entries(data).map(([state, value])=>{
120
120
  if (state === 'active') return [];
121
121
  return [
122
- `-${constant.stateMapping?.[state]}-${type}`,
122
+ `-${constant.stateMapping?.[state] || ''}-${type}`,
123
123
  getSingleColorVariable(value)
124
124
  ];
125
125
  }).filter(isDefined.isDefined));
@@ -0,0 +1,66 @@
1
+ 'use strict';
2
+
3
+ require('react/jsx-runtime');
4
+ require('zustand');
5
+ require('react');
6
+ require('swr');
7
+ var PageContext = require('../../contexts/PageContext.js');
8
+ require('@gem-sdk/adapter-shopify');
9
+ require('swr/mutation');
10
+ require('swr/infinite');
11
+ require('vanilla-lazyload');
12
+ require('../../hooks/useCartUI.js');
13
+ require('react-transition-group');
14
+ require('@gem-sdk/core');
15
+ require('classnames');
16
+ require('dayjs');
17
+ require('../convert.js');
18
+
19
+ const useInteraction = ()=>{
20
+ const setInteractionIsSelectOnPage = PageContext.usePageStore((s)=>s.setInteractionIsSelectOnPage);
21
+ const onListener = ({ event, selector }, callback)=>{
22
+ const element = document.querySelector(selector);
23
+ if (!element) return;
24
+ element.addEventListener(event, (e)=>{
25
+ const event = e;
26
+ const params = event.detail;
27
+ if (callback) callback(params);
28
+ });
29
+ };
30
+ const trigger = ({ event, data, selector })=>{
31
+ const element = document.querySelector(selector);
32
+ if (!element) return;
33
+ const eventDispatch = new CustomEvent(event, {
34
+ bubbles: false,
35
+ cancelable: true,
36
+ detail: {
37
+ data
38
+ }
39
+ });
40
+ element.dispatchEvent(eventDispatch);
41
+ };
42
+ const saveToElementInteractionData = (element, key, value)=>{
43
+ const interactionData = element.getAttribute('gp-data-interaction');
44
+ const interactionDataJson = JSON.parse(interactionData || '{}');
45
+ element.setAttribute('gp-data-interaction', JSON.stringify({
46
+ ...interactionDataJson,
47
+ [key]: value
48
+ }));
49
+ };
50
+ const closeSelectOnPage = ()=>{
51
+ setInteractionIsSelectOnPage(false);
52
+ const event = new CustomEvent('editor:interaction:change-select-on-page', {
53
+ bubbles: true,
54
+ detail: false
55
+ });
56
+ window.dispatchEvent(event);
57
+ };
58
+ return {
59
+ onListener,
60
+ trigger,
61
+ saveToElementInteractionData,
62
+ closeSelectOnPage
63
+ };
64
+ };
65
+
66
+ exports.useInteraction = useInteraction;
@@ -27,7 +27,7 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
27
27
  if (typeof value.distance == 'undefined') return {};
28
28
  const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
29
29
  return {
30
- [`-${!isActiveState ? constant.stateMapping?.[state] : ''}-${getShortname.getShortName(styleAppliedFor)}`]: 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'
30
+ [`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.getShortName(styleAppliedFor)}`]: 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'
31
31
  };
32
32
  };
33
33
  const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
@@ -78,11 +78,39 @@ const SimpleBundlesKitsConfig = {
78
78
  appId: 'e553276b-36b2-446d-b80a-aa47fe5f96ac'
79
79
  }
80
80
  };
81
+ const EasyBundleBuilderSkailamaConfig = {
82
+ EasyBundleBuilderSkailama: {
83
+ appName: 'easy-bundles',
84
+ appId: '05b1325c-6303-4da5-8e2f-b13ab2a50e1a'
85
+ }
86
+ };
87
+ const PreorderNowPreOrderPqConfig = {
88
+ PreorderNowPreOrderPq: {
89
+ appName: 'preorder-now-pre-order-pq',
90
+ appId: '551fab2c-3af6-4a8f-ba21-736a71cb4540'
91
+ }
92
+ };
93
+ const FlyBundlesUpsellsFbtConfig = {
94
+ FlyBundlesUpsellsFbt: {
95
+ appName: 'fly-bundles-upsell',
96
+ appId: '26807bdc-c2ed-4a25-afb2-06e6b1ebf843'
97
+ }
98
+ };
99
+ const JunipProductReviewsUgcConfig = {
100
+ JunipProductReviewsUgc: {
101
+ appName: 'junip-product-reviews-ugc',
102
+ appId: 'dc14f5a8-ed15-41b1-ad08-cfba23f9789b'
103
+ }
104
+ };
81
105
 
82
106
  exports.BonLoyaltyRewardsReferralsConfig = BonLoyaltyRewardsReferralsConfig;
107
+ exports.EasyBundleBuilderSkailamaConfig = EasyBundleBuilderSkailamaConfig;
83
108
  exports.FastBundleBundlesDiscountsConfig = FastBundleBundlesDiscountsConfig;
109
+ exports.FlyBundlesUpsellsFbtConfig = FlyBundlesUpsellsFbtConfig;
110
+ exports.JunipProductReviewsUgcConfig = JunipProductReviewsUgcConfig;
84
111
  exports.KiteFreeGiftDiscountConfig = KiteFreeGiftDiscountConfig;
85
112
  exports.LoopSubscriptionsConfig = LoopSubscriptionsConfig;
113
+ exports.PreorderNowPreOrderPqConfig = PreorderNowPreOrderPqConfig;
86
114
  exports.PumperBundlesVolumeDiscountConfig = PumperBundlesVolumeDiscountConfig;
87
115
  exports.RechargeSubscriptionsConfig = RechargeSubscriptionsConfig;
88
116
  exports.ReviewxpoProductReviewsAppConfig = ReviewxpoProductReviewsAppConfig;
@@ -81,6 +81,13 @@ const overrideSettings = (tag, currentSetting, appSetting)=>{
81
81
  ...currentSetting,
82
82
  form_id: appSetting['formId']
83
83
  };
84
+ case 'FlyBundlesUpsellsFbt':
85
+ {
86
+ return {
87
+ ...currentSetting,
88
+ bundle_id: appSetting?.['customBundleId']
89
+ };
90
+ }
84
91
  default:
85
92
  return currentSetting;
86
93
  }
@@ -129,7 +136,66 @@ const SimpleBundlesKits = {
129
136
  'infinite-options-selector': null
130
137
  }
131
138
  };
139
+ const EasyBundleBuilderSkailama = {
140
+ EasyBundleBuilderSkailama: {
141
+ 'app-block-bundlePage': null
142
+ }
143
+ };
144
+ const PreorderNowPreOrderPq = {
145
+ PreorderNowPreOrderPq: {
146
+ 'app-block-notifyapp-block-notify': null,
147
+ 'app-block-partial': null,
148
+ 'app-block-timer': null,
149
+ 'app-block': null
150
+ }
151
+ };
152
+ const FlyBundlesUpsellsFbt = {
153
+ FlyBundlesUpsellsFbt: {
154
+ 'app-block-volume': null,
155
+ 'app-block-upsell-block': null,
156
+ 'app-block-fbt': null,
157
+ 'app-block-custom': {
158
+ bundle_id: ''
159
+ }
160
+ }
161
+ };
162
+ const JunipProductReviewsUgc = {
163
+ JunipProductReviewsUgc: {
164
+ 'junip-review-carousel': {
165
+ reviewsType: 'product_reviews',
166
+ showSummary: true,
167
+ title: 'Reviews',
168
+ paddingTop: 48,
169
+ paddingBottom: 48,
170
+ containerClass: ''
171
+ },
172
+ 'junip-ugc-gallery': {
173
+ layout: 'scroll',
174
+ title: '',
175
+ paddingTop: 48,
176
+ paddingBottom: 48,
177
+ containerClass: ''
178
+ },
179
+ 'junip-product-review': {
180
+ product: '{{product}}'
181
+ },
182
+ 'junip-product-summary': {
183
+ product: '{{product}}'
184
+ },
185
+ 'junip-reviews': {
186
+ layout: 'list',
187
+ reviewsType: 'all',
188
+ showSummary: true,
189
+ reviewsCount: 10,
190
+ containerClass: ''
191
+ }
192
+ }
193
+ };
132
194
  const composeSettingsByWidgetType = {
195
+ ...JunipProductReviewsUgc,
196
+ ...FlyBundlesUpsellsFbt,
197
+ ...PreorderNowPreOrderPq,
198
+ ...EasyBundleBuilderSkailama,
133
199
  ...FastBundleBundlesDiscounts,
134
200
  ...KiteFreeGiftDiscount,
135
201
  ...UnlimitedBundlesDiscounts,
@@ -15,7 +15,11 @@ const mapShopifyAppMeta = {
15
15
  ...appConfig.UnlimitedBundlesDiscountsConfig,
16
16
  ...appConfig.KiteFreeGiftDiscountConfig,
17
17
  ...appConfig.FastBundleBundlesDiscountsConfig,
18
- ...appConfig.SimpleBundlesKitsConfig
18
+ ...appConfig.SimpleBundlesKitsConfig,
19
+ ...appConfig.EasyBundleBuilderSkailamaConfig,
20
+ ...appConfig.PreorderNowPreOrderPqConfig,
21
+ ...appConfig.FlyBundlesUpsellsFbtConfig,
22
+ ...appConfig.JunipProductReviewsUgcConfig
19
23
  };
20
24
  const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
21
25
 
@@ -28,7 +28,8 @@ const composeTypographyV2Css = (typography, isImportant)=>{
28
28
  const composeImportant = isImportant ? '!important' : '';
29
29
  return `
30
30
  ${fontFamily ? `font-family: ${composeFontFamilyTypographyV2({
31
- fontFamily
31
+ fontFamily,
32
+ type: typography?.type
32
33
  })} ${composeImportant}` : ''};
33
34
  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant}` : ''};
34
35
  ${bold ? `font-weight: bold ${composeImportant}` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant}` : ''};
@@ -76,7 +77,7 @@ const composeTypographyV2 = (value, attrs)=>{
76
77
  });
77
78
  };
78
79
  const composeFontFamilyTypographyV2 = (value)=>{
79
- const { fontFamily, isCustom, fallbackFontFamily } = value || {};
80
+ const { fontFamily, isCustom, fallbackFontFamily, type } = value || {};
80
81
  if (!fontFamily) {
81
82
  return isCustom ? fallbackFontFamily : undefined;
82
83
  }
@@ -93,7 +94,7 @@ const composeFontFamilyTypographyV2 = (value)=>{
93
94
  default:
94
95
  return getFontUsedByTypographyV2({
95
96
  fontFamily: fontFamily.value,
96
- fallbackFontFamily: value?.fallbackFontFamily
97
+ fallbackFontFamily: composeFallbackTypographyStyle(type ?? 'heading')
97
98
  });
98
99
  }
99
100
  }
@@ -118,7 +119,7 @@ const composeTypographyAttr = (attrs)=>{
118
119
  });
119
120
  };
120
121
  const composeTypographyClassName = (typo, typography)=>{
121
- return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
122
+ return typo ? typo?.type && !isCustomTypo(typo.custom) ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
122
123
  };
123
124
  const composeFallbackTypographyStyle = (tag)=>{
124
125
  if (tag.toLocaleLowerCase().includes('heading')) {
@@ -132,7 +133,7 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
132
133
  const customTypo = {
133
134
  ...typo.custom,
134
135
  fallbackFontFamily: fallbackFontFamily,
135
- isCustom: !!typo.custom
136
+ isCustom: isCustomTypo(typo.custom)
136
137
  };
137
138
  return {
138
139
  ...composeTypographyV2(customTypo, typo.attrs),
@@ -143,6 +144,9 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
143
144
  ...!typography?.type ? composeTypography(typography?.custom) : {}
144
145
  };
145
146
  };
147
+ const isCustomTypo = (customTypo)=>{
148
+ return customTypo && Object.keys(customTypo).length > 1 || customTypo && Object.keys(customTypo).length === 1 && !customTypo.fontSize;
149
+ };
146
150
 
147
151
  exports.composeFallbackTypographyStyle = composeFallbackTypographyStyle;
148
152
  exports.composeFontFamilyTypographyV2 = composeFontFamilyTypographyV2;
@@ -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 })=>{
@@ -40,6 +41,7 @@ const useApplyAnimation = ({ props })=>{
40
41
  setting,
41
42
  target: item.target
42
43
  }));
44
+ console.log('listAnimations', listAnimations);
43
45
  cancelAnimation();
44
46
  setAnimation(listAnimations);
45
47
  }, [
@@ -5,70 +5,71 @@ var shop = require('./shop.js');
5
5
  const shopifyPriceRounding = (amount, precision)=>{
6
6
  return parseFloat(`${amount}`).toFixed(Number(precision) + 1).slice(0, -1);
7
7
  };
8
+ const formatMoney = function(cents, format) {
9
+ let value = '';
10
+ const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
11
+ const formatString = format || '${{amount}}';
12
+ /**
13
+ * check default
14
+ * @param opt opt
15
+ * @param def def
16
+ * @returns any
17
+ */ function defaultOption(opt, def) {
18
+ return typeof opt == 'undefined' ? def : opt;
19
+ }
20
+ /**
21
+ * formatWithDelimiters
22
+ * @param number number
23
+ * @param precision precision
24
+ * @param thousands thousands
25
+ * @param decimal decimal
26
+ * @returns any
27
+ */ // eslint-disable-next-line max-params
28
+ function formatWithDelimiters(number, precision, thousands, decimal) {
29
+ precision = defaultOption(precision, 2);
30
+ thousands = defaultOption(thousands, ',');
31
+ decimal = defaultOption(decimal, '.');
32
+ if (isNaN(number) || number == null) {
33
+ return 0;
34
+ }
35
+ // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
36
+ number = shopifyPriceRounding(number, Number(precision));
37
+ const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
38
+ return dollars + cents;
39
+ }
40
+ switch(formatString.match(placeholderRegex)[1]){
41
+ case 'amount':
42
+ value = formatWithDelimiters(cents, 2);
43
+ break;
44
+ case 'amount_no_decimals':
45
+ value = formatWithDelimiters(cents, 0);
46
+ break;
47
+ case 'amount_with_comma_separator':
48
+ value = formatWithDelimiters(cents, 2, '.', ',');
49
+ break;
50
+ case 'amount_no_decimals_with_comma_separator':
51
+ value = formatWithDelimiters(cents, 0, '.', ',');
52
+ break;
53
+ case 'amount_with_apostrophe_separator':
54
+ value = formatWithDelimiters(cents, 2, "'", '.');
55
+ break;
56
+ case 'amount_no_decimals_with_space_separator':
57
+ value = formatWithDelimiters(cents, 0, ' ');
58
+ break;
59
+ case 'amount_with_space_separator':
60
+ value = formatWithDelimiters(cents, 2, ' ', ',');
61
+ break;
62
+ case 'amount_with_period_and_space_separator':
63
+ value = formatWithDelimiters(cents, 2, ' ', '.');
64
+ break;
65
+ }
66
+ return formatString.replace(placeholderRegex, value);
67
+ };
8
68
  const useFormatMoney = (amount, withCurrency)=>{
9
69
  const { moneyFormat, moneyWithCurrencyFormat } = shop.useMoneyFormat();
10
- const formatMoney = function(cents, format) {
11
- let value = '';
12
- const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
13
- const formatString = format || '${{amount}}';
14
- /**
15
- * check default
16
- * @param opt opt
17
- * @param def def
18
- * @returns any
19
- */ function defaultOption(opt, def) {
20
- return typeof opt == 'undefined' ? def : opt;
21
- }
22
- /**
23
- * formatWithDelimiters
24
- * @param number number
25
- * @param precision precision
26
- * @param thousands thousands
27
- * @param decimal decimal
28
- * @returns any
29
- */ // eslint-disable-next-line max-params
30
- function formatWithDelimiters(number, precision, thousands, decimal) {
31
- precision = defaultOption(precision, 2);
32
- thousands = defaultOption(thousands, ',');
33
- decimal = defaultOption(decimal, '.');
34
- if (isNaN(number) || number == null) {
35
- return 0;
36
- }
37
- // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
38
- number = shopifyPriceRounding(number, Number(precision));
39
- const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
40
- return dollars + cents;
41
- }
42
- switch(formatString.match(placeholderRegex)[1]){
43
- case 'amount':
44
- value = formatWithDelimiters(cents, 2);
45
- break;
46
- case 'amount_no_decimals':
47
- value = formatWithDelimiters(cents, 0);
48
- break;
49
- case 'amount_with_comma_separator':
50
- value = formatWithDelimiters(cents, 2, '.', ',');
51
- break;
52
- case 'amount_no_decimals_with_comma_separator':
53
- value = formatWithDelimiters(cents, 0, '.', ',');
54
- break;
55
- case 'amount_with_apostrophe_separator':
56
- value = formatWithDelimiters(cents, 2, "'", '.');
57
- break;
58
- case 'amount_no_decimals_with_space_separator':
59
- value = formatWithDelimiters(cents, 0, ' ');
60
- break;
61
- case 'amount_with_space_separator':
62
- value = formatWithDelimiters(cents, 2, ' ', ',');
63
- break;
64
- case 'amount_with_period_and_space_separator':
65
- value = formatWithDelimiters(cents, 2, ' ', '.');
66
- break;
67
- }
68
- return formatString.replace(placeholderRegex, value);
69
- };
70
70
  return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
71
71
  };
72
72
 
73
+ exports.formatMoney = formatMoney;
73
74
  exports.shopifyPriceRounding = shopifyPriceRounding;
74
75
  exports.useFormatMoney = useFormatMoney;
@@ -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;
package/dist/cjs/index.js CHANGED
@@ -30,6 +30,7 @@ var LibraryTemplate_generated = require('./graphql-app-api/queries/LibraryTempla
30
30
  var ThemePage_generated = require('./graphql-app-api/queries/ThemePage.generated.js');
31
31
  var SaleFunnelDiscounts_generated = require('./graphql-app-api/queries/SaleFunnelDiscounts.generated.js');
32
32
  var LibrarySaleFunnelDiscount_generated = require('./graphql-app-api/queries/LibrarySaleFunnelDiscount.generated.js');
33
+ var ShopLibraryPage_generated = require('./graphql-app-api/queries/ShopLibraryPage.generated.js');
33
34
  var borders = require('./helpers/borders.js');
34
35
  var carousel = require('./helpers/carousel.js');
35
36
  var cls = require('./helpers/cls.js');
@@ -60,6 +61,7 @@ var iconList = require('./helpers/icon-list.js');
60
61
  var isDefined = require('./helpers/is-defined.js');
61
62
  var layout = require('./helpers/layout.js');
62
63
  var makeStyle = require('./helpers/make-style.js');
64
+ var align = require('./helpers/align.js');
63
65
  var product = require('./helpers/product.js');
64
66
  var query = require('./helpers/query.js');
65
67
  var radius = require('./helpers/radius.js');
@@ -97,6 +99,7 @@ var useProductList = require('./hooks/useProductList.js');
97
99
  var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
98
100
  var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
99
101
  var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
102
+ var custom = require('./types/custom.js');
100
103
  var shop$1 = require('./types/shop.js');
101
104
  var appAPI = require('./types/appAPI.js');
102
105
  var globalStyle = require('./types/global-style.js');
@@ -106,6 +109,7 @@ var getProduct = require('./helpers/queries/get-product.js');
106
109
  var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
107
110
  var getAppBlocks = require('./helpers/third-party/getAppBlocks.js');
108
111
  var addAppBlockId = require('./helpers/third-party/addAppBlockId.js');
112
+ var index = require('./helpers/interaction/index.js');
109
113
 
110
114
 
111
115
 
@@ -157,6 +161,7 @@ exports.LibraryTemplateDocument = LibraryTemplate_generated.LibraryTemplateDocum
157
161
  exports.ThemePageDocument = ThemePage_generated.ThemePageDocument;
158
162
  exports.SaleFunnelDiscountsDocument = SaleFunnelDiscounts_generated.SaleFunnelDiscountsDocument;
159
163
  exports.LibrarySaleFunnelDocument = LibrarySaleFunnelDiscount_generated.LibrarySaleFunnelDocument;
164
+ exports.ShopLibraryPageDocument = ShopLibraryPage_generated.ShopLibraryPageDocument;
160
165
  exports.composeBorderCss = borders.composeBorderCss;
161
166
  exports.getBorderRadiusStyle = borders.getBorderRadiusStyle;
162
167
  exports.getBorderStyle = borders.getBorderStyle;
@@ -243,6 +248,7 @@ exports.makeStyleResponsiveState = makeStyle.makeStyleResponsiveState;
243
248
  exports.makeStyleState = makeStyle.makeStyleState;
244
249
  exports.makeWidth = makeStyle.makeWidth;
245
250
  exports.removeNullUndefined = makeStyle.removeNullUndefined;
251
+ exports.convertTextAlignToJustify = align.convertTextAlignToJustify;
246
252
  exports.checkAvailableVariantInStock = product.checkAvailableVariantInStock;
247
253
  exports.getSelectedVariant = product.getSelectedVariant;
248
254
  exports.parseSelectedOption = product.parseSelectedOption;
@@ -317,6 +323,7 @@ exports.useProductQuery = useProductQuery.useProductQuery;
317
323
  exports.useProductsQuery = useProductsQuery.useProductsQuery;
318
324
  exports.useProductsQueryAll = useProductsQuery.useProductsQueryAll;
319
325
  exports.useCurrentDevice = useCurrentDevice.useCurrentDevice;
326
+ exports.formatMoney = useFormatMoney.formatMoney;
320
327
  exports.shopifyPriceRounding = useFormatMoney.shopifyPriceRounding;
321
328
  exports.useFormatMoney = useFormatMoney.useFormatMoney;
322
329
  exports.useLazyVideo = useLazyVideo.useLazyVideo;
@@ -356,6 +363,14 @@ exports.useProductListStyles = useProductList.useProductListStyles;
356
363
  exports.useSuspenseFetch = useSuspenseFetch.default;
357
364
  exports.useSwatchesOptions = useSwatchesOptions.default;
358
365
  exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
366
+ Object.defineProperty(exports, 'InteractionTargetEvent', {
367
+ enumerable: true,
368
+ get: function () { return custom.InteractionTargetEvent; }
369
+ });
370
+ Object.defineProperty(exports, 'InteractionTriggerEvent', {
371
+ enumerable: true,
372
+ get: function () { return custom.InteractionTriggerEvent; }
373
+ });
359
374
  exports.ShopType = shop$1;
360
375
  exports.AppAPIType = appAPI;
361
376
  exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
@@ -392,3 +407,4 @@ exports.getProduct = getProduct.getProduct;
392
407
  exports.getProductBySlug = getProductBySlug.getProductBySlug;
393
408
  exports.getAppBlocks = getAppBlocks.getAppBlocks;
394
409
  exports.addAppBlockId = addAppBlockId.addAppBlockId;
410
+ 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) {