wip

packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { Box, DashboardCard, DashboardInsider } from '@/components';
-import { CustomerFormFormik } from './CustomerFormFormik';
+import { CustomerFormFormik, ustomerFormFormik } from './CustomerFormFormik';
 import {
   CustomerFormProvider,
   useCustomerFormContext,
@@ -14,25 +14,34 @@ import {
  * @returns {JSX}
  */
 export default function CustomerFormPage() {
-  const history = useHistory();
   const { id } = useParams();
-  const { isFormLoading } = useCustomerFormContext();
-
   const customerId = parseInt(id, 10);
   
-  // Handle the form submit success.
+  return (
+    <CustomerFormProvider customerId={customerId}>
+     <CustomerFormPageContent /> 
+    </CustomerFormProvider>
+  );
+}
+
+function CustomerFormPageContent() {
+  const history = useHistory();
+  const { isFormLoading } = useCustomerFormContext();
+
+
   const handleSubmitSuccess = (values, formArgs, submitPayload) => {
     if (!submitPayload.noRedirect) {
       history.push('/customers');
     }
-  };
+  }
+
     // Handle the form cancel button click.
   const handleFormCancel = () => {
     history.goBack();
   };
 
+
   return (
-    <CustomerFormProvider customerId={customerId}>
     <DashboardInsider loading={isFormLoading}>
         <Box mx={'auto'} maxWidth={800}>
           <CustomerFormFormik
@@ -41,6 +50,5 @@ export default function CustomerFormPage() {
           />
         </Box>
       </DashboardInsider>
-    </CustomerFormProvider>
-  );
+  )
 }

packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx

@@ -63,7 +63,7 @@ const CustomerFormContext = createContext<CustomerFormContextValue | undefined>(
   undefined,
 );
 
-function CustomerFormProvider({ query, customerId, children }: CustomerFormProviderProps) {
+export function CustomerFormProvider({ query, customerId, children }: CustomerFormProviderProps) {
   const { state } = useLocation<{ action?: number | string }>();
   const contactId = state?.action;
 
@@ -132,7 +132,7 @@ function CustomerFormProvider({ query, customerId, children }: CustomerFormProvi
   );
 }
 
-const useCustomerFormContext = () => {
+export const useCustomerFormContext = () => {
   const ctx = React.useContext(CustomerFormContext);
   if (!ctx) {
     throw new Error(
@@ -141,5 +141,3 @@ const useCustomerFormContext = () => {
   }
   return ctx;
 };
-
-export { CustomerFormProvider, useCustomerFormContext };

packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx

@@ -8,8 +8,8 @@ import {
   VendorFormProvider,
   useVendorFormContext,
 } from '@/containers/Vendors/VendorForm/VendorFormProvider';
-import VendorFormFormik, {
-  VendorFormHeaderPrimary,
+import {
+  VendorFormFormik,
 } from '@/containers/Vendors/VendorForm/VendorFormFormik';
 
 import { withDrawerActions } from '@/containers/Drawer/withDrawerActions';
@@ -62,13 +62,11 @@ function QuickVendorFormDrawer({
   return (
     <VendorFormProvider vendorId={vendorId}>
       <DrawerVendorFormLoading>
-        <VendorFormCard>
           <VendorFormFormik
             initialValues={{ first_name: displayName }}
             onSubmitSuccess={handleSubmitSuccess}
             onCancel={handleCancelForm}
           />
-        </VendorFormCard>
       </DrawerVendorFormLoading>
     </VendorFormProvider>
   );
@@ -79,20 +77,3 @@ export default R.compose(
   withDashboardActions,
 )(QuickVendorFormDrawer);
 
-const VendorFormCard = styled(Card)`
-  margin: 15px;
-  padding: 25px;
-  margin-bottom: calc(15px + 65px);
-
-  ${VendorFormHeaderPrimary} {
-    padding-top: 0;
-  }
-  .page-form {
-    padding: 0;
-
-    &__floating-actions {
-      margin-left: -41px;
-      margin-right: -41px;
-    }
-  }
-`;

packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx

@@ -18,7 +18,6 @@ export default function QuickWriteVendorDrawerContent({ displayName, autofillRef
       <DrawerHeaderContent
         name={DRAWERS.QUICK_CREATE_CUSTOMER}
         title={<T id={'create_a_new_vendor'} />}
-
       />
       <DrawerBody>
         <QuickVendorFormDrawer displayName={displayName} autofillRef={autofillRef} />

packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx

@@ -101,7 +101,7 @@ function VendorFormFormikBase({
   };
 
   return (
-    <Box mx={'auto'} maxWidth={800}>
+    
       <Formik
         validationSchema={
           isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
@@ -115,7 +115,6 @@ function VendorFormFormikBase({
           </VendorFormFields>
         </Form>
       </Formik>    
-        </Box>    
   );
 }
 

packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useParams, useHistory } from 'react-router-dom';
-import { DashboardCard, DashboardInsider } from '@/components';
+import { Box, DashboardCard, DashboardInsider } from '@/components';
 import { VendorFormProvider, useVendorFormContext } from './VendorFormProvider';
 import { VendorFormFormik } from './VendorFormFormik';
 
@@ -41,10 +41,12 @@ export function VendorFormPage() {
   return (
     <VendorFormProvider vendorId={id}>
       <VendorFormPageLoading>
+        <Box mx={'auto'} maxWidth={800}>
           <VendorFormFormik
             onSubmitSuccess={handleSubmitSuccess}
             onCancel={handleFormCancel}
             />
+        </Box>
       </VendorFormPageLoading>
     </VendorFormProvider>
   );

packages/webapp/src/routes/dashboard.tsx

@@ -631,7 +631,7 @@ export const getDashboardRoutes = () => [
   {
     path: `/vendors/new`,
     component: lazy(
-      () => import('@/containers/Vendors/VendorForm/VendorFormPage'),
+      () => import('@/containers/Vendors/VendorForm/VendorFormPage').then(module => ({ default: module.VendorFormPage })),
     ),
     name: 'vendor-new',
     breadcrumb: intl.get('new_vendor'),