re-structure to monorepo.

packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  DrawerHeaderContent,
+  DrawerBody,
+  FormattedMessage as T,
+} from '@/components';
+
+import QuickCustomerFormDrawer from './QuickCustomerFormDrawer';
+
+/**
+ * Quick create/edit customer drawer.
+ */
+export default function QuickCreateCustomerDrawerContent({ displayName }) {
+  return (
+    <React.Fragment>
+      <DrawerHeaderContent
+        name="quick-create-customer"
+        title={<T id={'create_a_new_customer'} />}
+      />
+      <DrawerBody>
+        <QuickCustomerFormDrawer displayName={displayName} />
+      </DrawerBody>
+    </React.Fragment>
+  );
+}

packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from '@/components';
+
+import {
+  CustomerFormProvider,
+  useCustomerFormContext,
+} from '@/containers/Customers/CustomerForm/CustomerFormProvider';
+import CustomerFormFormik from '@/containers/Customers/CustomerForm/CustomerFormFormik';
+
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+/**
+ * Drawer customer form loading wrapper.
+ * @returns {JSX}
+ */
+function DrawerCustomerFormLoading({ children }) {
+  const { isFormLoading } = useCustomerFormContext();
+
+  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
+}
+
+/**
+ * Quick customer form of the drawer.
+ */
+function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
+  // Handle the form submit request success.
+  const handleSubmitSuccess = () => {
+    closeDrawer('quick-create-customer');
+  };
+  // Handle the form cancel action.
+  const handleCancelForm = () => {
+    closeDrawer('quick-create-customer');
+  };
+
+  return (
+    <CustomerFormProvider customerId={customerId}>
+      <DrawerCustomerFormLoading>
+        <CustomerFormCard>
+          <CustomerFormFormik
+            initialValues={{ display_name: displayName }}
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleCancelForm}
+          />
+        </CustomerFormCard>
+      </DrawerCustomerFormLoading>
+    </CustomerFormProvider>
+  );
+}
+
+export default R.compose(withDrawerActions)(QuickCustomerFormDrawer);
+
+const CustomerFormCard = styled(Card)`
+  margin: 15px;
+  margin-bottom: calc(15px + 65px);
+
+  .page-form {
+    &__floating-actions {
+      margin-left: -36px;
+      margin-right: -36px;
+    }
+  }
+`;

packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/index.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+import { compose } from '@/utils';
+
+const QuickCreateCustomerDrawerContent = React.lazy(() =>
+  import('./QuickCreateCustomerDrawerContent'),
+);
+
+/**
+ * Quick Create customer
+ */
+function QuickCreateCustomerDrawer({
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload,
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'80%'}
+    >
+      <DrawerSuspense>
+        <QuickCreateCustomerDrawerContent displayName={payload.displayName} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(QuickCreateCustomerDrawer);