@blocklet/payment-react 1.18.22 → 1.18.24

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 (7) hide show
  1. package/es/payment/form/index.js +68 -29
  2. package/es/payment/product-donation.js +17 -25
  3. package/lib/payment/form/index.js +67 -26
  4. package/lib/payment/product-donation.js +19 -33
  5. package/package.json +6 -6
  6. package/src/payment/form/index.tsx +70 -28
  7. package/src/payment/product-donation.tsx +18 -25
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/me?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/es/payment/product-donation.js CHANGED
@@ -52,12 +52,6 @@ export default function ProductDonation({
52
52
  const middleIndex = Math.floor(presets.length / 2);
53
53
  return presets[middleIndex];
54
54
  }
55
- if (settings?.amount?.preset) {
56
- return formatAmount(settings.amount.preset);
57
- }
58
- if (presets.length > 0) {
59
- return presets[0];
60
- }
61
55
  return "0";
62
56
  };
63
57
  const supportPreset = presets.length > 0;
@@ -106,26 +100,24 @@ export default function ProductDonation({
106
100
  containerRef
107
101
  });
108
102
  useEffect(() => {
109
- if (settings.amount.preset) {
110
- setState({ selected: settings.amount.preset, custom: false });
111
- onChange({ priceId: item.price_id, amount: settings.amount.preset });
112
- } else if (settings.amount.presets && settings.amount.presets.length > 0) {
113
- const isCustom = defaultPreset === "custom";
114
- setState({
115
- selected: isCustom ? "" : defaultPreset,
116
- custom: isCustom,
117
- input: isCustom ? getSavedCustomAmount() : ""
118
- });
119
- if (!isCustom) {
120
- onChange({ priceId: item.price_id, amount: defaultPreset });
121
- } else if (defaultCustomAmount) {
122
- onChange({ priceId: item.price_id, amount: defaultCustomAmount });
123
- setPayable(true);
124
- } else {
125
- setPayable(false);
126
- }
103
+ const currentPreset = getDefaultPreset();
104
+ const isCustom = currentPreset === "custom";
105
+ setState({
106
+ selected: isCustom ? "" : currentPreset,
107
+ custom: !supportPreset || currentPreset === "custom",
108
+ input: defaultCustomAmount,
109
+ error: ""
110
+ });
111
+ if (!isCustom) {
112
+ onChange({ priceId: item.price_id, amount: currentPreset });
113
+ setPayable(true);
114
+ } else if (defaultCustomAmount) {
115
+ onChange({ priceId: item.price_id, amount: defaultCustomAmount });
116
+ setPayable(true);
117
+ } else {
118
+ setPayable(false);
127
119
  }
128
- }, [settings.amount.preset, settings.amount.presets]);
120
+ }, [settings.amount.preset, settings.amount.presets, supportPreset]);
129
121
  useEffect(() => {
130
122
  if (containerRef.current) {
131
123
  containerRef.current.focus();
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/me?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/lib/payment/product-donation.js CHANGED
@@ -64,12 +64,6 @@ function ProductDonation({
64
64
  const middleIndex = Math.floor(presets.length / 2);
65
65
  return presets[middleIndex];
66
66
  }
67
- if (settings?.amount?.preset) {
68
- return formatAmount(settings.amount.preset);
69
- }
70
- if (presets.length > 0) {
71
- return presets[0];
72
- }
73
67
  return "0";
74
68
  };
75
69
  const supportPreset = presets.length > 0;
@@ -136,38 +130,30 @@ function ProductDonation({
136
130
  containerRef
137
131
  });
138
132
  (0, _react.useEffect)(() => {
139
- if (settings.amount.preset) {
140
- setState({
141
- selected: settings.amount.preset,
142
- custom: false
143
- });
133
+ const currentPreset = getDefaultPreset();
134
+ const isCustom = currentPreset === "custom";
135
+ setState({
136
+ selected: isCustom ? "" : currentPreset,
137
+ custom: !supportPreset || currentPreset === "custom",
138
+ input: defaultCustomAmount,
139
+ error: ""
140
+ });
141
+ if (!isCustom) {
144
142
  onChange({
145
143
  priceId: item.price_id,
146
- amount: settings.amount.preset
144
+ amount: currentPreset
147
145
  });
148
- } else if (settings.amount.presets && settings.amount.presets.length > 0) {
149
- const isCustom = defaultPreset === "custom";
150
- setState({
151
- selected: isCustom ? "" : defaultPreset,
152
- custom: isCustom,
153
- input: isCustom ? getSavedCustomAmount() : ""
146
+ setPayable(true);
147
+ } else if (defaultCustomAmount) {
148
+ onChange({
149
+ priceId: item.price_id,
150
+ amount: defaultCustomAmount
154
151
  });
155
- if (!isCustom) {
156
- onChange({
157
- priceId: item.price_id,
158
- amount: defaultPreset
159
- });
160
- } else if (defaultCustomAmount) {
161
- onChange({
162
- priceId: item.price_id,
163
- amount: defaultCustomAmount
164
- });
165
- setPayable(true);
166
- } else {
167
- setPayable(false);
168
- }
152
+ setPayable(true);
153
+ } else {
154
+ setPayable(false);
169
155
  }
170
- }, [settings.amount.preset, settings.amount.presets]);
156
+ }, [settings.amount.preset, settings.amount.presets, supportPreset]);
171
157
  (0, _react.useEffect)(() => {
172
158
  if (containerRef.current) {
173
159
  containerRef.current.focus();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.18.22",
3
+ "version": "1.18.24",
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.48",
58
+ "@arcblock/ux": "^2.12.48",
59
59
  "@arcblock/ws": "^1.19.15",
60
- "@blocklet/ui-react": "^2.12.43",
60
+ "@blocklet/ui-react": "^2.12.48",
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.22",
96
+ "@blocklet/payment-types": "1.18.24",
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": "844883f56da79c1222fc5aa1b445abb2859e3230"
127
+ "gitHead": "6c36b088743e696ce250cda11f8502b3886df0ef"
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/me?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
  }
package/src/payment/product-donation.tsx CHANGED
@@ -65,12 +65,6 @@ export default function ProductDonation({
65
65
  const middleIndex = Math.floor(presets.length / 2);
66
66
  return presets[middleIndex];
67
67
  }
68
- if (settings?.amount?.preset) {
69
- return formatAmount(settings.amount.preset);
70
- }
71
- if (presets.length > 0) {
72
- return presets[0];
73
- }
74
68
  return '0';
75
69
  };
76
70
 
@@ -128,27 +122,26 @@ export default function ProductDonation({
128
122
  });
129
123
 
130
124
  useEffect(() => {
131
- if (settings.amount.preset) {
132
- setState({ selected: settings.amount.preset, custom: false });
133
- onChange({ priceId: item.price_id, amount: settings.amount.preset });
134
- } else if (settings.amount.presets && settings.amount.presets.length > 0) {
135
- const isCustom = defaultPreset === 'custom';
136
- setState({
137
- selected: isCustom ? '' : defaultPreset,
138
- custom: isCustom,
139
- input: isCustom ? getSavedCustomAmount() : '',
140
- });
125
+ const currentPreset = getDefaultPreset();
126
+ const isCustom = currentPreset === 'custom';
141
127
 
142
- if (!isCustom) {
143
- onChange({ priceId: item.price_id, amount: defaultPreset });
144
- } else if (defaultCustomAmount) {
145
- onChange({ priceId: item.price_id, amount: defaultCustomAmount });
146
- setPayable(true);
147
- } else {
148
- setPayable(false);
149
- }
128
+ setState({
129
+ selected: isCustom ? '' : currentPreset,
130
+ custom: !supportPreset || currentPreset === 'custom',
131
+ input: defaultCustomAmount,
132
+ error: '',
133
+ });
134
+
135
+ if (!isCustom) {
136
+ onChange({ priceId: item.price_id, amount: currentPreset });
137
+ setPayable(true);
138
+ } else if (defaultCustomAmount) {
139
+ onChange({ priceId: item.price_id, amount: defaultCustomAmount });
140
+ setPayable(true);
141
+ } else {
142
+ setPayable(false);
150
143
  }
151
- }, [settings.amount.preset, settings.amount.presets]); // eslint-disable-line
144
+ }, [settings.amount.preset, settings.amount.presets, supportPreset]); // eslint-disable-line
152
145
 
153
146
  useEffect(() => {
154
147
  if (containerRef.current) {