wip

packages/server/src/modules/Customers/dtos/ContactAddress.dto.ts

@@ -1,5 +1,6 @@
-import { IsEmail, IsOptional, IsString } from 'class-validator';
+import { IsEmail, IsString } from 'class-validator';
 import { ApiProperty } from '@nestjs/swagger';
+import { IsOptional } from '@/common/decorators/Validators';
 
 export class ContactAddressDto {
   @ApiProperty({ required: false, description: 'Billing address line 1' })

packages/server/src/modules/Customers/dtos/EditCustomer.dto.ts

@@ -1,6 +1,7 @@
-import { IsBoolean, IsEmail, IsNotEmpty, IsOptional, IsString } from 'class-validator';
+import { IsBoolean, IsEmail, IsNotEmpty, IsString } from 'class-validator';
 import { ApiProperty } from '@nestjs/swagger';
 import { ContactAddressDto } from './ContactAddress.dto';
+import { IsOptional } from '@/common/decorators/Validators';
 
 export class EditCustomerDto extends ContactAddressDto {
   @ApiProperty({ required: true, description: 'Customer type' })

packages/webapp/src/components/DrawersContainer.tsx

@@ -12,7 +12,7 @@ import CustomerDetailsDrawer from '@/containers/Drawers/CustomerDetailsDrawer';
 import VendorDetailsDrawer from '@/containers/Drawers/VendorDetailsDrawer';
 import InventoryAdjustmentDetailDrawer from '@/containers/Drawers/InventoryAdjustmentDetailDrawer';
 import CashflowTransactionDetailDrawer from '@/containers/Drawers/CashflowTransactionDetailDrawer';
-// import QuickCreateCustomerDrawer from '@/containers/Drawers/QuickCreateCustomerDrawer';
+import QuickCreateCustomerDrawer from '@/containers/Drawers/QuickCreateCustomerDrawer';
 import QuickCreateItemDrawer from '@/containers/Drawers/QuickCreateItemDrawer';
 import QuickWriteVendorDrawer from '@/containers/Drawers/QuickWriteVendorDrawer';
 import CreditNoteDetailDrawer from '@/containers/Drawers/CreditNoteDetailDrawer';
@@ -59,7 +59,7 @@ export default function DrawersContainer() {
       <CashflowTransactionDetailDrawer
         name={DRAWERS.CASHFLOW_TRNASACTION_DETAILS}
       />
-      {/* <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} /> */}
+      <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
       <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
       <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
       <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAILS} />

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

@@ -92,7 +92,6 @@ export function CustomerFormBasicSection({}) {
         />
       </FFormGroup>
 
-
       <Divider  style={{ margin: '20px 0' }} />
 
       {/*------------ Vendor email -----------*/}

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

@@ -6,15 +6,8 @@ import { css } from '@emotion/css';
 import { CustomerFloatingActions } from "./CustomerFloatingActions";
 import { CustomerFormSections } from "./CustomerFormFields";
 
-const customerFormSections = {
-  primary: 'primary',
-  financial: 'financial',
-  billingAddress: 'billingAddress',
-  shippingAddress: 'shippingAddress',
-  notes: 'notes',
-};
 export function CustomerFormContent() {
-  const [selectedTabId, setSelectedTabId] = useState(customerFormSections.primary);
+  const [selectedTabId, setSelectedTabId] = useState('primary');
 
   const handleTabChange = (tabId: string) => {
     const sectionId = String(tabId);
@@ -38,11 +31,11 @@ export function CustomerFormContent() {
             onChange={handleTabChange}
             className={css`position: sticky; top: 20px; .bp4-large > .bp4-tab{font-size: 14px;} `}
           >
-            <Tab id={customerFormSections.primary} title={'Basic'} />
+            <Tab id={'primary'} title={'Basic'} />
-            <Tab id={customerFormSections.financial} title={'Financial'} />
+            <Tab id={'financial'} title={'Financial'} />
-            <Tab id={customerFormSections.billingAddress} title={'Billing address'} />
+            <Tab id={'billingAddress'} title={'Billing address'} />
-            <Tab id={customerFormSections.shippingAddress} title={'Ship address'} />
+            <Tab id={'shippingAddress'} title={'Ship address'} />
-            <Tab id={customerFormSections.notes} title={'Notes'} />
+            <Tab id={'notes'} title={'Notes'} />
           </Tabs>
 
         <CustomerFormSections />

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

@@ -3,13 +3,11 @@ import intl from 'react-intl-universal';
 import { Formik, Form, FormikHelpers } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import styled from 'styled-components';
-
 import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
 import { compose, transformToForm, saveInvoke, parseBoolean } from '@/utils';
 import { useCustomerFormContext } from './CustomerFormProvider';
 import { defaultInitialValues } from './utils';
-
+import { AppToaster } from '@/components';
-import { AppToaster, Box } from '@/components';
 import { withCurrentOrganization } from '@/containers/Organization/withCurrentOrganization';
 import { CustomerFormContent } from './CustomerFormContent';
 
@@ -140,7 +138,6 @@ function CustomerFormFormikRoot({
       setSubmitting(false);
       saveInvoke(onSubmitError, values, formArgs, submitPayload);
     };
-
     if (isNewMode) {
       createCustomerMutate(formValues).then(onSuccess).catch(onError);
     } else {
@@ -150,7 +147,6 @@ function CustomerFormFormikRoot({
   };
 
   return (
-    <Box mx={'auto'} maxWidth={800}>
       <Formik<CustomerFormValues>
         validationSchema={isNewMode ? CreateCustomerForm : EditCustomerForm}
         initialValues={initialValues}
@@ -162,7 +158,6 @@ function CustomerFormFormikRoot({
           </CustomerFormFields>
         </Form>
       </Formik>
-      </Box>
   );
 }
 
@@ -171,7 +166,6 @@ const CustomerFormFields = styled.div`
   .bp6-form-content {
     min-width: 300px;
   }
-
   .bp4-form-group.bp4-inline label.bp4-label {
     min-width: 140px;
   }

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

@@ -2,9 +2,7 @@
 import React from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
-
+import { Box, DashboardCard, DashboardInsider } from '@/components';
-import { DashboardCard, DashboardInsider } from '@/components';
-
 import { CustomerFormFormik } from './CustomerFormFormik';
 import {
   CustomerFormProvider,
@@ -49,10 +47,12 @@ export default function CustomerFormPage() {
   return (
     <CustomerFormProvider customerId={customerId}>
       <CustomerFormPageLoading>
+        <Box mx={'auto'} maxWidth={800}>
           <CustomerFormFormik
             onSubmitSuccess={handleSubmitSuccess}
             onCancel={handleFormCancel}
           />
+        </Box>
       </CustomerFormPageLoading>
     </CustomerFormProvider>
   );

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

@@ -53,34 +53,14 @@ function QuickCustomerFormDrawer({
   return (
     <CustomerFormProvider customerId={customerId}>
       <DrawerCustomerFormLoading>
-        <CustomerFormCard>
+          <CustomerFormFormik
-          {/* <CustomerFormFormik
             initialValues={{ first_name: displayName }}
             onSubmitSuccess={handleSubmitSuccess}
             onCancel={handleCancelForm}
-          /> */}
+          />
-        </CustomerFormCard>
       </DrawerCustomerFormLoading>
     </CustomerFormProvider>
   );
 }
 
 export default R.compose(withDrawerActions)(QuickCustomerFormDrawer);
-
-const CustomerFormCard = styled(Card)`
-  margin: 15px;
-  padding: 25px;
-  margin-bottom: calc(15px + 65px);
-
-  // ${CustomerFormHeaderPrimary} {
-  //   padding-top: 0;
-  // }
-  .page-form {
-    padding: 0;
-
-    &__floating-actions {
-      margin-left: -41px;
-      margin-right: -41px;
-    }
-  }
-`;

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

@@ -5,7 +5,7 @@ import { Dragzone, FormattedMessage as T } from '@/components';
 /**
  * Vendor Attachment Tab.
  */
-function VendorAttachmentTab() {
+export function VendorAttachmentTab() {
   return (
     <div>
       <Dragzone
@@ -17,5 +17,3 @@ function VendorAttachmentTab() {
     </div>
   );
 }
-
-export default VendorAttachmentTab;

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

@@ -28,7 +28,7 @@ import { useCurrentOrganization } from '@/hooks/state';
 /**
  * Vendor Finaniceal Panel Tab.
  */
-export default function VendorFinanicalPanelTab() {
+export function VendorFinanicalPanelTab() {
   const { currencies, branches } = useVendorFormContext();
 
   // Sets the primary branch to form.

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

@@ -7,7 +7,7 @@ import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
 /**
  * Vendor form  after primary section.
  */
-function VendorFormAfterPrimarySection() {
+export function VendorFormAfterPrimarySection() {
   return (
     <div className={'customer-form__after-primary-section-content'}>
       {/*------------ Vendor email -----------*/}
@@ -42,5 +42,3 @@ function VendorFormAfterPrimarySection() {
     </div>
   );
 }
-
-export default VendorFormAfterPrimarySection;

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

@@ -24,7 +24,7 @@ import { defaultInitialValues } from './utils';
 /**
  * Vendor form.
  */
-function VendorFormFormik({
+function VendorFormFormikBase({
   // #withCurrentOrganization
   organization: { base_currency },
 
@@ -131,4 +131,4 @@ const VendorFormFields = styled.div`
   }
 `;
 
-export default compose(withCurrentOrganization())(VendorFormFormik);
+export const VendorFormFormik = compose(withCurrentOrganization())(VendorFormFormikBase);

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

@@ -2,12 +2,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useParams, useHistory } from 'react-router-dom';
-
-import '@/style/pages/Vendors/PageForm.scss';
-
 import { DashboardCard, DashboardInsider } from '@/components';
 import { VendorFormProvider, useVendorFormContext } from './VendorFormProvider';
-import VendorFormFormik from './VendorFormFormik';
+import { VendorFormFormik } from './VendorFormFormik';
 
 /**
  * Vendor form page loading wrapper.
@@ -26,7 +23,7 @@ function VendorFormPageLoading({ children }) {
 /**
  * Vendor form page.
  */
-export default function VendorFormPage() {
+export function VendorFormPage() {
   const history = useHistory();
   const { id } = useParams();
 

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

@@ -18,7 +18,7 @@ import { useAutofocus } from '@/hooks';
 /**
  * Vendor form primary section.
  */
-function VendorFormPrimarySection() {
+export function VendorFormPrimarySection() {
   const firstNameFieldRef = useAutofocus();
 
   return (
@@ -80,5 +80,3 @@ function VendorFormPrimarySection() {
     </div>
   );
 }
-
-export default VendorFormPrimarySection;

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

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Tabs, Tab } from '@blueprintjs/core';
 import { CLASSES } from '@/constants/classes';
 
-import VendorFinanicalPanelTab from './VendorFinanicalPanelTab';
+import { VendorFinanicalPanelTab } from './VendorFinanicalPanelTab';
 
 import CustomerAddressTabs from '@/containers/Customers/CustomerForm/CustomerAddressTabs';
 import CustomerNotePanel from '@/containers/Customers/CustomerForm/CustomerNotePanel';
@@ -13,7 +13,7 @@ import CustomerNotePanel from '@/containers/Customers/CustomerForm/CustomerNoteP
 /**
  * Vendor form tabs.
  */
-export default function VendorTabs() {
+export function VendorsTabs() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
       <Tabs