feat: quick create action on select/suggest items fields.

src/containers/Customers/CustomerForm/CustomerFormPage.js

@@ -1,20 +1,74 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { DashboardCard } from 'components';
-import CustomerForm from './CustomerForm';
-import { CustomerFormProvider } from './CustomerFormProvider';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
-import 'style/pages/Customers/PageForm.scss';
+import CustomerFormFormik from './CustomerFormFormik';
+import {
+  CustomerFormProvider,
+  useCustomerFormContext,
+} from './CustomerFormProvider';
 
-export default function CustomerFormPage() {
-  const { id } = useParams();
+/**
+ * Customer form page loading.
+ * @returns {JSX}
+ */
+function CustomerFormPageLoading({ children }) {
+  const { isFormLoading } = useCustomerFormContext();
 
   return (
-    <CustomerFormProvider customerId={id}>
-      <DashboardCard page>
-        <CustomerForm />
-      </DashboardCard>
+    <CustomerDashboardInsider loading={isFormLoading}>
+      {children}
+    </CustomerDashboardInsider>
+  );
+}
+
+/**
+ * Customer form page.
+ * @returns {JSX}
+ */
+export default function CustomerFormPage() {
+  const history = useHistory();
+  const { id } = useParams();
+
+  const customerId = parseInt(id, 10);
+
+  // Handle the form submit success.
+  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}>
+      <CustomerFormPageLoading>
+        <DashboardCard page>
+          <CustomerFormPageFormik
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleFormCancel}
+          />
+        </DashboardCard>
+      </CustomerFormPageLoading>
     </CustomerFormProvider>
   );
-}
+}
+
+const CustomerFormPageFormik = styled(CustomerFormFormik)`
+  .page-form {
+    &__floating-actions {
+      margin-left: -40px;
+      margin-right: -40px;
+    }
+  }
+`;
+
+const CustomerDashboardInsider = styled(DashboardInsider)`
+  padding-bottom: 64px;
+`;