fix: Invoice form layout

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx

@@ -1,12 +1,11 @@
 // @ts-nocheck
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { sumBy, isEmpty } from 'lodash';
 import { useHistory } from 'react-router-dom';
+import { css } from '@emotion/css';
 
-import { CLASSES } from '@/constants/classes';
 import {
   EditReceiptFormSchema,
   CreateReceiptFormSchema,
@@ -38,11 +37,12 @@ import {
   ReceiptSyncAutoExRateToForm,
   ReceiptSyncIncrementSettingsToForm,
 } from './components';
+import { PageForm } from '@/components/PageForm';
 
 /**
  * Receipt form.
  */
-function ReceiptForm({
+function ReceiptFormRoot({
   // #withSettings
   receiptNextNumber,
   receiptNumberPrefix,
@@ -150,40 +150,46 @@ function ReceiptForm({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_RECEIPT,
-      )}
+    <Formik
+      validationSchema={
+        isNewMode ? CreateReceiptFormSchema : EditReceiptFormSchema
+      }
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
     >
-      <Formik
-        validationSchema={
-          isNewMode ? CreateReceiptFormSchema : EditReceiptFormSchema
-        }
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1
+        })}
       >
-        <Form>
-          <ReceiptFormTopBar />
-          <ReceiptFromHeader />
-          <ReceiptItemsEntriesEditor />
-          <ReceiptFormFooter />
-          <ReceiptFormFloatingActions />
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <ReceiptFormTopBar />
+            <ReceiptFromHeader />
+            <ReceiptItemsEntriesEditor />
+            <ReceiptFormFooter />
+          </PageForm.Body>
 
-          {/*---------- Dialogs ---------*/}
-          <ReceiptFormDialogs />
-css
-          {/*---------- Effects ---------*/}
-          <ReceiptSyncIncrementSettingsToForm />
-          <ReceiptSyncAutoExRateToForm />
-        </Form>
-      </Formik>
-    </div>
+          <PageForm.Footer>
+            <ReceiptFormFloatingActions />
+          </PageForm.Footer>
+        </PageForm>
+
+        {/*---------- Dialogs ---------*/}
+        <ReceiptFormDialogs />
+
+        {/*---------- Effects ---------*/}
+        <ReceiptSyncIncrementSettingsToForm />
+        <ReceiptSyncAutoExRateToForm />
+      </Form>
+    </Formik>
   );
 }
 
-export default compose(
+export const ReceiptForm = compose(
   withDashboardActions,
   withSettings(({ receiptSettings }) => ({
     receiptNextNumber: receiptSettings?.nextNumber,
@@ -194,4 +200,4 @@ export default compose(
     preferredDepositAccount: receiptSettings?.preferredDepositAccount,
   })),
   withCurrentOrganization(),
-)(ReceiptForm);
+)(ReceiptFormRoot);

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import {
   Intent,
   Button,
@@ -14,7 +13,6 @@ import {
 import { FSelect, Group, FormattedMessage as T } from '@/components';
 import { useFormikContext } from 'formik';
 import { useHistory } from 'react-router-dom';
-import { CLASSES } from '@/constants/classes';
 import { If, Icon } from '@/components';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import { useReceiptFormBrandingTemplatesOptions } from './utils';
@@ -22,6 +20,7 @@ import {
   BrandingThemeFormGroup,
   BrandingThemeSelectButton,
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
+import { PageForm } from '@/components/PageForm';
 
 /**
  * Receipt floating actions bar.
@@ -84,139 +83,142 @@ export default function ReceiptFormFloatingActions() {
   const brandingTemplatesOptions = useReceiptFormBrandingTemplatesOptions();
 
   return (
-    <Group
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
-      {/* ----------- Save And Close ----------- */}
-      <If condition={!receipt || !receipt?.is_closed}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            loading={isSubmitting}
-            intent={Intent.PRIMARY}
-            onClick={handleSubmitCloseBtnClick}
-            text={<T id={'save_close'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'close_and_new'} />}
-                  onClick={handleSubmitCloseAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'close_continue_editing'} />}
-                  onClick={handleSubmitCloseContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
+    <PageForm.FooterActions spacing={10} position="apart">
+      <Group spacing={10}>
+        {/* ----------- Save And Close ----------- */}
+        <If condition={!receipt || !receipt?.is_closed}>
+          <ButtonGroup>
             <Button
               disabled={isSubmitting}
+              loading={isSubmitting}
               intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              onClick={handleSubmitCloseBtnClick}
+              text={<T id={'save_close'} />}
             />
-          </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={'close_and_new'} />}
+                    onClick={handleSubmitCloseAndNewBtnClick}
+                  />
+                  <MenuItem
+                    text={<T id={'close_continue_editing'} />}
+                    onClick={handleSubmitCloseContinueEditingBtnClick}
+                  />
+                </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={receipt && receipt?.is_closed}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            intent={Intent.PRIMARY}
-            onClick={handleSubmitCloseBtnClick}
-            style={{ minWidth: '85px' }}
-            text={<T id={'save'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitCloseAndNewBtnClick}
-                />
-              </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={receipt ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
-      {/* ----------- Cancel ----------- */}
-      <Button
-        className={'ml1'}
-        onClick={handleCancelBtnClick}
-        text={<T id={'cancel'} />}
-      />
+            <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>
 
-      {/* ----------- 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 }}
+        {/* ----------- Save and New ----------- */}
+        <If condition={receipt && receipt?.is_closed}>
+          <ButtonGroup>
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              onClick={handleSubmitCloseBtnClick}
+              style={{ minWidth: '85px' }}
+              text={<T id={'save'} />}
+            />
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'save_and_new'} />}
+                    onClick={handleSubmitCloseAndNewBtnClick}
+                  />
+                </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={receipt ? <T id={'reset'} /> : <T id={'clear'} />}
         />
-      </BrandingThemeFormGroup>
-    </Group>
+        {/* ----------- Cancel ----------- */}
+        <Button
+          className={'ml1'}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </Group>
+
+      <Group spacing={20}>
+        {/* ----------- 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/Receipts/ReceiptForm/ReceiptFormPage.tsx

@@ -2,24 +2,36 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import '@/style/pages/SaleReceipt/PageForm.scss';
-
-import ReceiptFrom from './ReceiptForm';
-import { ReceiptFormProvider } from './ReceiptFormProvider';
+import {
+  ReceiptFormProvider,
+  useReceiptFormContext,
+} from './ReceiptFormProvider';
 import { AutoExchangeRateProvider } from '@/containers/Entries/AutoExchangeProvider';
+import { DashboardInsider } from '@/components';
+import { ReceiptForm } from './ReceiptForm';
 
 /**
  * Receipt form page.
  */
 export default function ReceiptFormPage() {
   const { id } = useParams();
-  const idInt = parseInt(id, 10);
+  const receiptId = parseInt(id, 10);
 
   return (
-    <ReceiptFormProvider receiptId={idInt}>
+    <ReceiptFormProvider receiptId={receiptId}>
       <AutoExchangeRateProvider>
-        <ReceiptFrom />
+        <ReceiptFormPageContent />
       </AutoExchangeRateProvider>
     </ReceiptFormProvider>
   );
 }
+
+function ReceiptFormPageContent() {
+  const { isBootLoading } = useReceiptFormContext();
+
+  return (
+    <DashboardInsider loading={isBootLoading}>
+      <ReceiptForm />
+    </DashboardInsider>
+  );
+}

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.tsx

@@ -120,6 +120,15 @@ function ReceiptFormProvider({ receiptId, ...props }) {
   const isNewMode = !receiptId;
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
+  const isBootLoading =
+    isReceiptLoading ||
+    isAccountsLoading ||
+    isCustomersLoading ||
+    isItemsLoading ||
+    isSettingLoading ||
+    isBrandingTemplatesLoading ||
+    isSaleReceiptStateLoading;
+
   const provider = {
     receiptId,
     receipt,
@@ -154,21 +163,10 @@ function ReceiptFormProvider({ receiptId, ...props }) {
     // State
     isSaleReceiptStateLoading,
     saleReceiptState,
-  };
-  const isLoading =
-    isReceiptLoading ||
-    isAccountsLoading ||
-    isCustomersLoading ||
-    isItemsLoading ||
-    isSettingLoading ||
-    isBrandingTemplatesLoading ||
-    isSaleReceiptStateLoading;
 
-  return (
-    <DashboardInsider loading={isLoading} name={'receipt-form'}>
-      <ReceiptFormContext.Provider value={provider} {...props} />
-    </DashboardInsider>
-  );
+    isBootLoading,
+  };
+  return <ReceiptFormContext.Provider value={provider} {...props} />;
 }
 
 const useReceiptFormContext = () =>