@payloadcms/storage-r2 0.0.1-beta.0 → 3.58.0-internal.8775d75
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/handleDelete.d.ts +8 -0
- package/dist/handleDelete.d.ts.map +1 -0
- package/dist/handleDelete.js +8 -0
- package/dist/handleDelete.js.map +1 -0
- package/dist/handleUpload.d.ts +11 -0
- package/dist/handleUpload.d.ts.map +1 -0
- package/dist/handleUpload.js +13 -0
- package/dist/handleUpload.js.map +1 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +59 -0
- package/dist/index.js.map +1 -0
- package/dist/staticHandler.d.ts +11 -0
- package/dist/staticHandler.d.ts.map +1 -0
- package/dist/staticHandler.js +29 -0
- package/dist/staticHandler.js.map +1 -0
- package/dist/types.d.ts +16 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +3 -0
- package/dist/types.js.map +1 -0
- package/package.json +57 -1
- package/.prettierignore +0 -12
- package/.swcrc +0 -24
- package/README.md +0 -3
- package/eslint.config.js +0 -18
- package/src/addresses/addressesCollection.ts +0 -76
- package/src/addresses/defaultAddressFields.ts +0 -83
- package/src/addresses/defaultCountries.ts +0 -50
- package/src/carts/beforeChange.ts +0 -51
- package/src/carts/cartsCollection.ts +0 -146
- package/src/currencies/index.ts +0 -29
- package/src/endpoints/confirmOrder.ts +0 -312
- package/src/endpoints/initiatePayment.ts +0 -322
- package/src/exports/addresses.ts +0 -2
- package/src/exports/currencies.ts +0 -1
- package/src/exports/fields.ts +0 -5
- package/src/exports/orders.ts +0 -1
- package/src/exports/payments/stripe.ts +0 -1
- package/src/exports/plugin.ts +0 -1
- package/src/exports/products.ts +0 -1
- package/src/exports/react.ts +0 -8
- package/src/exports/transactions.ts +0 -1
- package/src/exports/translations.ts +0 -1
- package/src/exports/types.ts +0 -7
- package/src/exports/ui.ts +0 -3
- package/src/exports/variants.ts +0 -5
- package/src/fields/amountField.ts +0 -43
- package/src/fields/cartItemsField.ts +0 -84
- package/src/fields/currencyField.ts +0 -39
- package/src/fields/inventoryField.ts +0 -22
- package/src/fields/pricesField.ts +0 -65
- package/src/fields/statusField.ts +0 -57
- package/src/fields/variantsFields.ts +0 -56
- package/src/index.ts +0 -275
- package/src/orders/ordersCollection.ts +0 -157
- package/src/payments/adapters/stripe/confirmOrder.ts +0 -123
- package/src/payments/adapters/stripe/endpoints/webhooks.ts +0 -69
- package/src/payments/adapters/stripe/index.ts +0 -135
- package/src/payments/adapters/stripe/initiatePayment.ts +0 -131
- package/src/products/productsCollection.ts +0 -78
- package/src/react/provider/index.tsx +0 -893
- package/src/react/provider/types.ts +0 -184
- package/src/react/provider/utilities.ts +0 -22
- package/src/transactions/transactionsCollection.ts +0 -166
- package/src/translations/en.ts +0 -64
- package/src/translations/index.ts +0 -11
- package/src/translations/translation-schema.json +0 -35
- package/src/types.ts +0 -403
- package/src/ui/PriceInput/FormattedInput.tsx +0 -134
- package/src/ui/PriceInput/index.scss +0 -28
- package/src/ui/PriceInput/index.tsx +0 -43
- package/src/ui/PriceInput/utilities.ts +0 -46
- package/src/ui/PriceRowLabel/index.css +0 -13
- package/src/ui/PriceRowLabel/index.tsx +0 -56
- package/src/ui/VariantOptionsSelector/ErrorBox.tsx +0 -27
- package/src/ui/VariantOptionsSelector/OptionsSelect.tsx +0 -78
- package/src/ui/VariantOptionsSelector/index.css +0 -37
- package/src/ui/VariantOptionsSelector/index.tsx +0 -83
- package/src/utilities/defaultProductsValidation.ts +0 -42
- package/src/utilities/errorCodes.ts +0 -14
- package/src/utilities/getCollectionSlugMap.ts +0 -84
- package/src/utilities/sanitizePluginConfig.ts +0 -80
- package/src/variants/variantOptionsCollection.ts +0 -59
- package/src/variants/variantTypesCollection.ts +0 -55
- package/src/variants/variantsCollection/hooks/beforeChange.ts +0 -47
- package/src/variants/variantsCollection/hooks/validateOptions.ts +0 -72
- package/src/variants/variantsCollection/index.ts +0 -119
- package/tsconfig.json +0 -7
- package/tsconfig.tsbuildinfo +0 -1
package/src/types.ts
DELETED
|
@@ -1,403 +0,0 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
CollectionConfig,
|
|
3
|
-
DefaultDocumentIDType,
|
|
4
|
-
Endpoint,
|
|
5
|
-
Field,
|
|
6
|
-
GroupField,
|
|
7
|
-
PayloadRequest,
|
|
8
|
-
SelectType,
|
|
9
|
-
TypedCollection,
|
|
10
|
-
Where,
|
|
11
|
-
} from 'payload'
|
|
12
|
-
|
|
13
|
-
export type FieldsOverride = (args: { defaultFields: Field[] }) => Field[]
|
|
14
|
-
export type CollectionOverride = { fields?: FieldsOverride } & Partial<
|
|
15
|
-
Omit<CollectionConfig, 'fields'>
|
|
16
|
-
>
|
|
17
|
-
|
|
18
|
-
export type CartItem = {
|
|
19
|
-
id: DefaultDocumentIDType
|
|
20
|
-
product: DefaultDocumentIDType | TypedCollection['products']
|
|
21
|
-
quantity: number
|
|
22
|
-
variant?: DefaultDocumentIDType | TypedCollection['variants']
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
type DefaultCartType = {
|
|
26
|
-
currency?: string
|
|
27
|
-
customer?: DefaultDocumentIDType | TypedCollection['customers']
|
|
28
|
-
id: DefaultDocumentIDType
|
|
29
|
-
items: CartItem[]
|
|
30
|
-
subtotal?: number
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export type Cart = DefaultCartType
|
|
34
|
-
|
|
35
|
-
type InitiatePaymentReturnType = {
|
|
36
|
-
[key: string]: any // Allows for additional data to be returned, such as payment method specific data
|
|
37
|
-
message: string
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
type InitiatePayment = (args: {
|
|
41
|
-
/**
|
|
42
|
-
* The slug of the customers collection, defaults to 'users'.
|
|
43
|
-
*/
|
|
44
|
-
customersSlug?: string
|
|
45
|
-
data: {
|
|
46
|
-
/**
|
|
47
|
-
* Billing address for the payment.
|
|
48
|
-
*/
|
|
49
|
-
billingAddress: TypedCollection['addresses']
|
|
50
|
-
/**
|
|
51
|
-
* Cart items.
|
|
52
|
-
*/
|
|
53
|
-
cart: Cart
|
|
54
|
-
/**
|
|
55
|
-
* Currency code to use for the payment.
|
|
56
|
-
*/
|
|
57
|
-
currency: string
|
|
58
|
-
customerEmail: string
|
|
59
|
-
/**
|
|
60
|
-
* Shipping address for the payment.
|
|
61
|
-
*/
|
|
62
|
-
shippingAddress?: TypedCollection['addresses']
|
|
63
|
-
}
|
|
64
|
-
req: PayloadRequest
|
|
65
|
-
/**
|
|
66
|
-
* The slug of the transactions collection, defaults to 'transactions'.
|
|
67
|
-
* For example, this is used to create a record of the payment intent in the transactions collection.
|
|
68
|
-
*/
|
|
69
|
-
transactionsSlug: string
|
|
70
|
-
}) => InitiatePaymentReturnType | Promise<InitiatePaymentReturnType>
|
|
71
|
-
|
|
72
|
-
type ConfirmOrderReturnType = {
|
|
73
|
-
[key: string]: any // Allows for additional data to be returned, such as payment method specific data
|
|
74
|
-
message: string
|
|
75
|
-
order: TypedCollection['orders']
|
|
76
|
-
orderID: DefaultDocumentIDType
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
type ConfirmOrder = (args: {
|
|
80
|
-
/**
|
|
81
|
-
* The slug of the carts collection, defaults to 'carts'.
|
|
82
|
-
* For example, this is used to retrieve the cart for the order.
|
|
83
|
-
*/
|
|
84
|
-
cartsSlug?: string
|
|
85
|
-
/**
|
|
86
|
-
* The slug of the customers collection, defaults to 'users'.
|
|
87
|
-
*/
|
|
88
|
-
customersSlug?: string
|
|
89
|
-
/**
|
|
90
|
-
* Data made available to the payment method when confirming an order. You should get the cart items from the transaction.
|
|
91
|
-
*/
|
|
92
|
-
data: {
|
|
93
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
94
|
-
[key: string]: any // Allows for additional data to be passed through, such as payment method specific data
|
|
95
|
-
customerEmail?: string
|
|
96
|
-
}
|
|
97
|
-
/**
|
|
98
|
-
* The slug of the orders collection, defaults to 'orders'.
|
|
99
|
-
*/
|
|
100
|
-
ordersSlug?: string
|
|
101
|
-
req: PayloadRequest
|
|
102
|
-
/**
|
|
103
|
-
* The slug of the transactions collection, defaults to 'transactions'.
|
|
104
|
-
* For example, this is used to create a record of the payment intent in the transactions collection.
|
|
105
|
-
*/
|
|
106
|
-
transactionsSlug?: string
|
|
107
|
-
}) => ConfirmOrderReturnType | Promise<ConfirmOrderReturnType>
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* The full payment adapter config expected as part of the config for the Ecommerce plugin.
|
|
111
|
-
*
|
|
112
|
-
* You can insert this type directly or return it from a function constructing it.
|
|
113
|
-
*/
|
|
114
|
-
export type PaymentAdapter = {
|
|
115
|
-
confirmOrder: ConfirmOrder
|
|
116
|
-
/**
|
|
117
|
-
* An array of endpoints to be bootstrapped to Payload's API in order to support the payment method. All API paths are relative to `/api/payments/{provider_name}`.
|
|
118
|
-
*
|
|
119
|
-
* So for example, path `/webhooks` in the Stripe adapter becomes `/api/payments/stripe/webhooks`.
|
|
120
|
-
*
|
|
121
|
-
* @example '/webhooks'
|
|
122
|
-
*/
|
|
123
|
-
endpoints?: Endpoint[]
|
|
124
|
-
/**
|
|
125
|
-
* A group configuration to be used in the admin interface to display the payment method.
|
|
126
|
-
*
|
|
127
|
-
* @example
|
|
128
|
-
*
|
|
129
|
-
* ```ts
|
|
130
|
-
* const groupField: GroupField = {
|
|
131
|
-
name: 'stripe',
|
|
132
|
-
type: 'group',
|
|
133
|
-
admin: {
|
|
134
|
-
condition: (data) => data?.paymentMethod === 'stripe',
|
|
135
|
-
},
|
|
136
|
-
fields: [
|
|
137
|
-
{
|
|
138
|
-
name: 'stripeCustomerID',
|
|
139
|
-
type: 'text',
|
|
140
|
-
label: 'Stripe Customer ID',
|
|
141
|
-
required: true,
|
|
142
|
-
},
|
|
143
|
-
{
|
|
144
|
-
name: 'stripePaymentIntentID',
|
|
145
|
-
type: 'text',
|
|
146
|
-
label: 'Stripe PaymentIntent ID',
|
|
147
|
-
required: true,
|
|
148
|
-
},
|
|
149
|
-
],
|
|
150
|
-
}
|
|
151
|
-
* ```
|
|
152
|
-
*/
|
|
153
|
-
group: GroupField
|
|
154
|
-
/**
|
|
155
|
-
* Hooks used to manage the lifecycle of the payment method. These are run on transactions at various stages when they update.
|
|
156
|
-
*/
|
|
157
|
-
initiatePayment: InitiatePayment
|
|
158
|
-
/**
|
|
159
|
-
* The label of the payment method
|
|
160
|
-
* @example
|
|
161
|
-
* 'Bank Transfer'
|
|
162
|
-
*/
|
|
163
|
-
label?: string
|
|
164
|
-
/**
|
|
165
|
-
* The name of the payment method
|
|
166
|
-
* @example 'stripe'
|
|
167
|
-
*/
|
|
168
|
-
name: string
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
export type PaymentAdapterClient = {
|
|
172
|
-
confirmOrder: boolean
|
|
173
|
-
initiatePayment: boolean
|
|
174
|
-
} & Pick<PaymentAdapter, 'label' | 'name'>
|
|
175
|
-
|
|
176
|
-
export type Currency = {
|
|
177
|
-
/**
|
|
178
|
-
* The ISO 4217 currency code
|
|
179
|
-
* @example 'usd'
|
|
180
|
-
*/
|
|
181
|
-
code: string
|
|
182
|
-
/**
|
|
183
|
-
* The number of decimal places the currency uses
|
|
184
|
-
* @example 2
|
|
185
|
-
*/
|
|
186
|
-
decimals: number
|
|
187
|
-
/**
|
|
188
|
-
* A user friendly name for the currency.
|
|
189
|
-
*
|
|
190
|
-
* @example 'US Dollar'
|
|
191
|
-
*/
|
|
192
|
-
label: string
|
|
193
|
-
/**
|
|
194
|
-
* The symbol of the currency
|
|
195
|
-
* @example '$'
|
|
196
|
-
*/
|
|
197
|
-
symbol: string
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* Commonly used arguments for a Payment Adapter function, it's use is entirely optional.
|
|
202
|
-
*/
|
|
203
|
-
export type BasePaymentAdapterArgs = {
|
|
204
|
-
/**
|
|
205
|
-
* Overrides the default fields of the collection. Affects the payment fields on collections such as transactions.
|
|
206
|
-
*/
|
|
207
|
-
groupOverrides?: { fields?: FieldsOverride } & Partial<Omit<GroupField, 'fields'>>
|
|
208
|
-
/**
|
|
209
|
-
* The visually readable label for the payment method.
|
|
210
|
-
* @example 'Bank Transfer'
|
|
211
|
-
*/
|
|
212
|
-
label?: string
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
/**
|
|
216
|
-
* Commonly used arguments for a Payment Adapter function, it's use is entirely optional.
|
|
217
|
-
*/
|
|
218
|
-
export type BasePaymentAdapterClientArgs = {
|
|
219
|
-
/**
|
|
220
|
-
* The visually readable label for the payment method.
|
|
221
|
-
* @example 'Bank Transfer'
|
|
222
|
-
*/
|
|
223
|
-
label?: string
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
export type VariantsConfig = {
|
|
227
|
-
variantOptionsCollection?: CollectionOverride
|
|
228
|
-
variantsCollection?: CollectionOverride
|
|
229
|
-
variantTypesCollection?: CollectionOverride
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
export type ProductsConfig = {
|
|
233
|
-
productsCollection?: CollectionOverride
|
|
234
|
-
/**
|
|
235
|
-
* Customise the validation used for checking products or variants before a transaction is created.
|
|
236
|
-
*/
|
|
237
|
-
validation?: ProductsValidation
|
|
238
|
-
variants?: true | VariantsConfig
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
export type OrdersConfig = {
|
|
242
|
-
ordersCollection?: CollectionOverride
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
export type TransactionsConfig = {
|
|
246
|
-
transactionsCollection?: CollectionOverride
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
export type CustomQuery = {
|
|
250
|
-
depth?: number
|
|
251
|
-
select?: SelectType
|
|
252
|
-
where?: Where
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
export type PaymentsConfig = {
|
|
256
|
-
paymentMethods?: PaymentAdapter[]
|
|
257
|
-
productsQuery?: CustomQuery
|
|
258
|
-
variantsQuery?: CustomQuery
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
export type CountryType = {
|
|
262
|
-
/**
|
|
263
|
-
* A user friendly name for the country.
|
|
264
|
-
*/
|
|
265
|
-
label: string
|
|
266
|
-
/**
|
|
267
|
-
* The ISO 3166-1 alpha-2 country code.
|
|
268
|
-
* @example 'US'
|
|
269
|
-
*/
|
|
270
|
-
value: string
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
type AddressesConfig = {
|
|
274
|
-
/**
|
|
275
|
-
* These fields will be applied to all locations where addresses are used, such as Orders and Transactions. Preferred use over the collectionOverride config.
|
|
276
|
-
*/
|
|
277
|
-
addressFields?: FieldsOverride
|
|
278
|
-
collectionOverride?: CollectionOverride
|
|
279
|
-
supportedCountries?: CountryType[]
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
export type CustomersConfig = {
|
|
283
|
-
/**
|
|
284
|
-
* Slug of the customers collection, defaults to 'users'.
|
|
285
|
-
* This is used to link carts and orders to customers.
|
|
286
|
-
*/
|
|
287
|
-
slug: string
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
export type CartsConfig = {
|
|
291
|
-
cartsCollection?: CollectionOverride
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
export type InventoryConfig = {
|
|
295
|
-
/**
|
|
296
|
-
* Override the default field used to track inventory levels. Defaults to 'inventory'.
|
|
297
|
-
*/
|
|
298
|
-
fieldName?: string
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
export type CurrenciesConfig = {
|
|
302
|
-
/**
|
|
303
|
-
* Defaults to the first supported currency.
|
|
304
|
-
*
|
|
305
|
-
* @example 'USD'
|
|
306
|
-
*/
|
|
307
|
-
defaultCurrency: string
|
|
308
|
-
/**
|
|
309
|
-
*
|
|
310
|
-
*/
|
|
311
|
-
supportedCurrencies: Currency[]
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
/**
|
|
315
|
-
* A function that validates a product or variant before a transaction is created or completed.
|
|
316
|
-
* This should throw an error if validation fails as it will be caught by the function calling it.
|
|
317
|
-
*/
|
|
318
|
-
export type ProductsValidation = (args: {
|
|
319
|
-
currenciesConfig?: CurrenciesConfig
|
|
320
|
-
currency?: string
|
|
321
|
-
product: TypedCollection['products']
|
|
322
|
-
/**
|
|
323
|
-
* Quantity to check the inventory amount against.
|
|
324
|
-
*/
|
|
325
|
-
quantity: number
|
|
326
|
-
variant?: TypedCollection['variants']
|
|
327
|
-
}) => Promise<void> | void
|
|
328
|
-
|
|
329
|
-
/**
|
|
330
|
-
* A map of collection slugs used by the Ecommerce plugin.
|
|
331
|
-
* Provides an easy way to track the slugs of collections even when they are overridden.
|
|
332
|
-
*/
|
|
333
|
-
export type CollectionSlugMap = {
|
|
334
|
-
addresses: string
|
|
335
|
-
carts: string
|
|
336
|
-
customers: string
|
|
337
|
-
orders: string
|
|
338
|
-
products: string
|
|
339
|
-
transactions: string
|
|
340
|
-
variantOptions: string
|
|
341
|
-
variants: string
|
|
342
|
-
variantTypes: string
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
export type EcommercePluginConfig = {
|
|
346
|
-
/**
|
|
347
|
-
* Enable the addresses collection to allow customers, transactions and orders to have multiple addresses for shipping and billing. Accepts an override to customise the addresses collection.
|
|
348
|
-
* Defaults to supporting a default set of countries.
|
|
349
|
-
*/
|
|
350
|
-
addresses?: AddressesConfig | boolean
|
|
351
|
-
/**
|
|
352
|
-
* Configure the target collection used for carts.
|
|
353
|
-
*
|
|
354
|
-
* Defaults to true.
|
|
355
|
-
*/
|
|
356
|
-
carts?: boolean | CartsConfig
|
|
357
|
-
/**
|
|
358
|
-
* Configure supported currencies and default settings.
|
|
359
|
-
*
|
|
360
|
-
* Defaults to supporting USD.
|
|
361
|
-
*/
|
|
362
|
-
currencies?: CurrenciesConfig
|
|
363
|
-
/**
|
|
364
|
-
* Configure the target collection used for customers.
|
|
365
|
-
*
|
|
366
|
-
* @example
|
|
367
|
-
* ```ts
|
|
368
|
-
* customers: {
|
|
369
|
-
* slug: 'users', // default
|
|
370
|
-
* }
|
|
371
|
-
*
|
|
372
|
-
*/
|
|
373
|
-
customers: CustomersConfig
|
|
374
|
-
/**
|
|
375
|
-
* Enable tracking of inventory for products and variants.
|
|
376
|
-
*
|
|
377
|
-
* Defaults to true.
|
|
378
|
-
*/
|
|
379
|
-
inventory?: boolean | InventoryConfig
|
|
380
|
-
orders?: boolean | OrdersConfig
|
|
381
|
-
/**
|
|
382
|
-
* Enable tracking of payments. Accepts a config object to override the default collection settings.
|
|
383
|
-
*
|
|
384
|
-
* Defaults to true when the paymentMethods array is provided.
|
|
385
|
-
*/
|
|
386
|
-
payments?: PaymentsConfig
|
|
387
|
-
products?: boolean | ProductsConfig
|
|
388
|
-
/**
|
|
389
|
-
* Enable tracking of transactions. Accepts a config object to override the default collection settings.
|
|
390
|
-
*
|
|
391
|
-
* Defaults to true when the paymentMethods array is provided.
|
|
392
|
-
*/
|
|
393
|
-
transactions?: boolean | TransactionsConfig
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
export type SanitizedEcommercePluginConfig = {
|
|
397
|
-
addresses: { addressFields: Field[] } & Omit<AddressesConfig, 'addressFields'>
|
|
398
|
-
currencies: Required<CurrenciesConfig>
|
|
399
|
-
inventory?: InventoryConfig
|
|
400
|
-
payments: {
|
|
401
|
-
paymentMethods: [] | PaymentAdapter[]
|
|
402
|
-
}
|
|
403
|
-
} & Omit<Required<EcommercePluginConfig>, 'addresses' | 'currencies' | 'inventory' | 'payments'>
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
|
|
3
|
-
import type { StaticLabel } from 'payload'
|
|
4
|
-
|
|
5
|
-
import { FieldLabel } from '@payloadcms/ui'
|
|
6
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
7
|
-
|
|
8
|
-
import type { Currency } from '../../types.js'
|
|
9
|
-
|
|
10
|
-
import { USD } from '../../currencies/index.js'
|
|
11
|
-
import { convertFromBaseValue, convertToBaseValue } from './utilities.js'
|
|
12
|
-
|
|
13
|
-
interface Props {
|
|
14
|
-
currency: string
|
|
15
|
-
disabled?: boolean
|
|
16
|
-
error?: string
|
|
17
|
-
id?: string
|
|
18
|
-
label?: StaticLabel
|
|
19
|
-
onChange: (value: number) => void
|
|
20
|
-
placeholder?: string
|
|
21
|
-
supportedCurrencies: Currency[]
|
|
22
|
-
value: number
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const baseClass = 'formattedPrice'
|
|
26
|
-
|
|
27
|
-
export const FormattedInput: React.FC<Props> = ({
|
|
28
|
-
id,
|
|
29
|
-
currency: currencyFromProps,
|
|
30
|
-
disabled = false,
|
|
31
|
-
label,
|
|
32
|
-
onChange: onChangeFromProps,
|
|
33
|
-
placeholder = '0.00',
|
|
34
|
-
supportedCurrencies,
|
|
35
|
-
value,
|
|
36
|
-
}) => {
|
|
37
|
-
const [displayValue, setDisplayValue] = useState<string>('')
|
|
38
|
-
|
|
39
|
-
const inputRef = useRef<HTMLInputElement>(null)
|
|
40
|
-
const isFirstRender = useRef(true)
|
|
41
|
-
const debounceTimer = useRef<NodeJS.Timeout | null>(null)
|
|
42
|
-
|
|
43
|
-
const currency = useMemo<Currency>(() => {
|
|
44
|
-
if (currencyFromProps && supportedCurrencies) {
|
|
45
|
-
const foundCurrency = supportedCurrencies.find(
|
|
46
|
-
(supportedCurrency) => supportedCurrency.code === currencyFromProps,
|
|
47
|
-
)
|
|
48
|
-
|
|
49
|
-
return foundCurrency ?? USD
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
return USD
|
|
53
|
-
}, [currencyFromProps, supportedCurrencies])
|
|
54
|
-
|
|
55
|
-
useEffect(() => {
|
|
56
|
-
if (isFirstRender.current) {
|
|
57
|
-
isFirstRender.current = false
|
|
58
|
-
setDisplayValue(convertFromBaseValue({ baseValue: value, currency }))
|
|
59
|
-
}
|
|
60
|
-
}, [currency, value, currencyFromProps])
|
|
61
|
-
|
|
62
|
-
const updateValue = useCallback(
|
|
63
|
-
(inputValue: string) => {
|
|
64
|
-
const baseValue = convertToBaseValue({ currency, displayValue: inputValue })
|
|
65
|
-
onChangeFromProps(baseValue)
|
|
66
|
-
},
|
|
67
|
-
[currency, onChangeFromProps],
|
|
68
|
-
)
|
|
69
|
-
|
|
70
|
-
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
71
|
-
const inputValue = e.target.value
|
|
72
|
-
|
|
73
|
-
if (!/^\d*(?:\.\d*)?$/.test(inputValue) && inputValue !== '') {
|
|
74
|
-
return
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
setDisplayValue(inputValue)
|
|
78
|
-
|
|
79
|
-
// Clear any existing timer
|
|
80
|
-
if (debounceTimer.current) {
|
|
81
|
-
clearTimeout(debounceTimer.current)
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// Only update the base value after a delay to avoid formatting while typing
|
|
85
|
-
debounceTimer.current = setTimeout(() => {
|
|
86
|
-
updateValue(inputValue)
|
|
87
|
-
}, 500)
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
const handleInputBlur = () => {
|
|
91
|
-
if (displayValue === '') {
|
|
92
|
-
return
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// Clear any pending debounce
|
|
96
|
-
if (debounceTimer.current) {
|
|
97
|
-
clearTimeout(debounceTimer.current)
|
|
98
|
-
debounceTimer.current = null
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
const baseValue = convertToBaseValue({ currency, displayValue })
|
|
102
|
-
const formattedValue = convertFromBaseValue({ baseValue, currency })
|
|
103
|
-
|
|
104
|
-
if (value != baseValue) {
|
|
105
|
-
onChangeFromProps(baseValue)
|
|
106
|
-
}
|
|
107
|
-
setDisplayValue(formattedValue)
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
return (
|
|
111
|
-
<div className={`field-type number ${baseClass}`}>
|
|
112
|
-
{label && <FieldLabel htmlFor={id} label={label} />}
|
|
113
|
-
|
|
114
|
-
<div className={`${baseClass}Container`}>
|
|
115
|
-
<div className={`${baseClass}CurrencySymbol`}>
|
|
116
|
-
<span>{currency.symbol}</span>
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
|
|
120
|
-
<input
|
|
121
|
-
className={`${baseClass}Input`}
|
|
122
|
-
disabled={disabled}
|
|
123
|
-
id={id}
|
|
124
|
-
onBlur={handleInputBlur}
|
|
125
|
-
onChange={handleInputChange}
|
|
126
|
-
placeholder={placeholder}
|
|
127
|
-
ref={inputRef}
|
|
128
|
-
type="text"
|
|
129
|
-
value={displayValue}
|
|
130
|
-
/>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
)
|
|
134
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
.formattedPrice {
|
|
2
|
-
.formattedPriceLabel {
|
|
3
|
-
display: block;
|
|
4
|
-
margin-bottom: 0.5rem;
|
|
5
|
-
font-size: 0.875rem;
|
|
6
|
-
font-weight: 500;
|
|
7
|
-
color: #333;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.formattedPriceContainer {
|
|
11
|
-
display: flex;
|
|
12
|
-
position: relative;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.formattedPriceCurrencySymbol {
|
|
16
|
-
position: absolute;
|
|
17
|
-
left: 10px;
|
|
18
|
-
top: 50%;
|
|
19
|
-
transform: translateY(calc(-50%));
|
|
20
|
-
color: var(--theme-elevation-500);
|
|
21
|
-
user-select: none;
|
|
22
|
-
pointer-events: none;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.formattedPriceInput {
|
|
26
|
-
padding: 0.5rem 0.5rem 0.5rem 1.75rem;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
import type { NumberFieldClientProps } from 'payload'
|
|
3
|
-
|
|
4
|
-
import { useField, useFormFields } from '@payloadcms/ui'
|
|
5
|
-
|
|
6
|
-
import './index.scss'
|
|
7
|
-
|
|
8
|
-
import type { CurrenciesConfig, Currency } from '../../types.js'
|
|
9
|
-
|
|
10
|
-
import { FormattedInput } from './FormattedInput.js'
|
|
11
|
-
|
|
12
|
-
type Props = {
|
|
13
|
-
currenciesConfig: CurrenciesConfig
|
|
14
|
-
currency?: Currency
|
|
15
|
-
path: string
|
|
16
|
-
} & NumberFieldClientProps
|
|
17
|
-
|
|
18
|
-
export const PriceInput: React.FC<Props> = (args) => {
|
|
19
|
-
const {
|
|
20
|
-
currenciesConfig,
|
|
21
|
-
currency: currencyFromProps,
|
|
22
|
-
field: { label },
|
|
23
|
-
path,
|
|
24
|
-
} = args
|
|
25
|
-
|
|
26
|
-
const { setValue, value } = useField<number>({ path })
|
|
27
|
-
const parentPath = path.split('.').slice(0, -1).join('.')
|
|
28
|
-
const currencyPath = parentPath ? `${parentPath}.currency` : 'currency'
|
|
29
|
-
|
|
30
|
-
const currencyFromSelectField = useFormFields(([fields, dispatch]) => fields[currencyPath])
|
|
31
|
-
|
|
32
|
-
const currencyCode = currencyFromProps?.code ?? (currencyFromSelectField?.value as string)
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<FormattedInput
|
|
36
|
-
currency={currencyCode}
|
|
37
|
-
label={label}
|
|
38
|
-
onChange={(value) => setValue(value)}
|
|
39
|
-
supportedCurrencies={currenciesConfig?.supportedCurrencies}
|
|
40
|
-
value={value || 0}
|
|
41
|
-
/>
|
|
42
|
-
)
|
|
43
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import type { Currency } from '../../types.js'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Convert display value with decimal point to base value (e.g., $25.00 to 2500)
|
|
5
|
-
*/
|
|
6
|
-
export const convertToBaseValue = ({
|
|
7
|
-
currency,
|
|
8
|
-
displayValue,
|
|
9
|
-
}: {
|
|
10
|
-
currency: Currency
|
|
11
|
-
displayValue: string
|
|
12
|
-
}): number => {
|
|
13
|
-
if (!currency) {
|
|
14
|
-
return parseFloat(displayValue)
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Remove currency symbol and any non-numeric characters except decimal
|
|
18
|
-
const cleanValue = displayValue.replace(currency.symbol, '').replace(/[^0-9.]/g, '')
|
|
19
|
-
|
|
20
|
-
// Parse the clean value to a float
|
|
21
|
-
const floatValue = parseFloat(cleanValue || '0')
|
|
22
|
-
|
|
23
|
-
// Convert to the base value (e.g., cents for USD)
|
|
24
|
-
return Math.round(floatValue * Math.pow(10, currency.decimals))
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Convert base value to display value with decimal point (e.g., 2500 to $25.00)
|
|
29
|
-
*/
|
|
30
|
-
export const convertFromBaseValue = ({
|
|
31
|
-
baseValue,
|
|
32
|
-
currency,
|
|
33
|
-
}: {
|
|
34
|
-
baseValue: number
|
|
35
|
-
currency: Currency
|
|
36
|
-
}): string => {
|
|
37
|
-
if (!currency) {
|
|
38
|
-
return baseValue.toString()
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
// Convert from base value (e.g., cents) to decimal value (e.g., dollars)
|
|
42
|
-
const decimalValue = baseValue / Math.pow(10, currency.decimals)
|
|
43
|
-
|
|
44
|
-
// Format with the correct number of decimal places
|
|
45
|
-
return decimalValue.toFixed(currency.decimals)
|
|
46
|
-
}
|