re-structure to monorepo.

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

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from '@/components';
+
+import {
+  VendorFormProvider,
+  useVendorFormContext,
+} from '@/containers/Vendors/VendorForm/VendorFormProvider';
+import VendorFormFormik from '@/containers/Vendors/VendorForm/VendorFormFormik';
+
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+
+/**
+ * Drawer vendor form loading wrapper.
+ * @returns {JSX}
+ */
+function DrawerVendorFormLoading({ children }) {
+  const { isFormLoading } = useVendorFormContext();
+
+  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
+}
+
+/**
+ * Quick vendor form of the drawer.
+ */
+function QuickVendorFormDrawer({
+  displayName,
+  closeDrawer,
+  vendorId,
+  addQuickActionEvent,
+}) {
+  const { payload } = useDrawerContext();
+
+  // Handle the form submit request success.
+  const handleSubmitSuccess = (values, form, submitPayload, response) => {
+    if (!submitPayload.noRedirect) {
+      closeDrawer('quick-write-vendor');
+    }
+    if (payload.quickActionEvent) {
+      addQuickActionEvent(payload.quickActionEvent, {
+        vendorId: response.data.id,
+      });
+    }
+  };
+  // Handle the form cancel action.
+  const handleCancelForm = () => {
+    closeDrawer('quick-write-vendor');
+  };
+
+  return (
+    <VendorFormProvider vendorId={vendorId}>
+      <DrawerVendorFormLoading>
+        <VendorFormCard>
+          <VendorFormFormik
+            initialValues={{ display_name: displayName }}
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleCancelForm}
+          />
+        </VendorFormCard>
+      </DrawerVendorFormLoading>
+    </VendorFormProvider>
+  );
+}
+
+export default R.compose(
+  withDrawerActions,
+  withDashboardActions,
+)(QuickVendorFormDrawer);
+
+const VendorFormCard = styled(Card)`
+  margin: 15px;
+  margin-bottom: calc(15px + 65px);
+
+  .page-form {
+    &__floating-actions {
+      margin-left: -36px;
+      margin-right: -36px;
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+const QuickWriteVendorDrawerContent = React.lazy(() =>
+  import('./QuickWriteVendorDrawerContent'),
+);
+
+/**
+ * Quick Write vendor.
+ */
+function QuickWriteVendorDrawer({
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload,
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'80%'}
+      payload={payload}
+    >
+      <DrawerSuspense>
+        <QuickWriteVendorDrawerContent displayName={payload.displayName} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default R.compose(withDrawers())(QuickWriteVendorDrawer);