QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Invoice form layout

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-10-12 20:49:56 +02:00
parent 817ef906dc
commit b7b86bb0c5
38 changed files with 1582 additions and 940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
View File

@@ -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>
);
}

63
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx
View File

@@ -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(

28
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage.tsx
View File

@@ -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>
);
}

22
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.tsx
View File

@@ -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 = () =>

270
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
View File

@@ -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>
);
}

64
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
View File

@@ -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>
);
}

16
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.tsx
View File

@@ -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;
`;

13
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
View File

@@ -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>
);
}

27
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.tsx
View File

@@ -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>
);
}

22
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.tsx
View File

@@ -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 = () =>

255
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
View File

@@ -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 (
<Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Deliver ----------- */}
<If condition={!invoice || !invoice?.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 spacing={10} position={'apart'}>
<Group spacing={10}>
{/* ----------- Save And Deliver ----------- */}
<If condition={!invoice || !invoice?.is_delivered}>
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
onClick={handleSubmitDeliverBtnClick}
text={<T id={'save_and_deliver'} />}
/>
</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={'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}
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={invoice && invoice?.is_delivered}>
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={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}
>
<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={invoice && invoice?.is_delivered}>
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
onClick={handleSubmitDeliverBtnClick}
style={{ minWidth: '85px' }}
text={<T id={'save'} />}
/>
</Popover>
</ButtonGroup>
</If>
<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={invoice ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
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={invoice ? <T id={'reset'} /> : <T id={'clear'} />}
/>
</BrandingThemeFormGroup>
</Group>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</Group>
<Group spacing={10}>
{/* ----------- 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>
);
}

66
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
View File

@@ -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 (
<div
className={classNames(
CLASSES.PAGE_FORM,
CLASSES.PAGE_FORM_STRIP_STYLE,
CLASSES.PAGE_FORM_INVOICE,
)}
<Formik
validationSchema={
isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
}
initialValues={initialValues}
onSubmit={handleSubmit}
>
<Formik
validationSchema={
isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
}
initialValues={initialValues}
onSubmit={handleSubmit}
<Form
className={css({
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
flex: 1
})}
>
<Form>
<InvoiceFormTopBar />
<InvoiceFormHeader />
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<PageForm flex={1}>
<PageForm.Body>
<InvoiceFormTopBar />
<InvoiceFormHeader />
<InvoiceFormActions />
<InvoiceItemsEntriesEditorField />
</div>
<InvoiceFormFooter />
<InvoiceFloatingActions />
<InvoiceFormFooter />
</PageForm.Body>
<PageForm.Footer>
<InvoiceFloatingActions />
</PageForm.Footer>
{/*---------- Dialogs ----------*/}
<InvoiceFormDialogs />
@@ -187,13 +193,13 @@ function InvoiceForm({
{/*---------- Effects ----------*/}
<InvoiceNoSyncSettingsToForm />
<InvoiceExchangeRateSync />
</Form>
</Formik>
</div>
</PageForm>
</Form>
</Formik>
);
}
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);

18
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.tsx
View File

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<InvoiceFooterPaper>
<x.div mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
<Paper p={'20px'}>
<Row>
<Col md={8}>
<InvoiceFormFooterLeft />
@@ -23,11 +21,7 @@ export default function InvoiceFormFooter() {
<InvoiceFormFooterRight />
</Col>
</Row>
</InvoiceFooterPaper>
</div>
</Paper>
</x.div>
);
}
const InvoiceFooterPaper = styled(Paper)`
padding: 20px;
`;

13
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
View File

@@ -1,12 +1,10 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { x } from '@xstyled/emotion';
import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
import { CLASSES } from '@/constants/classes';
import { PageFormBigNumber } from '@/components';
import { useInvoiceDueAmount } from './utils';
@@ -15,10 +13,15 @@ import { useInvoiceDueAmount } from './utils';
*/
function InvoiceFormHeader() {
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<x.div
display="flex"
bg="white"
p="25px 32px"
borderBottom="1px solid #d2dce2"
>
<InvoiceFormHeaderFields />
<InvoiceFormBigTotal />
</div>
</x.div>
);
}

5
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
View File

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
<Stack spacing={0}>
{/* ----------- Customer name ----------- */}
<InvoiceFormCustomerSelect />
@@ -151,7 +152,7 @@ export default function InvoiceFormHeaderFields() {
)}
</FFormGroup>
</FeatureCan>
</div>
</Stack>
);
}

34
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.tsx
View File

@@ -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 (
<InvoiceFormProvider invoiceId={idAsInteger}>
<InvoiceFormProvider invoiceId={invoiceId}>
<AutoExchangeRateProvider>
<InvoiceForm />
<InvoiceFormPageContent />
</AutoExchangeRateProvider>
</InvoiceFormProvider>
);
}
function InvoiceFormPageContent() {
const { isBootLoading } = useInvoiceFormContext();
return (
<DashboardInsider
loading={isBootLoading}
className={css`
min-height: calc(100vh - var(--top-offset));
max-height: calc(100vh - var(--top-offset));
`}
>
<InvoiceForm />
</DashboardInsider>
);
}

24
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.tsx
View File

@@ -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 (
<DashboardInsider loading={isLoading} name={'invoice-form'}>
<InvoiceFormContext.Provider value={provider} {...props} />
</DashboardInsider>
);
return <InvoiceFormContext.Provider value={provider} {...props} />;
}
const useInvoiceFormContext = () =>

57
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx
View File

@@ -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 (
<FastField
name={'entries'}
items={items}
taxRates={taxRates}
shouldUpdate={entriesFieldShouldUpdate}
>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<ItemsEntriesTable
value={value}
onChange={(entries) => {
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}
/>
)}
</FastField>
<x.div p="18px 32px 0">
<FastField
name={'entries'}
items={items}
taxRates={taxRates}
shouldUpdate={entriesFieldShouldUpdate}
>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<ItemsEntriesTable
value={value}
onChange={(entries) => {
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
}
/>
)}
</FastField>
</x.div>
);
}

25
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css Normal file
View File

@@ -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;
}

141
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
View File

@@ -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>
);
}

67
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveForm.tsx
View File

@@ -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);

18
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFooter.tsx
View File

@@ -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;
`;

36
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormPage.tsx
View File

@@ -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>
);
}

22
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormProvider.tsx
View File

@@ -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 = () =>

70
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx
View File

@@ -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);

256
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
View File

@@ -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>
);
}

26
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.tsx
View File

@@ -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>
);
}

26
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.tsx
View File

@@ -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 = () =>