Using Your Own Alerts

How can we hide alerts programmatically?

Please refer to Hiding Alerts Programmatically recipe.

How can we use our own alerts instead of HAPI Elements ones?

caution

HAPI Elements Alerts styling can be customized, please refer to how to adjust theming further section.

We discourage using your own alerts, as if we decide to add a new alert to HAPI Elements codebase, then your codebase would not be handling it (unless you add it right after we deploy the changes). The goal of HAPI Elements is to be as "maintenance-free" as possible thus introducing custom behaviours on your application will require you to maintain your code.

Using your own Alerts:

Add an event listener to track alert changes:

const callback = (alerts) => {
    console.log('[HAPI] alerts changed', alerts)
}

window.hapi.alert.state.alerts.onChange(callback)

The alerts received in the callback is an array of Alert objects. Refer to the Typescript type of the Alert.

The key corresponds to AlertKey enum.

The props corresponds to props listed in AlertProps type.

So you could have some code as such:

const callback = (alerts) => {
    alerts.forEach(alert => {
        switch (alert.key) {
            case window.hapi.alert.utils.alertKeys.topupSuccess: {
                // show your Top Up Success alert component
                // alert.props is WalletTopUpSuccessAlertProps which contains "amount: number" & "currency: ProductPriceCurrency"
                // so you can use this in your alert message if needed
                break;
            }
            case window.hapi.alert.utils.alertKeys.backendErrorMessage: {
                // show your Backend Error alert component
                // alert.props is BackendErrorMessageAlertProps which contains "errorMessage: string"
                // so you can use this in your alert message if needed
                break;
            }
            /// ...other cases for other alert keys
        }
    })
}

window.hapi.alert.state.alerts.onChange(callback)