@akinon/next 2.0.104-rc.0 → 2.0.104

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/CHANGELOG.md CHANGED
@@ -1,36 +1,12 @@
1
1
  # @akinon/next
2
2
 
3
- ## 2.0.104-rc.0
3
+ ## 2.0.104
4
4
 
5
5
  ### Patch Changes
6
6
 
7
- - 86187b1c: ZERO-4879: Repair sync-merge corruption in default middleware and server data loaders — remove a duplicated block that left an unbalanced brace, and restore the awaited `result` binding the payload optimization reads
8
- - 0cf9ea239: BRDG-16491: Prevent redirect when iframe payment is active
9
- - 324f97d55: ZERO-4219: replace masterpass-rest-complete with masterpass-rest-callback
10
- - 51ea06888: ZERO-4377: Fix checkout card type state being cleared after valid bin number responses.
11
- - ZERO-4160: Enhance oauth-login middleware with improved request handling and logging
12
- - 2fea41430: ZERO-4620: Add runtime access to `NEXT_PUBLIC_*` environment variables from Client Components
13
- - b55acb768: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
14
- - 760258c1c: ZERO-4160: Enhance oauth-login middleware to handle fetch errors and improve response handling
15
- - 143be2b9d: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
16
- - 7889b08fe: ZERO-4276: Enhance route generation by adding .env loading and custom skip segments support
17
- - 9f8cd3bc5: ZERO-3449: AI Search Active Filters & Crop Style changes have been implemented
18
- - bfafa3f49: ZERO-4160: Refactor oauth-login middleware to use fetchCommerce for API calls and improve cookie handling
19
- - 57d7eb305: ZERO-4276: Refactor route generation logic by removing environment loading and simplifying skip segments handling
20
- - d99a6a7d5: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
21
- - 9db81a714: ZERO-4365: Remove brand `@theme/*` alias imports from library packages
22
- - 591e345e1: ZERO-3855: Enhance credit card payment handling in checkout middlewares
23
- - 4de5303c5: ZERO-2504: add cookie filter to api client request
24
- - 95b139dc1: ZERO-3795: Remove duplicate entry for SavedCard in PluginComponents map
25
- - 1d00f2d06: BRDG-16664: Set secure flag for CSRF token cookies in useCaptcha and default middleware
26
- - 4ac7b2a1e: ZERO-4219: fix masterpass-rest callback route format and double-encoded error cookie
27
- - e9598c71d: ZERO-4622: Images remotePatterns for improved readability
28
- - 4998a9631: ZERO-4168: Add server-side payload optimization
29
- - 804d2bd6c: ZERO-4536: Add akinon.net domain to CSP frame-ancestors directive
30
- - 3909d3224: Edit the duplicate Plugin.SimilarProducts in the plugin-module.
31
- - 6a3d8a631: ZERO-4541: Fix URL query string formatting in getOrders and getOldOrders functions
32
- - e18836b20: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
33
- - b1111d7b1: ZERO-4841: Guard `withPrettyUrl` against calling `String.prototype.replace` with an `undefined` locale prefix on projects without a URL locale prefix (e.g. `HideDefaultLocale`) — previously this coerced to the literal string `"undefined"` and silently stripped a trailing `/undefined` segment from the path before the pretty-url lookup, causing bogus URLs like `/{product-slug}/undefined` to resolve and rewrite to the real product page (200) instead of 404
7
+ - cf621e2: ZERO-4866: Fix register getting stuck with no error after successful signup
8
+
9
+ The login/register credentials provider threw an uncaught SyntaxError whenever the backend returned a non-JSON body (e.g. an HTML error page on a 500/502), surfacing NextAuth's opaque "Configuration" error instead of a usable one; it also only ever read one Set-Cookie response header, missing the osessionid/csrftoken cookie depending on header order, and dropped the session entirely after register/OTP since those flows upgrade the existing anonymous osessionid in place instead of rotating it. getCaptcha also threw when the backend had no reCAPTCHA site key configured. All four are fixed: JSON parsing failures throw a clean auth error, every Set-Cookie header is read, the pre-request session id is used as a fallback after register/OTP, and a missing site key now falls back to an empty string.
34
10
 
35
11
  ## 2.0.103
36
12
 
package/api/auth.ts CHANGED
@@ -225,12 +225,31 @@ const getDefaultAuthConfig = () => {
225
225
  }
226
226
  );
227
227
 
228
- const body = (await request.json()) as {
228
+ let body: {
229
229
  key: string;
230
230
  non_field_errors: string[];
231
231
  redirect_url: string;
232
232
  };
233
233
 
234
+ try {
235
+ body = await request.json();
236
+ } catch {
237
+ // Backend returned a non-JSON body (e.g. an HTML error page on
238
+ // a 500/502) — surface a clean auth error instead of letting
239
+ // the SyntaxError bubble up as an opaque "Configuration" error
240
+ // (ZERO-4866).
241
+ logger.warn(
242
+ `Login/Register response was not valid JSON (status ${request.status})`,
243
+ { userIp }
244
+ );
245
+ throwAuthError([
246
+ {
247
+ type: 'non_field_errors',
248
+ data: ['Something went wrong. Please try again later.']
249
+ }
250
+ ]);
251
+ }
252
+
234
253
  return { request, body };
235
254
  };
236
255
 
@@ -274,17 +293,32 @@ const getDefaultAuthConfig = () => {
274
293
 
275
294
  let sessionId = '';
276
295
  let rotatedCsrfToken = '';
277
- const setCookieHeader = apiRequest.headers.get('set-cookie');
278
- if (setCookieHeader) {
279
- sessionId =
280
- setCookieHeader
281
- .match(/osessionid=\w+/)?.[0]
282
- .replace(/osessionid=/, '') || '';
283
- rotatedCsrfToken =
284
- setCookieHeader
285
- .match(/csrftoken=[^;,\s]+/)?.[0]
286
- .replace(/csrftoken=/, '') || '';
296
+ // Headers.get('set-cookie') only ever returns ONE of potentially
297
+ // several Set-Cookie response headers (csrftoken, osessionid,
298
+ // sessionid, ...) — getSetCookie() (when available) returns all of
299
+ // them, so the osessionid/csrftoken cookies aren't missed
300
+ // depending on header order (ZERO-4866).
301
+ const setCookieHeaders =
302
+ typeof apiRequest.headers.getSetCookie === 'function'
303
+ ? apiRequest.headers.getSetCookie()
304
+ : [apiRequest.headers.get('set-cookie')].filter(Boolean);
305
+
306
+ for (const cookieHeader of setCookieHeaders) {
307
+ if (!sessionId) {
308
+ const sessionMatch = cookieHeader?.match(/osessionid=\w+/)?.[0];
309
+ if (sessionMatch) {
310
+ sessionId = sessionMatch.replace('osessionid=', '');
311
+ }
312
+ }
313
+ if (!rotatedCsrfToken) {
314
+ const csrfMatch = cookieHeader?.match(/csrftoken=[^;,\s]+/)?.[0];
315
+ if (csrfMatch) {
316
+ rotatedCsrfToken = csrfMatch.replace('csrftoken=', '');
317
+ }
318
+ }
319
+ }
287
320
 
321
+ if (sessionId) {
288
322
  logger.debug(`Login/Register session id: ${sessionId}`);
289
323
  } else {
290
324
  logger.warn('No set-cookie header found in response');
@@ -341,8 +375,14 @@ const getDefaultAuthConfig = () => {
341
375
  }
342
376
  }
343
377
 
378
+ // Register/OTP responses don't rotate the session cookie — the
379
+ // backend upgrades the shopper's existing anonymous osessionid in
380
+ // place instead of issuing a new one, so no Set-Cookie is present
381
+ // here. Falling back to the pre-request session id keeps this
382
+ // working for those flows (login always rotates it, so sessionId
383
+ // still wins there) (ZERO-4866).
344
384
  const currentUser = await getCurrentUser(
345
- sessionId,
385
+ sessionId || existingSessionId || '',
346
386
  cookieStore.get('pz-currency')?.value ?? ''
347
387
  );
348
388
  return currentUser;
@@ -531,12 +571,31 @@ const defaultNextAuthOptionsV4 = (req: any, res: any) => {
531
571
  }
532
572
  );
533
573
 
534
- const body = (await request.json()) as {
574
+ let body: {
535
575
  key: string;
536
576
  non_field_errors: string[];
537
577
  redirect_url: string;
538
578
  };
539
579
 
580
+ try {
581
+ body = await request.json();
582
+ } catch {
583
+ // Backend returned a non-JSON body (e.g. an HTML error page on
584
+ // a 500/502) — surface a clean auth error instead of letting
585
+ // the SyntaxError bubble up as an opaque "Configuration" error
586
+ // (ZERO-4866).
587
+ logger.warn(
588
+ `Login/Register response was not valid JSON (status ${request.status})`,
589
+ { userIp }
590
+ );
591
+ throwAuthError([
592
+ {
593
+ type: 'non_field_errors',
594
+ data: ['Something went wrong. Please try again later.']
595
+ }
596
+ ]);
597
+ }
598
+
540
599
  return { request, body };
541
600
  };
542
601
 
@@ -579,13 +638,25 @@ const defaultNextAuthOptionsV4 = (req: any, res: any) => {
579
638
  logger.debug(`Login/Register response: ${JSON.stringify(response)}`);
580
639
 
581
640
  let sessionId = '';
582
- const setCookieHeader = apiRequest.headers.get('set-cookie');
583
- if (setCookieHeader) {
584
- sessionId =
585
- setCookieHeader
586
- .match(/osessionid=\w+/)?.[0]
587
- .replace(/osessionid=/, '') || '';
641
+ // Headers.get('set-cookie') only ever returns ONE of potentially
642
+ // several Set-Cookie response headers (csrftoken, osessionid,
643
+ // sessionid, ...) — getSetCookie() (when available) returns all of
644
+ // them, so the actual osessionid cookie isn't missed depending on
645
+ // header order (ZERO-4866).
646
+ const setCookieHeaders =
647
+ typeof apiRequest.headers.getSetCookie === 'function'
648
+ ? apiRequest.headers.getSetCookie()
649
+ : [apiRequest.headers.get('set-cookie')].filter(Boolean);
650
+
651
+ for (const cookieHeader of setCookieHeaders) {
652
+ const match = cookieHeader?.match(/osessionid=\w+/)?.[0];
653
+ if (match) {
654
+ sessionId = match.replace('osessionid=', '');
655
+ break;
656
+ }
657
+ }
588
658
 
659
+ if (sessionId) {
589
660
  logger.debug(`Login/Register session id: ${sessionId}`);
590
661
  } else {
591
662
  logger.warn('No set-cookie header found in response');
@@ -625,8 +696,14 @@ const defaultNextAuthOptionsV4 = (req: any, res: any) => {
625
696
  }
626
697
  }
627
698
 
699
+ // Register/OTP responses don't rotate the session cookie — the
700
+ // backend upgrades the shopper's existing anonymous osessionid in
701
+ // place instead of issuing a new one, so no Set-Cookie is present
702
+ // here. Falling back to the pre-request session id keeps this
703
+ // working for those flows (login always rotates it, so sessionId
704
+ // still wins there) (ZERO-4866).
628
705
  const currentUser = await getCurrentUser(
629
- sessionId,
706
+ sessionId || req.cookies['osessionid'] || '',
630
707
  req.cookies['pz-currency'] ?? ''
631
708
  );
632
709
  return currentUser;
@@ -6,7 +6,6 @@ const findBaseDir = require('../utils/find-base-dir');
6
6
 
7
7
  const generateRoutes = () => {
8
8
  const baseDir = findBaseDir();
9
-
10
9
  const srcDir = path.join(baseDir, 'src');
11
10
  const appDir = path.join(srcDir, 'app');
12
11
 
@@ -35,10 +34,8 @@ const generateRoutes = () => {
35
34
  '[segment]',
36
35
  '[url]',
37
36
  '[theme]',
38
- '[member_type]',
39
- '[clienttype]'
37
+ '[member_type]'
40
38
  ];
41
-
42
39
  const skipCatchAllRoutes = ['[...prettyurl]', '[...not_found]'];
43
40
 
44
41
  const walkDirectory = (dir, basePath = '') => {
@@ -116,6 +116,7 @@ const PluginComponents = new Map([
116
116
  ]
117
117
  ],
118
118
  [Plugin.SavedCard, [Component.SavedCard, Component.IyzicoSavedCard]],
119
+ [Plugin.SavedCard, [Component.SavedCard]],
119
120
  [Plugin.FlowPayment, [Component.FlowPayment]],
120
121
  [
121
122
  Plugin.VirtualTryOn,
@@ -718,6 +718,7 @@ export const checkoutApi = api.injectEndpoints({
718
718
  },
719
719
  async onQueryStarted(arg, { dispatch, queryFulfilled }) {
720
720
  dispatch(setPaymentStepBusy(true));
721
+ dispatch(setCardType(arg));
721
722
  await queryFulfilled;
722
723
  dispatch(setPaymentStepBusy(false));
723
724
  }
@@ -22,7 +22,12 @@ const userApi = api.injectEndpoints({
22
22
  getCaptcha: build.query<GetCaptchaResponse, void>({
23
23
  query: () => buildClientRequestUrl(user.captcha),
24
24
  transformResponse: (response: { html: string }) => {
25
- const siteKey = response.html.match(/data-sitekey="([^"]+)"/i)[1];
25
+ // Falls back to '' instead of throwing when the backend has no
26
+ // reCAPTCHA site key configured (data-sitekey="") — an empty
27
+ // siteKey is handled by the caller, whereas a thrown error here
28
+ // isn't (ZERO-4866).
29
+ const siteKey =
30
+ response.html.match(/data-sitekey="([^"]+)"/i)?.[1] || '';
26
31
 
27
32
  const csrfTokenMatch = response.html.match(
28
33
  /name=['|"]csrfmiddlewaretoken['|"] value=['|"][^'"]+/gi
@@ -26,19 +26,6 @@ interface GetFavoritesResponse {
26
26
  results: FavoriteItem[];
27
27
  }
28
28
 
29
- export interface FavouriteProductIdItem {
30
- product_id: number;
31
- favourite_id: number;
32
- }
33
-
34
- export interface GetFavouriteProductIdsResponse {
35
- favourite_products: FavouriteProductIdItem[];
36
- }
37
-
38
- interface GetFavouriteProductIdsParams {
39
- productIds: Array<number | string>;
40
- }
41
-
42
29
  interface AddFavoriteResponse {
43
30
  pk: number;
44
31
  product: number;
@@ -96,14 +83,6 @@ export const wishlistApi = api.injectEndpoints({
96
83
  buildClientRequestUrl(wishlist.getFavorites({ page, limit })),
97
84
  providesTags: ['Favorite']
98
85
  }),
99
- getFavouriteProductIds: build.query<
100
- GetFavouriteProductIdsResponse,
101
- GetFavouriteProductIdsParams
102
- >({
103
- query: ({ productIds }) =>
104
- buildClientRequestUrl(wishlist.getFavouriteProductIds(productIds)),
105
- providesTags: ['Favorite']
106
- }),
107
86
  addFavorite: build.mutation<AddFavoriteResponse, number>({
108
87
  query: (productPk: number) => ({
109
88
  url: buildClientRequestUrl(wishlist.addFavorite, {
@@ -217,7 +196,6 @@ export const wishlistApi = api.injectEndpoints({
217
196
 
218
197
  export const {
219
198
  useGetFavoritesQuery,
220
- useGetFavouriteProductIdsQuery,
221
199
  useAddFavoriteMutation,
222
200
  useRemoveFavoriteMutation,
223
201
  useAddStockAlertMutation,
@@ -8,8 +8,6 @@ import { parse } from 'lossless-json';
8
8
  import logger from '../../utils/log';
9
9
  import { headers as nHeaders } from 'next/headers';
10
10
  import { ServerVariables } from '../../utils/server-variables';
11
- import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
12
- import settings from 'settings';
13
11
 
14
12
  function getCategoryDataHandler(
15
13
  pk: number,
@@ -83,7 +81,7 @@ function getCategoryDataHandler(
83
81
  };
84
82
  }
85
83
 
86
- export const getCategoryData = async ({
84
+ export const getCategoryData = ({
87
85
  pk,
88
86
  searchParams,
89
87
  headers,
@@ -98,7 +96,7 @@ export const getCategoryData = async ({
98
96
  }) => {
99
97
  searchParams = normalizeSearchParams(searchParams);
100
98
 
101
- const result = await Cache.wrap(
99
+ return Cache.wrap(
102
100
  CacheKey.Category(pk, searchParams, headers),
103
101
  locale,
104
102
  getCategoryDataHandler(pk, locale, currency, searchParams, headers),
@@ -107,16 +105,6 @@ export const getCategoryData = async ({
107
105
  compressed: true
108
106
  }
109
107
  );
110
-
111
- if (settings.payloadOptimization?.enabled && result?.data) {
112
- try {
113
- return { ...result, data: optimizeCategoryResponse(result.data, settings.payloadOptimization) };
114
- } catch (e) {
115
- logger.error('Payload optimization failed for category', { pk, error: (e as Error).message });
116
- }
117
- }
118
-
119
- return result;
120
108
  };
121
109
 
122
110
  function getCategoryBySlugDataHandler(
@@ -7,8 +7,6 @@ import appFetch, { FetchResponseType } from '../../utils/app-fetch';
7
7
  import { parse } from 'lossless-json';
8
8
  import logger from '../../utils/log';
9
9
  import { ServerVariables } from '../../utils/server-variables';
10
- import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
11
- import settings from 'settings';
12
10
 
13
11
  const getListDataHandler = (
14
12
  locale,
@@ -71,7 +69,7 @@ export const getListData = async ({
71
69
  }) => {
72
70
  searchParams = normalizeSearchParams(searchParams);
73
71
 
74
- const result = await Cache.wrap(
72
+ return Cache.wrap(
75
73
  CacheKey.List(searchParams, headers),
76
74
  locale,
77
75
  getListDataHandler(locale, currency, searchParams, headers),
@@ -80,14 +78,4 @@ export const getListData = async ({
80
78
  compressed: true
81
79
  }
82
80
  );
83
-
84
- if (settings.payloadOptimization?.enabled && result) {
85
- try {
86
- return optimizeCategoryResponse(result, settings.payloadOptimization);
87
- } catch (e) {
88
- logger.error('Payload optimization failed for list', { error: (e as Error).message });
89
- }
90
- }
91
-
92
- return result;
93
81
  };
@@ -5,8 +5,6 @@ import appFetch from '../../utils/app-fetch';
5
5
  import { normalizeSearchParams } from '../../utils/normalize-search-params';
6
6
  import { ServerVariables } from '../../utils/server-variables';
7
7
  import logger from '../../utils/log';
8
- import { optimizeProductResponse } from '../../utils/payload-optimizer';
9
- import settings from 'settings';
10
8
 
11
9
  type GetProduct = {
12
10
  pk: number | string;
@@ -168,13 +166,5 @@ export const getProductData = async ({
168
166
  throw error;
169
167
  }
170
168
 
171
- if (settings.payloadOptimization?.enabled && result?.data) {
172
- try {
173
- return { ...result, data: optimizeProductResponse(result.data, settings.payloadOptimization) };
174
- } catch (e) {
175
- logger.error('Payload optimization failed for product', { pk, error: (e as Error).message });
176
- }
177
- }
178
-
179
169
  return result;
180
170
  };
@@ -5,9 +5,6 @@ import { generateCommerceSearchParams } from '../../utils';
5
5
  import { normalizeSearchParams } from '../../utils/normalize-search-params';
6
6
  import appFetch from '../../utils/app-fetch';
7
7
  import { ServerVariables } from '../../utils/server-variables';
8
- import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
9
- import logger from '../../utils/log';
10
- import settings from 'settings';
11
8
 
12
9
  const getSpecialPageDataHandler = (
13
10
  pk: number,
@@ -51,7 +48,7 @@ export const getSpecialPageData = async ({
51
48
  }) => {
52
49
  searchParams = normalizeSearchParams(searchParams);
53
50
 
54
- const result = await Cache.wrap(
51
+ return Cache.wrap(
55
52
  CacheKey.SpecialPage(pk, searchParams, headers),
56
53
  locale,
57
54
  getSpecialPageDataHandler(pk, locale, currency, searchParams, headers),
@@ -60,14 +57,4 @@ export const getSpecialPageData = async ({
60
57
  compressed: true
61
58
  }
62
59
  );
63
-
64
- if (settings.payloadOptimization?.enabled && result) {
65
- try {
66
- return optimizeCategoryResponse(result, settings.payloadOptimization);
67
- } catch (e) {
68
- logger.error('Payload optimization failed for special-page', { pk, error: (e as Error).message });
69
- }
70
- }
71
-
72
- return result;
73
60
  };
@@ -286,16 +286,6 @@ export const getWidgetData = async <T>({
286
286
  ...cacheOptions
287
287
  }
288
288
  );
289
-
290
- if (settings.payloadOptimization?.enabled && result) {
291
- try {
292
- return optimizeWidgetResponse(result, settings.payloadOptimization) as WidgetResultType<T>;
293
- } catch (e) {
294
- logger.error('Payload optimization failed for widget', { slug, error: (e as Error).message });
295
- }
296
- }
297
-
298
- return result as WidgetResultType<T>;
299
289
  };
300
290
 
301
291
  const getCollectionWidgetDataHandler =
package/data/urls.ts CHANGED
@@ -40,11 +40,10 @@ export const account = {
40
40
  shipping_option_slug
41
41
  ? `&shipping_option_slug${shipping_option_operator}${shipping_option_slug}`
42
42
  : ''
43
- }${currency ? `&currency=${currency}` : ''}${
44
- filterType && filterValue ? `&${filterType}=${filterValue}` : ''
45
- }`,
43
+ }${currency ? `&currency=${currency}` : ''}
44
+ ${filterType && filterValue ? `&${filterType}=${filterValue}` : ''}`,
46
45
  getOldOrders: ({ page, limit }: { page?: number; limit?: number }) =>
47
- `/users/old-orders/?page=${page || 1}&limit=${limit || 12}`,
46
+ `/users/old-orders/?page=${page || 1}&limit=${limit || 12}}`,
48
47
  getQuotations: (page?: number, status?: string, limit?: number) =>
49
48
  `/b2b/my-quotations/?page=${page || 1}` +
50
49
  (status ? `&status=${status}` : '') +
@@ -184,20 +183,12 @@ export const product = {
184
183
  breadcrumbUrl: (menuitemmodel: string) =>
185
184
  `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`,
186
185
  bundleProduct: (productPk: string, queryString: string) =>
187
- `/bundle-product/${productPk}/?${queryString}`,
188
- similarProducts: (params?: string) =>
189
- `/similar-products${params ? `?${params}` : ''}`,
190
- similarProductsList: (params?: string) =>
191
- `/similar-product-list${params ? `?${params}` : ''}`
186
+ `/bundle-product/${productPk}/?${queryString}`
192
187
  };
193
188
 
194
189
  export const wishlist = {
195
190
  getFavorites: ({ page, limit }: { page?: number; limit?: number }) =>
196
191
  `/wishlists/favourite-products/?limit=${limit || 12}&page=${page || 1}`,
197
- getFavouriteProductIds: (productIds: Array<number | string>) =>
198
- `/wishlists/favourite-product-ids/?${productIds
199
- .map((id) => `product_id=${id}`)
200
- .join('&')}`,
201
192
  addFavorite: '/wishlists/favourite-products/',
202
193
  removeFavorite: (favPk: number) => `/wishlists/favourite-products/${favPk}/`,
203
194
  addStockAlert: '/wishlists/product-alerts/',
package/hooks/index.ts CHANGED
@@ -15,4 +15,3 @@ export * from './use-logger-context';
15
15
  export * from './use-sentry-uncaught-errors';
16
16
  export * from './use-pz-params';
17
17
  export * from './use-toast';
18
- export * from './use-client-env';
@@ -39,7 +39,7 @@ export const useCaptcha = () => {
39
39
  };
40
40
 
41
41
  if (csrfToken) {
42
- setCookie('csrftoken', csrfToken, { secure: true });
42
+ setCookie('csrftoken', csrfToken);
43
43
  }
44
44
 
45
45
  const onCaptchaChange = useCallback(async (response) => {