@blocklet/payment-react 1.18.21 → 1.18.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/es/payment/form/index.js +68 -29
  2. package/lib/payment/form/index.js +67 -26
  3. package/package.json +6 -6
  4. package/src/payment/form/index.tsx +70 -28
package/es/payment/form/index.js CHANGED
@@ -66,7 +66,7 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
66
66
  "billing_address.line2": userInfo.address?.line2,
67
67
  "billing_address.city": userInfo.address?.city,
68
68
  "billing_address.postal_code": userInfo.address?.postal_code || userInfo.address?.postalCode,
69
- "billing_address.country": userInfo.address?.country
69
+ "billing_address.country": userInfo.address?.country || "us"
70
70
  };
71
71
  if (options.showPhone) {
72
72
  addressFields["billing_address.country"] = userInfo.metadata?.phone?.country || userInfo.address?.country;
@@ -151,33 +151,70 @@ export default function PaymentForm({
151
151
  subscription.on("invoice.paid", onInvoicePaid);
152
152
  }
153
153
  }, [subscription]);
154
+ const mergeUserInfo = (customerInfo, userInfo) => {
155
+ return {
156
+ ...userInfo || {},
157
+ name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
158
+ fullName: customerInfo?.name || userInfo?.fullName,
159
+ email: customerInfo?.email || userInfo?.email,
160
+ phone: customerInfo?.phone || userInfo?.phone,
161
+ address: {
162
+ ...userInfo?.address || {},
163
+ ...customerInfo?.address || {},
164
+ country: customerInfo?.address?.country || userInfo?.address?.country,
165
+ state: customerInfo?.address?.state || userInfo?.address?.province,
166
+ line1: customerInfo?.address?.line1 || userInfo?.address?.line1,
167
+ line2: customerInfo?.address?.line2 || userInfo?.address?.line2,
168
+ city: customerInfo?.address?.city || userInfo?.address?.city,
169
+ postal_code: customerInfo?.address?.postal_code || userInfo?.address?.postalCode
170
+ },
171
+ metadata: {
172
+ ...userInfo?.metadata || {},
173
+ phone: {
174
+ country: customerInfo?.address?.country || userInfo?.metadata?.phone?.country,
175
+ phoneNumber: customerInfo?.phone || userInfo?.metadata?.phone?.phoneNumber
176
+ }
177
+ }
178
+ };
179
+ };
154
180
  useEffect(() => {
155
- if (session?.user) {
156
- const values = getValues();
157
- setUserFormValues(session.user, values, setValue, {
158
- preferExisting: false,
159
- showPhone: checkoutSession.phone_number_collection?.enabled
160
- });
161
- } else {
162
- setUserFormValues(
163
- {
164
- name: "",
165
- email: "",
166
- phone: "",
167
- address: {
168
- state: "",
169
- line1: "",
170
- line2: "",
171
- city: "",
172
- postal_code: ""
173
- }
174
- },
175
- {},
176
- setValue,
177
- { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
178
- );
179
- }
180
- }, [session?.user, getValues, setValue, checkoutSession.phone_number_collection?.enabled]);
181
+ const initUserInfo = async () => {
182
+ if (session?.user) {
183
+ const values = getValues();
184
+ let userInfo = session.user;
185
+ try {
186
+ const { data: customerInfo } = await api.get(`/api/customers/${userInfo.did}?skipSummary=1&fallback=1`);
187
+ userInfo = mergeUserInfo(customerInfo, userInfo);
188
+ } catch (err) {
189
+ userInfo = mergeUserInfo(customer || {}, userInfo);
190
+ console.error(err);
191
+ }
192
+ setUserFormValues(userInfo, values, setValue, {
193
+ preferExisting: false,
194
+ showPhone: checkoutSession.phone_number_collection?.enabled
195
+ });
196
+ } else {
197
+ setUserFormValues(
198
+ {
199
+ name: "",
200
+ email: "",
201
+ phone: "",
202
+ address: {
203
+ state: "",
204
+ line1: "",
205
+ line2: "",
206
+ city: "",
207
+ postal_code: ""
208
+ }
209
+ },
210
+ {},
211
+ setValue,
212
+ { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
213
+ );
214
+ }
215
+ };
216
+ initUserInfo();
217
+ }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
181
218
  useEffect(() => {
182
219
  setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);
183
220
  setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
@@ -229,10 +266,12 @@ export default function PaymentForm({
229
266
  }
230
267
  }, [errors, isMobile]);
231
268
  const onUserLoggedIn = async () => {
232
- const { data: profile } = await api.get("/api/customers/me?fallback=1");
269
+ const { data: profile } = await api.get("/api/customers/me?fallback=1&skipSummary=1");
233
270
  if (profile) {
234
271
  const values = getValues();
235
- setUserFormValues(profile, values, setValue, {
272
+ const userInfo = mergeUserInfo(profile, session?.user);
273
+ setUserFormValues(userInfo, values, setValue, {
274
+ preferExisting: false,
236
275
  showPhone: checkoutSession.phone_number_collection?.enabled
237
276
  });
238
277
  }
package/lib/payment/form/index.js CHANGED
@@ -73,7 +73,7 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
73
73
  "billing_address.line2": userInfo.address?.line2,
74
74
  "billing_address.city": userInfo.address?.city,
75
75
  "billing_address.postal_code": userInfo.address?.postal_code || userInfo.address?.postalCode,
76
- "billing_address.country": userInfo.address?.country
76
+ "billing_address.country": userInfo.address?.country || "us"
77
77
  };
78
78
  if (options.showPhone) {
79
79
  addressFields["billing_address.country"] = userInfo.metadata?.phone?.country || userInfo.address?.country;
@@ -175,31 +175,70 @@ function PaymentForm({
175
175
  subscription.on("invoice.paid", onInvoicePaid);
176
176
  }
177
177
  }, [subscription]);
178
+ const mergeUserInfo = (customerInfo, userInfo) => {
179
+ return {
180
+ ...(userInfo || {}),
181
+ name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
182
+ fullName: customerInfo?.name || userInfo?.fullName,
183
+ email: customerInfo?.email || userInfo?.email,
184
+ phone: customerInfo?.phone || userInfo?.phone,
185
+ address: {
186
+ ...(userInfo?.address || {}),
187
+ ...(customerInfo?.address || {}),
188
+ country: customerInfo?.address?.country || userInfo?.address?.country,
189
+ state: customerInfo?.address?.state || userInfo?.address?.province,
190
+ line1: customerInfo?.address?.line1 || userInfo?.address?.line1,
191
+ line2: customerInfo?.address?.line2 || userInfo?.address?.line2,
192
+ city: customerInfo?.address?.city || userInfo?.address?.city,
193
+ postal_code: customerInfo?.address?.postal_code || userInfo?.address?.postalCode
194
+ },
195
+ metadata: {
196
+ ...(userInfo?.metadata || {}),
197
+ phone: {
198
+ country: customerInfo?.address?.country || userInfo?.metadata?.phone?.country,
199
+ phoneNumber: customerInfo?.phone || userInfo?.metadata?.phone?.phoneNumber
200
+ }
201
+ }
202
+ };
203
+ };
178
204
  (0, _react.useEffect)(() => {
179
- if (session?.user) {
180
- const values = getValues();
181
- setUserFormValues(session.user, values, setValue, {
182
- preferExisting: false,
183
- showPhone: checkoutSession.phone_number_collection?.enabled
184
- });
185
- } else {
186
- setUserFormValues({
187
- name: "",
188
- email: "",
189
- phone: "",
190
- address: {
191
- state: "",
192
- line1: "",
193
- line2: "",
194
- city: "",
195
- postal_code: ""
205
+ const initUserInfo = async () => {
206
+ if (session?.user) {
207
+ const values = getValues();
208
+ let userInfo = session.user;
209
+ try {
210
+ const {
211
+ data: customerInfo
212
+ } = await _api.default.get(`/api/customers/${userInfo.did}?skipSummary=1&fallback=1`);
213
+ userInfo = mergeUserInfo(customerInfo, userInfo);
214
+ } catch (err) {
215
+ userInfo = mergeUserInfo(customer || {}, userInfo);
216
+ console.error(err);
196
217
  }
197
- }, {}, setValue, {
198
- preferExisting: false,
199
- showPhone: checkoutSession.phone_number_collection?.enabled
200
- });
201
- }
202
- }, [session?.user, getValues, setValue, checkoutSession.phone_number_collection?.enabled]);
218
+ setUserFormValues(userInfo, values, setValue, {
219
+ preferExisting: false,
220
+ showPhone: checkoutSession.phone_number_collection?.enabled
221
+ });
222
+ } else {
223
+ setUserFormValues({
224
+ name: "",
225
+ email: "",
226
+ phone: "",
227
+ address: {
228
+ state: "",
229
+ line1: "",
230
+ line2: "",
231
+ city: "",
232
+ postal_code: ""
233
+ }
234
+ }, {}, setValue, {
235
+ preferExisting: false,
236
+ showPhone: checkoutSession.phone_number_collection?.enabled
237
+ });
238
+ }
239
+ };
240
+ initUserInfo();
241
+ }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
203
242
  (0, _react.useEffect)(() => {
204
243
  setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);
205
244
  setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
@@ -265,10 +304,12 @@ function PaymentForm({
265
304
  const onUserLoggedIn = async () => {
266
305
  const {
267
306
  data: profile
268
- } = await _api.default.get("/api/customers/me?fallback=1");
307
+ } = await _api.default.get("/api/customers/me?fallback=1&skipSummary=1");
269
308
  if (profile) {
270
309
  const values = getValues();
271
- setUserFormValues(profile, values, setValue, {
310
+ const userInfo = mergeUserInfo(profile, session?.user);
311
+ setUserFormValues(userInfo, values, setValue, {
312
+ preferExisting: false,
272
313
  showPhone: checkoutSession.phone_number_collection?.enabled
273
314
  });
274
315
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.18.21",
3
+ "version": "1.18.23",
4
4
  "description": "Reusable react components for payment kit v2",
5
5
  "keywords": [
6
6
  "react",
@@ -54,10 +54,10 @@
54
54
  }
55
55
  },
56
56
  "dependencies": {
57
- "@arcblock/did-connect": "^2.12.43",
58
- "@arcblock/ux": "^2.12.43",
57
+ "@arcblock/did-connect": "^2.12.44",
58
+ "@arcblock/ux": "^2.12.44",
59
59
  "@arcblock/ws": "^1.19.15",
60
- "@blocklet/ui-react": "^2.12.43",
60
+ "@blocklet/ui-react": "^2.12.44",
61
61
  "@mui/icons-material": "^5.16.6",
62
62
  "@mui/lab": "^5.0.0-alpha.173",
63
63
  "@mui/material": "^5.16.6",
@@ -93,7 +93,7 @@
93
93
  "@babel/core": "^7.25.2",
94
94
  "@babel/preset-env": "^7.25.2",
95
95
  "@babel/preset-react": "^7.24.7",
96
- "@blocklet/payment-types": "1.18.21",
96
+ "@blocklet/payment-types": "1.18.23",
97
97
  "@storybook/addon-essentials": "^7.6.20",
98
98
  "@storybook/addon-interactions": "^7.6.20",
99
99
  "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
124
124
  "vite-plugin-babel": "^1.2.0",
125
125
  "vite-plugin-node-polyfills": "^0.21.0"
126
126
  },
127
- "gitHead": "cf08902482dded20ee91402ed6d4678383965daf"
127
+ "gitHead": "4ffd236baa345ecd8facab1e71a6ed2491332fd4"
128
128
  }
package/src/payment/form/index.tsx CHANGED
@@ -124,7 +124,7 @@ const setUserFormValues = (
124
124
  'billing_address.line2': userInfo.address?.line2,
125
125
  'billing_address.city': userInfo.address?.city,
126
126
  'billing_address.postal_code': userInfo.address?.postal_code || userInfo.address?.postalCode,
127
- 'billing_address.country': userInfo.address?.country,
127
+ 'billing_address.country': userInfo.address?.country || 'us',
128
128
  };
129
129
 
130
130
  if (options.showPhone) {
@@ -239,33 +239,73 @@ export default function PaymentForm({
239
239
  }
240
240
  }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
241
241
 
242
+ const mergeUserInfo = (customerInfo: TCustomer, userInfo?: UserInfo): UserInfo => {
243
+ return {
244
+ ...(userInfo || {}),
245
+ name: customerInfo?.name || userInfo?.name || userInfo?.fullName,
246
+ fullName: customerInfo?.name || userInfo?.fullName,
247
+ email: customerInfo?.email || userInfo?.email,
248
+ phone: customerInfo?.phone || userInfo?.phone,
249
+ address: {
250
+ ...(userInfo?.address || {}),
251
+ ...(customerInfo?.address || {}),
252
+ country: customerInfo?.address?.country || userInfo?.address?.country,
253
+ state: customerInfo?.address?.state || userInfo?.address?.province,
254
+ line1: customerInfo?.address?.line1 || userInfo?.address?.line1,
255
+ line2: customerInfo?.address?.line2 || userInfo?.address?.line2,
256
+ city: customerInfo?.address?.city || userInfo?.address?.city,
257
+ postal_code: customerInfo?.address?.postal_code || userInfo?.address?.postalCode,
258
+ },
259
+ metadata: {
260
+ ...(userInfo?.metadata || {}),
261
+ phone: {
262
+ country: customerInfo?.address?.country || userInfo?.metadata?.phone?.country,
263
+ phoneNumber: customerInfo?.phone || userInfo?.metadata?.phone?.phoneNumber,
264
+ },
265
+ },
266
+ };
267
+ };
268
+
242
269
  useEffect(() => {
243
- if (session?.user) {
244
- const values = getValues();
245
- setUserFormValues(session.user, values, setValue, {
246
- preferExisting: false,
247
- showPhone: checkoutSession.phone_number_collection?.enabled,
248
- });
249
- } else {
250
- setUserFormValues(
251
- {
252
- name: '',
253
- email: '',
254
- phone: '',
255
- address: {
256
- state: '',
257
- line1: '',
258
- line2: '',
259
- city: '',
260
- postal_code: '',
270
+ const initUserInfo = async () => {
271
+ if (session?.user) {
272
+ const values = getValues();
273
+ let userInfo = session.user;
274
+ try {
275
+ const { data: customerInfo } = await api.get(`/api/customers/${userInfo.did}?skipSummary=1&fallback=1`);
276
+ userInfo = mergeUserInfo(customerInfo, userInfo);
277
+ } catch (err) {
278
+ // @ts-ignore
279
+ userInfo = mergeUserInfo(customer || {}, userInfo);
280
+ console.error(err);
281
+ }
282
+ setUserFormValues(userInfo, values, setValue, {
283
+ preferExisting: false,
284
+ showPhone: checkoutSession.phone_number_collection?.enabled,
285
+ });
286
+ } else {
287
+ setUserFormValues(
288
+ {
289
+ name: '',
290
+ email: '',
291
+ phone: '',
292
+ address: {
293
+ state: '',
294
+ line1: '',
295
+ line2: '',
296
+ city: '',
297
+ postal_code: '',
298
+ },
261
299
  },
262
- },
263
- {},
264
- setValue,
265
- { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
266
- );
267
- }
268
- }, [session?.user, getValues, setValue, checkoutSession.phone_number_collection?.enabled]);
300
+ {},
301
+ setValue,
302
+ { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
303
+ );
304
+ }
305
+ };
306
+ initUserInfo();
307
+ // eslint-disable-next-line react-hooks/exhaustive-deps
308
+ }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
269
309
 
270
310
  useEffect(() => {
271
311
  setValue('payment_method', (currencies[paymentCurrencyIndex] as any)?.method?.id);
@@ -337,10 +377,12 @@ export default function PaymentForm({
337
377
  }, [errors, isMobile]);
338
378
 
339
379
  const onUserLoggedIn = async () => {
340
- const { data: profile } = await api.get('/api/customers/me?fallback=1');
380
+ const { data: profile } = await api.get('/api/customers/me?fallback=1&skipSummary=1');
341
381
  if (profile) {
342
382
  const values = getValues();
343
- setUserFormValues(profile, values, setValue, {
383
+ const userInfo = mergeUserInfo(profile, session?.user);
384
+ setUserFormValues(userInfo, values, setValue, {
385
+ preferExisting: false,
344
386
  showPhone: checkoutSession.phone_number_collection?.enabled,
345
387
  });
346
388
  }