wip

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx

@@ -11,6 +11,7 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { Group, FormattedMessage as T } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
@@ -76,7 +77,7 @@ export default function BillFloatingActions() {
   };
 
   return (
-    <Group
+    <PageForm.FooterActions
       spacing={10}
       className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
     >
@@ -192,6 +193,6 @@ export default function BillFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </Group>
+    </PageForm.FooterActions>
   );
 }

packages/webapp/src/containers/Purchases/Bills/BillForm/BillForm.tsx

@@ -7,6 +7,7 @@ import { Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { isEmpty } from 'lodash';
 import { CLASSES } from '@/constants/classes';
+import { css } from '@emotion/css';
 
 import { EditBillFormSchema, CreateBillFormSchema } from './BillForm.schema';
 import BillFormHeader from './BillFormHeader';
@@ -15,7 +16,8 @@ import BillFormFooter from './BillFormFooter';
 import BillItemsEntriesEditor from './BillItemsEntriesEditor';
 import BillFormTopBar from './BillFormTopBar';
 
-import { AppToaster } from '@/components';
+import { AppToaster, Box } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { useBillFormContext } from './BillFormProvider';
 import { compose, safeSumBy } from '@/utils';
 import {
@@ -112,30 +114,37 @@ function BillForm({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_BILL,
-      )}
+    <Formik
+      validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
     >
-      <Formik
-        validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
       >
-        <Form>
-          <BillFormTopBar />
-          <BillFormHeader />
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-            <BillFormEntriesActions />
-            <BillItemsEntriesEditor />
-          </div>
-          <BillFormFooter />
-          <BillFloatingActions />
-        </Form>
-      </Formik>
-    </div>
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <BillFormTopBar />
+            <BillFormHeader />
+
+            <Box p="18px 32px 0">
+              <BillFormEntriesActions />
+              <BillItemsEntriesEditor />
+            </Box>
+            <BillFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
+            <BillFloatingActions />
+          </PageForm.Footer>
+        </PageForm>
+      </Form>
+    </Formik>
   );
 }
 export default compose(withCurrentOrganization())(BillForm);

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx

@@ -1,9 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-import styled from 'styled-components';
-
-import { CLASSES } from '@/constants/classes';
+import { x } from '@xstyled/emotion';
 import { Paper, Row, Col } from '@/components';
 import { BillFormFooterLeft } from './BillFormFooterLeft';
 import { BillFormFooterRight } from './BillFormFooterRight';
@@ -12,7 +9,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
 // Bill form floating actions.
 export default function BillFormFooter() {
   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}>
@@ -25,6 +22,6 @@ export default function BillFormFooter() {
           </Col>
         </Row>
       </Paper>
-    </div>
+    </x.div>
   );
 }

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx

@@ -1,9 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
-import { PageFormBigNumber } from '@/components';
+import { PageForm, PageFormBigNumber } from '@/components';
 
 import BillFormHeaderFields from './BillFormHeaderFields';
 import { useBillTotalFormatted } from './utils';
@@ -13,10 +11,10 @@ import { useBillTotalFormatted } from './utils';
  */
 function BillFormHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <PageForm.Header>
       <BillFormHeaderFields />
       <BillFormBigTotal />
-    </div>
+    </PageForm.Header>
   );
 }
 

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx

@@ -5,8 +5,9 @@ import classNames from 'classnames';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
+import { css } from '@emotion/css';
 
-import { FeatureCan, FormattedMessage as T } from '@/components';
+import { FeatureCan, Stack, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import {
   FFormGroup,
@@ -32,6 +33,24 @@ import {
   inputIntent,
 } from '@/utils';
 import { Features } from '@/constants';
+import { useTheme } from '@emotion/react';
+
+const getBillFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
 
 /**
  * Fill form header.
@@ -40,8 +59,11 @@ function BillFormHeader() {
   // Bill form context.
   const { vendors, projects } = useBillFormContext();
 
+  const theme = useTheme();
+  const billFieldsClassName = getBillFieldsStyle(theme);
+
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={billFieldsClassName}>
       {/* ------- Vendor name ------ */}
       <BillFormVendorField />
 
@@ -150,7 +172,7 @@ function BillFormHeader() {
           />
         </FFormGroup>
       </FeatureCan>
-    </div>
+    </Stack>
   );
 }