fix: Invoice form layout

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import {
   Intent,
   Button,
@@ -11,9 +11,7 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
 import { If, Icon, FormattedMessage as T, Group, FSelect } from '@/components';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { useInvoiceFormBrandingTemplatesOptions } from './utils';
@@ -21,6 +19,7 @@ import {
   BrandingThemeFormGroup,
   BrandingThemeSelectButton,
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
+import { PageForm } from '@/components/PageForm';
 
 /**
  * Invoice floating actions bar.
@@ -83,142 +82,144 @@ export default function InvoiceFloatingActions() {
   const brandingTemplatesOptions = useInvoiceFormBrandingTemplatesOptions();
 
   return (
-    <Group
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
-      {/* ----------- Save And Deliver ----------- */}
-      <If condition={!invoice || !invoice?.is_delivered}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            loading={isSubmitting}
-            intent={Intent.PRIMARY}
-            onClick={handleSubmitDeliverBtnClick}
-            text={<T id={'save_and_deliver'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'deliver_and_new'} />}
-                  onClick={handleSubmitDeliverAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'deliver_continue_editing'} />}
-                  onClick={handleSubmitDeliverContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
+    <PageForm.FooterActions spacing={10} position={'apart'}>
+      <Group spacing={10}>
+        {/* ----------- Save And Deliver ----------- */}
+        <If condition={!invoice || !invoice?.is_delivered}>
+          <ButtonGroup>
             <Button
               disabled={isSubmitting}
+              loading={isSubmitting}
               intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              onClick={handleSubmitDeliverBtnClick}
+              text={<T id={'save_and_deliver'} />}
             />
-          </Popover>
-        </ButtonGroup>
-        {/* ----------- Save As Draft ----------- */}
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            className={'ml1'}
-            onClick={handleSubmitDraftBtnClick}
-            text={<T id={'save_as_draft'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitDraftAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'save_continue_editing'} />}
-                  onClick={handleSubmitDraftContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'deliver_and_new'} />}
+                    onClick={handleSubmitDeliverAndNewBtnClick}
+                  />
+                  <MenuItem
+                    text={<T id={'deliver_continue_editing'} />}
+                    onClick={handleSubmitDeliverContinueEditingBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                intent={Intent.PRIMARY}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+
+          {/* ----------- Save As Draft ----------- */}
+          <ButtonGroup>
             <Button
               disabled={isSubmitting}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              className={'ml1'}
+              onClick={handleSubmitDraftBtnClick}
+              text={<T id={'save_as_draft'} />}
             />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      {/* ----------- Save and New ----------- */}
-      <If condition={invoice && invoice?.is_delivered}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            loading={isSubmitting}
-            intent={Intent.PRIMARY}
-            onClick={handleSubmitDeliverBtnClick}
-            style={{ minWidth: '85px' }}
-            text={<T id={'save'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitDeliverAndNewBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'save_and_new'} />}
+                    onClick={handleSubmitDraftAndNewBtnClick}
+                  />
+                  <MenuItem
+                    text={<T id={'save_continue_editing'} />}
+                    onClick={handleSubmitDraftContinueEditingBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+        </If>
+
+        {/* ----------- Save and New ----------- */}
+        <If condition={invoice && invoice?.is_delivered}>
+          <ButtonGroup>
             <Button
               disabled={isSubmitting}
+              loading={isSubmitting}
               intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              onClick={handleSubmitDeliverBtnClick}
+              style={{ minWidth: '85px' }}
+              text={<T id={'save'} />}
             />
-          </Popover>
-        </ButtonGroup>
-      </If>
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'save_and_new'} />}
+                    onClick={handleSubmitDeliverAndNewBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                intent={Intent.PRIMARY}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+        </If>
 
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={invoice ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
-      {/* ----------- Cancel ----------- */}
-      <Button
-        className={'ml1'}
-        onClick={handleCancelBtnClick}
-        text={<T id={'cancel'} />}
-      />
-
-      {/* ----------- Branding Template Select ----------- */}
-      <BrandingThemeFormGroup
-        name={'pdf_template_id'}
-        label={'Branding'}
-        inline
-        fastField
-        style={{ marginLeft: 20 }}
-      >
-        <FSelect
-          name={'pdf_template_id'}
-          items={brandingTemplatesOptions}
-          input={({ activeItem, text, label, value }) => (
-            <BrandingThemeSelectButton text={text || 'Brand Theme'} minimal />
-          )}
-          filterable={false}
-          popoverProps={{ minimal: true }}
+        {/* ----------- Clear & Reset----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleClearBtnClick}
+          text={invoice ? <T id={'reset'} /> : <T id={'clear'} />}
         />
-      </BrandingThemeFormGroup>
-    </Group>
+        {/* ----------- Cancel ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </Group>
+
+      <Group spacing={10}>
+        {/* ----------- Branding Template Select ----------- */}
+        <BrandingThemeFormGroup
+          name={'pdf_template_id'}
+          label={'Branding'}
+          inline
+          fastField
+          style={{ marginLeft: 20 }}
+        >
+          <FSelect
+            name={'pdf_template_id'}
+            items={brandingTemplatesOptions}
+            input={({ activeItem, text, label, value }) => (
+              <BrandingThemeSelectButton text={text || 'Brand Theme'} minimal />
+            )}
+            filterable={false}
+            popoverProps={{ minimal: true }}
+          />
+        </BrandingThemeFormGroup>
+      </Group>
+    </PageForm.FooterActions>
   );
 }
-

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx

@@ -1,12 +1,11 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { sumBy, isEmpty, defaultTo } from 'lodash';
 import { useHistory } from 'react-router-dom';
-import { CLASSES } from '@/constants/classes';
+import { css } from '@emotion/css';
 import {
   getCreateInvoiceFormSchema,
   getEditInvoiceFormSchema,
@@ -34,12 +33,16 @@ import {
   transformValueToRequest,
   resetFormState,
 } from './utils';
-import { InvoiceExchangeRateSync, InvoiceNoSyncSettingsToForm } from './components';
+import {
+  InvoiceExchangeRateSync,
+  InvoiceNoSyncSettingsToForm,
+} from './components';
+import { PageForm } from '@/components/PageForm';
 
 /**
  * Invoice form.
  */
-function InvoiceForm({
+function InvoiceFormRoot({
   // #withSettings
   invoiceNextNumber,
   invoiceNumberPrefix,
@@ -61,7 +64,7 @@ function InvoiceForm({
     createInvoiceMutate,
     editInvoiceMutate,
     submitPayload,
-    saleInvoiceState
+    saleInvoiceState,
   } = useInvoiceFormContext();
 
   // Invoice number.
@@ -156,30 +159,33 @@ function InvoiceForm({
   const EditInvoiceFormSchema = getEditInvoiceFormSchema();
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_INVOICE,
-      )}
+    <Formik
+      validationSchema={
+        isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
+      }
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
     >
-      <Formik
-        validationSchema={
-          isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
-        }
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
+      <Form 
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1
+        })}
       >
-        <Form>
-          <InvoiceFormTopBar />
-          <InvoiceFormHeader />
-
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <InvoiceFormTopBar />
+            <InvoiceFormHeader />
             <InvoiceFormActions />
             <InvoiceItemsEntriesEditorField />
-          </div>
-          <InvoiceFormFooter />
-          <InvoiceFloatingActions />
+            <InvoiceFormFooter />
+          </PageForm.Body>
+
+          <PageForm.Footer>
+            <InvoiceFloatingActions />
+          </PageForm.Footer>
 
           {/*---------- Dialogs ----------*/}
           <InvoiceFormDialogs />
@@ -187,13 +193,13 @@ function InvoiceForm({
           {/*---------- Effects ----------*/}
           <InvoiceNoSyncSettingsToForm />
           <InvoiceExchangeRateSync />
-        </Form>
-      </Formik>
-    </div>
+        </PageForm>
+      </Form>
+    </Formik>
   );
 }
 
-export default compose(
+export const InvoiceForm = compose(
   withDashboardActions,
   withSettings(({ invoiceSettings }) => ({
     invoiceNextNumber: invoiceSettings?.nextNumber,
@@ -203,4 +209,4 @@ export default compose(
     invoiceTermsConditions: invoiceSettings?.termsConditions,
   })),
   withCurrentOrganization(),
-)(InvoiceForm);
+)(InvoiceFormRoot);

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.tsx

@@ -1,18 +1,16 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-import styled from 'styled-components';
+import { x } from '@xstyled/emotion';
 
-import { CLASSES } from '@/constants/classes';
-import { Paper, Row, Col } from '@/components';
+import { Row, Col, Paper } from '@/components';
 import { InvoiceFormFooterLeft } from './InvoiceFormFooterLeft';
 import { InvoiceFormFooterRight } from './InvoiceFormFooterRight';
 import { UploadAttachmentButton } from '../../../Attachments/UploadAttachmentButton';
 
 export default function InvoiceFormFooter() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <InvoiceFooterPaper>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <InvoiceFormFooterLeft />
@@ -23,11 +21,7 @@ export default function InvoiceFormFooter() {
             <InvoiceFormFooterRight />
           </Col>
         </Row>
-      </InvoiceFooterPaper>
-    </div>
+      </Paper>
+    </x.div>
   );
 }
-
-const InvoiceFooterPaper = styled(Paper)`
-  padding: 20px;
-`;

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx

@@ -1,12 +1,10 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { useFormikContext } from 'formik';
+import { x } from '@xstyled/emotion';
 
 import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
-
-import { CLASSES } from '@/constants/classes';
 import { PageFormBigNumber } from '@/components';
 import { useInvoiceDueAmount } from './utils';
 
@@ -15,10 +13,15 @@ import { useInvoiceDueAmount } from './utils';
  */
 function InvoiceFormHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <x.div
+      display="flex"
+      bg="white"
+      p="25px 32px"
+      borderBottom="1px solid #d2dce2"
+    >
       <InvoiceFormHeaderFields />
       <InvoiceFormBigTotal />
-    </div>
+    </x.div>
   );
 }
 

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx

@@ -15,6 +15,7 @@ import {
   FieldRequiredHint,
   FeatureCan,
   CustomersSelect,
+  Stack
 } from '@/components';
 import {
   momentFormatter,
@@ -47,7 +48,7 @@ export default function InvoiceFormHeaderFields() {
   const { values } = useFormikContext();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={0}>
       {/* ----------- Customer name ----------- */}
       <InvoiceFormCustomerSelect />
 
@@ -151,7 +152,7 @@ export default function InvoiceFormHeaderFields() {
           )}
         </FFormGroup>
       </FeatureCan>
-    </div>
+    </Stack>
   );
 }
 

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.tsx

@@ -1,25 +1,43 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
-
-import '@/style/pages/SaleInvoice/PageForm.scss';
-
-import InvoiceForm from './InvoiceForm';
-import { InvoiceFormProvider } from './InvoiceFormProvider';
+import { css } from '@emotion/css';
+import { InvoiceForm } from './InvoiceForm';
+import {
+  InvoiceFormProvider,
+  useInvoiceFormContext,
+} from './InvoiceFormProvider';
 import { AutoExchangeRateProvider } from '@/containers/Entries/AutoExchangeProvider';
+import { DashboardInsider } from '@/components';
 
 /**
  * Invoice form page.
  */
 export default function InvoiceFormPage() {
   const { id } = useParams();
-  const idAsInteger = parseInt(id, 10);
+  const invoiceId = parseInt(id, 10);
 
   return (
-    <InvoiceFormProvider invoiceId={idAsInteger}>
+    <InvoiceFormProvider invoiceId={invoiceId}>
       <AutoExchangeRateProvider>
-        <InvoiceForm />
+        <InvoiceFormPageContent />
       </AutoExchangeRateProvider>
     </InvoiceFormProvider>
   );
 }
+
+function InvoiceFormPageContent() {
+  const { isBootLoading } = useInvoiceFormContext();
+
+  return (
+    <DashboardInsider
+      loading={isBootLoading}
+      className={css`
+        min-height: calc(100vh - var(--top-offset));
+        max-height: calc(100vh - var(--top-offset));
+      `}
+    >
+      <InvoiceForm />
+    </DashboardInsider>
+  );
+}

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.tsx

@@ -132,6 +132,14 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
     isProjectsLoading ||
     isBrandingTemplatesLoading;
 
+  const isBootLoading =
+    isInvoiceLoading ||
+    isItemsLoading ||
+    isCustomersLoading ||
+    isEstimateLoading ||
+    isSettingsLoading ||
+    isInvoiceStateLoading;
+
   const provider = {
     invoice,
     items,
@@ -170,21 +178,11 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
     // Invoice state
     saleInvoiceState,
     isInvoiceStateLoading,
+
+    isBootLoading,
   };
 
-  const isLoading =
-    isInvoiceLoading ||
-    isItemsLoading ||
-    isCustomersLoading ||
-    isEstimateLoading ||
-    isSettingsLoading || 
-    isInvoiceStateLoading;
-
-  return (
-    <DashboardInsider loading={isLoading} name={'invoice-form'}>
-      <InvoiceFormContext.Provider value={provider} {...props} />
-    </DashboardInsider>
-  );
+  return <InvoiceFormContext.Provider value={provider} {...props} />;
 }
 
 const useInvoiceFormContext = () =>

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { FastField } from 'formik';
+import { x } from '@xstyled/emotion';
 import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { entriesFieldShouldUpdate } from './utils';
@@ -14,31 +15,35 @@ export default function InvoiceItemsEntriesEditorField() {
   const { items, taxRates } = useInvoiceFormContext();
 
   return (
-    <FastField
-      name={'entries'}
-      items={items}
-      taxRates={taxRates}
-      shouldUpdate={entriesFieldShouldUpdate}
-    >
-      {({
-        form: { values, setFieldValue },
-        field: { value },
-        meta: { error, touched },
-      }) => (
-        <ItemsEntriesTable
-          value={value}
-          onChange={(entries) => {
-            setFieldValue('entries', entries);
-          }}
-          items={items}
-          taxRates={taxRates}
-          itemType={ITEM_TYPE.SELLABLE}
-          errors={error}
-          linesNumber={4}
-          currencyCode={values.currency_code}
-          isInclusiveTax={values.inclusive_exclusive_tax === TaxType.Inclusive}
-        />
-      )}
-    </FastField>
+    <x.div p="18px 32px 0">
+      <FastField
+        name={'entries'}
+        items={items}
+        taxRates={taxRates}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <ItemsEntriesTable
+            value={value}
+            onChange={(entries) => {
+              setFieldValue('entries', entries);
+            }}
+            items={items}
+            taxRates={taxRates}
+            itemType={ITEM_TYPE.SELLABLE}
+            errors={error}
+            linesNumber={4}
+            currencyCode={values.currency_code}
+            isInclusiveTax={
+              values.inclusive_exclusive_tax === TaxType.Inclusive
+            }
+          />
+        )}
+      </FastField>
+    </x.div>
   );
 }

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css

@@ -0,0 +1,25 @@
+.dashboard__page{
+    overflow: hidden;
+    flex: 1;
+}
+
+dashboard__insider dashboard__insider--invoice-form{
+    overflow: hidden;
+    padding: 0;
+}
+
+page-form page-form--strip page-form--invoice{
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+}
+
+page-form form {
+    overflow: auto;
+    flex: 1;
+}
+
+page-form__footer {
+    padding-bottom: 20px;
+}