chore(common): CHECKOUT-6970 Move form provider to context package

Author: animesh1987

packages/locale/src/TranslatedString/TranslatedString.spec.tsx

@@ -2,7 +2,7 @@ import { createLanguageService } from '@bigcommerce/checkout-sdk';
 import React from 'react';
 import { create } from 'react-test-renderer';
 
-import { LocaleContext } from '../context';
+import { LocaleContext } from '../contexts';
 
 import TranslatedString from './TranslatedString';
 

packages/locale/src/TranslatedString/TranslatedString.tsx

@@ -1,7 +1,7 @@
 import { TranslationData } from '@bigcommerce/checkout-sdk';
 import React, { FunctionComponent } from 'react';
 
-import { useLocale } from '../context';
+import { useLocale } from '../contexts';
 
 export interface TranslatedStringProps {
     id: string;

packages/locale/src/context/LocaleContext.tsx renamed to packages/locale/src/contexts/LocaleContext.tsx

@@ -1,2 +1,2 @@
 export { default as TranslatedString } from './TranslatedString/TranslatedString';
-export { LocaleContext, LocaleContextType, useLocale } from './context';
+export { LocaleContext, LocaleContextType, useLocale } from './contexts';

packages/locale/src/context/index.ts renamed to packages/locale/src/contexts/index.ts

@@ -1,7 +1,6 @@
 export { EmbeddedCheckoutUnsupportedError } from './errors';
 export { default as CheckoutButtonResolveId } from './CheckoutButtonResolveId';
 export { default as CheckoutButtonProps } from './CheckoutButtonProps';
-export { FormProvider } from './providers';
 export { default as PaymentFormService } from './PaymentFormService';
 export { default as PaymentMethodProps } from './PaymentMethodProps';
 export { default as PaymentMethodResolveId } from './PaymentMethodResolveId';

packages/locale/src/index.ts

@@ -4,9 +4,7 @@ import { Form as FormikForm, FormikFormProps } from 'formik';
 import { values } from 'lodash';
 import React, { createRef, FunctionComponent, memo, useCallback, useRef } from 'react';
 
-import { FormProvider } from '@bigcommerce/checkout/payment-integration-api';
-
-import { FormContextType } from '../contexts';
+import { FormContextType, FormProvider } from '../contexts';
 
 export interface FormProps extends FormikFormProps {
     testId?: string;

packages/payment-integration-api/src/index.ts

@@ -1,14 +1,34 @@
-import { noop } from 'lodash';
-import { createContext } from 'react';
+import { isFunction, noop } from 'lodash';
+import React, { createContext, FunctionComponent, memo, ReactNode, useMemo, useState } from 'react';
 
 export interface FormContextType {
     isSubmitted: boolean;
     setSubmitted(isSubmitted: boolean): void;
 }
 
-const FormContext = createContext<FormContextType>({
+export const FormContext = createContext<FormContextType>({
     isSubmitted: false,
     setSubmitted: noop,
 });
 
+type FormContextFunction = (props: FormContextType) => ReactNode;
+
+export interface FormProviderProps {
+    initialIsSubmitted?: boolean;
+    children: ReactNode | FormContextFunction;
+}
+
+export const FormProvider: FunctionComponent<FormProviderProps> = memo(
+    ({ children, initialIsSubmitted = false }) => {
+        const [isSubmitted, setSubmitted] = useState(initialIsSubmitted);
+        const contextValue = useMemo(() => ({ isSubmitted, setSubmitted }), [isSubmitted]);
+
+        return (
+            <FormContext.Provider value={contextValue}>
+                {isFunction(children) ? children({ isSubmitted, setSubmitted }) : children}
+            </FormContext.Provider>
+        );
+    },
+);
+
 export default FormContext;