PWA-3273:Get Minimum Password Length from configuration

packages/peregrine/lib/talons/CreateAccount/__tests__/__snapshots__/useCreateAccount.spec.js.snap

@@ -37,6 +37,7 @@ Object {
     "userName": "gooseton",
   },
   "isDisabled": false,
+  "minimum_password_length": 8,
   "recaptchaWidgetProps": Object {},
 }
 `;

packages/peregrine/lib/talons/CreateAccount/__tests__/useCreateAccount.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMutation, useApolloClient } from '@apollo/client';
+import { useMutation, useQuery, useApolloClient } from '@apollo/client';
 import { act } from 'react-test-renderer';
 
 import { useCartContext } from '../../../context/cart';
@@ -16,9 +16,17 @@ jest.mock('@apollo/client', () => {
     return {
         ...apolloClient,
         useMutation: jest.fn().mockReturnValue([jest.fn()]),
-        useApolloClient: jest.fn()
+        useApolloClient: jest.fn(),
+        useQuery: jest.fn()
     };
 });
+// jest.mock('@apollo/client', () => {
+//     const apolloClient = jest.requireActual('@apollo/client');
+//     return {
+//         ...apolloClient,
+//         useQuery: jest.fn()
+//     };
+// });
 jest.mock('../../../../lib/hooks/useAwaitQuery', () => ({
     useAwaitQuery: jest.fn().mockReturnValue(jest.fn())
 }));
@@ -91,7 +99,16 @@ const createAccountMutation = 'createAccountMutation';
 const createCartMutation = 'createCartMutation';
 const signInMutation = 'signInMutation';
 const mergeCartsMutation = 'mergeCartsMutation';
+const getStoreConfigQuery = 'getStoreConfigQuery';
 
+const getStoreConfigQueryFn = jest.fn().mockReturnValue({
+    data: {
+        storeConfig: {
+            store_code: 'default',
+            minimum_password_length: 8
+        }
+    }
+});
 const customerQueryFn = jest.fn();
 const getCartDetailsQueryFn = jest.fn();
 const createAccountMutationFn = jest
@@ -120,6 +137,7 @@ const defaultProps = {
         getCartDetailsQuery,
         getCustomerQuery,
         mergeCartsMutation,
+        getStoreConfigQuery,
         signInMutation
     },
     initialValues: {
@@ -143,6 +161,13 @@ const defaultFormValues = {
 };
 
 beforeAll(() => {
+    useQuery.mockImplementation(query => {
+        if (query === getStoreConfigQuery) {
+            return getStoreConfigQueryFn();
+        } else {
+            return [jest.fn(), {}];
+        }
+    });
     useAwaitQuery.mockImplementation(query => {
         if (query === getCustomerQuery) {
             return customerQueryFn();

packages/peregrine/lib/talons/CreateAccount/createAccount.gql.js

@@ -126,12 +126,22 @@ export const MERGE_CARTS = gql`
     }
     ${CheckoutPageFragment}
 `;
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            minimum_password_length
+        }
+    }
+`;
 
 export default {
     createAccountMutation: CREATE_ACCOUNT,
     createCartMutation: CREATE_CART,
     getCartDetailsQuery: GET_CART_DETAILS,
     getCustomerQuery: GET_CUSTOMER,
     mergeCartsMutation: MERGE_CARTS,
-    signInMutation: SIGN_IN
+    signInMutation: SIGN_IN,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useApolloClient, useMutation } from '@apollo/client';
+import { useApolloClient, useMutation, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../util/shallowMerge';
 import { useUserContext } from '../../context/user';
@@ -37,7 +37,8 @@ export const useCreateAccount = props => {
         getCartDetailsQuery,
         getCustomerQuery,
         mergeCartsMutation,
-        signInMutation
+        signInMutation,
+        getStoreConfigQuery
     } = operations;
     const apolloClient = useApolloClient();
     const [isSubmitting, setIsSubmitting] = useState(false);
@@ -69,6 +70,15 @@ export const useCreateAccount = props => {
         fetchPolicy: 'no-cache'
     });
 
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const { minimum_password_length } = storeConfigData
+        ? storeConfigData.storeConfig
+        : null;
+
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
@@ -225,7 +235,8 @@ export const useCreateAccount = props => {
         handleCancelKeyPress,
         initialValues: sanitizedInitialValues,
         isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
-        recaptchaWidgetProps
+        recaptchaWidgetProps,
+        minimum_password_length
     };
 };
 
@@ -239,6 +250,7 @@ export const useCreateAccount = props => {
  *
  * @property {GraphQLAST} customerQuery query to fetch customer details
  * @property {GraphQLAST} getCartDetailsQuery query to get cart details
+ * @property {GraphQLAST} getStoreConfigQuery query to get store config
  */
 
 /**

packages/venia-ui/lib/components/CreateAccount/__tests__/createAccount.spec.js

@@ -14,7 +14,11 @@ jest.mock('@apollo/client', () => ({
         }
     ]),
     useQuery: jest.fn().mockImplementation(() => ({
-        data: {},
+        data: {
+            storeConfig: {
+                minimum_password_length: 8 // or whatever value is expected
+            }
+        },
         loading: false,
         error: null
     }))

packages/venia-ui/lib/components/CreateAccount/createAccount.js

@@ -35,8 +35,10 @@ const CreateAccount = props => {
         handleCancelKeyPress,
         isDisabled,
         initialValues,
-        recaptchaWidgetProps
+        recaptchaWidgetProps,
+        minimum_password_length
     } = talonProps;
+
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -164,7 +166,7 @@ const CreateAccount = props => {
                 })}
                 validate={combine([
                     isRequired,
-                    [hasLengthAtLeast, 8],
+                    [hasLengthAtLeast, minimum_password_length],
                     validatePassword
                 ])}
                 validateOnBlur