feat(storefront-data): add useCreateCustomer hook and fix Rules of Hooks

- Add createCustomer service method and useCreateCustomer hook to auth module
- Fix usePrefetchPages calling resolveRegion inside useEffect

Author: KaiUweCZE

libs/storefront-data/src/auth/hooks.ts

@@ -20,8 +20,15 @@ export type CreateAuthHooksConfig<
   TLoginInput,
   TRegisterInput,
   TUpdateInput,
+  TCreateCustomerInput = unknown,
 > = {
-  service: AuthService<TCustomer, TLoginInput, TRegisterInput, TUpdateInput>
+  service: AuthService<
+    TCustomer,
+    TLoginInput,
+    TRegisterInput,
+    TUpdateInput,
+    TCreateCustomerInput
+  >
   queryKeys?: AuthQueryKeys
   queryKeyNamespace?: QueryNamespace
   cacheConfig?: CacheConfig
@@ -37,12 +44,19 @@ export function createAuthHooks<
   TLoginInput,
   TRegisterInput,
   TUpdateInput,
+  TCreateCustomerInput = unknown,
 >({
   service,
   queryKeys,
   queryKeyNamespace = "storefront-data",
   cacheConfig,
-}: CreateAuthHooksConfig<TCustomer, TLoginInput, TRegisterInput, TUpdateInput>) {
+}: CreateAuthHooksConfig<
+  TCustomer,
+  TLoginInput,
+  TRegisterInput,
+  TUpdateInput,
+  TCreateCustomerInput
+>) {
   const resolvedCacheConfig = cacheConfig ?? createCacheConfig()
   const resolvedQueryKeys =
     queryKeys ?? createAuthQueryKeys(queryKeyNamespace)
@@ -116,6 +130,29 @@ export function createAuthHooks<
     })
   }
 
+  function useCreateCustomer(
+    options?: AuthMutationOptions<TCustomer, TCreateCustomerInput>
+  ) {
+    const queryClient = useQueryClient()
+    return useMutation({
+      mutationFn: (input: TCreateCustomerInput) => {
+        if (!service.createCustomer) {
+          throw new Error("createCustomer service is not configured")
+        }
+        return service.createCustomer(input)
+      },
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries({
+          queryKey: resolvedQueryKeys.customer(),
+        })
+        options?.onSuccess?.(data, variables)
+      },
+      onError: (error) => {
+        options?.onError?.(error)
+      },
+    })
+  }
+
   function useLogout(options?: AuthMutationOptions<void, void>) {
     const queryClient = useQueryClient()
     return useMutation({
@@ -183,6 +220,7 @@ export function createAuthHooks<
     useSuspenseAuth,
     useLogin,
     useRegister,
+    useCreateCustomer,
     useLogout,
     useUpdateCustomer,
     useRefreshAuth,

libs/storefront-data/src/auth/types.ts

@@ -11,11 +11,13 @@ export type AuthService<
   TLoginInput,
   TRegisterInput,
   TUpdateInput,
+  TCreateCustomerInput = unknown,
 > = {
   getCustomer: (signal?: AbortSignal) => Promise<TCustomer | null>
   login: (input: TLoginInput) => Promise<unknown>
   logout: () => Promise<void>
   register: (input: TRegisterInput) => Promise<unknown>
+  createCustomer?: (input: TCreateCustomerInput) => Promise<TCustomer>
   updateCustomer?: (input: TUpdateInput) => Promise<TCustomer>
   refresh?: () => Promise<unknown>
 }

libs/storefront-data/src/products/hooks.ts

@@ -461,15 +461,15 @@ export function createProductHooks<
 
   function usePrefetchPages(params: UsePrefetchPagesParams<TListInput>) {
     const queryClient = useQueryClient()
+    // Call resolveRegion outside useEffect to follow Rules of Hooks
+    const region = resolveRegion ? resolveRegion() : null
+    const resolvedBaseInput = applyRegion(params.baseInput, region ?? undefined)
 
     useEffect(() => {
       if (params.enabled === false || params.shouldPrefetch === false) {
         return
       }
 
-      const region = resolveRegion ? resolveRegion() : null
-      const resolvedBaseInput = applyRegion(params.baseInput, region ?? undefined)
-
       if (requireRegion && !resolvedBaseInput.region_id) {
         return
       }
@@ -577,7 +577,7 @@ export function createProductHooks<
     }, [
       params.enabled,
       params.shouldPrefetch,
-      params.baseInput,
+      resolvedBaseInput,
       params.currentPage,
       params.hasNextPage,
       params.hasPrevPage,