An example of production code

const OrderDetail = () => {
    const params = useParams<{ id: string }>();
    const location = useLocation();
    const { showFailure, showSuccess } = useNotification();

    const { data, error: getTransactionsError, isFetching } = useGetOrderQuery(+params.id!);

    const [inquireTransaction] = useLazyInquireTransactionQuery();

    const { isPerformingAction, performAction } = useActions();

    const handleAction = async (type: AllowedActions, id: number, amount?: string) => {
        const { transactionId, isError, error } = await performAction(type, id, amount);
        if (transactionId && !isError) showSuccess(`Successful ${type.toLowerCase()}!`);
        else showFailure(`Failed to ${type.toLowerCase()}!`, createErrorString(error));
    };

    const handleInquire = async (id: number | string) => {
        try {
            const response = await inquireTransaction(id);
            if (!response || !response.responseCode) throw new Error();
            return response;
        } catch (e) {
            showFailure(`Failed to verify transaction. ID: ${id} `);
        }
    };

    const backUrl = `${location.pathname.replace(new RegExp(`\/${params.id}$`), '')}`;

    if (getTransactionsError)
        return (
            <ErrorMessage
                returnToPageUrl={backUrl}
                message="There seems to be an issue fetching this order"
                error={extractErrorMessages(getTransactionsError)}
            />
        );

    return (
        <PageContainer maxWidth="initial" data-testid="order-detail">
            <Header backUrl={backUrl} title="Order Details" />
            <ScrollToTop />
            <ViewOrder
                data={data}
                processAction={handleAction}
                inquireTransaction={handleInquire}
                orderId={`${params.id}`}
                isLoading={isFetching || isPerformingAction}
            />
        </PageContainer>
    );
};

export default OrderDetail;