Fix: FloatingActions.

This commit is contained in:
elforjani3
2020-11-24 21:05:51 +02:00
parent 53dd447540
commit ec2d079291
16 changed files with 1147 additions and 504 deletions

View File

@@ -14,7 +14,7 @@ import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { saveInvoke } from 'utils';
import { Icon } from 'components';
import { If, Icon } from 'components';
/**
* Estimate floating actions bar.
@@ -25,12 +25,55 @@ export default function EstimateFloatingActions({
onCancelClick,
onClearClick,
estimateId,
estimatePublished,
}) {
const { resetForm, submitForm } = useFormikContext();
const handleSubmitBtnClick = (event) => {
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true
});
};
const handleSubmitPublishAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
};
const handleSubmitPublishContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
});
};
@@ -43,56 +86,117 @@ export default function EstimateFloatingActions({
resetForm();
};
const handleSubmitAndNewClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
});
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
text={estimateId ? <T id={'edit'} /> : <T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitAndNewClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
{/* ----------- Save And Publish ----------- */}
<If condition={!estimateId}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
</Popover>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={estimateId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
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
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={estimateId && estimatePublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
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={estimateId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

View File

@@ -103,9 +103,9 @@ const EstimateForm = ({
: estimateNextNumber;
useEffect(() => {
const transNumber = !isNewMode ? estimate.estimate_number : estimateNumber;
const transNumber = !isNewMode ? estimate.estimate_number : estimateNumber;
if (isNewMode) {
if (!isNewMode) {
changePageTitle(formatMessage({ id: 'edit_estimate' }));
} else {
changePageTitle(formatMessage({ id: 'new_estimate' }));
@@ -199,11 +199,13 @@ const EstimateForm = ({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (submitPayload.redirect) {
history.push('/estimates');
}
if (submitPayload.resetForm) {
resetForm();
}
};
const onError = (errors) => {
@@ -263,8 +265,8 @@ const EstimateForm = ({
estimateId={estimateId}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
estimatePublished={true}
/>
</Form>
)}
</Formik>

View File

@@ -14,8 +14,7 @@ import { FormattedMessage as T } from 'react-intl';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { saveInvoke } from 'utils';
import { Icon } from 'components';
import { If, Icon } from 'components';
/**
* Invoice floating actions bar.
@@ -26,151 +25,178 @@ export default function InvoiceFloatingActions({
onCancelClick,
onClearClick,
invoice,
invoicePublished,
}) {
const { resetForm, submitForm } = useFormikContext();
const handleSubmitPublishAndNewBtnClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
},
[submitForm],
);
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true
});
};
const handleSubmitPublishContinueEditingBtnClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
},
[submitForm],
);
const handleSubmitPublishAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
};
const handleSubmitDraftAndNewBtnClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
},
[submitForm],
);
const handleSubmitPublishContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
},
[submitForm],
);
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
});
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
const handleClearBtnClick = (event) => {
// saveInvoke(onClearClick, event);
resetForm();
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save And Publish ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true,
});
}}
text={
invoice && invoice.id ? (
<T id={'edit'} />
) : (
<T id={'save_publish'} />
)
}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
{/* ----------- Save And Publish ----------- */}
<If condition={!invoice}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
</Popover>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
}}
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 rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />} />
</Popover>
{/* ----------- Clear ----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={(event) => {
resetForm();
saveInvoke(onClearClick, event);
}}
text={invoice && invoice.id ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={(event) => {
saveInvoke(onCancelClick, event);
}}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
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
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={invoice && invoicePublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
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'} />}
/>
</div>
);
}

View File

@@ -186,7 +186,6 @@ function InvoiceForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (submitPayload.redirect) {
history.push('/invoices');
@@ -230,7 +229,7 @@ function InvoiceForm({
},
[changePageSubtitle],
);
return (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_INVOICE)}>
<Formik
@@ -253,9 +252,10 @@ function InvoiceForm({
<InvoiceFormFooter />
<InvoiceFloatingActions
isSubmitting={isSubmitting}
invoice={invoice}
invoice={invoiceId}
onCancelClick={handleCancelClick}
onSubmitClick={handleSubmitClick}
invoicePublished={true}
/>
</Form>
)}

View File

@@ -46,19 +46,28 @@ export default function PaymentReceiveFormFloatingActions({
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
resetForm: true,
});
};
const handleSubmitContinueEditingBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
{/* ----------- Save and New ----------- */}
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
text={paymentReceiveId ? <T id={'edit'} /> : <T id={'save_and_send'} />}
text={paymentReceiveId ? <T id={'edit'} /> : <T id={'save'} />}
/>
<Popover
content={
@@ -67,6 +76,10 @@ export default function PaymentReceiveFormFloatingActions({
text={<T id={'save_and_new'} />}
onClick={handleSubmitAndNewClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
@@ -78,20 +91,20 @@ export default function PaymentReceiveFormFloatingActions({
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={paymentReceiveId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={paymentReceiveId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

View File

@@ -190,11 +190,13 @@ function PaymentReceiveForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (submitPayload.redirect) {
history.push('/payment-receives');
}
if (submitPayload.resetForm) {
resetForm();
}
};
// Handle request response errors.
const onError = (errors) => {
@@ -366,7 +368,7 @@ function PaymentReceiveForm({
const handleCancelClick = useCallback(() => {
history.goBack();
}, [history]);
return (
<div
className={classNames(

View File

@@ -201,11 +201,13 @@ function ReceiptForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (submitPayload.redirect) {
history.push('/receipts');
}
if (submitPayload.resetForm) {
resetForm();
}
};
// Handle the request error.
@@ -243,7 +245,7 @@ function ReceiptForm({
},
[history],
);
return (
<div className={classNames(CLASSES.PAGE_FORM_RECEIPT, CLASSES.PAGE_FORM)}>
<Formik
@@ -264,6 +266,7 @@ function ReceiptForm({
<ReceiptFormFloatingActions
isSubmitting={isSubmitting}
receiptId={receiptId}
receiptPublished={true}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
/>

View File

@@ -14,7 +14,7 @@ import { useFormikContext } from 'formik';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { saveInvoke } from 'utils';
import { Icon } from 'components';
import { If, Icon } from 'components';
/**
* Receipt floating actions bar.
@@ -22,21 +22,60 @@ import { Icon } from 'components';
export default function ReceiptFormFloatingActions({
isSubmitting,
receiptId,
receiptPublished,
onSubmitClick,
onCancelClick,
onClearClick,
}) {
const { resetForm, submitForm } = useFormikContext();
const handleSubmitAndNewClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
});
},
[submitForm],
);
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true,
});
};
const handleSubmitPublishAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
};
const handleSubmitPublishContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
});
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
@@ -49,51 +88,114 @@ export default function ReceiptFormFloatingActions({
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
});
}}
text={receiptId ? <T id={'edit'} /> : <T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitAndNewClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
{/* ----------- Save And Publish ----------- */}
<If condition={!receiptId}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
</Popover>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={receiptId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
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
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={receiptId && receiptPublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
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={receiptId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}