wip

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import {
@@ -13,8 +12,8 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T, Group } from '@/components';
-import { CLASSES } from '@/constants/classes';
+import { If, Icon, FormattedMessage as T } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 
 /**
@@ -74,10 +73,7 @@ export default function VendorCreditNoteFloatingActions() {
     resetForm();
   };
   return (
-    <Group
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
+    <PageForm.FooterActions spacing={10}>
       {/* ----------- Save And Open  ----------- */}
       <If condition={!vendorCredit || !vendorCredit?.is_open}>
         <ButtonGroup>
@@ -189,6 +185,6 @@ export default function VendorCreditNoteFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </Group>
+    </PageForm.FooterActions>
   );
 }

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.tsx

@@ -7,6 +7,8 @@ import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { isEmpty } from 'lodash';
 import { CLASSES } from '@/constants/classes';
+import { css } from '@emotion/css';
+import { PageForm } from '@/components/PageForm';
 import {
   CreateCreditNoteFormSchema,
   EditCreditNoteFormSchema,
@@ -21,7 +23,7 @@ import VendorCreditNoteFormTopBar from './VendorCreditNoteFormTopBar';
 
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 
-import { AppToaster } from '@/components';
+import { AppToaster, Box } from '@/components';
 import { compose, safeSumBy, transactionNumber } from '@/utils';
 import {
   defaultVendorsCreditNote,
@@ -139,30 +141,42 @@ function VendorCreditNoteForm({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_VENDOR_CREDIT_NOTE,
-      )}
+    <Formik
+      validationSchema={
+        isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+      }
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
     >
-      <Formik
-        validationSchema={
-          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
-        }
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
       >
-        <Form>
-          <VendorCreditNoteFormTopBar />
-          <VendorCreditNoteFormHeader />
-          <VendorCreditNoteItemsEntriesEditor />
-          <VendorCreditNoteFormFooter />
-          <VendorCreditNoteFloatingActions />
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <VendorCreditNoteFormTopBar />
+            <VendorCreditNoteFormHeader />
+
+            <Box p="18px 32px 0">
+              <VendorCreditNoteItemsEntriesEditor />
+            </Box>
+
+            <VendorCreditNoteFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
+            <VendorCreditNoteFloatingActions />
+          </PageForm.Footer>
+
+          {/* ---------- Dialogs ---------- */}
           <VendorCreditNoteFormDialogs />
-        </Form>
-      </Formik>
-    </div>
+        </PageForm>
+      </Form>
+    </Formik>
   );
 }
 

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
+import { x } from '@xstyled/emotion';
 
 import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
@@ -14,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
  */
 export default function VendorCreditNoteFormFooter() {
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
       <Paper p={'20px'}>
         <Row>
           <Col md={8}>
@@ -27,6 +28,6 @@ export default function VendorCreditNoteFormFooter() {
           </Col>
         </Row>
       </Paper>
-    </div>
+    </x.div>
   );
 }

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx

@@ -1,9 +1,8 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
 import VendorCreditNoteFormHeaderFields from './VendorCreditNoteFormHeaderFields';
+import { PageForm } from '@/components/PageForm';
 import { PageFormBigNumber } from '@/components';
 import { useVendorCreditTotalFormatted } from './utils';
 
@@ -14,13 +13,13 @@ function VendorCreditNoteFormHeader() {
   const totalFormatted = useVendorCreditTotalFormatted();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <PageForm.Header>
       <VendorCreditNoteFormHeaderFields />
       <PageFormBigNumber
         label={intl.get('vendor_credits.label.amount_to_credit')}
         amount={totalFormatted}
       />
-    </div>
+    </PageForm.Header>
   );
 }
 

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx

@@ -10,8 +10,10 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
+import { useTheme } from '@emotion/react';
+import { css } from '@emotion/css';
 
+import { CLASSES } from '@/constants/classes';
 import {
   FFormGroup,
   FieldRequiredHint,
@@ -20,6 +22,7 @@ import {
   FormattedMessage as T,
   VendorDrawerLink,
   VendorsSelect,
+  Stack,
 } from '@/components';
 import {
   vendorsFieldShouldUpdate,
@@ -39,6 +42,23 @@ import {
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
+const getFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 500px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Vendor Credit note form header fields.
  */
@@ -51,6 +71,9 @@ function VendorCreditNoteFormHeaderFields({
   vendorcreditNumberPrefix,
   vendorcreditNextNumber,
 }) {
+  const theme = useTheme();
+  const fieldsClassName = getFieldsStyle(theme);
+
   // Handle vendor credit number changing.
   const handleVendorCreditNumberChange = () => {
     openDialog('vendor-credit-form');
@@ -76,7 +99,7 @@ function VendorCreditNoteFormHeaderFields({
   );
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={fieldsClassName}>
       {/* ----------- Vendor name ----------- */}
       <VendorCreditFormVendorSelect />
 
@@ -165,7 +188,7 @@ function VendorCreditNoteFormHeaderFields({
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </Stack>
   );
 }
 

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.tsx

@@ -2,8 +2,6 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import '@/style/pages/VendorsCreditNote/PageForm.scss';
-
 import VendorCreditNoteForm from './VendorCreditNoteForm';
 import { VendorCreditNoteFormProvider } from './VendorCreditNoteFormProvider';