PWA-1686: [bug]: fix quantity field warning

packages/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { useFieldState } from 'informed';
+
+const useInformedFieldStateWrapper = field => {
+    const [isInitialRender, setIsInitialRender] = useState(true);
+    const warn = console.warn;
+    // Temporarily override console warn to remove false positive warning from useFieldState
+    const regex = /^Attempting to get field (.*) but it does not exist$/g;
+    if (isInitialRender) {
+        console.warn = err => {
+            if (!err.match(regex)) {
+                warn(err);
+            }
+        };
+    }
+    useEffect(() => {
+        setIsInitialRender(false);
+    }, []);
+    const fieldState = useFieldState(field);
+    if (isInitialRender) {
+        console.warn = warn;
+    }
+
+    return fieldState;
+};
+
+export default useInformedFieldStateWrapper;

packages/peregrine/lib/talons/CartPage/ProductListing/useQuantity.js

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState, useEffect } from 'react';
-import { useFieldState, useFieldApi } from 'informed';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 import debounce from 'lodash.debounce';
 
 /**

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js

@@ -43,11 +43,14 @@ jest.mock('@apollo/client', () => {
     };
 });
 
-jest.mock('informed', () => {
-    return {
-        useFieldState: jest.fn().mockReturnValue({ value: 'braintree' })
-    };
-});
+jest.mock(
+    '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper',
+    () => {
+        return {
+            useFieldState: jest.fn().mockReturnValue({ value: 'braintree' })
+        };
+    }
+);
 
 jest.mock('../../CheckoutError', () => {
     class CheckoutError extends Error {

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentMethods.spec.js

@@ -9,13 +9,14 @@ import createTestInstance from '../../../../util/createTestInstance';
 jest.mock('../../../../context/cart');
 useCartContext.mockReturnValue([{ cartId: '123456' }]);
 
-jest.mock('informed', () => {
-    return {
-        useFieldState: () => {
-            return { value: 'currentSelectedPaymentMethod' };
-        }
-    };
-});
+jest.mock(
+    '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper',
+    () => {
+        return jest.fn().mockReturnValue({
+            value: 'currentSelectedPaymentMethod'
+        });
+    }
+);
 
 jest.mock('@apollo/client', () => {
     return {

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js

@@ -1,5 +1,5 @@
 import { useQuery } from '@apollo/client';
-import { useFieldState } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useCartContext } from '../../../context/cart';
 

packages/peregrine/lib/talons/Postcode/__tests__/usePostcode.spec.js

@@ -1,19 +1,25 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
-import { useFieldApi, useFieldState } from 'informed';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import createTestInstance from '../../../util/createTestInstance';
 import { usePostcode } from '../usePostcode';
 
 jest.mock('informed', () => {
-    const useFieldState = jest.fn().mockReturnValue({
-        value: 'US'
-    });
     const useFieldApi = jest.fn();
 
-    return { useFieldApi, useFieldState };
+    return { useFieldApi };
 });
 
+jest.mock(
+    '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper',
+    () => {
+        return jest.fn().mockReturnValue({
+            value: 'US'
+        });
+    }
+);
 const Component = props => {
     const talonProps = usePostcode(props);
     return <i talonProps={talonProps} />;

packages/peregrine/lib/talons/Postcode/usePostcode.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
-import { useFieldApi, useFieldState } from 'informed';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 /**
  * The usePostcode talon handles logic for resetting the postcode field value when the country changes.

packages/peregrine/lib/talons/Region/__tests__/useRegion.spec.js

@@ -1,20 +1,27 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
 import { useQuery } from '@apollo/client';
-import { useFieldApi, useFieldState } from 'informed';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import createTestInstance from '../../../util/createTestInstance';
 import { useRegion } from '../useRegion';
 
 jest.mock('informed', () => {
-    const useFieldState = jest.fn().mockReturnValue({
-        value: 'US'
-    });
     const useFieldApi = jest.fn();
 
-    return { useFieldApi, useFieldState };
+    return { useFieldApi };
 });
 
+jest.mock(
+    '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper',
+    () => {
+        return jest.fn().mockReturnValue({
+            value: 'US'
+        });
+    }
+);
+
 jest.mock('@apollo/client', () => ({
     useQuery: jest.fn().mockReturnValue({
         data: {

packages/peregrine/lib/talons/Region/useRegion.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useQuery } from '@apollo/client';
-import { useFieldApi, useFieldState } from 'informed';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 /**
  * The useRegion talon handles logic for:

packages/peregrine/lib/talons/SearchBar/__tests__/useAutocomplete.spec.js

@@ -1,15 +1,23 @@
 import React, { useEffect } from 'react';
-import { Form, Text, useFieldState } from 'informed';
+import { Form, Text } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { runQuery, useLazyQuery } from '@apollo/client';
 import { useAutocomplete } from '../../../talons/SearchBar';
 import createTestInstance from '../../../util/createTestInstance';
 
 jest.mock('informed', () => ({
-    ...jest.requireActual('informed'),
-    useFieldState: jest.fn().mockReturnValue({ value: '' })
+    ...jest.requireActual('informed')
 }));
 
+jest.mock(
+    '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper',
+    () => {
+        return jest.fn().mockReturnValue({
+            value: ''
+        });
+    }
+);
 jest.mock('@apollo/client', () => {
     const runQuery = jest.fn();
     const queryResult = {

packages/peregrine/lib/talons/SearchBar/useAutocomplete.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { useFieldState } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 import { useLazyQuery } from '@apollo/client';
 import debounce from 'lodash.debounce';
 

packages/peregrine/lib/talons/SearchBar/useSearchField.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { useFieldState, useFormApi } from 'informed';
+import { useFormApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { getSearchParam } from '@magento/peregrine/lib/hooks/useSearchParam';
 

packages/peregrine/lib/targets/__tests__/peregrine-targets.spec.js

@@ -62,6 +62,7 @@ test('exposes all hooks and targets', async () => {
         .transformModules.promise(() => {});
     expect(apis.hooks).toMatchInlineSnapshot(`
         HookInterceptorSet API (autogenerated from "@magento/peregrine/lib/hooks"):
+          hooks.hook-wrappers.useInformedFieldStateWrapper.wrapWith() wraps export "useInformedFieldStateWrapper" from "hook-wrappers/useInformedFieldStateWrapper.js"
           hooks.useAwaitQuery.wrapWith() wraps export "useAwaitQuery" from "useAwaitQuery.js"
           hooks.useCarousel.wrapWith() wraps export "useCarousel" from "useCarousel.js"
           hooks.useCustomerWishlistSkus.useCustomerWishlistSkus.wrapWith() wraps export "useCustomerWishlistSkus" from "useCustomerWishlistSkus/useCustomerWishlistSkus.js"

packages/venia-ui/lib/components/Checkbox/checkbox.js

@@ -1,10 +1,7 @@
 import React, { Fragment, useEffect } from 'react';
 import { node, shape, string } from 'prop-types';
-import {
-    Checkbox as InformedCheckbox,
-    useFieldApi,
-    useFieldState
-} from 'informed';
+import { Checkbox as InformedCheckbox, useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useStyle } from '../../classify';
 import { Message } from '../Field';

packages/venia-ui/lib/components/RadioGroup/radioGroup.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import { arrayOf, number, node, oneOfType, shape, string } from 'prop-types';
-import { RadioGroup as InformedRadioGroup, useFieldState } from 'informed';
+import { RadioGroup as InformedRadioGroup } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useStyle } from '../../classify';
 import { Message } from '../Field';

packages/venia-ui/lib/components/TextArea/textArea.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import { number, node, oneOf, oneOfType, shape, string } from 'prop-types';
-import { TextArea as InformedTextArea, useFieldState } from 'informed';
+import { TextArea as InformedTextArea } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useStyle } from '../../classify';
 import { Message } from '../Field';

packages/venia-ui/lib/components/TextInput/textInput.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import { node, shape, string } from 'prop-types';
-import { Text as InformedText, useFieldState } from 'informed';
+import { Text as InformedText } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useStyle } from '../../classify';
 import { FieldIcons, Message } from '../Field';