@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.
- package/dist/cjs/components/ComponentToolbarPreview.js +115 -104
- package/dist/cjs/components/ComponentWrapperPreview.js +16 -2
- package/dist/cjs/components/InteractionSuffix.js +115 -0
- package/dist/cjs/components/Render.liquid.js +21 -7
- package/dist/cjs/components/RenderPreview.js +1 -0
- package/dist/cjs/components/constant.js +2 -1
- package/dist/cjs/contexts/PageContext.js +29 -1
- package/dist/cjs/contexts/SectionContext.js +0 -1
- package/dist/cjs/graphql/fragments/product-little.generated.js +1 -0
- package/dist/cjs/graphql/fragments/published-theme-page.generated.js +8 -0
- package/dist/cjs/graphql-app-api/queries/ShopLibraryPage.generated.js +17 -0
- package/dist/cjs/helpers/align.js +19 -0
- package/dist/cjs/helpers/animations.js +6 -6
- package/dist/cjs/helpers/background.js +1 -1
- package/dist/cjs/helpers/colors.js +1 -1
- package/dist/cjs/helpers/interaction/index.js +66 -0
- package/dist/cjs/helpers/shadow.js +1 -1
- package/dist/cjs/helpers/third-party/appConfig.js +28 -0
- package/dist/cjs/helpers/third-party/appSetting.js +66 -0
- package/dist/cjs/helpers/third-party/constant.js +5 -1
- package/dist/cjs/helpers/typography.js +9 -5
- package/dist/cjs/hooks/animation/useApplyAnimation.js +2 -0
- package/dist/cjs/hooks/useFormatMoney.js +61 -60
- package/dist/cjs/hooks/useInteraction.js +19 -0
- package/dist/cjs/index.js +16 -0
- package/dist/cjs/types/animations.js +2 -0
- package/dist/cjs/types/custom.js +51 -0
- package/dist/esm/components/ComponentToolbarPreview.js +115 -104
- package/dist/esm/components/ComponentWrapperPreview.js +16 -2
- package/dist/esm/components/InteractionSuffix.js +113 -0
- package/dist/esm/components/Render.liquid.js +21 -7
- package/dist/esm/components/RenderPreview.js +1 -0
- package/dist/esm/components/constant.js +2 -1
- package/dist/esm/contexts/PageContext.js +29 -1
- package/dist/esm/contexts/SectionContext.js +0 -1
- package/dist/esm/graphql/fragments/product-little.generated.js +1 -0
- package/dist/esm/graphql/fragments/published-theme-page.generated.js +8 -0
- package/dist/esm/graphql-app-api/queries/ShopLibraryPage.generated.js +15 -0
- package/dist/esm/helpers/align.js +17 -0
- package/dist/esm/helpers/animations.js +6 -6
- package/dist/esm/helpers/background.js +1 -1
- package/dist/esm/helpers/colors.js +1 -1
- package/dist/esm/helpers/interaction/index.js +64 -0
- package/dist/esm/helpers/shadow.js +1 -1
- package/dist/esm/helpers/third-party/appConfig.js +25 -1
- package/dist/esm/helpers/third-party/appSetting.js +66 -0
- package/dist/esm/helpers/third-party/constant.js +6 -2
- package/dist/esm/helpers/typography.js +9 -5
- package/dist/esm/hooks/animation/useApplyAnimation.js +2 -0
- package/dist/esm/hooks/useFormatMoney.js +61 -61
- package/dist/esm/hooks/useInteraction.js +17 -0
- package/dist/esm/index.js +5 -1
- package/dist/esm/types/animations.js +2 -0
- package/dist/esm/types/custom.js +51 -0
- package/dist/types/index.d.ts +3408 -747
- 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)}
|
|
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:
|
|
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:
|
|
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) {
|