diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index d7bd5702e..effb13ba1 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -17,6 +17,8 @@
"@casl/ability": "^5.4.3",
"@casl/react": "^2.3.0",
"@craco/craco": "^5.9.0",
+ "@emotion/css": "^11.13.4",
+ "@emotion/react": "^11.13.3",
"@reduxjs/toolkit": "^1.2.5",
"@stripe/connect-js": "^3.3.12",
"@stripe/react-connect-js": "^3.3.13",
@@ -48,6 +50,7 @@
"@typescript-eslint/eslint-plugin": "^2.10.0",
"@typescript-eslint/parser": "^2.10.0",
"@welldone-software/why-did-you-render": "^6.0.0-rc.1",
+ "@xstyled/emotion": "^3.8.1",
"accounting": "^0.4.1",
"axios": "^1.6.0",
"basscss": "^8.0.2",
@@ -124,6 +127,7 @@
"style-loader": "0.23.1",
"styled-components": "^5.3.1",
"stylis-rtlcss": "^2.1.1",
+ "theme-ui": "^0.16.2",
"typescript": "^4.8.3",
"yup": "^0.28.1"
},
diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx
index 5c62605f9..a962d88f7 100644
--- a/packages/webapp/src/components/App.tsx
+++ b/packages/webapp/src/components/App.tsx
@@ -1,4 +1,5 @@
// @ts-nocheck
+import { defaultTheme, ThemeProvider } from '@xstyled/emotion';
import { lazy, Suspense } from 'react';
import { Router, Switch, Route } from 'react-router';
import { createBrowserHistory } from 'history';
@@ -35,6 +36,13 @@ const OneClickDemoPage = lazy(
const PaymentPortalPage = lazy(
() => import('@/containers/PaymentPortal/PaymentPortalPage'),
);
+
+
+const theme = {
+ ...defaultTheme,
+ // Customize your theme here
+}
+
/**
* App inner.
*/
@@ -42,30 +50,38 @@ function AppInsider({ history }) {
return (
-
-
-
- } />
-
-
-
-
-
-
-
+
+
+
+
+ }
+ />
+
+
+
+
+
+
+
- }
- />
- } />
- } />
- } />
-
-
-
+ }
+ />
+ } />
+ }
+ />
+ } />
+
+
+
-
+
+
);
diff --git a/packages/webapp/src/components/Dashboard/DashboardInsider.tsx b/packages/webapp/src/components/Dashboard/DashboardInsider.tsx
index f46dae7bb..3b1217816 100644
--- a/packages/webapp/src/components/Dashboard/DashboardInsider.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardInsider.tsx
@@ -2,6 +2,7 @@
import React from 'react';
import classnames from 'classnames';
import { LoadingIndicator } from '../Indicator';
+import { css } from '@emotion/css';
export function DashboardInsider({
loading,
@@ -9,6 +10,7 @@ export function DashboardInsider({
name,
mount = false,
className,
+ style
}) {
return (
{children}
diff --git a/packages/webapp/src/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx
new file mode 100644
index 000000000..2a37e8376
--- /dev/null
+++ b/packages/webapp/src/components/PageForm/PageForm.tsx
@@ -0,0 +1,90 @@
+import React, { FC } from 'react';
+import clsx from 'classnames';
+import { x, SystemProps } from '@xstyled/emotion';
+import { css } from '@emotion/css';
+import { Group, GroupProps } from '@/components';
+
+interface PageFormProps extends SystemProps {
+ children: React.ReactNode;
+}
+
+/**
+ *
+ * @returns {React.ReactNode}
+ */
+export const PageForm = ({ children, ...props }: PageFormProps) => {
+ return (
+
+ {children}
+
+ );
+};
+PageForm.displayName = 'PageFormBody';
+
+/**
+ *
+ * @returns {React.ReactNode}
+ */
+const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({
+ children,
+}) => {
+ return (
+
+ {children}{' '}
+
+ );
+};
+PageFormBody.displayName = 'PageFormBody';
+
+/**
+ *
+ * @returns {React.ReactNode}
+ */
+const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ children }) => {
+ return {children} ;
+};
+
+PageFormFooter.displayName = 'PageFormFooter';
+
+const footerActionsStyle = `
+ width: 100%;
+ background: #fff;
+ padding: 14px 18px;
+ border-top: 1px solid rgb(210, 221, 226);
+ box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+
+ .bp4-button-group{
+ .bp4-button{
+ &:not(:last-child),
+ &.bp4-popover-wrapper:not(:last-child) {
+ border-right: 1px solid rgba(92, 112, 127, 0.3);
+ margin-right: 0;
+
+ &.bp4-intent-primary{
+ border-right: 1px solid rgba(255, 255, 255, 0.3);
+ }
+ }
+ }
+ }
+`;
+
+const PageFormFooterActions: FC = ({
+ children,
+ className,
+ ...restProps
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+PageFormFooterActions.displayName = 'PageFormFooterActions';
+
+PageForm.Body = PageFormBody;
+PageForm.Footer = PageFormFooter;
+PageForm.FooterActions = PageFormFooterActions;
diff --git a/packages/webapp/src/components/PageForm/index.ts b/packages/webapp/src/components/PageForm/index.ts
index 56a507b60..90dc6f8e7 100644
--- a/packages/webapp/src/components/PageForm/index.ts
+++ b/packages/webapp/src/components/PageForm/index.ts
@@ -2,3 +2,4 @@
export * from './FormTopbar';
export * from './FormTopbarSelectInputs';
export * from './PageFormBigNumber';
+export * from './PageForm';
\ No newline at end of file
diff --git a/packages/webapp/src/components/Paper/Paper.tsx b/packages/webapp/src/components/Paper/Paper.tsx
index e8fe82bc5..91c9c7d2d 100644
--- a/packages/webapp/src/components/Paper/Paper.tsx
+++ b/packages/webapp/src/components/Paper/Paper.tsx
@@ -1,13 +1,20 @@
-// @ts-nocheck
import React from 'react';
-import styled from 'styled-components';
+import { x, SystemProps } from '@xstyled/emotion';
-export function Paper({ children, className }) {
- return {children};
+interface PaperProps extends SystemProps {
+ children: React.ReactNode;
}
-const PaperRoot = styled.div`
- border: 1px solid #d2dce2;
- background: #fff;
- padding: 10px;
-`;
+export const Paper = ({ children, ...props }: PaperProps) => {
+ return (
+
+ {children}
+
+ );
+};
+Paper.displayName = 'Paper';
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
index 85bd40d93..9fa8baec9 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
+++ b/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 (
-
- {/* ----------- Save And Open ----------- */}
-
-
- }
- />
-
- }
- onClick={handleSubmitOpenAndNewBtnClick}
- />
- }
- onClick={handleSubmitOpenContinueEditingBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
+
+
+ {/* ----------- Save And Open ----------- */}
+
+
}
+ onClick={handleSubmitOpenBtnClick}
+ text={}
/>
-
-
- {/* ----------- Save As Draft ----------- */}
-
- }
- />
-
- }
- onClick={handleSubmitDraftAndNewBtnClick}
- />
- }
- onClick={handleSubmitDraftContinueEditingBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
+
+ }
+ onClick={handleSubmitOpenAndNewBtnClick}
+ />
+ }
+ onClick={handleSubmitOpenContinueEditingBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+ {/* ----------- Save As Draft ----------- */}
+
}
+ className={'ml1'}
+ onClick={handleSubmitDraftBtnClick}
+ text={}
/>
-
-
-
- {/* ----------- Save and New ----------- */}
-
-
- }
- />
-
- }
- onClick={handleSubmitOpenAndNewBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
+
+ }
+ onClick={handleSubmitDraftAndNewBtnClick}
+ />
+ }
+ onClick={handleSubmitDraftContinueEditingBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+
+ {/* ----------- Save and New ----------- */}
+
+
}
+ onClick={handleSubmitOpenBtnClick}
+ style={{ minWidth: '85px' }}
+ text={}
/>
-
-
-
- {/* ----------- Clear & Reset----------- */}
- : }
- />
- {/* ----------- Cancel ----------- */}
- }
- />
-
- {/* ----------- Branding Template Select ----------- */}
-
- (
-
- )}
- filterable={false}
- popoverProps={{ minimal: true }}
+
+ }
+ onClick={handleSubmitOpenAndNewBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+
+ {/* ----------- Clear & Reset----------- */}
+ : }
/>
-
-
+ {/* ----------- Cancel ----------- */}
+ }
+ />
+
+
+
+ {/* ----------- Branding Template Select ----------- */}
+
+ (
+
+ )}
+ filterable={false}
+ popoverProps={{ minimal: true }}
+ />
+
+
+
);
}
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx
index a77ab1c40..e56d8e5f4 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx
+++ b/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 (
-
+ {/*-------- Dialogs --------*/}
+
+
+ {/*-------- Effects --------*/}
+
+
+
+
);
}
export default compose(
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage.tsx
index 872c2f053..9ba2ffe7e 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage.tsx
+++ b/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 (
-
+
);
}
+
+function CreditNoteFormPageContent() {
+ const { isBootLoading } = useCreditNoteFormContext();
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.tsx
index 42035e730..09259adb0 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.tsx
+++ b/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 (
-
-
-
- );
+ return ;
}
const useCreditNoteFormContext = () =>
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
index 31e7cf8dc..0b49459e1 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
+++ b/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 (
-
- {/* ----------- Save And Deliver ----------- */}
-
-
- }
- />
-
- }
- onClick={handleSubmitDeliverAndNewBtnClick}
- />
- }
- onClick={handleSubmitDeliverContinueEditingBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
+
+
+ {/* ----------- Save And Deliver ----------- */}
+
+
+ }
+ />
+
+ }
+ onClick={handleSubmitDeliverAndNewBtnClick}
+ />
+ }
+ onClick={handleSubmitDeliverContinueEditingBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+
+ {/* ----------- Save As Draft ----------- */}
+
+ }
+ />
+
+ }
+ onClick={handleSubmitDraftAndNewBtnClick}
+ />
+ }
+ onClick={handleSubmitDraftContinueEditingBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+
+
+ {/* ----------- Save and New ----------- */}
+
+
}
+ onClick={handleSubmitDeliverBtnClick}
+ style={{ minWidth: '85px' }}
+ text={}
/>
-
-
+
+ }
+ onClick={handleSubmitDeliverAndNewBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+
- {/* ----------- Save As Draft ----------- */}
-
- }
- />
-
- }
- onClick={handleSubmitDraftAndNewBtnClick}
- />
- }
- onClick={handleSubmitDraftContinueEditingBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
- }
- />
-
-
-
-
- {/* ----------- Save and New ----------- */}
-
-
- }
- />
-
- }
- onClick={handleSubmitDeliverAndNewBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
- }
- />
-
-
-
-
- {/* ----------- Clear & Reset----------- */}
- : }
- />
-
- {/* ----------- Cancel ----------- */}
- }
- />
-
- {/* ----------- Branding Template Select ----------- */}
-
- (
-
- )}
- filterable={false}
- popoverProps={{ minimal: true }}
+ {/* ----------- Clear & Reset----------- */}
+ : }
/>
-
-
+
+ {/* ----------- Cancel ----------- */}
+ }
+ />
+
+
+
+ {/* ----------- Branding Template Select ----------- */}
+
+ (
+
+ )}
+ filterable={false}
+ popoverProps={{ minimal: true }}
+ />
+
+
+
);
}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
index aa9b0bb21..a9dbbbf39 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
+++ b/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 (
-
+ {/*------- Dialogs -------*/}
+
+
+ {/*------- Effects -------*/}
+
+
+
+
);
}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.tsx
index 9e9ae1970..256e63f5b 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.tsx
+++ b/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 (
-
-
+
+
@@ -26,11 +24,7 @@ export default function EstiamteFormFooter() {
-
-
+
-
+
);
}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.tsx
index 0ca5d4e37..dca7fa3e8 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.tsx
+++ b/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 (
-
+
);
}
+
+export function EstimateFormPageContent() {
+ const { isBootLoading } = useEstimateFormContext();
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.tsx
index 0366e6178..1555be0e5 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.tsx
+++ b/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 (
-
-
-
- );
+ return ;
}
const useEstimateFormContext = () =>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
index 44e6b6716..ecf5f0139 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
+++ b/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 (
-
- {/* ----------- Save And Deliver ----------- */}
-
-
- }
- />
-
- }
- onClick={handleSubmitDeliverAndNewBtnClick}
- />
- }
- onClick={handleSubmitDeliverContinueEditingBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
+
+
+ {/* ----------- Save And Deliver ----------- */}
+
+
}
+ onClick={handleSubmitDeliverBtnClick}
+ text={}
/>
-
-
- {/* ----------- Save As Draft ----------- */}
-
- }
- />
-
- }
- onClick={handleSubmitDraftAndNewBtnClick}
- />
- }
- onClick={handleSubmitDraftContinueEditingBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
+
+ }
+ onClick={handleSubmitDeliverAndNewBtnClick}
+ />
+ }
+ onClick={handleSubmitDeliverContinueEditingBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+
+ {/* ----------- Save As Draft ----------- */}
+
}
+ className={'ml1'}
+ onClick={handleSubmitDraftBtnClick}
+ text={}
/>
-
-
-
- {/* ----------- Save and New ----------- */}
-
-
- }
- />
-
- }
- onClick={handleSubmitDeliverAndNewBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
+
+ }
+ onClick={handleSubmitDraftAndNewBtnClick}
+ />
+ }
+ onClick={handleSubmitDraftContinueEditingBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+
+
+ {/* ----------- Save and New ----------- */}
+
+
}
+ onClick={handleSubmitDeliverBtnClick}
+ style={{ minWidth: '85px' }}
+ text={}
/>
-
-
-
+
+ }
+ onClick={handleSubmitDeliverAndNewBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
+
- {/* ----------- Clear & Reset----------- */}
- : }
- />
- {/* ----------- Cancel ----------- */}
- }
- />
-
- {/* ----------- Branding Template Select ----------- */}
-
- (
-
- )}
- filterable={false}
- popoverProps={{ minimal: true }}
+ {/* ----------- Clear & Reset----------- */}
+ : }
/>
-
-
+ {/* ----------- Cancel ----------- */}
+ }
+ />
+
+
+
+ {/* ----------- Branding Template Select ----------- */}
+
+ (
+
+ )}
+ filterable={false}
+ popoverProps={{ minimal: true }}
+ />
+
+
+
);
}
-
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
index 3c1d1c981..2a410aed3 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
+++ b/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 (
-
+
+
+
);
}
-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);
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.tsx
index df91621a9..d39f06d55 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.tsx
+++ b/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 (
-
-
+
+
@@ -23,11 +21,7 @@ export default function InvoiceFormFooter() {
-
-
+
-
+
);
}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
index 17bd197e5..8b6bc5fd2 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
+++ b/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 (
-
+
{/* ----------- Customer name ----------- */}
@@ -151,7 +152,7 @@ export default function InvoiceFormHeaderFields() {
)}
-
+
);
}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.tsx
index 42190b42a..2daca2adc 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.tsx
+++ b/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 (
-
+
-
+
);
}
+
+function InvoiceFormPageContent() {
+ const { isBootLoading } = useInvoiceFormContext();
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.tsx
index c7cb96ede..6dc297efd 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.tsx
+++ b/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 (
-
-
-
- );
+ return ;
}
const useInvoiceFormContext = () =>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx
index 08f3a1a81..aa907de30 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx
+++ b/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 (
-
- {({
- form: { values, setFieldValue },
- field: { value },
- meta: { error, touched },
- }) => (
- {
- 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}
- />
- )}
-
+
+
+ {({
+ form: { values, setFieldValue },
+ field: { value },
+ meta: { error, touched },
+ }) => (
+ {
+ 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
+ }
+ />
+ )}
+
+
);
}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css
new file mode 100644
index 000000000..e7a746fd1
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
index 53f4e3b4b..44f80566f 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
+++ b/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 (
-
- {/* ----------- Save and New ----------- */}
-
- : }
- />
-
- }
- onClick={handleSubmitAndNewClick}
- />
- }
- onClick={handleSubmitContinueEditingBtnClick}
- />
-
- }
- minimal={true}
- interactionKind={PopoverInteractionKind.CLICK}
- position={Position.BOTTOM_LEFT}
- >
+
+
+ {/* ----------- Save and New ----------- */}
+
}
+ type="submit"
+ onClick={handleSubmitBtnClick}
+ style={{ minWidth: '85px' }}
+ text={!isNewMode ? : }
/>
-
-
+
+ }
+ onClick={handleSubmitAndNewClick}
+ />
+ }
+ onClick={handleSubmitContinueEditingBtnClick}
+ />
+
+ }
+ minimal={true}
+ interactionKind={PopoverInteractionKind.CLICK}
+ position={Position.BOTTOM_LEFT}
+ >
+ }
+ />
+
+
- {/* ----------- Clear & Reset----------- */}
- : }
- />
-
- {/* ----------- Cancel ----------- */}
- }
- />
-
- {/* ----------- Branding Template Select ----------- */}
-
- (
-
- )}
- filterable={false}
- popoverProps={{ minimal: true }}
+ {/* ----------- Clear & Reset----------- */}
+ : }
/>
-
-
+ {/* ----------- Cancel ----------- */}
+ }
+ />
+
+
+
+ {/* ----------- Branding Template Select ----------- */}
+
+ (
+
+ )}
+ filterable={false}
+ popoverProps={{ minimal: true }}
+ />
+
+
+
);
}
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveForm.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveForm.tsx
index 08c96d387..2ca3abb8b 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveForm.tsx
+++ b/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 (
-
+
+
+
);
}
-export default compose(
+export const PaymentReceivedForm = compose(
withSettings(({ paymentReceiveSettings }) => ({
paymentReceiveSettings,
paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
@@ -207,4 +212,4 @@ export default compose(
})),
withCurrentOrganization(),
withDialogActions,
-)(PaymentReceiveForm);
+)(PaymentReceiveFormRoot);
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx
index 97d2eac68..641c4f9ec 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx
+++ b/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 (
-
-
+
+
@@ -26,11 +24,7 @@ export default function PaymentReceiveFormFooter() {
-
-