feat: form header fields

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx

@@ -5,6 +5,8 @@ import styled from 'styled-components';
 import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { css } from '@emotion/css';
+import { useTheme } from '@emotion/react';
 
 import { CLASSES } from '@/constants/classes';
 import {
@@ -14,6 +16,7 @@ import {
   CustomerDrawerLink,
   FFormGroup,
   CustomersSelect,
+  Stack,
 } from '@/components';
 import { customerNameFieldShouldUpdate } from './utils';
 
@@ -28,12 +31,31 @@ import {
 } from '@/utils';
 import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
 
+const getCreditNoteFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Credit note form header fields.
  */
-export default function CreditNoteFormHeaderFields({}) {
+export default function CreditNoteFormHeaderFields() {
+  const theme = useTheme();
+  const styleClassName = getCreditNoteFieldsStyle(theme);
+
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={styleClassName}>
       {/* ----------- Customer name ----------- */}
       <CreditNoteCustomersSelect />
 
@@ -65,24 +87,15 @@ export default function CreditNoteFormHeaderFields({}) {
           </FormGroup>
         )}
       </FastField>
+
       {/* ----------- Credit note # ----------- */}
       <CreditNoteTransactionNoField />
 
       {/* ----------- Reference ----------- */}
-      <FastField name={'reference_no'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference_no'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference_no" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
-    </div>
+      <FormGroup label={<T id={'reference_no'} />} name={'reference_no'} inline>
+        <InputGroup name={'reference_no'} minimal />
+      </FormGroup>
+    </Stack>
   );
 }