wip

packages/server/src/modules/Vendors/dtos/EditVendor.dto.ts

@@ -1,5 +1,6 @@
 import { ContactAddressDto } from '@/modules/Customers/dtos/ContactAddress.dto';
-import { IsEmail, IsString, IsBoolean, IsOptional } from 'class-validator';
+import { IsEmail, IsString, IsBoolean } from 'class-validator';
+import { IsOptional } from '@/common/decorators/Validators';
 import { ApiProperty } from '@nestjs/swagger';
 
 export class EditVendorDto extends ContactAddressDto {

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

@@ -34,7 +34,7 @@ export function CustomerFormContent() {
             <Tab id={'primary'} title={'Basic'} />
             <Tab id={'financial'} title={'Financial'} />
             <Tab id={'billingAddress'} title={'Billing address'} />
-            <Tab id={'shippingAddress'} title={'Ship address'} />
+            <Tab id={'shippingAddress'} title={'Shipping address'} />
             <Tab id={'notes'} title={'Notes'} />
           </Tabs>
 

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

@@ -5,7 +5,7 @@ const customerFormSectionTitleClass = css`
   font-size: 14px;
   color: #8f99a8;
   margin-bottom: 18px;
-  margin-top: 0;
+  margin-top: 10px;
 `;
 
 export function CustomerFormSectionTitle({ children }: { children: React.ReactNode | string }) {

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

@@ -7,16 +7,8 @@ import { css } from '@emotion/css';
 import { VendorFloatingActions } from "./VendorFloatingActions";
 import { VendorFormSections } from "./VendorFormFields";
 
-const vendorFormSections = {
-  primary: 'primary',
-  financial: 'financial',
-  billingAddress: 'billingAddress',
-  shippingAddress: 'shippingAddress',
-  notes: 'notes',
-};
-
 export function VendorFormContent() {
-  const [selectedTabId, setSelectedTabId] = useState(vendorFormSections.primary);
+  const [selectedTabId, setSelectedTabId] = useState('primary');
 
   const handleTabChange = (tabId: string) => {
     const sectionId = String(tabId);
@@ -40,11 +32,11 @@ export function VendorFormContent() {
           onChange={handleTabChange}
           className={css`position: sticky; top: 20px; .bp4-large > .bp4-tab{font-size: 14px;} `}
         >
-          <Tab id={vendorFormSections.primary} title={'Basic'} />
-          <Tab id={vendorFormSections.financial} title={'Financial'} />
-          <Tab id={vendorFormSections.billingAddress} title={'Billing address'} />
-          <Tab id={vendorFormSections.shippingAddress} title={'Ship address'} />
-          <Tab id={vendorFormSections.notes} title={'Notes'} />
+          <Tab id={'primary'} title={'Basic'} />
+          <Tab id={'financial'} title={'Financial'} />
+          <Tab id={'billingAddress'} title={'Billing address'} />
+          <Tab id={'shippingAddress'} title={'Shipping address'} />
+          <Tab id={'notes'} title={'Notes'} />
         </Tabs>
         <VendorFormSections />
       </Group>

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

@@ -47,9 +47,6 @@ function VendorFormFormikBase({
     isNewMode,
   } = useVendorFormContext();
 
-  /**
-   * Initial values in create and edit mode.
-   */
   const initialFormValues = useMemo(
     () => ({
       ...defaultInitialValues,
@@ -101,7 +98,6 @@ function VendorFormFormikBase({
   };
 
   return (
-    
       <Formik
         validationSchema={
           isNewMode ? CreateVendorFormSchema : EditVendorFormSchema

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

@@ -33,7 +33,6 @@ function VendorFormProvider({ query, vendorId, ...props }) {
   const { data: vendor, isLoading: isVendorLoading } = useVendor(vendorId, {
     enabled: !!vendorId,
   });
-
   // Handle fetch contact duplicate details.
   const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
     contactId,

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

@@ -4,7 +4,7 @@ const vendorFormSectionTitleClass = css`
   font-size: 14px;
   color: #8f99a8;
   margin-bottom: 18px;
-  margin-top: 0;
+  margin-top: 10px;
 `;
 
 export function VendorFormSectionTitle({ children }: { children: React.ReactNode | string }) {

packages/webapp/src/routes/dashboard.tsx

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

packages/webapp/src/style/objects/buttons.scss

@@ -8,6 +8,12 @@
   min-height: 32px;
   padding-left: 12px;
   padding-right: 12px;
+
+  &.bp4-outlined {
+    .bp4-dark & {
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+  }
 }
 
 .bp4-button:not([class*='bp4-intent-']) {