fix: Invoice form layout

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
 import {
   Intent,
   Button,
@@ -12,7 +11,6 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { If, Icon, FormattedMessage as T, Group, FSelect } from '@/components';
-import { CLASSES } from '@/constants/classes';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import { useEstimateFormContext } from './EstimateFormProvider';
@@ -21,6 +19,7 @@ import {
   BrandingThemeFormGroup,
   BrandingThemeSelectButton,
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
+import { PageForm } from '@/components/PageForm';
 
 /**
  * Estimate floating actions bar.
@@ -81,144 +80,145 @@ export default function EstimateFloatingActions() {
   const brandingTemplatesOptions = useEstimateFormBrandingTemplatesOptions();
 
   return (
-    <Group
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
-      {/* ----------- Save And Deliver ----------- */}
-      <If condition={!estimate || !estimate?.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 position={'apart'} spacing={10}>
+      <Group spacing={10}>
+        {/* ----------- Save And Deliver ----------- */}
+        <If condition={!estimate || !estimate?.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}
+            >
+              <Button
+                disabled={isSubmitting}
+                intent={Intent.PRIMARY}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </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}
+            >
+              <Button
+                disabled={isSubmitting}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+        </If>
+
+        {/* ----------- Save and New ----------- */}
+        <If condition={estimate && estimate?.is_delivered}>
+          <ButtonGroup>
             <Button
               disabled={isSubmitting}
               intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              onClick={handleSubmitDeliverBtnClick}
+              style={{ minWidth: '85px' }}
+              text={<T id={'save'} />}
             />
-          </Popover>
-        </ButtonGroup>
+            <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>
 
-        {/* ----------- 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}
-          >
-            <Button
-              disabled={isSubmitting}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-      </If>
-
-      {/* ----------- Save and New ----------- */}
-      <If condition={estimate && estimate?.is_delivered}>
-        <ButtonGroup>
-          <Button
-            disabled={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}
-          >
-            <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={estimate ? <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 }}
+        {/* ----------- Clear & Reset----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleClearBtnClick}
+          text={estimate ? <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/Estimates/EstimateForm/EstimateForm.tsx

@@ -1,11 +1,10 @@
 // @ts-nocheck
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
+import { css } from '@emotion/css';
 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 {
   CreateEstimateFormSchema,
@@ -36,8 +35,9 @@ import {
   handleErrors,
   resetFormState,
 } from './utils';
+import { PageForm } from '@/components/PageForm';
 
-/**
+/**6
  * Estimate form.
  */
 function EstimateForm({
@@ -148,36 +148,42 @@ function EstimateForm({
   };
 
   return (
-    <div
-      className={classNames(
-        CLASSES.PAGE_FORM,
-        CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_ESTIMATE,
-      )}
+    <Formik
+      validationSchema={
+        isNewMode ? CreateEstimateFormSchema : EditEstimateFormSchema
+      }
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
     >
-      <Formik
-        validationSchema={
-          isNewMode ? CreateEstimateFormSchema : EditEstimateFormSchema
-        }
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
+      <Form
+        className={css({
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1
+        })}
       >
-        <Form>
-          <EstimtaeFormTopBar />
-          <EstimateFormHeader />
-          <EstimateItemsEntriesField />
-          <EstimateFormFooter />
-          <EstimateFloatingActions />
+        <PageForm flex={1}>
+          <PageForm.Body>
+            <EstimtaeFormTopBar />
+            <EstimateFormHeader />
+            <EstimateItemsEntriesField />
+            <EstimateFormFooter />
+          </PageForm.Body>
 
-          {/*------- Dialogs -------*/}
-          <EstimateFormDialogs />
+          <PageForm.Footer>
+            <EstimateFloatingActions />
+          </PageForm.Footer>
+        </PageForm>
 
-          {/*------- Effects -------*/}
-          <EstimateIncrementSyncSettingsToForm />
-          <EstimateSyncAutoExRateToForm />
-        </Form>
-      </Formik>
-    </div>
+        {/*------- Dialogs -------*/}
+        <EstimateFormDialogs />
+
+        {/*------- Effects -------*/}
+        <EstimateIncrementSyncSettingsToForm />
+        <EstimateSyncAutoExRateToForm />
+      </Form>
+    </Formik>
   );
 }
 

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.tsx

@@ -1,9 +1,7 @@
 // @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 { EstimateFormFooterLeft } from './EstimateFormFooterLeft';
 import { EstimateFormFooterRight } from './EstimateFormFooterRight';
@@ -14,8 +12,8 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
  */
 export default function EstiamteFormFooter() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <EstimateFooterPaper>
+    <x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <EstimateFormFooterLeft />
@@ -26,11 +24,7 @@ export default function EstiamteFormFooter() {
             <EstimateFormFooterRight />
           </Col>
         </Row>
-      </EstimateFooterPaper>
-    </div>
+      </Paper>
+    </x.div>
   );
 }
-
-const EstimateFooterPaper = styled(Paper)`
-  padding: 20px;
-`;

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx

@@ -1,22 +1,25 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
+import { x } from '@xstyled/emotion';
 
 import EstimateFormHeaderFields from './EstimateFormHeaderFields';
-
 import { getEntriesTotal } from '@/containers/Entries/utils';
 import { PageFormBigNumber } from '@/components';
 
 // Estimate form top header.
 function EstimateFormHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <x.div
+      display="flex"
+      bg="white"
+      p="25px 32px"
+      borderBottom="1px solid #d2dce2"
+    >
       <EstimateFormHeaderFields />
       <EstimateFormBigTotal />
-    </div>
+    </x.div>
   );
 }
 

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.tsx

@@ -1,12 +1,15 @@
 // @ts-nocheck
 import React from 'react';
 import { useParams } from 'react-router-dom';
-
-import '@/style/pages/SaleEstimate/PageForm.scss';
+import { css } from '@emotion/css';
 
 import EstimateForm from './EstimateForm';
-import { EstimateFormProvider } from './EstimateFormProvider';
+import {
+  EstimateFormProvider,
+  useEstimateFormContext,
+} from './EstimateFormProvider';
 import { AutoExchangeRateProvider } from '@/containers/Entries/AutoExchangeProvider';
+import { DashboardInsider } from '@/components';
 
 /**
  * Estimate form page.
@@ -18,8 +21,24 @@ export default function EstimateFormPage() {
   return (
     <EstimateFormProvider estimateId={idInteger}>
       <AutoExchangeRateProvider>
-        <EstimateForm />
+        <EstimateFormPageContent />
       </AutoExchangeRateProvider>
     </EstimateFormProvider>
   );
 }
+
+export function EstimateFormPageContent() {
+  const { isBootLoading } = useEstimateFormContext();
+
+  return (
+    <DashboardInsider
+      loading={isBootLoading}
+      className={css`
+        min-height: calc(100vh - var(--top-offset));
+        max-height: calc(100vh - var(--top-offset));
+      `}
+    >
+      <EstimateForm />
+    </DashboardInsider>
+  );
+}

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.tsx

@@ -103,6 +103,13 @@ function EstimateFormProvider({ query, estimateId, ...props }) {
   const isFeatureLoading =
     isWarehouesLoading || isBranchesLoading || isProjectsLoading;
 
+  const isBootLoading =
+    isCustomersLoading ||
+    isItemsLoading ||
+    isEstimateLoading ||
+    isBrandingTemplatesLoading ||
+    isSaleEstimateStateLoading;
+
   // Provider payload.
   const provider = {
     estimateId,
@@ -136,20 +143,11 @@ function EstimateFormProvider({ query, estimateId, ...props }) {
     // Estimate state
     saleEstimateState,
     isSaleEstimateStateLoading,
+
+    isBootLoading,
   };
 
-  const isLoading =
-    isCustomersLoading ||
-    isItemsLoading ||
-    isEstimateLoading ||
-    isBrandingTemplatesLoading ||
-    isSaleEstimateStateLoading;
-
-  return (
-    <DashboardInsider loading={isLoading} name={'estimate-form'}>
-      <EstimateFormContext.Provider value={provider} {...props} />
-    </DashboardInsider>
-  );
+  return <EstimateFormContext.Provider value={provider} {...props} />;
 }
 
 const useEstimateFormContext = () =>