Evolution of `"MESSAGE"` aka Snackbar

[atabel]

Current status

Currently, this is a fire and forget message, the web ask native app to show a snackbar with a message and an optional buttonText. The native app doesn't respond with any message to the web.

{
    type: "MESSAGE",
    payload: {
        message: string,
        duration?: number, // in milliseconds
        buttonText?: string,
        type?: "INFORMATIVE" | "CRITICAL" | "SUCCESS"
    }
}

:warning: Note: apparently, iOS and Android are currently ignoring the duration param and iOS is also ignoring the buttonText param :man_facepalming:

New requirements

• we need the action button to perform a custom action (different from snackbar dismiss)
• we need duration to be infinity (the snackbar is never dismissed without user interaction)
• we need to be able to add a dismiss button to snackbars (specially for the cases where they have an infinity duration and don't have an action button to close it)

Figma specs: https://www.figma.com/file/yCHLIfy4WMfRdlADwyL4kZ/%F0%9F%94%B8-Snackbar-Specs?type=design&node-id=0-1&mode=design&t=0A9H1Zwcmrc3Pika-0

Proposed solution

Message type:

{
    type: "MESSAGE",
    payload: {
        message: string,
        type?: "INFORMATIVE" | "CRITICAL" | "SUCCESS",

        /**
        * iOS needs to implement support for this, that was being ignored until now
        */
        buttonText?: string,

        /**
        * by default, if there is buttonText, it's 10 seconds, if there isn't buttonText, it's 5 seconds
        * "PERSISTENT" won't dismiss the snackbar until there is an user interaction
        * `number` is always ignored by native app, as it is in current implementation. Won't remove it for
        * backwards compatibility
        */
        duration?: "PERSISTENT" | number,

        /**
        * Whether the snackbar has a dismiss button or not. `false` by default, but will always have dismiss
        * button (ignoring this attribute) if the snackbar has `duration: "persistent"` and no button 
        * (`actionText` is not defined)
        */
        withDismiss?: boolean,
    }
}

The native app will respond with a message with this shape:

{
    type: "MESSAGE",
    payload: {
        /**
        * "DISMISS" when the user explicitly clicks the dismiss button
        * "BUTTON" when the user clicks the button
        * "TIMEOUT" when the Snackbar is automatically dismissed after a timeout
        * "CONSECUTIVE" when the Snackbar is auto-dismissed because a new one is shown
        */
        action: "DISMISS" | "BUTTON" | "TIMEOUT" | "CONSECUTIVE",
    }
}

[pladaria]

withDismiss => dismissible ?

It says false by default. To me the default should be to allow closing it. I believe most snackbars are just feedback messages.

[pladaria]

        /**
        * by default, if there is buttonText, it's 10 seconds, if there isn't buttonText, it's 5 seconds
        * "PERSISTENT" won't dismiss the snackbar until there is an user interaction
        * "FIVE_SECONDS" | "TEN_SECONDS" can be specified explicitly too
        * `number` is always ignored by native app, as it is in current implementation. Won't remove it for
        * backwards compatibility
        */
        duration?: "PERSISTENT" | "FIVE_SECONDS" | "TEN_SECONDS" | number,

Perhaps the postmessage API should just accept a number of milliseconds and consider the 0/null/undefined as Infinity. The product defined defaults can be specified in mistica.

Note that JSON.stringify({t: Infinity}) returns '{"t": null}'

[atabel]

        /**
        * by default, if there is buttonText, it's 10 seconds, if there isn't buttonText, it's 5 seconds
        * "PERSISTENT" won't dismiss the snackbar until there is an user interaction
        * "FIVE_SECONDS" | "TEN_SECONDS" can be specified explicitly too
        * `number` is always ignored by native app, as it is in current implementation. Won't remove it for
        * backwards compatibility
        */
        duration?: "PERSISTENT" | "FIVE_SECONDS" | "TEN_SECONDS" | number,

Perhaps the postmessage API should just accept a number of milliseconds and consider the 0/null/undefined as Infinity. The product defined defaults can be specified in mistica.

Note that JSON.stringify({t: Infinity}) returns '{"t": null}'

For native, there is no distinction between null/undefined, and a null/undefined usually means to use the default value, in this case 10s/5s. Also we don't want to support an arbitrary number of ms. Using 0 as PERSISTENT sounds weird to me

[atabel]

withDismiss => dismissible ?

It says false by default. To me the default should be to allow closing it. I believe most snackbars are just feedback messages.

Dismissable means that can be dismissed, withDismiss means it has the dismiss button. A snackbar can be dismissed with the action button too. That's my reasoning to call it withDismiss.

[atabel]

Update, removed "FIVE_SECONDS" and "TEN_SECONDS" from duration enum, as they are redundant or ignored by native side, as explained in https://github.com/Telefonica/webview-bridge/pull/118#discussion_r1371229074