@anker-in/campaign-ui 0.5.0 → 0.5.1-beta.2
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/LiveChatWidget/components/MessageContent/FAQList.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/FAQList.js.map +3 -3
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/PolicyBlock.js +2 -2
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/PolicyBlock.js.map +2 -2
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/TextBlock.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/TextBlock.js.map +2 -2
- package/dist/cjs/components/credits/context/hooks/useSubscribed.js.map +2 -2
- package/dist/cjs/components/index.d.ts +2 -2
- package/dist/cjs/components/index.js +1 -1
- package/dist/cjs/components/index.js.map +2 -2
- package/dist/cjs/stories/CartCard.stories.d.ts +33 -0
- package/dist/cjs/stories/CartCard.stories.js +21 -0
- package/dist/cjs/stories/CartCard.stories.js.map +7 -0
- package/dist/esm/components/LiveChatWidget/components/MessageContent/FAQList.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/FAQList.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/components/MessageContent/PolicyBlock.js +2 -2
- package/dist/esm/components/LiveChatWidget/components/MessageContent/PolicyBlock.js.map +2 -2
- package/dist/esm/components/LiveChatWidget/components/MessageContent/TextBlock.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/TextBlock.js.map +2 -2
- package/dist/esm/components/credits/context/hooks/useSubscribed.js.map +2 -2
- package/dist/esm/components/index.d.ts +2 -2
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/index.js.map +2 -2
- package/dist/esm/stories/CartCard.stories.d.ts +33 -0
- package/dist/esm/stories/CartCard.stories.js +21 -0
- package/dist/esm/stories/CartCard.stories.js.map +7 -0
- package/package.json +20 -19
- package/src/components/LiveChatWidget/components/MessageContent/FAQList.tsx +15 -1
- package/src/components/LiveChatWidget/components/MessageContent/PolicyBlock.tsx +8 -0
- package/src/components/LiveChatWidget/components/MessageContent/TextBlock.tsx +3 -1
- package/src/components/credits/context/hooks/useSubscribed.ts +1 -0
- package/src/components/index.ts +2 -2
- package/src/stories/CartCard.stories.tsx +459 -0
- package/src/styles/livechat.css +15 -3
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfileModal.d.ts +0 -10
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfileModal.js +0 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfileModal.js.map +0 -7
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfileModal.d.ts +0 -10
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfileModal.js +0 -2
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfileModal.js.map +0 -7
|
@@ -0,0 +1,459 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CartCard Storybook Stories
|
|
3
|
+
* 展示购物车卡片组件的各种状态
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import type { Meta, StoryObj } from '@storybook/react'
|
|
7
|
+
import React from 'react'
|
|
8
|
+
import { CartCard } from '../components/LiveChatWidget/components/MessageContent/CartCard.js'
|
|
9
|
+
import type { CartContent } from '../components/LiveChatWidget/types'
|
|
10
|
+
|
|
11
|
+
// Story 包装组件
|
|
12
|
+
const CartCardWrapper: React.FC<{ content: CartContent }> = ({ content }) => {
|
|
13
|
+
return (
|
|
14
|
+
<div className="flex min-h-screen items-center justify-center bg-gray-100 p-4">
|
|
15
|
+
<div className="w-full max-w-md">{CartCard.render(content, false, false)}</div>
|
|
16
|
+
</div>
|
|
17
|
+
)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const meta: Meta<typeof CartCardWrapper> = {
|
|
21
|
+
title: 'Campaign/LiveChatWidget/MessageContent/CartCard',
|
|
22
|
+
component: CartCardWrapper,
|
|
23
|
+
parameters: {
|
|
24
|
+
layout: 'fullscreen',
|
|
25
|
+
docs: {
|
|
26
|
+
description: {
|
|
27
|
+
component: `
|
|
28
|
+
# 购物车卡片组件
|
|
29
|
+
|
|
30
|
+
显示用户购物车内容,包括商品列表、价格汇总和结账按钮。
|
|
31
|
+
|
|
32
|
+
## 功能特性
|
|
33
|
+
|
|
34
|
+
- 📦 **商品列表**: 展示购物车中的所有商品
|
|
35
|
+
- 💰 **价格汇总**: 显示小计、折扣和总计
|
|
36
|
+
- 🎟️ **折扣码**: 显示已应用的折扣码及其状态
|
|
37
|
+
- 🛒 **结账按钮**: 一键跳转到 Shopify 结账页面
|
|
38
|
+
- 🈳 **空状态**: 优雅的空购物车提示
|
|
39
|
+
|
|
40
|
+
## 使用场景
|
|
41
|
+
|
|
42
|
+
- 用户添加商品到购物车后 (add_to_cart)
|
|
43
|
+
- 用户查询购物车内容 (get_cart)
|
|
44
|
+
- 用户修改购物车数量 (update_cart_item)
|
|
45
|
+
- 用户应用折扣码 (update_discount_codes)
|
|
46
|
+
`,
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
tags: ['autodocs'],
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export default meta
|
|
54
|
+
|
|
55
|
+
type Story = StoryObj<typeof CartCardWrapper>
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* 空购物车状态
|
|
59
|
+
*/
|
|
60
|
+
export const Empty: Story = {
|
|
61
|
+
args: {
|
|
62
|
+
content: {
|
|
63
|
+
type: 'cart',
|
|
64
|
+
data: {
|
|
65
|
+
isEmpty: true,
|
|
66
|
+
cartId: 'gid://shopify/Cart/empty',
|
|
67
|
+
totalQuantity: 0,
|
|
68
|
+
lines: [],
|
|
69
|
+
cost: {
|
|
70
|
+
totalAmount: {
|
|
71
|
+
amount: '0.00',
|
|
72
|
+
currencyCode: 'USD',
|
|
73
|
+
},
|
|
74
|
+
subtotalAmount: {
|
|
75
|
+
amount: '0.00',
|
|
76
|
+
currencyCode: 'USD',
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* 单件商品
|
|
86
|
+
*/
|
|
87
|
+
export const SingleItem: Story = {
|
|
88
|
+
args: {
|
|
89
|
+
content: {
|
|
90
|
+
type: 'cart',
|
|
91
|
+
data: {
|
|
92
|
+
isEmpty: false,
|
|
93
|
+
cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',
|
|
94
|
+
totalQuantity: 1,
|
|
95
|
+
lines: [
|
|
96
|
+
{
|
|
97
|
+
id: 'gid://shopify/CartLine/12345',
|
|
98
|
+
quantity: 1,
|
|
99
|
+
cost: {
|
|
100
|
+
totalAmount: {
|
|
101
|
+
amount: '99.99',
|
|
102
|
+
currencyCode: 'USD',
|
|
103
|
+
},
|
|
104
|
+
amountPerQuantity: {
|
|
105
|
+
amount: '99.99',
|
|
106
|
+
currencyCode: 'USD',
|
|
107
|
+
},
|
|
108
|
+
subtotalAmount: {
|
|
109
|
+
amount: '99.99',
|
|
110
|
+
currencyCode: 'USD',
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
merchandise: {
|
|
114
|
+
id: 'gid://shopify/ProductVariant/43234567890',
|
|
115
|
+
title: 'Black',
|
|
116
|
+
price: {
|
|
117
|
+
amount: '99.99',
|
|
118
|
+
currencyCode: 'USD',
|
|
119
|
+
},
|
|
120
|
+
image: {
|
|
121
|
+
url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',
|
|
122
|
+
altText: 'Soundcore Space One',
|
|
123
|
+
},
|
|
124
|
+
product: {
|
|
125
|
+
id: 'gid://shopify/Product/8179159826618',
|
|
126
|
+
title: 'Soundcore Space One',
|
|
127
|
+
handle: 'soundcore-space-one',
|
|
128
|
+
},
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
],
|
|
132
|
+
cost: {
|
|
133
|
+
totalAmount: {
|
|
134
|
+
amount: '99.99',
|
|
135
|
+
currencyCode: 'USD',
|
|
136
|
+
},
|
|
137
|
+
subtotalAmount: {
|
|
138
|
+
amount: '99.99',
|
|
139
|
+
currencyCode: 'USD',
|
|
140
|
+
},
|
|
141
|
+
},
|
|
142
|
+
checkoutUrl: 'https://checkout.shopify.com/example',
|
|
143
|
+
},
|
|
144
|
+
},
|
|
145
|
+
},
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* 多件商品
|
|
150
|
+
*/
|
|
151
|
+
export const MultipleItems: Story = {
|
|
152
|
+
args: {
|
|
153
|
+
content: {
|
|
154
|
+
type: 'cart',
|
|
155
|
+
data: {
|
|
156
|
+
isEmpty: false,
|
|
157
|
+
cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',
|
|
158
|
+
totalQuantity: 5,
|
|
159
|
+
lines: [
|
|
160
|
+
{
|
|
161
|
+
id: 'gid://shopify/CartLine/12345',
|
|
162
|
+
quantity: 2,
|
|
163
|
+
cost: {
|
|
164
|
+
totalAmount: {
|
|
165
|
+
amount: '199.98',
|
|
166
|
+
currencyCode: 'USD',
|
|
167
|
+
},
|
|
168
|
+
amountPerQuantity: {
|
|
169
|
+
amount: '99.99',
|
|
170
|
+
currencyCode: 'USD',
|
|
171
|
+
},
|
|
172
|
+
subtotalAmount: {
|
|
173
|
+
amount: '199.98',
|
|
174
|
+
currencyCode: 'USD',
|
|
175
|
+
},
|
|
176
|
+
},
|
|
177
|
+
merchandise: {
|
|
178
|
+
id: 'gid://shopify/ProductVariant/43234567890',
|
|
179
|
+
title: 'Black',
|
|
180
|
+
price: {
|
|
181
|
+
amount: '99.99',
|
|
182
|
+
currencyCode: 'USD',
|
|
183
|
+
},
|
|
184
|
+
image: {
|
|
185
|
+
url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',
|
|
186
|
+
altText: 'Soundcore Space One',
|
|
187
|
+
},
|
|
188
|
+
product: {
|
|
189
|
+
id: 'gid://shopify/Product/8179159826618',
|
|
190
|
+
title: 'Soundcore Space One',
|
|
191
|
+
handle: 'soundcore-space-one',
|
|
192
|
+
},
|
|
193
|
+
},
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
id: 'gid://shopify/CartLine/12346',
|
|
197
|
+
quantity: 1,
|
|
198
|
+
cost: {
|
|
199
|
+
totalAmount: {
|
|
200
|
+
amount: '129.99',
|
|
201
|
+
currencyCode: 'USD',
|
|
202
|
+
},
|
|
203
|
+
amountPerQuantity: {
|
|
204
|
+
amount: '129.99',
|
|
205
|
+
currencyCode: 'USD',
|
|
206
|
+
},
|
|
207
|
+
subtotalAmount: {
|
|
208
|
+
amount: '129.99',
|
|
209
|
+
currencyCode: 'USD',
|
|
210
|
+
},
|
|
211
|
+
},
|
|
212
|
+
merchandise: {
|
|
213
|
+
id: 'gid://shopify/ProductVariant/43234567891',
|
|
214
|
+
title: 'White',
|
|
215
|
+
price: {
|
|
216
|
+
amount: '129.99',
|
|
217
|
+
currencyCode: 'USD',
|
|
218
|
+
},
|
|
219
|
+
image: {
|
|
220
|
+
url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop',
|
|
221
|
+
altText: 'eufy Security Camera',
|
|
222
|
+
},
|
|
223
|
+
product: {
|
|
224
|
+
id: 'gid://shopify/Product/8179159826619',
|
|
225
|
+
title: 'eufy Security Camera',
|
|
226
|
+
handle: 'eufy-security-camera',
|
|
227
|
+
},
|
|
228
|
+
},
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
id: 'gid://shopify/CartLine/12347',
|
|
232
|
+
quantity: 2,
|
|
233
|
+
cost: {
|
|
234
|
+
totalAmount: {
|
|
235
|
+
amount: '79.98',
|
|
236
|
+
currencyCode: 'USD',
|
|
237
|
+
},
|
|
238
|
+
amountPerQuantity: {
|
|
239
|
+
amount: '39.99',
|
|
240
|
+
currencyCode: 'USD',
|
|
241
|
+
},
|
|
242
|
+
subtotalAmount: {
|
|
243
|
+
amount: '79.98',
|
|
244
|
+
currencyCode: 'USD',
|
|
245
|
+
},
|
|
246
|
+
},
|
|
247
|
+
merchandise: {
|
|
248
|
+
id: 'gid://shopify/ProductVariant/43234567892',
|
|
249
|
+
title: 'USB-C Cable',
|
|
250
|
+
price: {
|
|
251
|
+
amount: '39.99',
|
|
252
|
+
currencyCode: 'USD',
|
|
253
|
+
},
|
|
254
|
+
image: {
|
|
255
|
+
url: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=400&h=400&fit=crop',
|
|
256
|
+
altText: 'Anker USB-C Cable',
|
|
257
|
+
},
|
|
258
|
+
product: {
|
|
259
|
+
id: 'gid://shopify/Product/8179159826620',
|
|
260
|
+
title: 'Anker USB-C Cable 6ft',
|
|
261
|
+
handle: 'anker-usb-c-cable',
|
|
262
|
+
},
|
|
263
|
+
},
|
|
264
|
+
},
|
|
265
|
+
],
|
|
266
|
+
cost: {
|
|
267
|
+
totalAmount: {
|
|
268
|
+
amount: '409.95',
|
|
269
|
+
currencyCode: 'USD',
|
|
270
|
+
},
|
|
271
|
+
subtotalAmount: {
|
|
272
|
+
amount: '409.95',
|
|
273
|
+
currencyCode: 'USD',
|
|
274
|
+
},
|
|
275
|
+
},
|
|
276
|
+
checkoutUrl: 'https://checkout.shopify.com/example',
|
|
277
|
+
},
|
|
278
|
+
},
|
|
279
|
+
},
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/**
|
|
283
|
+
* 有折扣码的购物车
|
|
284
|
+
*/
|
|
285
|
+
export const WithDiscount: Story = {
|
|
286
|
+
args: {
|
|
287
|
+
content: {
|
|
288
|
+
type: 'cart',
|
|
289
|
+
data: {
|
|
290
|
+
isEmpty: false,
|
|
291
|
+
cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',
|
|
292
|
+
totalQuantity: 3,
|
|
293
|
+
lines: [
|
|
294
|
+
{
|
|
295
|
+
id: 'gid://shopify/CartLine/12345',
|
|
296
|
+
quantity: 2,
|
|
297
|
+
cost: {
|
|
298
|
+
totalAmount: {
|
|
299
|
+
amount: '199.98',
|
|
300
|
+
currencyCode: 'USD',
|
|
301
|
+
},
|
|
302
|
+
amountPerQuantity: {
|
|
303
|
+
amount: '99.99',
|
|
304
|
+
currencyCode: 'USD',
|
|
305
|
+
},
|
|
306
|
+
subtotalAmount: {
|
|
307
|
+
amount: '199.98',
|
|
308
|
+
currencyCode: 'USD',
|
|
309
|
+
},
|
|
310
|
+
},
|
|
311
|
+
merchandise: {
|
|
312
|
+
id: 'gid://shopify/ProductVariant/43234567890',
|
|
313
|
+
title: 'Black',
|
|
314
|
+
price: {
|
|
315
|
+
amount: '99.99',
|
|
316
|
+
currencyCode: 'USD',
|
|
317
|
+
},
|
|
318
|
+
image: {
|
|
319
|
+
url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',
|
|
320
|
+
altText: 'Soundcore Space One',
|
|
321
|
+
},
|
|
322
|
+
product: {
|
|
323
|
+
id: 'gid://shopify/Product/8179159826618',
|
|
324
|
+
title: 'Soundcore Space One',
|
|
325
|
+
handle: 'soundcore-space-one',
|
|
326
|
+
},
|
|
327
|
+
},
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
id: 'gid://shopify/CartLine/12346',
|
|
331
|
+
quantity: 1,
|
|
332
|
+
cost: {
|
|
333
|
+
totalAmount: {
|
|
334
|
+
amount: '129.99',
|
|
335
|
+
currencyCode: 'USD',
|
|
336
|
+
},
|
|
337
|
+
amountPerQuantity: {
|
|
338
|
+
amount: '129.99',
|
|
339
|
+
currencyCode: 'USD',
|
|
340
|
+
},
|
|
341
|
+
subtotalAmount: {
|
|
342
|
+
amount: '129.99',
|
|
343
|
+
currencyCode: 'USD',
|
|
344
|
+
},
|
|
345
|
+
},
|
|
346
|
+
merchandise: {
|
|
347
|
+
id: 'gid://shopify/ProductVariant/43234567891',
|
|
348
|
+
title: 'White',
|
|
349
|
+
price: {
|
|
350
|
+
amount: '129.99',
|
|
351
|
+
currencyCode: 'USD',
|
|
352
|
+
},
|
|
353
|
+
image: {
|
|
354
|
+
url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop',
|
|
355
|
+
altText: 'eufy Security Camera',
|
|
356
|
+
},
|
|
357
|
+
product: {
|
|
358
|
+
id: 'gid://shopify/Product/8179159826619',
|
|
359
|
+
title: 'eufy Security Camera',
|
|
360
|
+
handle: 'eufy-security-camera',
|
|
361
|
+
},
|
|
362
|
+
},
|
|
363
|
+
},
|
|
364
|
+
],
|
|
365
|
+
cost: {
|
|
366
|
+
totalAmount: {
|
|
367
|
+
amount: '296.97',
|
|
368
|
+
currencyCode: 'USD',
|
|
369
|
+
},
|
|
370
|
+
subtotalAmount: {
|
|
371
|
+
amount: '329.97',
|
|
372
|
+
currencyCode: 'USD',
|
|
373
|
+
},
|
|
374
|
+
},
|
|
375
|
+
discountCodes: [
|
|
376
|
+
{
|
|
377
|
+
code: 'SPRING20',
|
|
378
|
+
applicable: true,
|
|
379
|
+
},
|
|
380
|
+
],
|
|
381
|
+
checkoutUrl: 'https://checkout.shopify.com/example',
|
|
382
|
+
},
|
|
383
|
+
},
|
|
384
|
+
},
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
/**
|
|
388
|
+
* 多个折扣码(部分失效)
|
|
389
|
+
*/
|
|
390
|
+
export const WithMultipleDiscounts: Story = {
|
|
391
|
+
args: {
|
|
392
|
+
content: {
|
|
393
|
+
type: 'cart',
|
|
394
|
+
data: {
|
|
395
|
+
isEmpty: false,
|
|
396
|
+
cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',
|
|
397
|
+
totalQuantity: 2,
|
|
398
|
+
lines: [
|
|
399
|
+
{
|
|
400
|
+
id: 'gid://shopify/CartLine/12345',
|
|
401
|
+
quantity: 2,
|
|
402
|
+
cost: {
|
|
403
|
+
totalAmount: {
|
|
404
|
+
amount: '199.98',
|
|
405
|
+
currencyCode: 'USD',
|
|
406
|
+
},
|
|
407
|
+
amountPerQuantity: {
|
|
408
|
+
amount: '99.99',
|
|
409
|
+
currencyCode: 'USD',
|
|
410
|
+
},
|
|
411
|
+
subtotalAmount: {
|
|
412
|
+
amount: '199.98',
|
|
413
|
+
currencyCode: 'USD',
|
|
414
|
+
},
|
|
415
|
+
},
|
|
416
|
+
merchandise: {
|
|
417
|
+
id: 'gid://shopify/ProductVariant/43234567890',
|
|
418
|
+
title: 'Black',
|
|
419
|
+
price: {
|
|
420
|
+
amount: '99.99',
|
|
421
|
+
currencyCode: 'USD',
|
|
422
|
+
},
|
|
423
|
+
image: {
|
|
424
|
+
url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',
|
|
425
|
+
altText: 'Soundcore Space One',
|
|
426
|
+
},
|
|
427
|
+
product: {
|
|
428
|
+
id: 'gid://shopify/Product/8179159826618',
|
|
429
|
+
title: 'Soundcore Space One',
|
|
430
|
+
handle: 'soundcore-space-one',
|
|
431
|
+
},
|
|
432
|
+
},
|
|
433
|
+
},
|
|
434
|
+
],
|
|
435
|
+
cost: {
|
|
436
|
+
totalAmount: {
|
|
437
|
+
amount: '179.98',
|
|
438
|
+
currencyCode: 'USD',
|
|
439
|
+
},
|
|
440
|
+
subtotalAmount: {
|
|
441
|
+
amount: '199.98',
|
|
442
|
+
currencyCode: 'USD',
|
|
443
|
+
},
|
|
444
|
+
},
|
|
445
|
+
discountCodes: [
|
|
446
|
+
{
|
|
447
|
+
code: 'WELCOME10',
|
|
448
|
+
applicable: true,
|
|
449
|
+
},
|
|
450
|
+
{
|
|
451
|
+
code: 'EXPIRED20',
|
|
452
|
+
applicable: false,
|
|
453
|
+
},
|
|
454
|
+
],
|
|
455
|
+
checkoutUrl: 'https://checkout.shopify.com/example',
|
|
456
|
+
},
|
|
457
|
+
},
|
|
458
|
+
},
|
|
459
|
+
}
|
package/src/styles/livechat.css
CHANGED
|
@@ -272,12 +272,24 @@
|
|
|
272
272
|
}
|
|
273
273
|
|
|
274
274
|
.livechat-markdown a {
|
|
275
|
-
color: var(--livechat-primary);
|
|
276
275
|
text-decoration: underline;
|
|
277
276
|
}
|
|
278
277
|
|
|
279
|
-
|
|
280
|
-
|
|
278
|
+
/* 消息链接颜色:区分用户输入链接与机器人回复链接,调用方可直接覆盖以下两组类名自定义颜色 */
|
|
279
|
+
.livechat-link-user {
|
|
280
|
+
color: #bfdbfe;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.livechat-link-user:hover {
|
|
284
|
+
color: #dbeafe;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.livechat-link-bot {
|
|
288
|
+
color: #2563eb;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.livechat-link-bot:hover {
|
|
292
|
+
color: #1d4ed8;
|
|
281
293
|
}
|
|
282
294
|
|
|
283
295
|
.livechat-markdown code {
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { CompleteProfileCopy } from '../../type';
|
|
2
|
-
type Props = {
|
|
3
|
-
isOpen: boolean;
|
|
4
|
-
onClose: () => void;
|
|
5
|
-
onSuccess?: () => void;
|
|
6
|
-
copy: CompleteProfileCopy;
|
|
7
|
-
shopifyStoreDomain?: string;
|
|
8
|
-
};
|
|
9
|
-
export declare function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain }: Props): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var T=Object.create;var u=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var K=(l,s)=>{for(var r in s)u(l,r,{get:s[r],enumerable:!0})},L=(l,s,r,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of G(s))!J.call(l,i)&&i!==r&&u(l,i,{get:()=>s[i],enumerable:!(a=U(s,i))||a.enumerable});return l};var Q=(l,s,r)=>(r=l!=null?T(H(l)):{},L(s||!l||!l.__esModule?u(r,"default",{value:l,enumerable:!0}):r,l)),R=l=>L(u({},"__esModule",{value:!0}),l);var W={};K(W,{CompleteProfileModal:()=>V});module.exports=R(W);var e=require("react/jsx-runtime"),o=require("react"),n=require("@anker-in/headless-ui"),k=require("@anker-in/lib"),S=require("../../../credits/modal/ModalContainer"),z=require("./hooks/useUpdateProfile"),F=Q(require("../../../credits/context/hooks/useCountries")),O=require("../../context/provider");function V({isOpen:l,onClose:s,onSuccess:r,copy:a,shopifyStoreDomain:i=""}){const{profile:d,fetchCreditInfo:P,alpcConfig:w}=(0,O.useMemberPopupContext)(),{locale:A}=w,[m,y]=(0,o.useState)(""),[p,_]=(0,o.useState)(""),[b,E]=(0,o.useState)(""),[c,B]=(0,o.useState)(""),[x,N]=(0,o.useState)(""),[v,h]=(0,o.useState)(""),[C,g]=(0,o.useState)(""),{updateProfile:M,isLoading:q}=(0,z.useUpdateProfile)({locale:A,appName:w.appName}),{countries:f}=(0,F.default)({shopifyStoreDomain:i});(0,o.useEffect)(()=>{d&&(y(d.first_name??""),_(d.last_name??""),E(d.phone_number??""),B(d.dob??""),N(d.country?.id??""))},[d]),(0,o.useEffect)(()=>{f.length>0&&!x&&N(f[0].id)},[f]);const D=(0,o.useCallback)(()=>{let t=!1;return m.trim()?h(""):(h(a.required),t=!0),p.trim()?g(""):(g(a.required),t=!0),t},[m,p,a.required]),I=(0,o.useCallback)(async()=>{if(D())return;await M({first_name:m.trim(),last_name:p.trim(),phone_number:b,country:x,dob:c})&&(P(d?.user_id),r?.(),s())},[D,M,m,p,b,x,c,P,d,r,s]);return(0,e.jsx)(S.CreditsModalContainer,{isOpen:l,onClose:s,title:a.title,titleClassName:"!h-auto !border-b-0 !pb-0",className:"w-[540px] md:h-auto",useAnimation:!0,animationClassName:"md:translate-y-[100vh]",children:(0,e.jsxs)("div",{className:"flex flex-col gap-[20px]",children:[a.subtitle&&(0,e.jsx)(n.Text,{className:"text-[14px] text-[#1d1d1f]",html:a.subtitle}),(0,e.jsxs)("div",{children:[(0,e.jsx)("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:a.email}),(0,e.jsx)("input",{className:"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]",value:d?.email??"",disabled:!0})]}),(0,e.jsxs)("div",{children:[(0,e.jsxs)("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:[a.firstName," ",(0,e.jsx)("span",{className:"text-[#f84d4f]",children:"*"})]}),(0,e.jsx)("input",{className:(0,k.classNames)("mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none",v?"border-[#f84d4f]":"border-[#d8d8d8]"),value:m,onChange:t=>{y(t.target.value),h("")}}),v&&(0,e.jsx)(n.Text,{className:"mt-[4px] text-[12px] text-[#f84d4f]",html:v})]}),(0,e.jsxs)("div",{children:[(0,e.jsxs)("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:[a.lastName," ",(0,e.jsx)("span",{className:"text-[#f84d4f]",children:"*"})]}),(0,e.jsx)("input",{className:(0,k.classNames)("mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none",C?"border-[#f84d4f]":"border-[#d8d8d8]"),value:p,onChange:t=>{_(t.target.value),g("")}}),C&&(0,e.jsx)(n.Text,{className:"mt-[4px] text-[12px] text-[#f84d4f]",html:C})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:a.birthday}),(0,e.jsx)("input",{className:"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none",type:"date",value:c,onChange:t=>B(t.target.value)})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:a.phone}),(0,e.jsx)("input",{className:"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none",value:b,onChange:t=>E(t.target.value)})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:a.country}),(0,e.jsx)("select",{className:"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none",value:x,onChange:t=>N(t.target.value),children:f.map(t=>(0,e.jsx)("option",{value:t.id,children:t.name},t.id))})]}),(0,e.jsxs)("div",{className:"flex gap-[12px]",children:[(0,e.jsx)(n.Button,{variant:"secondary",size:"lg",className:"flex-1",onClick:s,disabled:q,children:a.cancel}),(0,e.jsx)(n.Button,{variant:"primary",size:"lg",className:"flex-1",loading:q,onClick:I,children:a.save})]})]})})}
|
|
2
|
-
//# sourceMappingURL=CompleteProfileModal.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/CompleteProfileModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Text } from '@anker-in/headless-ui'\nimport { classNames as cn } from '@anker-in/lib'\nimport { CreditsModalContainer } from '../../../credits/modal/ModalContainer'\nimport type { CompleteProfileCopy } from '../../type'\nimport { useUpdateProfile } from './hooks/useUpdateProfile'\nimport useCountries from '../../../credits/context/hooks/useCountries'\nimport { useMemberPopupContext } from '../../context/provider'\n\ntype Props = {\n isOpen: boolean\n onClose: () => void\n onSuccess?: () => void\n copy: CompleteProfileCopy\n shopifyStoreDomain?: string\n}\n\nexport function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain = '' }: Props) {\n const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()\n const { locale } = alpcConfig\n\n const [firstName, setFirstName] = useState('')\n const [lastName, setLastName] = useState('')\n const [phone, setPhone] = useState('')\n const [birthDay, setBirthDay] = useState('')\n const [country, setCountry] = useState('')\n const [firstNameError, setFirstNameError] = useState('')\n const [lastNameError, setLastNameError] = useState('')\n\n const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })\n const { countries } = useCountries({ shopifyStoreDomain })\n\n useEffect(() => {\n if (profile) {\n setFirstName(profile.first_name ?? '')\n setLastName(profile.last_name ?? '')\n setPhone(profile.phone_number ?? '')\n setBirthDay(profile.dob ?? '')\n setCountry(profile.country?.id ?? '')\n }\n }, [profile])\n\n useEffect(() => {\n if (countries.length > 0 && !country) {\n setCountry(countries[0].id)\n }\n }, [countries])\n\n const validate = useCallback(() => {\n let hasError = false\n if (!firstName.trim()) {\n setFirstNameError(copy.required)\n hasError = true\n } else {\n setFirstNameError('')\n }\n if (!lastName.trim()) {\n setLastNameError(copy.required)\n hasError = true\n } else {\n setLastNameError('')\n }\n return hasError\n }, [firstName, lastName, copy.required])\n\n const handleSubmit = useCallback(async () => {\n if (validate()) return\n const success = await updateProfile({\n first_name: firstName.trim(),\n last_name: lastName.trim(),\n phone_number: phone,\n country,\n dob: birthDay,\n })\n if (success) {\n fetchCreditInfo(profile?.user_id)\n onSuccess?.()\n onClose()\n }\n }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])\n\n return (\n <CreditsModalContainer\n isOpen={isOpen}\n onClose={onClose}\n title={copy.title}\n titleClassName=\"!h-auto !border-b-0 !pb-0\"\n className=\"w-[540px] md:h-auto\"\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n >\n <div className=\"flex flex-col gap-[20px]\">\n {copy.subtitle && (\n <Text className=\"text-[14px] text-[#1d1d1f]\" html={copy.subtitle} />\n )}\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">{copy.email}</label>\n <input\n className=\"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]\"\n value={profile?.email ?? ''}\n disabled\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">\n {copy.firstName} <span className=\"text-[#f84d4f]\">*</span>\n </label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',\n firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'\n )}\n value={firstName}\n onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}\n />\n {firstNameError && <Text className=\"mt-[4px] text-[12px] text-[#f84d4f]\" html={firstNameError} />}\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">\n {copy.lastName} <span className=\"text-[#f84d4f]\">*</span>\n </label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',\n lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'\n )}\n value={lastName}\n onChange={e => { setLastName(e.target.value); setLastNameError('') }}\n />\n {lastNameError && <Text className=\"mt-[4px] text-[12px] text-[#f84d4f]\" html={lastNameError} />}\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">{copy.birthday}</label>\n <input\n className=\"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none\"\n type=\"date\"\n value={birthDay}\n onChange={e => setBirthDay(e.target.value)}\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">{copy.phone}</label>\n <input\n className=\"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none\"\n value={phone}\n onChange={e => setPhone(e.target.value)}\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">{copy.country}</label>\n <select\n className=\"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none\"\n value={country}\n onChange={e => setCountry(e.target.value)}\n >\n {countries.map((c: { id: string; name: string }) => (\n <option key={c.id} value={c.id}>{c.name}</option>\n ))}\n </select>\n </div>\n\n <div className=\"flex gap-[12px]\">\n <Button\n variant=\"secondary\"\n size=\"lg\"\n className=\"flex-1\"\n onClick={onClose}\n disabled={isLoading}\n >\n {copy.cancel}\n </Button>\n <Button\n variant=\"primary\"\n size=\"lg\"\n className=\"flex-1\"\n loading={isLoading}\n onClick={handleSubmit}\n >\n {copy.save}\n </Button>\n </div>\n </div>\n </CreditsModalContainer>\n )\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["CompleteProfileModal_exports", "__export", "CompleteProfileModal", "__toCommonJS", "import_jsx_runtime", "import_react", "import_headless_ui", "import_lib", "import_ModalContainer", "import_useUpdateProfile", "import_useCountries", "import_provider", "isOpen", "onClose", "onSuccess", "copy", "shopifyStoreDomain", "profile", "fetchCreditInfo", "alpcConfig", "locale", "firstName", "setFirstName", "lastName", "setLastName", "phone", "setPhone", "birthDay", "setBirthDay", "country", "setCountry", "firstNameError", "setFirstNameError", "lastNameError", "setLastNameError", "updateProfile", "isLoading", "countries", "useCountries", "validate", "hasError", "handleSubmit", "cn", "e", "c"]
|
|
7
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { CompleteProfileCopy } from '../../type';
|
|
2
|
-
type Props = {
|
|
3
|
-
isOpen: boolean;
|
|
4
|
-
onClose: () => void;
|
|
5
|
-
onSuccess?: () => void;
|
|
6
|
-
copy: CompleteProfileCopy;
|
|
7
|
-
shopifyStoreDomain?: string;
|
|
8
|
-
};
|
|
9
|
-
export declare function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain }: Props): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useCallback as M,useEffect as q,useState as o}from"react";import{Button as D,Text as v}from"@anker-in/headless-ui";import{classNames as L}from"@anker-in/lib";import{CreditsModalContainer as A}from"../../../credits/modal/ModalContainer";import{useUpdateProfile as I}from"./hooks/useUpdateProfile";import T from"../../../credits/context/hooks/useCountries";import{useMemberPopupContext as U}from"../../context/provider";function W({isOpen:S,onClose:i,onSuccess:h,copy:a,shopifyStoreDomain:z=""}){const{profile:l,fetchCreditInfo:C,alpcConfig:g}=U(),{locale:F}=g,[r,k]=o(""),[d,P]=o(""),[p,w]=o(""),[x,y]=o(""),[n,f]=o(""),[u,b]=o(""),[c,N]=o(""),{updateProfile:_,isLoading:E}=I({locale:F,appName:g.appName}),{countries:m}=T({shopifyStoreDomain:z});q(()=>{l&&(k(l.first_name??""),P(l.last_name??""),w(l.phone_number??""),y(l.dob??""),f(l.country?.id??""))},[l]),q(()=>{m.length>0&&!n&&f(m[0].id)},[m]);const B=M(()=>{let t=!1;return r.trim()?b(""):(b(a.required),t=!0),d.trim()?N(""):(N(a.required),t=!0),t},[r,d,a.required]),O=M(async()=>{if(B())return;await _({first_name:r.trim(),last_name:d.trim(),phone_number:p,country:n,dob:x})&&(C(l?.user_id),h?.(),i())},[B,_,r,d,p,n,x,C,l,h,i]);return e(A,{isOpen:S,onClose:i,title:a.title,titleClassName:"!h-auto !border-b-0 !pb-0",className:"w-[540px] md:h-auto",useAnimation:!0,animationClassName:"md:translate-y-[100vh]",children:s("div",{className:"flex flex-col gap-[20px]",children:[a.subtitle&&e(v,{className:"text-[14px] text-[#1d1d1f]",html:a.subtitle}),s("div",{children:[e("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:a.email}),e("input",{className:"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]",value:l?.email??"",disabled:!0})]}),s("div",{children:[s("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:[a.firstName," ",e("span",{className:"text-[#f84d4f]",children:"*"})]}),e("input",{className:L("mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none",u?"border-[#f84d4f]":"border-[#d8d8d8]"),value:r,onChange:t=>{k(t.target.value),b("")}}),u&&e(v,{className:"mt-[4px] text-[12px] text-[#f84d4f]",html:u})]}),s("div",{children:[s("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:[a.lastName," ",e("span",{className:"text-[#f84d4f]",children:"*"})]}),e("input",{className:L("mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none",c?"border-[#f84d4f]":"border-[#d8d8d8]"),value:d,onChange:t=>{P(t.target.value),N("")}}),c&&e(v,{className:"mt-[4px] text-[12px] text-[#f84d4f]",html:c})]}),s("div",{children:[e("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:a.birthday}),e("input",{className:"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none",type:"date",value:x,onChange:t=>y(t.target.value)})]}),s("div",{children:[e("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:a.phone}),e("input",{className:"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none",value:p,onChange:t=>w(t.target.value)})]}),s("div",{children:[e("label",{className:"block text-[14px] font-semibold text-[#1d1d1f]",children:a.country}),e("select",{className:"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none",value:n,onChange:t=>f(t.target.value),children:m.map(t=>e("option",{value:t.id,children:t.name},t.id))})]}),s("div",{className:"flex gap-[12px]",children:[e(D,{variant:"secondary",size:"lg",className:"flex-1",onClick:i,disabled:E,children:a.cancel}),e(D,{variant:"primary",size:"lg",className:"flex-1",loading:E,onClick:O,children:a.save})]})]})})}export{W as CompleteProfileModal};
|
|
2
|
-
//# sourceMappingURL=CompleteProfileModal.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/CompleteProfileModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Text } from '@anker-in/headless-ui'\nimport { classNames as cn } from '@anker-in/lib'\nimport { CreditsModalContainer } from '../../../credits/modal/ModalContainer'\nimport type { CompleteProfileCopy } from '../../type'\nimport { useUpdateProfile } from './hooks/useUpdateProfile'\nimport useCountries from '../../../credits/context/hooks/useCountries'\nimport { useMemberPopupContext } from '../../context/provider'\n\ntype Props = {\n isOpen: boolean\n onClose: () => void\n onSuccess?: () => void\n copy: CompleteProfileCopy\n shopifyStoreDomain?: string\n}\n\nexport function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain = '' }: Props) {\n const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()\n const { locale } = alpcConfig\n\n const [firstName, setFirstName] = useState('')\n const [lastName, setLastName] = useState('')\n const [phone, setPhone] = useState('')\n const [birthDay, setBirthDay] = useState('')\n const [country, setCountry] = useState('')\n const [firstNameError, setFirstNameError] = useState('')\n const [lastNameError, setLastNameError] = useState('')\n\n const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })\n const { countries } = useCountries({ shopifyStoreDomain })\n\n useEffect(() => {\n if (profile) {\n setFirstName(profile.first_name ?? '')\n setLastName(profile.last_name ?? '')\n setPhone(profile.phone_number ?? '')\n setBirthDay(profile.dob ?? '')\n setCountry(profile.country?.id ?? '')\n }\n }, [profile])\n\n useEffect(() => {\n if (countries.length > 0 && !country) {\n setCountry(countries[0].id)\n }\n }, [countries])\n\n const validate = useCallback(() => {\n let hasError = false\n if (!firstName.trim()) {\n setFirstNameError(copy.required)\n hasError = true\n } else {\n setFirstNameError('')\n }\n if (!lastName.trim()) {\n setLastNameError(copy.required)\n hasError = true\n } else {\n setLastNameError('')\n }\n return hasError\n }, [firstName, lastName, copy.required])\n\n const handleSubmit = useCallback(async () => {\n if (validate()) return\n const success = await updateProfile({\n first_name: firstName.trim(),\n last_name: lastName.trim(),\n phone_number: phone,\n country,\n dob: birthDay,\n })\n if (success) {\n fetchCreditInfo(profile?.user_id)\n onSuccess?.()\n onClose()\n }\n }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])\n\n return (\n <CreditsModalContainer\n isOpen={isOpen}\n onClose={onClose}\n title={copy.title}\n titleClassName=\"!h-auto !border-b-0 !pb-0\"\n className=\"w-[540px] md:h-auto\"\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n >\n <div className=\"flex flex-col gap-[20px]\">\n {copy.subtitle && (\n <Text className=\"text-[14px] text-[#1d1d1f]\" html={copy.subtitle} />\n )}\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">{copy.email}</label>\n <input\n className=\"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]\"\n value={profile?.email ?? ''}\n disabled\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">\n {copy.firstName} <span className=\"text-[#f84d4f]\">*</span>\n </label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',\n firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'\n )}\n value={firstName}\n onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}\n />\n {firstNameError && <Text className=\"mt-[4px] text-[12px] text-[#f84d4f]\" html={firstNameError} />}\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">\n {copy.lastName} <span className=\"text-[#f84d4f]\">*</span>\n </label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',\n lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'\n )}\n value={lastName}\n onChange={e => { setLastName(e.target.value); setLastNameError('') }}\n />\n {lastNameError && <Text className=\"mt-[4px] text-[12px] text-[#f84d4f]\" html={lastNameError} />}\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">{copy.birthday}</label>\n <input\n className=\"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none\"\n type=\"date\"\n value={birthDay}\n onChange={e => setBirthDay(e.target.value)}\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">{copy.phone}</label>\n <input\n className=\"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none\"\n value={phone}\n onChange={e => setPhone(e.target.value)}\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-semibold text-[#1d1d1f]\">{copy.country}</label>\n <select\n className=\"mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none\"\n value={country}\n onChange={e => setCountry(e.target.value)}\n >\n {countries.map((c: { id: string; name: string }) => (\n <option key={c.id} value={c.id}>{c.name}</option>\n ))}\n </select>\n </div>\n\n <div className=\"flex gap-[12px]\">\n <Button\n variant=\"secondary\"\n size=\"lg\"\n className=\"flex-1\"\n onClick={onClose}\n disabled={isLoading}\n >\n {copy.cancel}\n </Button>\n <Button\n variant=\"primary\"\n size=\"lg\"\n className=\"flex-1\"\n loading={isLoading}\n onClick={handleSubmit}\n >\n {copy.save}\n </Button>\n </div>\n </div>\n </CreditsModalContainer>\n )\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["jsx", "jsxs", "useCallback", "useEffect", "useState", "Button", "Text", "cn", "CreditsModalContainer", "useUpdateProfile", "useCountries", "useMemberPopupContext", "CompleteProfileModal", "isOpen", "onClose", "onSuccess", "copy", "shopifyStoreDomain", "profile", "fetchCreditInfo", "alpcConfig", "locale", "firstName", "setFirstName", "lastName", "setLastName", "phone", "setPhone", "birthDay", "setBirthDay", "country", "setCountry", "firstNameError", "setFirstNameError", "lastNameError", "setLastNameError", "updateProfile", "isLoading", "countries", "validate", "hasError", "handleSubmit", "e", "c"]
|
|
7
|
-
}
|