refactor: esitmate alert.

This commit is contained in:
elforjani3
2021-01-27 13:04:32 +02:00
parent 8b7e9d7431
commit 62fcbf7c02
11 changed files with 386 additions and 158 deletions

View File

@@ -0,0 +1,78 @@
import React, { useCallback, useState } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Intent, Alert } from '@blueprintjs/core';
import { queryCache } from 'react-query';
import { AppToaster } from 'components';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
import { compose } from 'utils';
/**
* Estimate Approve alert.
*/
function EstimateApproveAlert({
name,
// #withAlertStoreConnect
isOpen,
payload: { estimateId },
// #withEstimateActions
requestApproveEstimate,
// #withAlertActions
closeAlert,
}) {
const { formatMessage } = useIntl();
const [isLoading, setLoading] = useState(false);
// handle cancel approve alert.
const handleCancelApproveEstimate = () => {
closeAlert(name);
};
// Handle confirm estimate approve.
const handleConfirmEstimateApprove = useCallback(() => {
setLoading(true);
requestApproveEstimate(estimateId)
.then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_estimate_has_been_approved_successfully',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('estimates-table');
})
.catch((error) => {})
.finally(() => {
setLoading(false);
closeAlert(name);
});
}, [estimateId, requestApproveEstimate, formatMessage]);
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'approve'} />}
icon="trash"
intent={Intent.WARNING}
isOpen={isOpen}
loading={isLoading}
onCancel={handleCancelApproveEstimate}
onConfirm={handleConfirmEstimateApprove}
>
<p>
<T id={'are_sure_to_approve_this_estimate'} />
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
withEstimateActions,
)(EstimateApproveAlert);

View File

@@ -0,0 +1,85 @@
import React, { useCallback, useState } from 'react';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import { Intent, Alert } from '@blueprintjs/core';
import { queryCache } from 'react-query';
import { AppToaster } from 'components';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
import { compose } from 'utils';
/**
* Estimate delete alert.
*/
function EstimateDeleteAlert({
name,
// #withAlertStoreConnect
isOpen,
payload: { estimateId },
// #withEstimateActions
requestDeleteEstimate,
// #withAlertActions
closeAlert,
}) {
const { formatMessage } = useIntl();
const [isLoading, setLoading] = useState(false);
// handle cancel delete alert.
const handleCancelEstimateDelete = () => {
closeAlert(name);
};
// handle confirm delete estimate
const handleConfirmEstimateDelete = useCallback(() => {
setLoading(true);
requestDeleteEstimate(estimateId)
.then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_estimate_has_been_deleted_successfully',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('estimates-table');
})
.catch(({ errors }) => {})
.finally(() => {
setLoading(false);
closeAlert(name);
});
}, [requestDeleteEstimate, formatMessage, estimateId]);
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={isOpen}
loading={isLoading}
onCancel={handleCancelEstimateDelete}
onConfirm={handleConfirmEstimateDelete}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_estimate_you_will_able_to_restore_it'}
/>
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
withEstimateActions,
)(EstimateDeleteAlert);

View File

@@ -0,0 +1,78 @@
import React, { useCallback, useState } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Intent, Alert } from '@blueprintjs/core';
import { queryCache } from 'react-query';
import { AppToaster } from 'components';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
import { compose } from 'utils';
/**
* Estimate delivered alert.
*/
function EstimateDeliveredAlert({
name,
// #withAlertStoreConnect
isOpen,
payload: { estimateId },
// #withEstimateActions
requestDeliveredEstimate,
// #withAlertActions
closeAlert,
}) {
const { formatMessage } = useIntl();
const [isLoading, setLoading] = useState(false);
// Handle cancel delivered estimate alert.
const handleCancelDeliveredEstimate = () => {
closeAlert(name);
};
// Handle confirm estimate delivered.
const handleConfirmEstimateDelivered = useCallback(() => {
setLoading(true);
requestDeliveredEstimate(estimateId)
.then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_estimate_has_been_delivered_successfully',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('estimates-table');
})
.catch((error) => {})
.finally(() => {
closeAlert(name);
setLoading(false);
});
}, [estimateId, requestDeliveredEstimate, formatMessage]);
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'deliver'} />}
intent={Intent.WARNING}
isOpen={isOpen}
onCancel={handleCancelDeliveredEstimate}
onConfirm={handleConfirmEstimateDelivered}
loading={isLoading}
>
<p>
<T id={'are_sure_to_deliver_this_estimate'} />
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
withEstimateActions,
)(EstimateDeliveredAlert);

View File

@@ -0,0 +1,77 @@
import React, { useCallback, useState } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Intent, Alert } from '@blueprintjs/core';
import { queryCache } from 'react-query';
import { AppToaster } from 'components';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
import { compose } from 'utils';
/**
* Estimate reject delete alerts.
*/
function EstimateRejectAlert({
name,
// #withAlertStoreConnect
isOpen,
payload: { estimateId },
// #withEstimateActions
requestRejectEstimate,
// #withAlertActions
closeAlert,
}) {
const { formatMessage } = useIntl();
const [isLoading, setLoading] = useState(false);
// Handle cancel reject estimate alert.
const handleCancelRejectEstimate = () => {
closeAlert(name);
};
// Handle confirm estimate reject.
const handleConfirmEstimateReject = useCallback(() => {
setLoading(true);
requestRejectEstimate(estimateId)
.then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_estimate_has_been_rejected_successfully',
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('estimates-table');
})
.catch((error) => {})
.finally(() => {
setLoading(false);
closeAlert(name);
});
}, [estimateId, requestRejectEstimate, formatMessage]);
return (
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'reject'} />}
intent={Intent.WARNING}
isOpen={isOpen}
onCancel={handleCancelRejectEstimate}
onConfirm={handleConfirmEstimateReject}
loading={isLoading}
>
<p>
<T id={'are_sure_to_approve_this_estimate'} />
</p>
</Alert>
);
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
withEstimateActions,
)(EstimateRejectAlert);