@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/utils/animation.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import {isRunningAcceptanceTest} from './platform';
+
+import type {Theme} from '../theme';
+
+const areAnimationsSupported = (platformOverrides: Theme['platformOverrides']) =>
+    !isRunningAcceptanceTest(platformOverrides);
+
+type AnimationProps = {
+    children?: React.ReactNode;
+    strokeDasharray?: string;
+    strokeDashoffset?: string;
+    opacity?: number;
+};
+
+export const getAnimateCircleScaleInProps = (
+    to: string | number,
+    platformOverrides: Theme['platformOverrides']
+): null | AnimationProps =>
+    areAnimationsSupported(platformOverrides)
+        ? {
+              children: (
+                  <animate
+                      attributeName="r"
+                      begin="0s"
+                      dur="0.9s"
+                      from="0"
+                      to={to}
+                      keyTimes="0;1"
+                      calcMode="spline"
+                      keySplines="0.65 0 0.25 1"
+                  />
+              ),
+          }
+        : null;
+
+export const getAnimateDrawLineProps = (
+    from: string,
+    begin: string,
+    platformOverrides: Theme['platformOverrides'],
+    keySplines?: string
+): null | AnimationProps =>
+    areAnimationsSupported(platformOverrides)
+        ? {
+              strokeDasharray: from.replace('-', ''),
+              strokeDashoffset: from,
+              children: (
+                  <animate
+                      attributeName="stroke-dashoffset"
+                      from={from}
+                      to="0"
+                      dur="0.7"
+                      repeatCount="1"
+                      begin={begin}
+                      fill="freeze"
+                      keyTimes="0;1"
+                      calcMode="spline"
+                      keySplines={keySplines ?? '0.65 0 0.25 1'}
+                  />
+              ),
+          }
+        : null;
+
+export const getAnimateFadeInProps = (
+    begin: string,
+    platformOverrides: Theme['platformOverrides']
+): null | AnimationProps =>
+    areAnimationsSupported(platformOverrides)
+        ? {
+              opacity: 0,
+              children: (
+                  <animate
+                      attributeName="opacity"
+                      from="0"
+                      to="1"
+                      dur="0.4"
+                      repeatCount="1"
+                      begin={begin}
+                      fill="freeze"
+                      keyTimes="0;1"
+                      calcMode="spline"
+                      keySplines="0.65 0 0.25 1"
+                  />
+              ),
+          }
+        : null;
+
+export const getAnimateHopInProps = (
+    begin: string,
+    platformOverrides: Theme['platformOverrides']
+): null | AnimationProps =>
+    areAnimationsSupported(platformOverrides)
+        ? {
+              children: (
+                  <>
+                      <animate
+                          from="2.5"
+                          to="2"
+                          dur="0.7s"
+                          begin={begin}
+                          keyTimes="0;1"
+                          calcMode="spline"
+                          fill="freeze"
+                          keySplines="0.65 0 0.25 1"
+                      />
+                      <animateTransform
+                          attributeName="transform"
+                          type="translate"
+                          from="-0.5 1"
+                          to="0 0"
+                          dur="0.7s"
+                          begin={begin}
+                          keyTimes="0;1"
+                          calcMode="spline"
+                          fill="freeze"
+                          keySplines="0.65 0 0.25 1"
+                      />
+                  </>
+              ),
+          }
+        : null;
+
+export const getAnimateSweepInProps = (
+    begin: string,
+    platformOverrides: Theme['platformOverrides']
+): null | AnimationProps =>
+    areAnimationsSupported(platformOverrides)
+        ? {
+              opacity: 0,
+              children: (
+                  <>
+                      <animate
+                          attributeName="opacity"
+                          from="0"
+                          to="1"
+                          dur="0.1"
+                          begin={begin}
+                          fill="freeze"
+                          keyTimes="0;1"
+                          calcMode="spline"
+                          keySplines="0.65 0 0.25 1"
+                      />
+                      <animateTransform
+                          attributeName="transform"
+                          type="scale"
+                          from="0 0"
+                          to="1.15 1.15"
+                          dur="0.8s"
+                          begin={begin}
+                          keyTimes="0;1"
+                          additive="sum"
+                          calcMode="spline"
+                          fill="freeze"
+                          keySplines="0.8 0 0 1"
+                      />
+                      <animateTransform
+                          attributeName="transform"
+                          type="rotate"
+                          from="50 21 10"
+                          to="0 21 10"
+                          dur="0.8s"
+                          begin={begin}
+                          keyTimes="0;1"
+                          additive="sum"
+                          calcMode="spline"
+                          fill="freeze"
+                          keySplines="0.8 0 0 1"
+                      />
+                      <animateTransform
+                          attributeName="transform"
+                          type="scale"
+                          from="1.1 1.1"
+                          to="1 1"
+                          dur="0.2s"
+                          begin={`${parseFloat(begin) + 0.8}s`}
+                          keyTimes="0;1"
+                          calcMode="spline"
+                          fill="freeze"
+                          keySplines="0.65 0 0.25 1"
+                      />
+                  </>
+              ),
+          }
+        : null;
+
+const mergeChildren = ({children}: AnimationProps, nextChild?: React.ReactNode) => (
+    <>
+        {children}
+        {nextChild}
+    </>
+);
+
+export const mergeProperties = (...props: Array<AnimationProps | null>): AnimationProps =>
+    props.reduce(
+        (allProps, nextProps) => ({
+            ...allProps,
+            ...(nextProps || {}),
+            children: mergeChildren(allProps, nextProps ? nextProps.children : null),
+        }),
+        {children: null} as any
+    );

package/src/utils/aspect-ratio-support.css.ts

@@ -0,0 +1,28 @@
+import {style, createVar} from '@vanilla-extract/css';
+import {sprinkles} from '../sprinkles.css';
+
+const aspectRatio = createVar();
+
+export const vars = {aspectRatio};
+
+export const wrapper = sprinkles({
+    overflow: 'hidden',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    position: 'relative',
+});
+
+export const container = style({
+    '@supports': {
+        '(aspect-ratio: 1 / 1)': {
+            aspectRatio,
+        },
+    },
+});
+
+export const containerWithWrapper = sprinkles({
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+});

package/src/utils/aspect-ratio-support.tsx

@@ -0,0 +1,141 @@
+'use client';
+import classNames from 'classnames';
+import * as React from 'react';
+import {useIsomorphicLayoutEffect} from '../hooks';
+import * as styles from './aspect-ratio-support.css';
+import {applyCssVars} from './css';
+
+import type {DataAttributes} from './types';
+
+const AspectRatioSupport = React.createContext<boolean>(true);
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export const AspectRatioSupportProvider = ({children}: Props): JSX.Element => {
+    // In SSR (and in first client side render) we assume the browser will support it
+    const [isSupported, setIsSupported] = React.useState(true);
+
+    useIsomorphicLayoutEffect(() => {
+        try {
+            if (!CSS.supports('aspect-ratio', '1 / 1')) {
+                setIsSupported(false);
+            }
+        } catch (e) {
+            // CSS.support is not available in old browsers, in that case we asume aspect-ratio is not supported
+            setIsSupported(false);
+        }
+    }, []);
+
+    return <AspectRatioSupport.Provider value={isSupported}>{children}</AspectRatioSupport.Provider>;
+};
+
+export const useSupportsAspectRatio = (): boolean => React.useContext(AspectRatioSupport);
+
+type AspectRatioContainerProps = {
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: number;
+    children: React.ReactNode;
+    as?: React.ComponentType<any> | string;
+    style?: React.CSSProperties;
+    className?: string;
+    dataAttributes?: DataAttributes;
+};
+
+export const AspectRatioContainer = (props: AspectRatioContainerProps): JSX.Element => {
+    // forceNonCssAspectRatio is intentionally not included in the props type and should only be used for testing purposes
+    const forceNonCssAspectRatio = !!(props as any).forceNonCssAspectRatio;
+
+    const supportsAspectRatio = useSupportsAspectRatio() && !forceNonCssAspectRatio;
+    // if width or height are numeric, we can calculate the other with the ratio without css.
+    // if aspect ratio is 0, we use the original image proportions
+    const withCssAspectRatio =
+        typeof props.width !== 'number' && typeof props.height !== 'number' && props.aspectRatio !== 0;
+
+    const aspectRatio = withCssAspectRatio ? props.aspectRatio : undefined;
+
+    let width: number | string | undefined = props.width;
+    let height = props.height;
+
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (typeof props.width === 'number') {
+        height = props.aspectRatio !== 0 ? props.width / (props.aspectRatio ?? 1) : undefined;
+    } else if (typeof props.height === 'number') {
+        width = props.aspectRatio !== 0 ? props.height * (props.aspectRatio ?? 1) : undefined;
+    } else if (props.height) {
+        height = props.height;
+    } else {
+        width = props.width || '100%';
+    }
+
+    const needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+
+    const container = React.createElement(
+        props.as ?? 'div',
+        {
+            className: classNames(props.className, styles.container, {
+                [styles.containerWithWrapper]: needsWrapper,
+            }),
+            style: {
+                ...(needsWrapper
+                    ? {
+                          ...props.style,
+                          position: aspectRatio ? 'absolute' : 'static',
+                          width: '100%',
+                      }
+                    : {
+                          ...props.style,
+                          width: (!isNaN(Number(width)) ? Number(width) : width) ?? 'fit-content',
+                          height: (!isNaN(Number(height)) ? Number(height) : height) ?? 'fit-content',
+                      }),
+                ...applyCssVars({
+                    [styles.vars.aspectRatio]: aspectRatio ? String(aspectRatio) : 'unset',
+                }),
+            },
+            ...(!needsWrapper && props.dataAttributes),
+        },
+        props.children
+    );
+
+    if (needsWrapper) {
+        const paddingTop = (() => {
+            if (!aspectRatio) {
+                return 0;
+            }
+            if (props.width && typeof props.width === 'string' && props.width.endsWith('%')) {
+                return `${parseFloat(props.width) / aspectRatio}%`;
+            }
+            return `${100 / aspectRatio}%`;
+        })();
+
+        return (
+            <div style={{width, height, paddingTop}} className={styles.wrapper} {...props.dataAttributes}>
+                {container}
+            </div>
+        );
+    } else {
+        return container;
+    }
+};
+
+/**
+ * @param aspectRatio value in the format of "width:height" or a number, or "auto"
+ * @returns number
+ */
+export const aspectRatioToNumber = (aspectRatio?: `${number}:${number}` | number | 'auto'): number => {
+    if (!aspectRatio) {
+        return 0;
+    }
+    if (typeof aspectRatio === 'number') {
+        return aspectRatio;
+    }
+    if (aspectRatio.includes(':')) {
+        const [width, height] = aspectRatio.split(':');
+        return +width / +height;
+    }
+    return 0;
+};

package/src/utils/browser.tsx

@@ -0,0 +1,9 @@
+export const redirect = (url: string, external = false, loadOnTop = false): void => {
+    if (external) {
+        window.open(url, '_blank');
+    } else if (loadOnTop) {
+        window.open(url, '_top');
+    } else {
+        window.location.assign(url);
+    }
+};

package/src/utils/color.tsx

@@ -0,0 +1,46 @@
+export const fromHexToRgb = (hexColor: string): [number, number, number] => {
+    if (hexColor.length === 4) {
+        return [
+            parseInt(hexColor.substr(-3, 1).repeat(2), 16),
+            parseInt(hexColor.substr(-2, 1).repeat(2), 16),
+            parseInt(hexColor.substr(-1, 1).repeat(2), 16),
+        ];
+    }
+    if (hexColor.length === 7) {
+        return [
+            parseInt(hexColor.substr(-6, 2), 16),
+            parseInt(hexColor.substr(-4, 2), 16),
+            parseInt(hexColor.substr(-2, 2), 16),
+        ];
+    }
+    throw Error('Bad color');
+};
+
+/**
+ * @param color hex color or css variable with rgb components (skinVars.rawColors)
+ * @param alpha the alpha value to apply
+ * @returns The same color with the alpha channel applied
+ */
+export const applyAlpha = (color: string, alpha: number): string => {
+    try {
+        if (color.startsWith('var(')) {
+            // it's a css variable with rgb components. See skin-contract rawColors
+            return `rgba(${color}, ${alpha})`;
+        } else if (color.startsWith('#')) {
+            // it's a hex color
+            return `rgba(${fromHexToRgb(color).join(',')}, ${alpha})`;
+        } else if (color.startsWith('rgb(')) {
+            // it's an rgb color
+            return color.replace('rgb(', 'rgba(').replace(')', `, ${alpha})`);
+        } else if (color.startsWith('rgba(')) {
+            // it's already an rgba color
+            return color.replace(/, [\d.]+\)$/, `, ${alpha})`);
+        } else {
+            // it's a different color format (color name, hsl, etc). We try to use css relative color syntax
+            // Note that this won't work in old browsers https://caniuse.com/css-relative-colors
+            return `rgb(from ${color} r g b / ${Math.round(alpha * 100)}%)`;
+        }
+    } catch (e) {
+        return color;
+    }
+};

package/src/utils/common.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export const combineRefs =
+    <T,>(...refs: Array<React.Ref<T> | undefined>) =>
+    (refValue: T | null): void => {
+        refs.forEach((ref) => {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(refValue);
+                } else if ('current' in ref) {
+                    ref.current = refValue;
+                }
+            }
+        });
+    };
+
+export const getTextFromChildren = (children: React.ReactNode): string => {
+    let text = '';
+
+    React.Children.forEach(children, (child) => {
+        if (typeof child === 'string') {
+            text += child;
+        }
+    });
+
+    return text;
+};

package/src/utils/credit-card.tsx

@@ -0,0 +1,46 @@
+// See: https://en.wikipedia.org/wiki/Payment_card_number#Issuer_identification_number_(IIN)
+// Sample regexes: https://rgxdb.com/
+
+export type CardOptions = {
+    americanExpress?: boolean;
+    visa?: boolean;
+    masterCard?: boolean;
+};
+
+const getMatcher = (regex: RegExp) => (str?: string) => !!str && regex.test(str);
+
+/**
+ * Returns true if number looks like an American Express card
+ * Do not use for validation
+ */
+export const isAmericanExpress: (str?: string) => boolean = getMatcher(/^3[47]/);
+
+/**
+ * Returns true if number looks like a Visa card
+ * Do not use for validation
+ */
+export const isVisa: (str?: string) => boolean = getMatcher(/^4/);
+
+/**
+ * Returns true if number looks like a MasterCard card
+ * Do not use for validation
+ */
+export const isMasterCard: (str?: string) => boolean = getMatcher(/^5/);
+
+export const getCvvLength = (creditCardNumber: string): number =>
+    isAmericanExpress(creditCardNumber) ? 4 : 3;
+
+export const getCreditCardNumberLength = (creditCardNumber?: string): number =>
+    isAmericanExpress(creditCardNumber) ? 15 : 16;
+
+export const isValidCreditCardNumber = (creditCardNumber?: string): boolean => {
+    if (!creditCardNumber) return false;
+    if (
+        !isAmericanExpress(creditCardNumber) &&
+        !isMasterCard(creditCardNumber) &&
+        !isVisa(creditCardNumber)
+    ) {
+        return false;
+    }
+    return getCreditCardNumberLength(creditCardNumber) === creditCardNumber.length;
+};

package/src/utils/css.tsx

@@ -0,0 +1,25 @@
+import {assignInlineVars} from '@vanilla-extract/dynamic';
+import {isRunningAcceptanceTest} from './platform';
+
+const BASE_FONT_SIZE = 16; // browser's default font-size in pixels
+
+export const pxToRem = (px: number | string): string =>
+    `${(parseFloat(px as string) / BASE_FONT_SIZE).toFixed(3)}rem`;
+
+export const applyCssVars = (vars: Record<string, string>): Record<string, string> => {
+    // this object spread is needed to avoid this issue: https://github.com/vanilla-extract-css/vanilla-extract/issues/1246
+    return {...assignInlineVars(vars)};
+};
+
+export const safeAreaInsetLeft = isRunningAcceptanceTest()
+    ? `max(env(safe-area-inset-left), var(--acceptance-test-override-safe-area-inset-left, 0px))`
+    : `env(safe-area-inset-left)`;
+export const safeAreaInsetTop = isRunningAcceptanceTest()
+    ? `max(env(safe-area-inset-top), var(--acceptance-test-override-safe-area-inset-top, 0px))`
+    : `env(safe-area-inset-top)`;
+export const safeAreaInsetBottom = isRunningAcceptanceTest()
+    ? `max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset-bottom, 0px))`
+    : `env(safe-area-inset-bottom)`;
+export const safeAreaInsetRight = isRunningAcceptanceTest()
+    ? `max(env(safe-area-inset-right), var(--acceptance-test-override-safe-area-inset-right, 0px))`
+    : `env(safe-area-inset-right)`;

package/src/utils/document-visibility.tsx

@@ -0,0 +1,52 @@
+'use client';
+import * as React from 'react';
+import {useTheme} from '../hooks';
+import {isAndroid} from './platform';
+
+const isDocumentVisible = () => typeof document !== 'undefined' && document.visibilityState === 'visible';
+
+const DocumentVisibilityContext = React.createContext<boolean>(true);
+
+type Props = {
+    hidden?: boolean;
+    children: React.ReactNode;
+};
+
+export const DocumentVisibilityProvider = ({hidden, children}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+    const [visible, setVisible] = React.useState(!hidden);
+    React.useEffect(() => {
+        const visibilitychangeCallback = () => {
+            setVisible(isDocumentVisible());
+        };
+        const focusCallback = () => {
+            setVisible(true);
+        };
+        const blurCallback = () => {
+            setVisible(false);
+        };
+        setVisible(isDocumentVisible());
+        document.addEventListener('visibilitychange', visibilitychangeCallback);
+        document.addEventListener('focus', focusCallback);
+        document.addEventListener('blur', blurCallback);
+        return () => {
+            document.removeEventListener('visibilitychange', visibilitychangeCallback);
+            document.removeEventListener('focus', focusCallback);
+            document.removeEventListener('blur', blurCallback);
+        };
+    }, []);
+
+    // Workaround for this bug: https://jira.tuenti.io/jira/browse/ACCOUNT-10938
+    // In Android, after ~10 minutes of inactivity, when a background webview receives focus (back navigation from another webview),
+    // visibility change event is not fired, this causes problems like the navigation bar not being updated
+    const isVisibleNow = isDocumentVisible();
+    if (isAndroid(platformOverrides) && isVisibleNow !== visible) {
+        setVisible(isVisibleNow);
+    }
+
+    return (
+        <DocumentVisibilityContext.Provider value={visible}>{children}</DocumentVisibilityContext.Provider>
+    );
+};
+
+export const useDocumentVisibility = (): boolean => React.useContext(DocumentVisibilityContext);