fix: Invoice form layout

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import {
   Intent,
   Button,
@@ -15,12 +14,12 @@ import { useHistory } from 'react-router-dom';
 import { FSelect, Group, Icon, FormattedMessage as T } from '@/components';
 import { useFormikContext } from 'formik';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
-import { CLASSES } from '@/constants/classes';
 import {
   BrandingThemeFormGroup,
   BrandingThemeSelectButton,
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
 import { usePaymentReceivedFormBrandingTemplatesOptions } from './utils';
+import { PageForm } from '@/components/PageForm';
 
 /**
  * Payment receive floating actions bar.
@@ -62,80 +61,80 @@ export default function PaymentReceiveFormFloatingActions() {
     usePaymentReceivedFormBrandingTemplatesOptions();
 
   return (
-    <Group
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
-      {/* ----------- Save and New ----------- */}
-      <ButtonGroup>
-        <Button
-          disabled={isSubmitting}
-          loading={isSubmitting}
-          intent={Intent.PRIMARY}
-          type="submit"
-          onClick={handleSubmitBtnClick}
-          style={{ minWidth: '85px' }}
-          text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
-        />
-        <Popover
-          content={
-            <Menu>
-              <MenuItem
-                text={<T id={'save_and_new'} />}
-                onClick={handleSubmitAndNewClick}
-              />
-              <MenuItem
-                text={<T id={'save_continue_editing'} />}
-                onClick={handleSubmitContinueEditingBtnClick}
-              />
-            </Menu>
-          }
-          minimal={true}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
+    <PageForm.FooterActions position={'apart'} spacing={20}>
+      <Group spacing={10}>
+        {/* ----------- Save and New ----------- */}
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
+            loading={isSubmitting}
             intent={Intent.PRIMARY}
-            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            type="submit"
+            onClick={handleSubmitBtnClick}
+            style={{ minWidth: '85px' }}
+            text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
           />
-        </Popover>
-      </ButtonGroup>
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitAndNewClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitContinueEditingBtnClick}
+                />
+              </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>
 
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={!isNewMode ? <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={brandingTemplatesOpts}
-          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={!isNewMode ? <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={brandingTemplatesOpts}
+            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/PaymentsReceived/PaymentReceiveForm/PaymentReceiveForm.tsx

@@ -1,15 +1,12 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import { isEmpty, defaultTo } from 'lodash';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { Formik, Form } from 'formik';
 import { useHistory } from 'react-router-dom';
 import { Intent } from '@blueprintjs/core';
+import { css } from '@emotion/css';
 
-import '@/style/pages/PaymentReceive/PageForm.scss';
-
-import { CLASSES } from '@/constants/classes';
 import PaymentReceiveHeader from './PaymentReceiveFormHeader';
 import PaymentReceiveFormBody from './PaymentReceiveFormBody';
 import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
@@ -40,11 +37,12 @@ import {
   getExceededAmountFromValues,
 } from './utils';
 import { PaymentReceiveSyncIncrementSettingsToForm } from './components';
+import { PageForm } from '@/components/PageForm';
 
 /**
  * Payment Receive form.
  */
-function PaymentReceiveForm({
+function PaymentReceiveFormRoot({
   // #withSettings
   preferredDepositAccount,
   paymentReceiveNextNumber,
@@ -159,30 +157,37 @@ function PaymentReceiveForm({
       return createPaymentReceiveMutate(form).then(onSaved).catch(onError);
     }
   };
+
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_PAYMENT_RECEIVE,
-      )}
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmitForm}
+      validationSchema={
+        isNewMode
+          ? CreatePaymentReceiveFormSchema
+          : EditPaymentReceiveFormSchema
+      }
     >
-      <Formik
-        initialValues={initialValues}
-        onSubmit={handleSubmitForm}
-        validationSchema={
-          isNewMode
-            ? CreatePaymentReceiveFormSchema
-            : EditPaymentReceiveFormSchema
-        }
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        })}
       >
-        <Form>
+        <PageForm flex={1}>
           <PaymentReceiveInnerProvider>
-            <PaymentReceiveFormTopBar />
-            <PaymentReceiveHeader />
-            <PaymentReceiveFormBody />
-            <PaymentReceiveFormFooter />
-            <PaymentReceiveFloatingActions />
+            <PageForm.Body>
+              <PaymentReceiveFormTopBar />
+              <PaymentReceiveHeader />
+              <PaymentReceiveFormBody />
+              <PaymentReceiveFormFooter />
+            </PageForm.Body>
+
+            <PageForm.Footer>
+              <PaymentReceiveFloatingActions />
+            </PageForm.Footer>
 
             {/* ------- Effects ------- */}
             <PaymentReceiveSyncIncrementSettingsToForm />
@@ -191,13 +196,13 @@ function PaymentReceiveForm({
             <PaymentReceiveFormAlerts />
             <PaymentReceiveFormDialogs />
           </PaymentReceiveInnerProvider>
-        </Form>
-      </Formik>
-    </div>
+        </PageForm>
+      </Form>
+    </Formik>
   );
 }
 
-export default compose(
+export const PaymentReceivedForm = compose(
   withSettings(({ paymentReceiveSettings }) => ({
     paymentReceiveSettings,
     paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
@@ -207,4 +212,4 @@ export default compose(
   })),
   withCurrentOrganization(),
   withDialogActions,
-)(PaymentReceiveForm);
+)(PaymentReceiveFormRoot);

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx

@@ -1,21 +1,19 @@
 // @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 { Row, Col, Paper } from '@/components';
 import { PaymentReceiveFormFootetLeft } from './PaymentReceiveFormFootetLeft';
 import { PaymentReceiveFormFootetRight } from './PaymentReceiveFormFootetRight';
 import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 /**
- * Payment receive form footer.
+ * Payment received form footer.
  */
 export default function PaymentReceiveFormFooter() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <PaymentReceiveFooterPaper>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <PaymentReceiveFormFootetLeft />
@@ -26,11 +24,7 @@ export default function PaymentReceiveFormFooter() {
             <PaymentReceiveFormFootetRight />
           </Col>
         </Row>
-      </PaymentReceiveFooterPaper>
-    </div>
+      </Paper>
+    </x.div>
   );
 }
-
-const PaymentReceiveFooterPaper = styled(Paper)`
-  padding: 20px;
-`;

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormPage.tsx

@@ -1,20 +1,40 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
-
-import { PaymentReceiveFormProvider } from './PaymentReceiveFormProvider';
-import PaymentReceiveForm from './PaymentReceiveForm';
+import { css } from '@xstyled/emotion';
+import {
+  PaymentReceiveFormProvider,
+  usePaymentReceiveFormContext,
+} from './PaymentReceiveFormProvider';
+import { PaymentReceivedForm } from './PaymentReceiveForm';
+import { DashboardInsider } from '@/components';
 
 /**
- * Payment receive form page.
+ * Payment received form page.
  */
 export default function PaymentReceiveFormPage() {
-  const { id: paymentReceiveId } = useParams();
-  const paymentReceiveIdInt = parseInt(paymentReceiveId, 10);
+  const { id } = useParams();
+  const paymentReceivedId = parseInt(id, 10);
 
   return (
-    <PaymentReceiveFormProvider paymentReceiveId={paymentReceiveIdInt}>
-      <PaymentReceiveForm paymentReceiveId={paymentReceiveIdInt} />
+    <PaymentReceiveFormProvider paymentReceiveId={paymentReceivedId}>
+      <PaymentReceivedFormPageContent />
     </PaymentReceiveFormProvider>
   );
 }
+
+function PaymentReceivedFormPageContent() {
+  const { isBootLoading } = usePaymentReceiveFormContext();
+
+  return (
+    <DashboardInsider
+      loading={isBootLoading}
+      className={css`
+        min-height: calc(100vh - var(--top-offset));
+        max-height: calc(100vh - var(--top-offset));
+      `}
+    >
+      <PaymentReceivedForm />
+    </DashboardInsider>
+  );
+}

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormProvider.tsx

@@ -97,6 +97,13 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
 
   const [isExcessConfirmed, setIsExcessConfirmed] = useState<boolean>(false);
 
+  const isBootLoading =
+    isPaymentLoading ||
+    isAccountsLoading ||
+    isCustomersLoading ||
+    isBrandingTemplatesLoading ||
+    isPaymentReceivedStateLoading;
+
   // Provider payload.
   const provider = {
     paymentReceiveId,
@@ -131,20 +138,11 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
     // Payment received state
     isPaymentReceivedStateLoading,
     paymentReceivedState,
+
+    isBootLoading,
   };
 
-  const isLoading =
-    isPaymentLoading ||
-    isAccountsLoading ||
-    isCustomersLoading ||
-    isBrandingTemplatesLoading ||
-    isPaymentReceivedStateLoading;
-
-  return (
-    <DashboardInsider loading={isLoading} name={'payment-receive-form'}>
-      <PaymentReceiveFormContext.Provider value={provider} {...props} />
-    </DashboardInsider>
-  );
+  return <PaymentReceiveFormContext.Provider value={provider} {...props} />;
 }
 
 const usePaymentReceiveFormContext = () =>