wip

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFloatingActions.tsx

@@ -12,6 +12,7 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { Group, Icon, FormattedMessage as T } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
@@ -58,7 +59,7 @@ export default function PaymentMadeFloatingActions() {
   };
 
   return (
-    <Group
+    <PageForm.FooterActions
       spacing={10}
       className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
     >
@@ -110,6 +111,6 @@ export default function PaymentMadeFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </Group>
+    </PageForm.FooterActions>
   );
 }

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.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 PaymentMadeFooter() {
   return (
-    <div className={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 PaymentMadeFooter() {
           </Col>
         </Row>
       </Paper>
-    </div>
+    </x.div>
   );
 }

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeForm.tsx

@@ -4,11 +4,12 @@ import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { Formik, Form, FormikHelpers } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { sumBy, defaultTo } from 'lodash';
+import { defaultTo } from 'lodash';
 import { useHistory } from 'react-router-dom';
+import { css } from '@emotion/css';
 
 import { CLASSES } from '@/constants/classes';
-import { AppToaster } from '@/components';
+import { AppToaster, Box } from '@/components';
 import PaymentMadeHeader from './PaymentMadeFormHeader';
 import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
 import PaymentMadeFooter from './PaymentMadeFooter';
@@ -23,6 +24,7 @@ import { compose, orderingLinesIndexes } from '@/utils';
 import withSettings from '@/containers/Settings/withSettings';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { PageForm } from '@/components/PageForm';
 
 import {
   EditPaymentMadeFormSchema,
@@ -144,32 +146,43 @@ function PaymentMadeForm({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_PAYMENT_MADE,
-      )}
+    <Formik
+      initialValues={initialValues}
+      validationSchema={
+        isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
+      }
+      onSubmit={handleSubmitForm}
     >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={
-          isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
-        }
-        onSubmit={handleSubmitForm}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
       >
-        <Form>
-          <PaymentMadeInnerProvider>
-            <PaymentMadeFormTopBar />
-            <PaymentMadeHeader />
-            <PaymentMadeFormBody />
-            <PaymentMadeFooter />
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <PaymentMadeInnerProvider>
+              <PaymentMadeFormTopBar />
+              <PaymentMadeHeader />
+
+              <Box p="18px 32px 0">
+                <PaymentMadeFormBody />
+              </Box>
+              <PaymentMadeFooter />
+            </PaymentMadeInnerProvider>
+          </PageForm.Body>
+
+          <PageForm.Footer>
             <PaymentMadeFloatingActions />
-            <PaymentMadeDialogs />
-          </PaymentMadeInnerProvider>
-        </Form>
-      </Formik>
-    </div>
+          </PageForm.Footer>
+
+          {/* --------- Dialogs --------- */}
+          <PaymentMadeDialogs />
+        </PageForm>
+      </Form>
+    </Formik>
   );
 }
 

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeader.tsx

@@ -1,9 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
-import { Money, FormattedMessage as T } from '@/components';
+import {
+  Money,
+  FormattedMessage as T,
+  PageForm,
+  PageFormBigNumber,
+} from '@/components';
 
 import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
 import { usePaymentmadeTotalAmount } from './utils';
@@ -20,23 +23,13 @@ function PaymentMadeFormHeader() {
   const totalAmount = usePaymentmadeTotalAmount();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        <PaymentMadeFormHeaderFields />
-
-        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
-          <div class="big-amount">
-            <span class="big-amount__label">
-              <T id={'amount_received'} />
-            </span>
-
-            <h1 class="big-amount__number">
-              <Money amount={totalAmount} currency={currency_code} />
-            </h1>
-          </div>
-        </div>
-      </div>
-    </div>
+    <PageForm.Header>
+      <PaymentMadeFormHeaderFields />
+      <PageFormBigNumber
+        label={<T id={'amount_received'} />}
+        amount={<Money amount={totalAmount} currency={currency_code} />}
+      />
+    </PageForm.Header>
   );
 }
 

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -13,9 +13,13 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, useFormikContext, ErrorMessage } from 'formik';
+import { css } from '@emotion/css';
+import { Theme, useTheme } from '@emotion/react';
+
 import {
   FInputGroup,
   FMoneyInputGroup,
+  Stack,
   FormattedMessage as T,
   VendorsSelect,
 } from '@/components';
@@ -47,6 +51,23 @@ import {
 } from '@/utils';
 import { accountsFieldShouldUpdate, vendorsFieldShouldUpdate } from './utils';
 
+const getFieldsStyle = (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%;
+    }
+  }
+`;
+
 /**
  * Payment made form header fields.
  */
@@ -57,6 +78,9 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
     setFieldValue,
   } = useFormikContext();
 
+  const theme = useTheme();
+  const fieldsClassName = getFieldsStyle(theme);
+
   // Payment made form context.
   const { accounts } = usePaymentMadeFormContext();
 
@@ -82,7 +106,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={fieldsClassName}>
       {/* ------------ Vendor name ------------ */}
       <PaymentFormVendorSelect />
 
@@ -202,7 +226,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       >
         <FInputGroup name={'reference'} minimal={true} fastField />
       </FFormGroup>
-    </div>
+    </Stack>
   );
 }