@telefonica/mistica 16.60.0 → 16.61.0

package/src/snackbar-context.tsx

@@ -0,0 +1,98 @@
+'use client';
+import * as React from 'react';
+import {isWebViewBridgeAvailable} from '@tef-novum/webview-bridge';
+import {showNativeSnackbar} from './snackbar-native';
+
+import type {ImperativeHandle, Props as SnackbarProps, SnackbarCloseHandler} from './snackbar';
+
+type SnackbarEntry = SnackbarProps & {
+    id: string;
+};
+
+const SnackbarContext = React.createContext<{
+    snackbars: Array<SnackbarEntry>;
+    setSnackbars: React.Dispatch<React.SetStateAction<Array<SnackbarEntry>>>;
+}>({
+    snackbars: [],
+    setSnackbars: () => {},
+});
+
+const Snackbar = React.lazy(() => import(/* webpackChunkName: "snackbar" */ './snackbar'));
+
+export const SnackbarRoot = ({children}: {children: React.ReactNode}): JSX.Element => {
+    const [snackbars, setSnackbars] = React.useState<Array<SnackbarEntry>>([]);
+    const snackbarRef = React.useRef<ImperativeHandle & HTMLDivElement>(null);
+    const isClosingRef = React.useRef(false);
+
+    React.useEffect(() => {
+        // multiple snackbars, close the current one
+        if (snackbars.length > 1 && !isClosingRef.current) {
+            isClosingRef.current = true;
+            snackbarRef.current?.close({action: 'CONSECUTIVE'});
+        }
+    }, [snackbars]);
+
+    const handleClose: SnackbarCloseHandler = ({action}) => {
+        isClosingRef.current = false;
+        setSnackbars((snackbars) => snackbars.slice(1));
+        snackbars[0].onClose?.({action});
+    };
+
+    const value = React.useMemo(() => {
+        return {
+            snackbars,
+            setSnackbars,
+        };
+    }, [snackbars]);
+
+    const currentSnackbar = snackbars[0];
+
+    return (
+        <SnackbarContext.Provider value={value}>
+            {children}
+            {!!currentSnackbar && (
+                <React.Suspense fallback={null}>
+                    <Snackbar
+                        // remount when the snackbar changes. In native, this will make a new bridge call
+                        key={currentSnackbar.id}
+                        ref={snackbarRef}
+                        message={currentSnackbar.message}
+                        buttonText={currentSnackbar.buttonText}
+                        buttonAccessibilityLabel={currentSnackbar.buttonAccessibilityLabel}
+                        duration={currentSnackbar.duration}
+                        type={currentSnackbar.type}
+                        withDismiss={currentSnackbar.withDismiss}
+                        dataAttributes={currentSnackbar.dataAttributes}
+                        onClose={handleClose}
+                    />
+                </React.Suspense>
+            )}
+        </SnackbarContext.Provider>
+    );
+};
+
+export const useSnackbar = (): {
+    openSnackbar: (params: SnackbarProps) => void;
+    snackbars: ReadonlyArray<Readonly<SnackbarEntry>>;
+} => {
+    const {snackbars, setSnackbars} = React.useContext(SnackbarContext);
+
+    const openSnackbar = React.useCallback(
+        (params: SnackbarProps) => {
+            if (isWebViewBridgeAvailable()) {
+                showNativeSnackbar(params).then(({action}) => {
+                    params.onClose?.({action});
+                });
+            } else {
+                const uniqueIdentifier = Date.now() + '-' + Math.random();
+                setSnackbars((snackbars) => [...snackbars, {...params, id: uniqueIdentifier}]);
+            }
+        },
+        [setSnackbars]
+    );
+
+    return {
+        openSnackbar,
+        snackbars,
+    };
+};

package/src/snackbar-native.ts

@@ -0,0 +1,37 @@
+import {nativeMessage} from '@tef-novum/webview-bridge';
+
+const CLOSE_ACTIONS = ['DISMISS', 'TIMEOUT', 'CONSECUTIVE', 'BUTTON'] as const;
+export type CloseAction = (typeof CLOSE_ACTIONS)[number];
+export type SnackbarType = 'INFORMATIVE' | 'CRITICAL';
+
+export const showNativeSnackbar = ({
+    message,
+    duration,
+    buttonText,
+    buttonAccessibilityLabel,
+    type = 'INFORMATIVE',
+    withDismiss,
+}: {
+    message: string;
+    duration?: 'PERSISTENT';
+    buttonText?: string;
+    buttonAccessibilityLabel?: string;
+    type?: SnackbarType;
+    withDismiss?: boolean;
+}): Promise<{action: CloseAction}> => {
+    return nativeMessage({
+        message,
+        duration,
+        buttonText,
+        buttonAccessibilityLabel,
+        type,
+        withDismiss,
+    }).then((unknownResult: unknown) => {
+        const result = unknownResult as {action?: CloseAction} | undefined;
+        if (result?.action && CLOSE_ACTIONS.includes(result.action)) {
+            return {action: result.action};
+        } else {
+            return {action: 'DISMISS'};
+        }
+    });
+};

package/src/snackbar.css.ts

@@ -0,0 +1,176 @@
+import {style, styleVariants} from '@vanilla-extract/css';
+import {vars} from './skins/skin-contract.css';
+import {sprinkles} from './sprinkles.css';
+import * as mq from './media-queries.css';
+import {applyAlpha} from './utils/color';
+
+export const TRANSITION_TIME_IN_MS = 300;
+
+export const snackbar = style([
+    sprinkles({
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+    }),
+    {
+        transition: `visibility ${TRANSITION_TIME_IN_MS}ms`,
+        visibility: 'hidden',
+    },
+]);
+
+export const snackbarContainer = style([
+    sprinkles({
+        position: 'relative',
+    }),
+    {
+        zIndex: 1, // Render above everything, including other portals
+    },
+]);
+
+export const snackbarOpen = style({
+    visibility: 'visible',
+});
+
+export const wrapper = style([
+    sprinkles({
+        position: 'fixed',
+        borderRadius: vars.borderRadii.popup,
+    }),
+    {
+        maxWidth: 800,
+        minWidth: 360,
+        minHeight: 48,
+        padding: `14px 16px`,
+        bottom: 40,
+        opacity: 0,
+        transform: 'translateY(100px)',
+        transition: `transform ${TRANSITION_TIME_IN_MS}ms ease-in-out, opacity ${TRANSITION_TIME_IN_MS}ms ease-in-out`,
+
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                left: 8,
+                right: 8,
+                bottom: 8,
+                minWidth: 0,
+            },
+        },
+    },
+]);
+
+export const wrapperCritical = sprinkles({background: vars.colors.feedbackErrorBackground});
+export const wrapperInfo = sprinkles({background: vars.colors.feedbackInfoBackground});
+
+export const wrapperOpen = style({
+    opacity: 1,
+    transform: 'initial',
+    animationDuration: `${TRANSITION_TIME_IN_MS}ms`,
+});
+
+const baseContent = sprinkles({
+    display: 'flex',
+    justifyContent: 'space-between',
+});
+
+export const contentWithLongButton = style([
+    baseContent,
+    sprinkles({
+        flexDirection: 'column',
+    }),
+]);
+
+export const contentWithoutLongButton = style([
+    baseContent,
+    sprinkles({
+        flexDirection: 'row',
+        alignItems: 'center',
+    }),
+]);
+
+export const textContainer = sprinkles({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+});
+
+const hoverStyles = {
+    transition: 'background-color 0.1s ease-in-out',
+    ':active': {
+        background: applyAlpha(vars.rawColors.inverse, 0.2),
+    },
+    '@media': {
+        [mq.supportsHover]: {
+            ':hover': {
+                background: applyAlpha(vars.rawColors.inverse, 0.1),
+            },
+            ':active': {
+                background: applyAlpha(vars.rawColors.inverse, 0.2),
+            },
+        },
+        [mq.touchableOnly]: {
+            transition: 'none',
+        },
+    },
+} as const;
+
+export const button = style([
+    {
+        flexShrink: 0,
+        marginTop: -6,
+        marginLeft: 16,
+        marginBottom: -6,
+        marginRight: -8,
+        cursor: 'pointer',
+        borderRadius: vars.borderRadii.button,
+
+        '@media': {
+            [mq.desktopOrBigger]: {
+                marginLeft: 48,
+            },
+        },
+    },
+    hoverStyles,
+]);
+
+export const longButton = style({
+    marginTop: 18,
+    marginLeft: -8,
+    alignSelf: 'flex-end',
+    '@media': {
+        [mq.desktopOrBigger]: {
+            marginLeft: -8,
+        },
+    },
+});
+
+export const buttonTouchable = sprinkles({
+    paddingY: 4,
+    paddingX: 8,
+    border: 'none',
+    padding: 0,
+    background: 'transparent',
+});
+
+const dismissButtonBase = sprinkles({
+    display: 'flex',
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    right: 8,
+});
+
+export const dismissButton = styleVariants({
+    centered: [dismissButtonBase, {top: 'calc(50% - 16px)'}],
+    topRight: [dismissButtonBase, sprinkles({top: 8})],
+});
+
+export const dismissIcon = style([
+    sprinkles({
+        width: 32,
+        height: 32,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '50%',
+    }),
+    hoverStyles,
+]);

package/src/snackbar.tsx

@@ -0,0 +1,258 @@
+'use client';
+import * as React from 'react';
+import Touchable, {BaseTouchable} from './touchable';
+import classNames from 'classnames';
+import {isWebViewBridgeAvailable} from '@tef-novum/webview-bridge';
+import {useElementDimensions, useScreenSize, useTheme} from './hooks';
+import {Text2, Text3} from './text';
+import * as styles from './snackbar.css';
+import {vars} from './skins/skin-contract.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {Portal} from './portal';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import * as tokens from './text-tokens';
+import {showNativeSnackbar} from './snackbar-native';
+
+import type {SnackbarType, CloseAction} from './snackbar-native';
+import type {DataAttributes} from './utils/types';
+
+export type SnackbarCloseHandler = (result: {action: CloseAction}) => unknown;
+
+const DEFAULT_DURATION_WITHOUT_BUTTON = 5000;
+const DEFAULT_DURATION_WITH_BUTTON = 10000;
+
+export type Props = {
+    buttonText?: string;
+    buttonAccessibilityLabel?: string;
+    closeButtonLabel?: string;
+    duration?: 'PERSISTENT';
+    message: string;
+    onClose?: SnackbarCloseHandler;
+    type?: SnackbarType;
+    children?: void;
+    dataAttributes?: DataAttributes;
+    withDismiss?: boolean;
+};
+
+export type ImperativeHandle = {
+    close: SnackbarCloseHandler;
+};
+
+const SnackbarComponent = React.forwardRef<ImperativeHandle, Props>(
+    (
+        {
+            message,
+            buttonText,
+            buttonAccessibilityLabel,
+            closeButtonLabel,
+            duration,
+            onClose,
+            type,
+            withDismiss = false,
+            dataAttributes,
+        },
+        ref
+    ) => {
+        const {texts, t} = useTheme();
+        const [isOpen, setIsOpen] = React.useState(false);
+        const {width: buttonWidth, ref: buttonRef} = useElementDimensions();
+        const {isDesktopOrBigger} = useScreenSize();
+        const longButtonWidth = isDesktopOrBigger ? 160 : 128;
+        const hasLongButton = buttonWidth > longButtonWidth;
+        const elementRef = React.useRef<HTMLDivElement>(null);
+        const shouldShowDismissButton = (duration === 'PERSISTENT' && !buttonText) || withDismiss;
+        const defaultDuration = buttonText ? DEFAULT_DURATION_WITH_BUTTON : DEFAULT_DURATION_WITHOUT_BUTTON;
+
+        const onCloseRef = React.useRef(onClose);
+        React.useEffect(() => {
+            onCloseRef.current = onClose;
+        }, [onClose]);
+
+        const close = React.useCallback<SnackbarCloseHandler>((result) => {
+            setIsOpen(false);
+            setTimeout(
+                () => {
+                    onCloseRef.current?.(result);
+                },
+                process.env.NODE_ENV === 'test' ? 0 : styles.TRANSITION_TIME_IN_MS
+            );
+        }, []);
+
+        React.useImperativeHandle(ref, () => {
+            return {...elementRef, close};
+        }, [close]);
+
+        React.useEffect(() => {
+            const openTimeout = setTimeout(() => {
+                setIsOpen(true);
+            }, 50);
+
+            const closeTimeout =
+                duration !== 'PERSISTENT'
+                    ? setTimeout(() => close({action: 'TIMEOUT'}), defaultDuration)
+                    : undefined;
+
+            return () => {
+                clearTimeout(openTimeout);
+                clearTimeout(closeTimeout);
+            };
+        }, [close, duration, defaultDuration]);
+
+        return (
+            <Portal className={styles.snackbarContainer}>
+                <div
+                    ref={elementRef}
+                    className={classNames(styles.snackbar, {[styles.snackbarOpen]: isOpen})}
+                >
+                    <div
+                        role="alert"
+                        className={classNames(
+                            styles.wrapper,
+                            type === 'CRITICAL' ? styles.wrapperCritical : styles.wrapperInfo,
+                            {[styles.wrapperOpen]: isOpen}
+                        )}
+                        {...getPrefixedDataAttributes(dataAttributes, 'SnackBar')}
+                    >
+                        <div
+                            className={classNames(
+                                hasLongButton ? styles.contentWithLongButton : styles.contentWithoutLongButton
+                            )}
+                            style={shouldShowDismissButton && !hasLongButton ? {paddingRight: 32} : undefined}
+                        >
+                            <div
+                                style={
+                                    shouldShowDismissButton && hasLongButton ? {paddingRight: 32} : undefined
+                                }
+                            >
+                                <Text2 regular color={vars.colors.textPrimaryNegative}>
+                                    {message}
+                                </Text2>
+                            </div>
+                            {buttonText && (
+                                <div
+                                    className={classNames(styles.button, {
+                                        [styles.longButton]: hasLongButton,
+                                    })}
+                                >
+                                    <BaseTouchable
+                                        className={styles.buttonTouchable}
+                                        ref={buttonRef}
+                                        onPress={() => {
+                                            close({action: 'BUTTON'});
+                                        }}
+                                        aria-label={buttonAccessibilityLabel}
+                                    >
+                                        <Text3
+                                            medium
+                                            forceMobileSizes
+                                            truncate
+                                            color={
+                                                type === 'CRITICAL'
+                                                    ? vars.colors.textPrimaryNegative
+                                                    : vars.colors.textLinkSnackbar
+                                            }
+                                        >
+                                            {buttonText}
+                                        </Text3>
+                                    </BaseTouchable>
+                                </div>
+                            )}
+                        </div>
+                        {shouldShowDismissButton ? (
+                            <Touchable
+                                onPress={() => {
+                                    close({action: 'DISMISS'});
+                                }}
+                                aria-label={
+                                    closeButtonLabel || texts.closeButtonLabel || t(tokens.closeButtonLabel)
+                                }
+                                className={styles.dismissButton[hasLongButton ? 'topRight' : 'centered']}
+                                style={{display: 'flex', width: 32, height: 32}}
+                            >
+                                <div className={styles.dismissIcon}>
+                                    <IconCloseRegular color={vars.colors.inverse} size={20} />
+                                </div>
+                            </Touchable>
+                        ) : null}
+                    </div>
+                </div>
+            </Portal>
+        );
+    }
+);
+
+const Snackbar = React.forwardRef<ImperativeHandle & HTMLDivElement, Props>(
+    (
+        {
+            message,
+            buttonText,
+            buttonAccessibilityLabel,
+            closeButtonLabel,
+            duration,
+            onClose: onCloseProp = () => {},
+            type = 'INFORMATIVE',
+            withDismiss,
+            dataAttributes,
+        },
+        ref
+    ) => {
+        const renderNative = isWebViewBridgeAvailable();
+        const onCloseRef = React.useRef(onCloseProp);
+        const isOpenRef = React.useRef(false);
+
+        React.useEffect(() => {
+            onCloseRef.current = onCloseProp;
+        }, [onCloseProp]);
+
+        React.useEffect(() => {
+            /** the isOpenRef check is to avoid a double call to nativeMessage in development with StrictMode */
+            if (renderNative && !isOpenRef.current) {
+                isOpenRef.current = true;
+                showNativeSnackbar({
+                    message,
+                    duration,
+                    buttonText,
+                    buttonAccessibilityLabel,
+                    type,
+                    withDismiss,
+                })
+                    .then(({action}) => {
+                        onCloseRef.current({action});
+                    })
+                    .finally(() => {
+                        isOpenRef.current = false;
+                    });
+            }
+        }, [
+            buttonAccessibilityLabel,
+            closeButtonLabel,
+            buttonText,
+            duration,
+            message,
+            renderNative,
+            type,
+            withDismiss,
+        ]);
+
+        if (renderNative) {
+            return null;
+        }
+
+        return (
+            <SnackbarComponent
+                ref={ref}
+                message={message}
+                duration={duration}
+                buttonText={buttonText}
+                buttonAccessibilityLabel={buttonAccessibilityLabel}
+                closeButtonLabel={closeButtonLabel}
+                type={type}
+                onClose={onCloseRef.current}
+                withDismiss={withDismiss}
+                dataAttributes={dataAttributes}
+            />
+        );
+    }
+);
+
+export default Snackbar;

package/src/spinner.css.ts

@@ -0,0 +1,66 @@
+import {keyframes, style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+
+const rotatorKeyframes = keyframes({
+    '0%': {
+        transform: 'rotate(0deg)',
+    },
+    '100%': {
+        transform: 'rotate(270deg)',
+    },
+});
+
+const dashKeyframes = keyframes({
+    '0%': {
+        strokeDashoffset: 187,
+    },
+    '50%': {
+        strokeDashoffset: 46.75,
+        transform: 'rotate(135deg)',
+    },
+    '100%': {
+        strokeDashoffset: 187,
+        transform: 'rotate(450deg)',
+    },
+});
+
+const spinnerIosKeyframes = keyframes({
+    '0%': {
+        opacity: 1,
+    },
+    '100%': {
+        opacity: 0,
+    },
+});
+
+export const spinnerDefault = style([
+    sprinkles({flexShrink: 0, display: 'block'}),
+    {
+        animation: `${rotatorKeyframes} 1.4s linear infinite`,
+    },
+]);
+
+export const spinnerDefaultPath = style({
+    strokeDasharray: 187,
+    strokeDashoffset: 0,
+    transformOrigin: 'center',
+    animation: `${dashKeyframes} 1.4s ease-in-out infinite`,
+});
+
+export const spinnerIos = sprinkles({
+    flexShrink: 0,
+    display: 'block',
+});
+
+export const spinnerIosSvgPath = style({
+    animation: `${spinnerIosKeyframes} 1s infinite linear`,
+    selectors: {
+        '&:nth-of-type(2)': {animationDelay: '-.880s'},
+        '&:nth-of-type(3)': {animationDelay: '-.750s'},
+        '&:nth-of-type(4)': {animationDelay: '-.625s'},
+        '&:nth-of-type(5)': {animationDelay: '-.500s'},
+        '&:nth-of-type(6)': {animationDelay: '-.375s'},
+        '&:nth-of-type(7)': {animationDelay: '-.250s'},
+        '&:nth-of-type(8)': {animationDelay: '-.125s'},
+    },
+});