fix: Invoice form layout

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

@@ -12,9 +12,14 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T, Group, FSelect } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import classNames from 'classnames';
+import {
+  If,
+  Icon,
+  FormattedMessage as T,
+  Group,
+  FSelect,
+  PageForm,
+} from '@/components';
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 import {
   BrandingThemeFormGroup,
@@ -82,140 +87,141 @@ export default function CreditNoteFloatingActions() {
   const brandingTemplatesOptions = useCreditNoteFormBrandingTemplatesOptions();
 
   return (
-    <Group
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
-      {/* ----------- Save And Open  ----------- */}
-      <If condition={!creditNote || !creditNote?.is_open}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            loading={isSubmitting}
-            intent={Intent.PRIMARY}
-            onClick={handleSubmitOpenBtnClick}
-            text={<T id={'save_open'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'open_and_new'} />}
-                  onClick={handleSubmitOpenAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'open_continue_editing'} />}
-                  onClick={handleSubmitOpenContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
+    <PageForm.FooterActions position={'apart'} spacing={20}>
+      <Group spacing={10}>
+        {/* ----------- Save And Open  ----------- */}
+        <If condition={!creditNote || !creditNote?.is_open}>
+          <ButtonGroup>
             <Button
               disabled={isSubmitting}
+              loading={isSubmitting}
               intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              onClick={handleSubmitOpenBtnClick}
+              text={<T id={'save_open'} />}
             />
-          </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={'open_and_new'} />}
+                    onClick={handleSubmitOpenAndNewBtnClick}
+                  />
+                  <MenuItem
+                    text={<T id={'open_continue_editing'} />}
+                    onClick={handleSubmitOpenContinueEditingBtnClick}
+                  />
+                </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={creditNote && creditNote?.is_open}>
-        <ButtonGroup>
-          <Button
-            loading={isSubmitting}
-            intent={Intent.PRIMARY}
-            onClick={handleSubmitOpenBtnClick}
-            style={{ minWidth: '85px' }}
-            text={<T id={'save'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitOpenAndNewBtnClick}
-                />
-              </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={creditNote && creditNote?.is_open}>
+          <ButtonGroup>
             <Button
-              disabled={isSubmitting}
+              loading={isSubmitting}
               intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              onClick={handleSubmitOpenBtnClick}
+              style={{ minWidth: '85px' }}
+              text={<T id={'save'} />}
             />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={creditNote ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
-      {/* ----------- Cancel ----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        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 }}
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'save_and_new'} />}
+                    onClick={handleSubmitOpenAndNewBtnClick}
+                  />
+                </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={creditNote ? <T id={'reset'} /> : <T id={'clear'} />}
         />
-      </BrandingThemeFormGroup>
-    </Group>
+        {/* ----------- Cancel ----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </Group>
+
+      <Group>
+        {/* ----------- 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/CreditNotes/CreditNoteForm/CreditNoteForm.tsx

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { defaultTo, isEmpty } from 'lodash';
-import { CLASSES } from '@/constants/classes';
+import { css } from '@emotion/css';
+
 import {
   CreateCreditNoteFormSchema,
   EditCreditNoteFormSchema,
@@ -42,6 +42,7 @@ import {
   CreditNoteExchangeRateSync,
   CreditNoteSyncIncrementSettingsToForm,
 } from './components';
+import { PageForm } from '@/components/PageForm';
 
 /**
  * Credit note form.
@@ -148,36 +149,42 @@ function CreditNoteForm({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_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>
-          <CreditNoteFormTopBar />
-          <CreditNoteFormHeader />
-          <CreditNoteItemsEntriesEditorField />
-          <CreditNoteFormFooter />
-          <CreditNoteFloatingActions />
+        <PageForm flex="1">
+          <PageForm.Body>
+            <CreditNoteFormTopBar />
+            <CreditNoteFormHeader />
+            <CreditNoteItemsEntriesEditorField />
+            <CreditNoteFormFooter />
+          </PageForm.Body>
 
-          {/*-------- Dialogs --------*/}
-          <CreditNoteFormDialogs />
+          <PageForm.Footer>
+            <CreditNoteFloatingActions />
+          </PageForm.Footer>
+        </PageForm>
 
-          {/*-------- Effects --------*/}
-          <CreditNoteSyncIncrementSettingsToForm />
-          <CreditNoteExchangeRateSync />
-        </Form>
-      </Formik>
-    </div>
+        {/*-------- Dialogs --------*/}
+        <CreditNoteFormDialogs />
+
+        {/*-------- Effects --------*/}
+        <CreditNoteSyncIncrementSettingsToForm />
+        <CreditNoteExchangeRateSync />
+      </Form>
+    </Formik>
   );
 }
 export default compose(

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

@@ -1,12 +1,14 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
-
-import '@/style/pages/CreditNote/PageForm.scss';
-
+import { css } from '@emotion/css';
 import CreditNoteForm from './CreditNoteForm';
-import { CreditNoteFormProvider } from './CreditNoteFormProvider';
+import {
+  CreditNoteFormProvider,
+  useCreditNoteFormContext,
+} from './CreditNoteFormProvider';
 import { AutoExchangeRateProvider } from '@/containers/Entries/AutoExchangeProvider';
+import { DashboardInsider } from '@/components';
 
 /**
  * Credit note form page.
@@ -18,8 +20,24 @@ export default function CreditNoteFormPage() {
   return (
     <CreditNoteFormProvider creditNoteId={idAsInteger}>
       <AutoExchangeRateProvider>
-        <CreditNoteForm />
+        <CreditNoteFormPageContent />
       </AutoExchangeRateProvider>
     </CreditNoteFormProvider>
   );
 }
+
+function CreditNoteFormPageContent() {
+  const { isBootLoading } = useCreditNoteFormContext();
+
+  return (
+    <DashboardInsider
+      loading={isBootLoading}
+      className={css`
+        min-height: calc(100vh - var(--top-offset));
+        max-height: calc(100vh - var(--top-offset));
+      `}
+    >
+      <CreditNoteForm />
+    </DashboardInsider>
+  );
+}

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

@@ -113,6 +113,13 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
       })
     : [];
 
+  const isBootLoading =
+    isItemsLoading ||
+    isCustomersLoading ||
+    isCreditNoteLoading ||
+    isInvoiceLoading ||
+    isBrandingTemplatesLoading;
+
   // Provider payload.
   const provider = {
     items,
@@ -141,20 +148,11 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     // Credit note state
     creditNoteState,
     isCreditNoteStateLoading,
+
+    isBootLoading,
   };
 
-  const isLoading =
-    isItemsLoading ||
-    isCustomersLoading ||
-    isCreditNoteLoading ||
-    isInvoiceLoading ||
-    isBrandingTemplatesLoading;
-
-  return (
-    <DashboardInsider loading={isLoading} name={'credit-note-form'}>
-      <CreditNoteFormContext.Provider value={provider} {...props} />
-    </DashboardInsider>
-  );
+  return <CreditNoteFormContext.Provider value={provider} {...props} />;
 }
 
 const useCreditNoteFormContext = () =>