@gem-sdk/core 1.12.0-next.11 → 1.12.0-next.12
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/helpers/render.js +4 -0
- package/dist/cjs/hooks/shop.js +12 -0
- package/dist/cjs/hooks/useFormatMoney.js +54 -14
- package/dist/cjs/hooks/useMoney.js +60 -207
- package/dist/cjs/index.js +4 -2
- package/dist/esm/helpers/render.js +4 -1
- package/dist/esm/hooks/shop.js +12 -1
- package/dist/esm/hooks/useFormatMoney.js +55 -13
- package/dist/esm/hooks/useMoney.js +60 -207
- package/dist/esm/index.js +3 -3
- package/dist/types/index.d.ts +52 -11
- package/package.json +1 -1
|
@@ -39,6 +39,9 @@ const styles = (strings, ...keys)=>{
|
|
|
39
39
|
}
|
|
40
40
|
return styleArr.join(';');
|
|
41
41
|
};
|
|
42
|
+
const dataStringify = (obj)=>{
|
|
43
|
+
return JSON.stringify(obj).replace(/\\"/g, '"');
|
|
44
|
+
};
|
|
42
45
|
const template = (strings, ...keys)=>{
|
|
43
46
|
let str = '';
|
|
44
47
|
strings.forEach((item, index)=>{
|
|
@@ -59,6 +62,7 @@ const template = (strings, ...keys)=>{
|
|
|
59
62
|
};
|
|
60
63
|
|
|
61
64
|
exports.RenderIf = RenderIf;
|
|
65
|
+
exports.dataStringify = dataStringify;
|
|
62
66
|
exports.props = props;
|
|
63
67
|
exports.styles = styles;
|
|
64
68
|
exports.template = template;
|
package/dist/cjs/hooks/shop.js
CHANGED
|
@@ -26,6 +26,17 @@ const useCurrency = ()=>{
|
|
|
26
26
|
changeCurrency
|
|
27
27
|
]);
|
|
28
28
|
};
|
|
29
|
+
const useMoneyFormat = ()=>{
|
|
30
|
+
const moneyFormat = ShopContext.useShopStore((state)=>state.moneyFormat);
|
|
31
|
+
const moneyWithCurrencyFormat = ShopContext.useShopStore((state)=>state.moneyWithCurrencyFormat);
|
|
32
|
+
return react.useMemo(()=>({
|
|
33
|
+
moneyFormat,
|
|
34
|
+
moneyWithCurrencyFormat
|
|
35
|
+
}), [
|
|
36
|
+
moneyFormat,
|
|
37
|
+
moneyWithCurrencyFormat
|
|
38
|
+
]);
|
|
39
|
+
};
|
|
29
40
|
const useSwatches = ()=>{
|
|
30
41
|
const swatches = ShopContext.useShopStore((state)=>state.swatches);
|
|
31
42
|
const changeSwatches = ShopContext.useShopStore((state)=>state.changeSwatches);
|
|
@@ -108,6 +119,7 @@ exports.useIsStorefrontProduct = useIsStorefrontProduct;
|
|
|
108
119
|
exports.useLocale = useLocale;
|
|
109
120
|
exports.useMatchMutate = useMatchMutate;
|
|
110
121
|
exports.useMobileOnly = useMobileOnly;
|
|
122
|
+
exports.useMoneyFormat = useMoneyFormat;
|
|
111
123
|
exports.usePageType = usePageType;
|
|
112
124
|
exports.usePluginEnable = usePluginEnable;
|
|
113
125
|
exports.useStoreFront = useStoreFront;
|
|
@@ -1,21 +1,61 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var react = require('react');
|
|
6
3
|
var shop = require('./shop.js');
|
|
7
4
|
|
|
8
|
-
const useFormatMoney = ()=>{
|
|
9
|
-
const {
|
|
10
|
-
const formatMoney =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
5
|
+
const useFormatMoney = (amount, withCurrency)=>{
|
|
6
|
+
const { moneyFormat , moneyWithCurrencyFormat } = shop.useMoneyFormat();
|
|
7
|
+
const formatMoney = function(cents, format) {
|
|
8
|
+
let value = '';
|
|
9
|
+
const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
|
|
10
|
+
const formatString = format || '${{amount}}';
|
|
11
|
+
if (typeof cents == 'string') {
|
|
12
|
+
cents = cents.replace('.', '');
|
|
13
|
+
}
|
|
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 = (number / 100.0).toFixed(Number(precision) + 1).slice(0, -1);
|
|
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
|
+
}
|
|
56
|
+
return formatString.replace(placeholderRegex, value);
|
|
18
57
|
};
|
|
58
|
+
return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
|
|
19
59
|
};
|
|
20
60
|
|
|
21
|
-
exports.
|
|
61
|
+
exports.useFormatMoney = useFormatMoney;
|
|
@@ -5,182 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var shop = require('./shop.js');
|
|
7
7
|
|
|
8
|
-
const
|
|
9
|
-
AED: 'د.إ',
|
|
10
|
-
AFN: '؋',
|
|
11
|
-
ALL: 'L',
|
|
12
|
-
AMD: 'դր.',
|
|
13
|
-
ANG: 'ƒ',
|
|
14
|
-
AOA: 'Kz',
|
|
15
|
-
ARS: '$',
|
|
16
|
-
AUD: '$',
|
|
17
|
-
AWG: 'ƒ',
|
|
18
|
-
AZN: '₼',
|
|
19
|
-
BAM: 'КМ',
|
|
20
|
-
BBD: '$',
|
|
21
|
-
BDT: '৳',
|
|
22
|
-
BGN: 'лв.',
|
|
23
|
-
BHD: 'ب.د',
|
|
24
|
-
BIF: 'Fr',
|
|
25
|
-
BMD: '$',
|
|
26
|
-
BND: '$',
|
|
27
|
-
BOB: 'Bs.',
|
|
28
|
-
BRL: 'R$',
|
|
29
|
-
BSD: '$',
|
|
30
|
-
BTN: 'Nu.',
|
|
31
|
-
BWP: 'P',
|
|
32
|
-
BYN: 'Br',
|
|
33
|
-
BYR: 'Br',
|
|
34
|
-
BZD: '$',
|
|
35
|
-
CAD: '$',
|
|
36
|
-
CDF: 'Fr',
|
|
37
|
-
CHF: 'CHF',
|
|
38
|
-
CLF: 'UF',
|
|
39
|
-
CLP: '$',
|
|
40
|
-
CNY: '¥',
|
|
41
|
-
COP: '$',
|
|
42
|
-
CRC: '₡',
|
|
43
|
-
CUC: '$',
|
|
44
|
-
CUP: '$',
|
|
45
|
-
CVE: '$',
|
|
46
|
-
CZK: 'Kč',
|
|
47
|
-
DJF: 'Fdj',
|
|
48
|
-
DKK: 'kr.',
|
|
49
|
-
DOP: '$',
|
|
50
|
-
DZD: 'د.ج',
|
|
51
|
-
EGP: 'ج.م',
|
|
52
|
-
ERN: 'Nfk',
|
|
53
|
-
ETB: 'Br',
|
|
54
|
-
EUR: '€',
|
|
55
|
-
FJD: '$',
|
|
56
|
-
FKP: '£',
|
|
57
|
-
GBP: '£',
|
|
58
|
-
GEL: 'ლ',
|
|
59
|
-
GHS: '₵',
|
|
60
|
-
GIP: '£',
|
|
61
|
-
GMD: 'D',
|
|
62
|
-
GNF: 'Fr',
|
|
63
|
-
GTQ: 'Q',
|
|
64
|
-
GYD: '$',
|
|
65
|
-
HKD: '$',
|
|
66
|
-
HNL: 'L',
|
|
67
|
-
HRK: 'kn',
|
|
68
|
-
HTG: 'G',
|
|
69
|
-
HUF: 'Ft',
|
|
70
|
-
IDR: 'Rp',
|
|
71
|
-
ILS: '₪',
|
|
72
|
-
INR: '₹',
|
|
73
|
-
IQD: 'ع.د',
|
|
74
|
-
IRR: '﷼',
|
|
75
|
-
ISK: 'kr',
|
|
76
|
-
JMD: '$',
|
|
77
|
-
JOD: 'د.ا',
|
|
78
|
-
JPY: '¥',
|
|
79
|
-
KES: 'KSh',
|
|
80
|
-
KGS: 'som',
|
|
81
|
-
KHR: '៛',
|
|
82
|
-
KMF: 'Fr',
|
|
83
|
-
KPW: '₩',
|
|
84
|
-
KRW: '₩',
|
|
85
|
-
KWD: 'د.ك',
|
|
86
|
-
KYD: '$',
|
|
87
|
-
KZT: '〒',
|
|
88
|
-
LAK: '₭',
|
|
89
|
-
LBP: 'ل.ل',
|
|
90
|
-
LKR: '₨',
|
|
91
|
-
LRD: '$',
|
|
92
|
-
LSL: 'L',
|
|
93
|
-
LTL: 'Lt',
|
|
94
|
-
LVL: 'Ls',
|
|
95
|
-
LYD: 'ل.د',
|
|
96
|
-
MAD: 'د.م.',
|
|
97
|
-
MDL: 'L',
|
|
98
|
-
MGA: 'Ar',
|
|
99
|
-
MKD: 'ден',
|
|
100
|
-
MMK: 'K',
|
|
101
|
-
MNT: '₮',
|
|
102
|
-
MOP: 'P',
|
|
103
|
-
MRU: 'UM',
|
|
104
|
-
MUR: '₨',
|
|
105
|
-
MVR: 'MVR',
|
|
106
|
-
MWK: 'MK',
|
|
107
|
-
MXN: '$',
|
|
108
|
-
MYR: 'RM',
|
|
109
|
-
MZN: 'MTn',
|
|
110
|
-
NAD: '$',
|
|
111
|
-
NGN: '₦',
|
|
112
|
-
NIO: 'C$',
|
|
113
|
-
NOK: 'kr',
|
|
114
|
-
NPR: '₨',
|
|
115
|
-
NZD: '$',
|
|
116
|
-
OMR: 'ر.ع.',
|
|
117
|
-
PAB: 'B/.',
|
|
118
|
-
PEN: 'S/.',
|
|
119
|
-
PGK: 'K',
|
|
120
|
-
PHP: '₱',
|
|
121
|
-
PKR: '₨',
|
|
122
|
-
PLN: 'zł',
|
|
123
|
-
PYG: '₲',
|
|
124
|
-
QAR: 'ر.ق',
|
|
125
|
-
RON: 'Lei',
|
|
126
|
-
RSD: 'РСД',
|
|
127
|
-
RUB: '₽',
|
|
128
|
-
RWF: 'FRw',
|
|
129
|
-
SAR: 'ر.س',
|
|
130
|
-
SBD: '$',
|
|
131
|
-
SCR: '₨',
|
|
132
|
-
SDG: '£',
|
|
133
|
-
SEK: 'kr',
|
|
134
|
-
SGD: '$',
|
|
135
|
-
SHP: '£',
|
|
136
|
-
SKK: 'Sk',
|
|
137
|
-
SLL: 'Le',
|
|
138
|
-
SOS: 'Sh',
|
|
139
|
-
SRD: '$',
|
|
140
|
-
SSP: '£',
|
|
141
|
-
STN: 'Db',
|
|
142
|
-
SVC: '₡',
|
|
143
|
-
SYP: '£S',
|
|
144
|
-
SZL: 'E',
|
|
145
|
-
THB: '฿',
|
|
146
|
-
TJS: 'ЅМ',
|
|
147
|
-
TMT: 'T',
|
|
148
|
-
TND: 'د.ت',
|
|
149
|
-
TOP: 'T$',
|
|
150
|
-
TRY: '₺',
|
|
151
|
-
TTD: '$',
|
|
152
|
-
TWD: '$',
|
|
153
|
-
TZS: 'Sh',
|
|
154
|
-
UAH: '₴',
|
|
155
|
-
UGX: 'USh',
|
|
156
|
-
USD: '$',
|
|
157
|
-
UYU: '$',
|
|
158
|
-
UZS: '',
|
|
159
|
-
VED: 'Bs.D.',
|
|
160
|
-
VES: 'Bs.S.',
|
|
161
|
-
VND: '₫',
|
|
162
|
-
VUV: 'Vt',
|
|
163
|
-
WST: 'T',
|
|
164
|
-
XAF: 'Fr',
|
|
165
|
-
XAG: 'oz t',
|
|
166
|
-
XAU: 'oz t',
|
|
167
|
-
XBA: '',
|
|
168
|
-
XBB: '',
|
|
169
|
-
XBC: '',
|
|
170
|
-
XBD: '',
|
|
171
|
-
XCD: '$',
|
|
172
|
-
XDR: 'SDR',
|
|
173
|
-
XOF: 'Fr',
|
|
174
|
-
XPD: 'oz t',
|
|
175
|
-
XPF: 'Fr',
|
|
176
|
-
XPT: 'oz t',
|
|
177
|
-
xts: '',
|
|
178
|
-
YER: '﷼',
|
|
179
|
-
ZAR: 'R',
|
|
180
|
-
ZMK: 'ZK',
|
|
181
|
-
ZMW: 'ZK'
|
|
182
|
-
};
|
|
183
|
-
const useMoney = (money)=>{
|
|
8
|
+
const useMoney = (amount)=>{
|
|
184
9
|
const { locale } = shop.useLocale();
|
|
185
10
|
const { currency } = shop.useCurrency();
|
|
186
11
|
const options = react.useMemo(()=>({
|
|
@@ -189,43 +14,71 @@ const useMoney = (money)=>{
|
|
|
189
14
|
}), [
|
|
190
15
|
currency
|
|
191
16
|
]);
|
|
192
|
-
const
|
|
193
|
-
|
|
194
|
-
options,
|
|
195
|
-
money
|
|
196
|
-
]);
|
|
197
|
-
const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
|
|
198
|
-
const nameParts = new Intl.NumberFormat(locale, {
|
|
17
|
+
const defaultFormatter = useLazyFormatter(locale, options);
|
|
18
|
+
const nameFormatter = useLazyFormatter(locale, {
|
|
199
19
|
...options,
|
|
200
20
|
currencyDisplay: 'name'
|
|
201
|
-
})
|
|
202
|
-
const
|
|
21
|
+
});
|
|
22
|
+
const narrowSymbolFormatter = useLazyFormatter(locale, {
|
|
203
23
|
...options,
|
|
204
24
|
currencyDisplay: 'narrowSymbol'
|
|
205
|
-
})
|
|
206
|
-
const
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
25
|
+
});
|
|
26
|
+
const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
|
|
27
|
+
...options,
|
|
28
|
+
minimumFractionDigits: 0,
|
|
29
|
+
maximumFractionDigits: 0
|
|
30
|
+
});
|
|
31
|
+
const withoutCurrencyFormatter = useLazyFormatter(locale);
|
|
32
|
+
const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
|
|
33
|
+
minimumFractionDigits: 0,
|
|
34
|
+
maximumFractionDigits: 0
|
|
35
|
+
});
|
|
36
|
+
const isPartCurrency = (part)=>part.type === 'currency';
|
|
37
|
+
// By wrapping these properties in functions, we only
|
|
38
|
+
// create formatters if they are going to be used.
|
|
39
|
+
const lazyFormatters = react.useMemo(()=>({
|
|
40
|
+
currencyCode: ()=>currency,
|
|
41
|
+
localizedString: ()=>defaultFormatter().format(amount),
|
|
42
|
+
parts: ()=>defaultFormatter().formatToParts(amount),
|
|
43
|
+
withoutTrailingZeros: ()=>amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
|
|
44
|
+
withoutTrailingZerosAndCurrency: ()=>amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
|
|
45
|
+
currencyName: ()=>nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
|
|
46
|
+
currencySymbol: ()=>defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
|
|
47
|
+
currencyNarrowSymbol: ()=>narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? '',
|
|
48
|
+
amount: ()=>defaultFormatter().formatToParts(amount).filter((part)=>[
|
|
49
|
+
'decimal',
|
|
50
|
+
'fraction',
|
|
51
|
+
'group',
|
|
52
|
+
'integer',
|
|
53
|
+
'literal'
|
|
54
|
+
].includes(part.type)).map((part)=>part.value).join('')
|
|
221
55
|
}), [
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
56
|
+
currency,
|
|
57
|
+
amount,
|
|
58
|
+
nameFormatter,
|
|
59
|
+
defaultFormatter,
|
|
60
|
+
narrowSymbolFormatter,
|
|
61
|
+
withoutCurrencyFormatter,
|
|
62
|
+
withoutTrailingZerosFormatter,
|
|
63
|
+
withoutTrailingZerosOrCurrencyFormatter
|
|
64
|
+
]);
|
|
65
|
+
// Call functions automatically when the properties are accessed
|
|
66
|
+
// to keep these functions as an implementation detail.
|
|
67
|
+
return react.useMemo(()=>new Proxy(lazyFormatters, {
|
|
68
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
|
|
69
|
+
get: (target, key)=>Reflect.get(target, key)?.call(null)
|
|
70
|
+
}), [
|
|
71
|
+
lazyFormatters
|
|
227
72
|
]);
|
|
228
|
-
return moneyValue;
|
|
229
73
|
};
|
|
74
|
+
function useLazyFormatter(locale, options) {
|
|
75
|
+
return react.useMemo(()=>{
|
|
76
|
+
let memoized;
|
|
77
|
+
return ()=>memoized ??= new Intl.NumberFormat(locale, options);
|
|
78
|
+
}, [
|
|
79
|
+
locale,
|
|
80
|
+
options
|
|
81
|
+
]);
|
|
82
|
+
}
|
|
230
83
|
|
|
231
84
|
exports.default = useMoney;
|
package/dist/cjs/index.js
CHANGED
|
@@ -67,12 +67,12 @@ var useCollectionsQuery = require('./hooks/shop/use-collections-query.js');
|
|
|
67
67
|
var useProductQuery = require('./hooks/shop/use-product-query.js');
|
|
68
68
|
var useProductsQuery = require('./hooks/shop/use-products-query.js');
|
|
69
69
|
var useCurrentDevice = require('./hooks/use-current-device.js');
|
|
70
|
+
var useFormatMoney = require('./hooks/useFormatMoney.js');
|
|
70
71
|
var useLazyVideo = require('./hooks/use-lazy-video.js');
|
|
71
72
|
var useCartId = require('./hooks/useCartId.js');
|
|
72
73
|
var useCartLine = require('./hooks/useCartLine.js');
|
|
73
74
|
var useCartUI = require('./hooks/useCartUI.js');
|
|
74
75
|
var useCollection = require('./hooks/useCollection.js');
|
|
75
|
-
var useFormatMoney = require('./hooks/useFormatMoney.js');
|
|
76
76
|
var react = require('react');
|
|
77
77
|
var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect.js');
|
|
78
78
|
var useLoadScript = require('./hooks/useLoadScript.js');
|
|
@@ -191,6 +191,7 @@ exports.fpixel = fpixel;
|
|
|
191
191
|
exports.gtag = gtag;
|
|
192
192
|
exports.tiktokpixel = tiktokpixel;
|
|
193
193
|
exports.RenderIf = render.RenderIf;
|
|
194
|
+
exports.dataStringify = render.dataStringify;
|
|
194
195
|
exports.props = render.props;
|
|
195
196
|
exports.styles = render.styles;
|
|
196
197
|
exports.template = render.template;
|
|
@@ -226,6 +227,7 @@ exports.useIsStorefrontProduct = shop.useIsStorefrontProduct;
|
|
|
226
227
|
exports.useLocale = shop.useLocale;
|
|
227
228
|
exports.useMatchMutate = shop.useMatchMutate;
|
|
228
229
|
exports.useMobileOnly = shop.useMobileOnly;
|
|
230
|
+
exports.useMoneyFormat = shop.useMoneyFormat;
|
|
229
231
|
exports.usePageType = shop.usePageType;
|
|
230
232
|
exports.usePluginEnable = shop.usePluginEnable;
|
|
231
233
|
exports.useStoreFront = shop.useStoreFront;
|
|
@@ -235,12 +237,12 @@ exports.useCollectionsQuery = useCollectionsQuery.useCollectionsQuery;
|
|
|
235
237
|
exports.useProductQuery = useProductQuery.useProductQuery;
|
|
236
238
|
exports.useProductsQuery = useProductsQuery.useProductsQuery;
|
|
237
239
|
exports.useCurrentDevice = useCurrentDevice.useCurrentDevice;
|
|
240
|
+
exports.useFormatMoney = useFormatMoney.useFormatMoney;
|
|
238
241
|
exports.useLazyVideo = useLazyVideo.useLazyVideo;
|
|
239
242
|
exports.useCartId = useCartId.default;
|
|
240
243
|
exports.useCartLine = useCartLine.default;
|
|
241
244
|
exports.useCartUI = useCartUI.default;
|
|
242
245
|
exports.useCollection = useCollection.useCollection;
|
|
243
|
-
exports.useFormatMoney = useFormatMoney.default;
|
|
244
246
|
Object.defineProperty(exports, 'useId', {
|
|
245
247
|
enumerable: true,
|
|
246
248
|
get: function () { return react.useId; }
|
|
@@ -37,6 +37,9 @@ const styles = (strings, ...keys)=>{
|
|
|
37
37
|
}
|
|
38
38
|
return styleArr.join(';');
|
|
39
39
|
};
|
|
40
|
+
const dataStringify = (obj)=>{
|
|
41
|
+
return JSON.stringify(obj).replace(/\\"/g, '"');
|
|
42
|
+
};
|
|
40
43
|
const template = (strings, ...keys)=>{
|
|
41
44
|
let str = '';
|
|
42
45
|
strings.forEach((item, index)=>{
|
|
@@ -56,4 +59,4 @@ const template = (strings, ...keys)=>{
|
|
|
56
59
|
return str;
|
|
57
60
|
};
|
|
58
61
|
|
|
59
|
-
export { RenderIf, props, styles, template };
|
|
62
|
+
export { RenderIf, dataStringify, props, styles, template };
|
package/dist/esm/hooks/shop.js
CHANGED
|
@@ -24,6 +24,17 @@ const useCurrency = ()=>{
|
|
|
24
24
|
changeCurrency
|
|
25
25
|
]);
|
|
26
26
|
};
|
|
27
|
+
const useMoneyFormat = ()=>{
|
|
28
|
+
const moneyFormat = useShopStore((state)=>state.moneyFormat);
|
|
29
|
+
const moneyWithCurrencyFormat = useShopStore((state)=>state.moneyWithCurrencyFormat);
|
|
30
|
+
return useMemo(()=>({
|
|
31
|
+
moneyFormat,
|
|
32
|
+
moneyWithCurrencyFormat
|
|
33
|
+
}), [
|
|
34
|
+
moneyFormat,
|
|
35
|
+
moneyWithCurrencyFormat
|
|
36
|
+
]);
|
|
37
|
+
};
|
|
27
38
|
const useSwatches = ()=>{
|
|
28
39
|
const swatches = useShopStore((state)=>state.swatches);
|
|
29
40
|
const changeSwatches = useShopStore((state)=>state.changeSwatches);
|
|
@@ -97,4 +108,4 @@ function useCheckoutUrl(url) {
|
|
|
97
108
|
return storefrontToken ? `${url}?access_token=${storefrontToken}` : url;
|
|
98
109
|
}
|
|
99
110
|
|
|
100
|
-
export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches };
|
|
111
|
+
export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches };
|
|
@@ -1,17 +1,59 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useLocale } from './shop.js';
|
|
1
|
+
import { useMoneyFormat } from './shop.js';
|
|
3
2
|
|
|
4
|
-
const useFormatMoney = ()=>{
|
|
5
|
-
const {
|
|
6
|
-
const formatMoney =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
const useFormatMoney = (amount, withCurrency)=>{
|
|
4
|
+
const { moneyFormat , moneyWithCurrencyFormat } = useMoneyFormat();
|
|
5
|
+
const formatMoney = function(cents, format) {
|
|
6
|
+
let value = '';
|
|
7
|
+
const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
|
|
8
|
+
const formatString = format || '${{amount}}';
|
|
9
|
+
if (typeof cents == 'string') {
|
|
10
|
+
cents = cents.replace('.', '');
|
|
11
|
+
}
|
|
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 = (number / 100.0).toFixed(Number(precision) + 1).slice(0, -1);
|
|
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
|
+
}
|
|
54
|
+
return formatString.replace(placeholderRegex, value);
|
|
14
55
|
};
|
|
56
|
+
return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
|
|
15
57
|
};
|
|
16
58
|
|
|
17
|
-
export { useFormatMoney
|
|
59
|
+
export { useFormatMoney };
|
|
@@ -1,182 +1,7 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
2
|
import { useLocale, useCurrency } from './shop.js';
|
|
3
3
|
|
|
4
|
-
const
|
|
5
|
-
AED: 'د.إ',
|
|
6
|
-
AFN: '؋',
|
|
7
|
-
ALL: 'L',
|
|
8
|
-
AMD: 'դր.',
|
|
9
|
-
ANG: 'ƒ',
|
|
10
|
-
AOA: 'Kz',
|
|
11
|
-
ARS: '$',
|
|
12
|
-
AUD: '$',
|
|
13
|
-
AWG: 'ƒ',
|
|
14
|
-
AZN: '₼',
|
|
15
|
-
BAM: 'КМ',
|
|
16
|
-
BBD: '$',
|
|
17
|
-
BDT: '৳',
|
|
18
|
-
BGN: 'лв.',
|
|
19
|
-
BHD: 'ب.د',
|
|
20
|
-
BIF: 'Fr',
|
|
21
|
-
BMD: '$',
|
|
22
|
-
BND: '$',
|
|
23
|
-
BOB: 'Bs.',
|
|
24
|
-
BRL: 'R$',
|
|
25
|
-
BSD: '$',
|
|
26
|
-
BTN: 'Nu.',
|
|
27
|
-
BWP: 'P',
|
|
28
|
-
BYN: 'Br',
|
|
29
|
-
BYR: 'Br',
|
|
30
|
-
BZD: '$',
|
|
31
|
-
CAD: '$',
|
|
32
|
-
CDF: 'Fr',
|
|
33
|
-
CHF: 'CHF',
|
|
34
|
-
CLF: 'UF',
|
|
35
|
-
CLP: '$',
|
|
36
|
-
CNY: '¥',
|
|
37
|
-
COP: '$',
|
|
38
|
-
CRC: '₡',
|
|
39
|
-
CUC: '$',
|
|
40
|
-
CUP: '$',
|
|
41
|
-
CVE: '$',
|
|
42
|
-
CZK: 'Kč',
|
|
43
|
-
DJF: 'Fdj',
|
|
44
|
-
DKK: 'kr.',
|
|
45
|
-
DOP: '$',
|
|
46
|
-
DZD: 'د.ج',
|
|
47
|
-
EGP: 'ج.م',
|
|
48
|
-
ERN: 'Nfk',
|
|
49
|
-
ETB: 'Br',
|
|
50
|
-
EUR: '€',
|
|
51
|
-
FJD: '$',
|
|
52
|
-
FKP: '£',
|
|
53
|
-
GBP: '£',
|
|
54
|
-
GEL: 'ლ',
|
|
55
|
-
GHS: '₵',
|
|
56
|
-
GIP: '£',
|
|
57
|
-
GMD: 'D',
|
|
58
|
-
GNF: 'Fr',
|
|
59
|
-
GTQ: 'Q',
|
|
60
|
-
GYD: '$',
|
|
61
|
-
HKD: '$',
|
|
62
|
-
HNL: 'L',
|
|
63
|
-
HRK: 'kn',
|
|
64
|
-
HTG: 'G',
|
|
65
|
-
HUF: 'Ft',
|
|
66
|
-
IDR: 'Rp',
|
|
67
|
-
ILS: '₪',
|
|
68
|
-
INR: '₹',
|
|
69
|
-
IQD: 'ع.د',
|
|
70
|
-
IRR: '﷼',
|
|
71
|
-
ISK: 'kr',
|
|
72
|
-
JMD: '$',
|
|
73
|
-
JOD: 'د.ا',
|
|
74
|
-
JPY: '¥',
|
|
75
|
-
KES: 'KSh',
|
|
76
|
-
KGS: 'som',
|
|
77
|
-
KHR: '៛',
|
|
78
|
-
KMF: 'Fr',
|
|
79
|
-
KPW: '₩',
|
|
80
|
-
KRW: '₩',
|
|
81
|
-
KWD: 'د.ك',
|
|
82
|
-
KYD: '$',
|
|
83
|
-
KZT: '〒',
|
|
84
|
-
LAK: '₭',
|
|
85
|
-
LBP: 'ل.ل',
|
|
86
|
-
LKR: '₨',
|
|
87
|
-
LRD: '$',
|
|
88
|
-
LSL: 'L',
|
|
89
|
-
LTL: 'Lt',
|
|
90
|
-
LVL: 'Ls',
|
|
91
|
-
LYD: 'ل.د',
|
|
92
|
-
MAD: 'د.م.',
|
|
93
|
-
MDL: 'L',
|
|
94
|
-
MGA: 'Ar',
|
|
95
|
-
MKD: 'ден',
|
|
96
|
-
MMK: 'K',
|
|
97
|
-
MNT: '₮',
|
|
98
|
-
MOP: 'P',
|
|
99
|
-
MRU: 'UM',
|
|
100
|
-
MUR: '₨',
|
|
101
|
-
MVR: 'MVR',
|
|
102
|
-
MWK: 'MK',
|
|
103
|
-
MXN: '$',
|
|
104
|
-
MYR: 'RM',
|
|
105
|
-
MZN: 'MTn',
|
|
106
|
-
NAD: '$',
|
|
107
|
-
NGN: '₦',
|
|
108
|
-
NIO: 'C$',
|
|
109
|
-
NOK: 'kr',
|
|
110
|
-
NPR: '₨',
|
|
111
|
-
NZD: '$',
|
|
112
|
-
OMR: 'ر.ع.',
|
|
113
|
-
PAB: 'B/.',
|
|
114
|
-
PEN: 'S/.',
|
|
115
|
-
PGK: 'K',
|
|
116
|
-
PHP: '₱',
|
|
117
|
-
PKR: '₨',
|
|
118
|
-
PLN: 'zł',
|
|
119
|
-
PYG: '₲',
|
|
120
|
-
QAR: 'ر.ق',
|
|
121
|
-
RON: 'Lei',
|
|
122
|
-
RSD: 'РСД',
|
|
123
|
-
RUB: '₽',
|
|
124
|
-
RWF: 'FRw',
|
|
125
|
-
SAR: 'ر.س',
|
|
126
|
-
SBD: '$',
|
|
127
|
-
SCR: '₨',
|
|
128
|
-
SDG: '£',
|
|
129
|
-
SEK: 'kr',
|
|
130
|
-
SGD: '$',
|
|
131
|
-
SHP: '£',
|
|
132
|
-
SKK: 'Sk',
|
|
133
|
-
SLL: 'Le',
|
|
134
|
-
SOS: 'Sh',
|
|
135
|
-
SRD: '$',
|
|
136
|
-
SSP: '£',
|
|
137
|
-
STN: 'Db',
|
|
138
|
-
SVC: '₡',
|
|
139
|
-
SYP: '£S',
|
|
140
|
-
SZL: 'E',
|
|
141
|
-
THB: '฿',
|
|
142
|
-
TJS: 'ЅМ',
|
|
143
|
-
TMT: 'T',
|
|
144
|
-
TND: 'د.ت',
|
|
145
|
-
TOP: 'T$',
|
|
146
|
-
TRY: '₺',
|
|
147
|
-
TTD: '$',
|
|
148
|
-
TWD: '$',
|
|
149
|
-
TZS: 'Sh',
|
|
150
|
-
UAH: '₴',
|
|
151
|
-
UGX: 'USh',
|
|
152
|
-
USD: '$',
|
|
153
|
-
UYU: '$',
|
|
154
|
-
UZS: '',
|
|
155
|
-
VED: 'Bs.D.',
|
|
156
|
-
VES: 'Bs.S.',
|
|
157
|
-
VND: '₫',
|
|
158
|
-
VUV: 'Vt',
|
|
159
|
-
WST: 'T',
|
|
160
|
-
XAF: 'Fr',
|
|
161
|
-
XAG: 'oz t',
|
|
162
|
-
XAU: 'oz t',
|
|
163
|
-
XBA: '',
|
|
164
|
-
XBB: '',
|
|
165
|
-
XBC: '',
|
|
166
|
-
XBD: '',
|
|
167
|
-
XCD: '$',
|
|
168
|
-
XDR: 'SDR',
|
|
169
|
-
XOF: 'Fr',
|
|
170
|
-
XPD: 'oz t',
|
|
171
|
-
XPF: 'Fr',
|
|
172
|
-
XPT: 'oz t',
|
|
173
|
-
xts: '',
|
|
174
|
-
YER: '﷼',
|
|
175
|
-
ZAR: 'R',
|
|
176
|
-
ZMK: 'ZK',
|
|
177
|
-
ZMW: 'ZK'
|
|
178
|
-
};
|
|
179
|
-
const useMoney = (money)=>{
|
|
4
|
+
const useMoney = (amount)=>{
|
|
180
5
|
const { locale } = useLocale();
|
|
181
6
|
const { currency } = useCurrency();
|
|
182
7
|
const options = useMemo(()=>({
|
|
@@ -185,43 +10,71 @@ const useMoney = (money)=>{
|
|
|
185
10
|
}), [
|
|
186
11
|
currency
|
|
187
12
|
]);
|
|
188
|
-
const
|
|
189
|
-
|
|
190
|
-
options,
|
|
191
|
-
money
|
|
192
|
-
]);
|
|
193
|
-
const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
|
|
194
|
-
const nameParts = new Intl.NumberFormat(locale, {
|
|
13
|
+
const defaultFormatter = useLazyFormatter(locale, options);
|
|
14
|
+
const nameFormatter = useLazyFormatter(locale, {
|
|
195
15
|
...options,
|
|
196
16
|
currencyDisplay: 'name'
|
|
197
|
-
})
|
|
198
|
-
const
|
|
17
|
+
});
|
|
18
|
+
const narrowSymbolFormatter = useLazyFormatter(locale, {
|
|
199
19
|
...options,
|
|
200
20
|
currencyDisplay: 'narrowSymbol'
|
|
201
|
-
})
|
|
202
|
-
const
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
21
|
+
});
|
|
22
|
+
const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
|
|
23
|
+
...options,
|
|
24
|
+
minimumFractionDigits: 0,
|
|
25
|
+
maximumFractionDigits: 0
|
|
26
|
+
});
|
|
27
|
+
const withoutCurrencyFormatter = useLazyFormatter(locale);
|
|
28
|
+
const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
|
|
29
|
+
minimumFractionDigits: 0,
|
|
30
|
+
maximumFractionDigits: 0
|
|
31
|
+
});
|
|
32
|
+
const isPartCurrency = (part)=>part.type === 'currency';
|
|
33
|
+
// By wrapping these properties in functions, we only
|
|
34
|
+
// create formatters if they are going to be used.
|
|
35
|
+
const lazyFormatters = useMemo(()=>({
|
|
36
|
+
currencyCode: ()=>currency,
|
|
37
|
+
localizedString: ()=>defaultFormatter().format(amount),
|
|
38
|
+
parts: ()=>defaultFormatter().formatToParts(amount),
|
|
39
|
+
withoutTrailingZeros: ()=>amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
|
|
40
|
+
withoutTrailingZerosAndCurrency: ()=>amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
|
|
41
|
+
currencyName: ()=>nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
|
|
42
|
+
currencySymbol: ()=>defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
|
|
43
|
+
currencyNarrowSymbol: ()=>narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? '',
|
|
44
|
+
amount: ()=>defaultFormatter().formatToParts(amount).filter((part)=>[
|
|
45
|
+
'decimal',
|
|
46
|
+
'fraction',
|
|
47
|
+
'group',
|
|
48
|
+
'integer',
|
|
49
|
+
'literal'
|
|
50
|
+
].includes(part.type)).map((part)=>part.value).join('')
|
|
217
51
|
}), [
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
52
|
+
currency,
|
|
53
|
+
amount,
|
|
54
|
+
nameFormatter,
|
|
55
|
+
defaultFormatter,
|
|
56
|
+
narrowSymbolFormatter,
|
|
57
|
+
withoutCurrencyFormatter,
|
|
58
|
+
withoutTrailingZerosFormatter,
|
|
59
|
+
withoutTrailingZerosOrCurrencyFormatter
|
|
60
|
+
]);
|
|
61
|
+
// Call functions automatically when the properties are accessed
|
|
62
|
+
// to keep these functions as an implementation detail.
|
|
63
|
+
return useMemo(()=>new Proxy(lazyFormatters, {
|
|
64
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
|
|
65
|
+
get: (target, key)=>Reflect.get(target, key)?.call(null)
|
|
66
|
+
}), [
|
|
67
|
+
lazyFormatters
|
|
223
68
|
]);
|
|
224
|
-
return moneyValue;
|
|
225
69
|
};
|
|
70
|
+
function useLazyFormatter(locale, options) {
|
|
71
|
+
return useMemo(()=>{
|
|
72
|
+
let memoized;
|
|
73
|
+
return ()=>memoized ??= new Intl.NumberFormat(locale, options);
|
|
74
|
+
}, [
|
|
75
|
+
locale,
|
|
76
|
+
options
|
|
77
|
+
]);
|
|
78
|
+
}
|
|
226
79
|
|
|
227
80
|
export { useMoney as default };
|
package/dist/esm/index.js
CHANGED
|
@@ -48,7 +48,7 @@ import * as gtag from './helpers/tracking/gtag.js';
|
|
|
48
48
|
export { gtag };
|
|
49
49
|
import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
|
|
50
50
|
export { tiktokpixel };
|
|
51
|
-
export { RenderIf, props, styles, template } from './helpers/render.js';
|
|
51
|
+
export { RenderIf, dataStringify, props, styles, template } from './helpers/render.js';
|
|
52
52
|
export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
|
|
53
53
|
export { composeSize, composeSizeCss, genSizeClass } from './helpers/size.js';
|
|
54
54
|
export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
|
|
@@ -62,18 +62,18 @@ export { useCartNoteUpdate } from './hooks/cart/use-cart-note-update.js';
|
|
|
62
62
|
export { useCreateCart } from './hooks/cart/use-create-cart.js';
|
|
63
63
|
export { useRemoveCartItem } from './hooks/cart/use-remove-cart-item.js';
|
|
64
64
|
export { useUpdateCartItem } from './hooks/cart/use-update-cart-item.js';
|
|
65
|
-
export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
|
|
65
|
+
export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
|
|
66
66
|
export { useCollectionQuery } from './hooks/shop/use-collection-query.js';
|
|
67
67
|
export { useCollectionsQuery } from './hooks/shop/use-collections-query.js';
|
|
68
68
|
export { useProductQuery } from './hooks/shop/use-product-query.js';
|
|
69
69
|
export { useProductsQuery } from './hooks/shop/use-products-query.js';
|
|
70
70
|
export { useCurrentDevice } from './hooks/use-current-device.js';
|
|
71
|
+
export { useFormatMoney } from './hooks/useFormatMoney.js';
|
|
71
72
|
export { useLazyVideo } from './hooks/use-lazy-video.js';
|
|
72
73
|
export { default as useCartId } from './hooks/useCartId.js';
|
|
73
74
|
export { default as useCartLine } from './hooks/useCartLine.js';
|
|
74
75
|
export { default as useCartUI } from './hooks/useCartUI.js';
|
|
75
76
|
export { useCollection } from './hooks/useCollection.js';
|
|
76
|
-
export { default as useFormatMoney } from './hooks/useFormatMoney.js';
|
|
77
77
|
export { useId } from 'react';
|
|
78
78
|
export { default as useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect.js';
|
|
79
79
|
export { default as useLoadScript } from './hooks/useLoadScript.js';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -7320,6 +7320,8 @@ type ShopContextProps = {
|
|
|
7320
7320
|
locale?: string;
|
|
7321
7321
|
pageType?: PublishedThemePageType;
|
|
7322
7322
|
currency?: string;
|
|
7323
|
+
moneyFormat?: string;
|
|
7324
|
+
moneyWithCurrencyFormat?: string;
|
|
7323
7325
|
plugins?: string[];
|
|
7324
7326
|
storefrontUrl?: string;
|
|
7325
7327
|
storefrontToken?: string;
|
|
@@ -7768,6 +7770,7 @@ type CallbackCondition = () => string;
|
|
|
7768
7770
|
declare const RenderIf: (c: boolean | null | undefined, t: string | CallbackCondition, f?: string | CallbackCondition) => string;
|
|
7769
7771
|
declare const props: (strings: any, ...keys: any[]) => string;
|
|
7770
7772
|
declare const styles: (strings: any, ...keys: any[]) => string;
|
|
7773
|
+
declare const dataStringify: (obj: object) => string;
|
|
7771
7774
|
declare const template: (strings: any, ...keys: any[]) => string;
|
|
7772
7775
|
|
|
7773
7776
|
declare const isLocalEnv: boolean;
|
|
@@ -7875,6 +7878,10 @@ declare const useCurrency: () => {
|
|
|
7875
7878
|
currency: string | undefined;
|
|
7876
7879
|
changeCurrency: (currency: string) => void;
|
|
7877
7880
|
};
|
|
7881
|
+
declare const useMoneyFormat: () => {
|
|
7882
|
+
moneyFormat: string | undefined;
|
|
7883
|
+
moneyWithCurrencyFormat: string | undefined;
|
|
7884
|
+
};
|
|
7878
7885
|
declare const useSwatches: () => {
|
|
7879
7886
|
swatches: GlobalSwatchesData[] | undefined;
|
|
7880
7887
|
changeSwatches: (swatches: GlobalSwatchesData[]) => void;
|
|
@@ -7911,6 +7918,8 @@ declare const useProductsQuery: (ids?: string[], options?: SWRConfiguration<Prod
|
|
|
7911
7918
|
|
|
7912
7919
|
declare const useCurrentDevice: () => NameDevices;
|
|
7913
7920
|
|
|
7921
|
+
declare const useFormatMoney: (amount: number, withCurrency: boolean) => string;
|
|
7922
|
+
|
|
7914
7923
|
declare const useLazyVideo: () => void;
|
|
7915
7924
|
|
|
7916
7925
|
declare const useCartId: () => {
|
|
@@ -7929,10 +7938,6 @@ declare function useCartUI(): {
|
|
|
7929
7938
|
|
|
7930
7939
|
declare const useCollection: () => CollectionSelectFragment | undefined;
|
|
7931
7940
|
|
|
7932
|
-
declare const useFormatMoney: () => {
|
|
7933
|
-
formatMoney: (value: number, options?: Intl.NumberFormatOptions & Required<Pick<Intl.NumberFormatOptions, 'currency'>>) => string;
|
|
7934
|
-
};
|
|
7935
|
-
|
|
7936
7941
|
declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
|
|
7937
7942
|
|
|
7938
7943
|
type LoadScriptParams = Parameters<typeof loadScript>;
|
|
@@ -7942,14 +7947,50 @@ type ScriptState = 'loading' | 'done' | 'error';
|
|
|
7942
7947
|
*/
|
|
7943
7948
|
declare function useLoadScript(url: LoadScriptParams[0], options?: LoadScriptParams[1]): ScriptState;
|
|
7944
7949
|
|
|
7945
|
-
|
|
7946
|
-
|
|
7947
|
-
|
|
7948
|
-
|
|
7950
|
+
type UseMoneyValue = {
|
|
7951
|
+
/**
|
|
7952
|
+
* The currency code from the `MoneyV2` object.
|
|
7953
|
+
*/
|
|
7954
|
+
currencyCode: string;
|
|
7955
|
+
/**
|
|
7956
|
+
* The name for the currency code, returned by `Intl.NumberFormat`.
|
|
7957
|
+
*/
|
|
7958
|
+
currencyName?: string;
|
|
7959
|
+
/**
|
|
7960
|
+
* The currency symbol returned by `Intl.NumberFormat`.
|
|
7961
|
+
*/
|
|
7962
|
+
currencySymbol?: string;
|
|
7963
|
+
/**
|
|
7964
|
+
* The currency narrow symbol returned by `Intl.NumberFormat`.
|
|
7965
|
+
*/
|
|
7966
|
+
currencyNarrowSymbol?: string;
|
|
7967
|
+
/**
|
|
7968
|
+
* The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.
|
|
7969
|
+
*/
|
|
7970
|
+
amount: string;
|
|
7971
|
+
/**
|
|
7972
|
+
* All parts returned by `Intl.NumberFormat.formatToParts`.
|
|
7973
|
+
*/
|
|
7949
7974
|
parts: Intl.NumberFormatPart[];
|
|
7975
|
+
/**
|
|
7976
|
+
* A string returned by `new Intl.NumberFormat` for the amount and currency code,
|
|
7977
|
+
* using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).
|
|
7978
|
+
*/
|
|
7950
7979
|
localizedString: string;
|
|
7951
|
-
|
|
7952
|
-
|
|
7980
|
+
/**
|
|
7981
|
+
* A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.
|
|
7982
|
+
* For example, `$640.00` turns into `$640`.
|
|
7983
|
+
* `$640.42` remains `$640.42`.
|
|
7984
|
+
*/
|
|
7985
|
+
withoutTrailingZeros: string;
|
|
7986
|
+
/**
|
|
7987
|
+
* A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.
|
|
7988
|
+
* For example, `$640.00` turns into `640`.
|
|
7989
|
+
* `$640.42` turns into `640.42`.
|
|
7990
|
+
*/
|
|
7991
|
+
withoutTrailingZerosAndCurrency: string;
|
|
7992
|
+
};
|
|
7993
|
+
declare const useMoney: (amount: number) => UseMoneyValue;
|
|
7953
7994
|
|
|
7954
7995
|
declare const usePrevious: <T>(value: T) => T | undefined;
|
|
7955
7996
|
|
|
@@ -8029,4 +8070,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
|
|
|
8029
8070
|
|
|
8030
8071
|
declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
|
|
8031
8072
|
|
|
8032
|
-
export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, WiserWidgetType, baseAssetURL, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
|
|
8073
|
+
export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, WiserWidgetType, baseAssetURL, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
|