@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/credit-card-expiration-field.tsx

@@ -0,0 +1,187 @@
+'use client';
+import * as React from 'react';
+import {useForm, useFieldProps} from './form-context';
+import {useTheme} from './hooks';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+import * as tokens from './text-tokens';
+
+import type {CommonFormFieldProps} from './text-field-base';
+
+type ExpirationDateValue = {
+    month: number | null;
+    year: number | null;
+    raw: string;
+};
+
+const MonthYearDateInput = ({inputRef, defaultValue, value, ...rest}: any) => {
+    const {texts, t} = useTheme();
+    const keyDownRef = React.useRef('');
+
+    /**
+     * 1) characters other than [0-9] and '/' are removed
+     * 2) automatically insert "/" as you type
+     * 3) the user must be able to remove text
+     */
+    const format = (s: string) => {
+        // slash was removed
+        if (s.length === 2 && keyDownRef.current === 'Backspace') {
+            return s[0];
+        }
+
+        let value = '';
+        /**
+         * format after adding characters one by one in order to prevent unwanted results when
+         * writing multiple characters at the same time (for example, by using copy/paste)
+         */
+        [...s].forEach((c) => {
+            value = (value + c)
+                .replace(
+                    /[^0-9]/g,
+                    '' // allow only numbers
+                )
+                .replace(
+                    /^([2-9])$/g,
+                    '0$1' // 3 -> 03
+                )
+                .replace(
+                    /^(1{1})([3-9]{1})$/g,
+                    '0$1/$2' // 13 -> 01/3
+                )
+                .replace(
+                    /^0{1,}/g,
+                    '0' // 00 -> 0
+                )
+                .replace(
+                    /^([0-1]{1}[0-9]{1})([0-9]{1,2}).*/g,
+                    '$1/$2' // 113 > 11/3
+                );
+        });
+
+        if (value.length === 2) {
+            return value + '/';
+        }
+
+        return value;
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        keyDownRef.current = e.key;
+    };
+
+    return (
+        <input
+            {...rest}
+            placeholder={texts.expirationDatePlaceholder || t(tokens.expirationDatePlaceholder)}
+            type="text"
+            inputMode="decimal"
+            maxLength="5" // MM/YY
+            onKeyDown={handleKeyDown}
+            onInput={(e) => {
+                const nextValue = format(e.currentTarget.value);
+                e.currentTarget.value = nextValue;
+            }}
+            value={value === undefined ? undefined : format(value)}
+            defaultValue={defaultValue === undefined ? undefined : format(defaultValue)}
+            ref={inputRef}
+        />
+    );
+};
+
+export interface CreditCardExpirationFieldProps extends CommonFormFieldProps {
+    validate?: (value: ExpirationDateValue | undefined, rawValue: string) => string | undefined;
+    onChangeValue?: (value: ExpirationDateValue) => void;
+}
+
+const CreditCardExpirationField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate: validateProp,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue,
+    onBlur,
+    value,
+    autoComplete = 'cc-exp',
+    defaultValue,
+    dataAttributes,
+    ...rest
+}: CreditCardExpirationFieldProps): JSX.Element => {
+    const {texts, t} = useTheme();
+    const {setFormError, jumpToNext} = useForm();
+
+    const validate = (value: ExpirationDateValue, rawValue: string): string | undefined => {
+        const {month, year} = value;
+        if (!month || !year) {
+            return texts.formCreditCardExpirationError || t(tokens.formCreditCardExpirationError);
+        }
+        const currentDate = new Date();
+        const currentMonth = currentDate.getMonth() + 1;
+        const currentYear = currentDate.getFullYear();
+        if (year < currentYear) {
+            return texts.formCreditCardExpirationError || t(tokens.formCreditCardExpirationError);
+        }
+        if (year === currentYear && month < currentMonth) {
+            return texts.formCreditCardExpirationError || t(tokens.formCreditCardExpirationError);
+        }
+        return validateProp?.(value, rawValue);
+    };
+
+    const processValue = (s: any): ExpirationDateValue => {
+        const [month, year] = String(s)
+            .split('/')
+            .map((n) => parseInt(n));
+
+        const fullYear = Number.isInteger(year) ? 2000 + year : null;
+        return {month: month || null, year: fullYear, raw: s};
+    };
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    return (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                fieldProps.onChange(event);
+                const rawValue = event.currentTarget.value;
+                const value = processValue(rawValue);
+                if (rawValue.length === 5) {
+                    const error = validate?.(value, rawValue);
+                    if (error) {
+                        setFormError({name, error});
+                    } else {
+                        jumpToNext(name);
+                    }
+                }
+            }}
+            autoComplete={autoComplete}
+            inputComponent={MonthYearDateInput}
+            dataAttributes={{
+                'component-name': 'CreditCardExpirationField',
+                testid: 'CreditCardExpirationField',
+                ...dataAttributes,
+            }}
+        />
+    );
+};
+
+export default CreditCardExpirationField;

package/src/credit-card-fields.tsx

@@ -0,0 +1,56 @@
+'use client';
+import * as React from 'react';
+import {useForm} from './form-context';
+import {useTheme} from './hooks';
+import {getCvvLength} from './utils/credit-card';
+import DoubleField from './double-field';
+import Stack from './stack';
+import CreditCardExpirationField from './credit-card-expiration-field';
+import CreditCardNumberField from './credit-card-number-field';
+import CvvField from './cvv-field';
+import * as tokens from './text-tokens';
+
+import type {CardOptions} from './utils/credit-card';
+
+type CreditCardFieldsProps = {
+    numberFieldName?: string;
+    expirationFieldName?: string;
+    cvvFieldName?: string;
+    acceptedCards?: CardOptions;
+    children?: void;
+};
+
+const CreditCardFields = ({
+    numberFieldName = 'ccNum',
+    expirationFieldName = 'ccExp',
+    cvvFieldName = 'ccCvv',
+    acceptedCards,
+}: CreditCardFieldsProps): JSX.Element => {
+    const {values} = useForm();
+    const {texts, t} = useTheme();
+    const cvvLength = getCvvLength(String(values[numberFieldName]));
+
+    return (
+        <Stack space={16}>
+            <CreditCardNumberField
+                acceptedCards={acceptedCards}
+                name={numberFieldName}
+                label={texts.formCreditCardNumberLabel || t(tokens.formCreditCardNumberLabel)}
+            />
+            <DoubleField layout="60/40">
+                <CreditCardExpirationField
+                    name={expirationFieldName}
+                    label={texts.formCreditCardExpirationLabel || t(tokens.formCreditCardExpirationLabel)}
+                />
+                <CvvField
+                    acceptedCards={acceptedCards}
+                    name={cvvFieldName}
+                    label={texts.formCreditCardCvvLabel || t(tokens.formCreditCardCvvLabel)}
+                    maxLength={cvvLength}
+                />
+            </DoubleField>
+        </Stack>
+    );
+};
+
+export default CreditCardFields;

package/src/credit-card-number-field.css.ts

@@ -0,0 +1,47 @@
+import {style, styleVariants} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+
+export const flip = style({
+    perspective: 1000,
+});
+
+const baseIconContainer = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+    }),
+    {
+        backfaceVisibility: 'hidden',
+    },
+]);
+
+export const flipFront = style([
+    baseIconContainer,
+    sprinkles({
+        position: 'absolute',
+    }),
+]);
+
+export const flipBack = style([
+    baseIconContainer,
+    {
+        transform: 'rotateY(180deg)',
+    },
+]);
+
+const flipInner = style([
+    sprinkles({
+        position: 'relative',
+    }),
+    {
+        transition: 'transform 0.4s',
+        transformStyle: 'preserve-3d',
+    },
+]);
+
+export const variants = styleVariants({
+    default: [flipInner, style({transform: 'none'})],
+    backface: [flipInner, style({transform: 'rotateY(180deg)'})],
+});

package/src/credit-card-number-field.tsx

@@ -0,0 +1,245 @@
+'use client';
+import * as React from 'react';
+import {useForm, useFieldProps} from './form-context';
+import {useTheme} from './hooks';
+import {
+    getCreditCardNumberLength,
+    isAmericanExpress,
+    isVisa,
+    isMasterCard,
+    isValidCreditCardNumber,
+} from './utils/credit-card';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+import IconCreditCardVisaRegular from './generated/mistica-icons/icon-credit-card-visa-regular';
+import IconVisa from './icons/icon-visa';
+import IconMastercard from './icons/icon-mastercard';
+import IconAmex from './icons/icon-amex';
+import {useRifm} from 'rifm';
+import {createChangeEvent} from './utils/dom';
+import {combineRefs} from './utils/common';
+import * as styles from './credit-card-number-field.css';
+import {vars} from './skins/skin-contract.css';
+import {iconSize} from './icon-button.css';
+import * as tokens from './text-tokens';
+
+import type {CardOptions} from './utils/credit-card';
+import type {CommonFormFieldProps} from './text-field-base';
+
+const format = (s?: string) => {
+    const sanitizedNumber = String(s ?? '').replace(/[^\d]/g, '');
+    return sanitizedNumber.match(/.{1,4}/g)?.join(' ') ?? sanitizedNumber;
+};
+
+type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onInput'> & {
+    inputRef?: React.Ref<HTMLInputElement>;
+    value?: string;
+    defaultValue?: string;
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
+};
+
+const CreditCardInput = ({inputRef, value, defaultValue, onChange, ...other}: Props) => {
+    const [selfValue, setSelfValue] = React.useState(defaultValue ?? '');
+    const ref = React.useRef<HTMLInputElement | null>(null);
+
+    const isControlledByParent = typeof value !== 'undefined';
+    const controlledValue = (isControlledByParent ? value : selfValue) as string;
+
+    const handleChangeValue = React.useCallback(
+        (newFormattedValue: string) => {
+            if (!isControlledByParent) {
+                setSelfValue(newFormattedValue);
+            }
+            if (ref.current) {
+                onChange?.(createChangeEvent(ref.current, newFormattedValue));
+            }
+        },
+        [isControlledByParent, onChange]
+    );
+
+    const rifm = useRifm({
+        format,
+        value: controlledValue,
+        onChange: handleChangeValue,
+        accept: /[\d]+/g,
+    });
+
+    return (
+        <input
+            {...other}
+            type="text"
+            inputMode="decimal"
+            maxLength={getCreditCardNumberLength(rifm.value) + 3} // We have to take into account formatting spaces
+            onChange={rifm.onChange}
+            value={rifm.value}
+            ref={combineRefs(inputRef, ref)}
+        />
+    );
+};
+
+const getAnimationTarget = (value?: string) => {
+    if (isVisa(value)) {
+        return <IconVisa size={iconSize.small} />;
+    }
+    if (isMasterCard(value)) {
+        return <IconMastercard size={iconSize.small} />;
+    }
+    if (isAmericanExpress(value)) {
+        return <IconAmex size={iconSize.small} />;
+    }
+    return null;
+};
+
+const initialState = {
+    showBackface: false,
+    animationTarget: <IconCreditCardVisaRegular size={iconSize.small} />,
+    isAnimating: false,
+};
+
+const reducer = (
+    state: typeof initialState,
+    {
+        type,
+        value,
+    }: {
+        type: string;
+        value?: string;
+    }
+) => {
+    if (type === 'INPUT') {
+        const animationTarget = getAnimationTarget(value);
+        if (animationTarget && !state.showBackface) {
+            return {animationTarget, showBackface: true, isAnimating: true};
+        }
+        if (!isVisa(value) && !isMasterCard(value) && !isAmericanExpress(value) && state.showBackface) {
+            return {animationTarget: state.animationTarget, showBackface: false, isAnimating: true};
+        }
+        if (animationTarget && state.showBackface) {
+            return {
+                ...state,
+                animationTarget,
+            };
+        }
+    }
+    if (type === 'TRANSITION_END') {
+        return {...state, isAnimating: false};
+    }
+    return state;
+};
+
+const CreditcardAdornment = ({value}: {value?: string}) => {
+    const [{showBackface, animationTarget, isAnimating}, dispatch] = React.useReducer(reducer, initialState);
+    React.useEffect(() => {
+        dispatch({type: 'INPUT', value});
+    }, [value]);
+
+    return (
+        <div className={styles.flip}>
+            <div
+                className={styles.variants[showBackface ? 'backface' : 'default']}
+                onTransitionEnd={() => isAnimating && dispatch({type: 'TRANSITION_END'})}
+            >
+                <div className={styles.flipFront}>
+                    <IconCreditCardVisaRegular size={iconSize.small} color={vars.colors.neutralMedium} />
+                </div>
+                <div className={styles.flipBack}>{animationTarget}</div>
+            </div>
+        </div>
+    );
+};
+
+interface CreditCardNumberFieldProps extends CommonFormFieldProps {
+    acceptedCards?: CardOptions;
+    onChangeValue?: (value: string, rawValue: string) => void;
+}
+
+const CreditCardNumberField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate: validateProp,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue,
+    onBlur,
+    acceptedCards = {americanExpress: true, visa: true, masterCard: true},
+    value,
+    autoComplete = 'cc-number',
+    defaultValue,
+    dataAttributes,
+    ...rest
+}: CreditCardNumberFieldProps): JSX.Element => {
+    const {texts, t} = useTheme();
+    const {jumpToNext, rawValues, setFormError} = useForm();
+
+    const validate = (value: string | undefined, rawValue: string) => {
+        const error = texts.formCreditCardNumberError || t(tokens.formCreditCardNumberError);
+        if (isAmericanExpress(value) && !acceptedCards.americanExpress) {
+            return error;
+        }
+        if (isVisa(value) && !acceptedCards.visa) {
+            return error;
+        }
+        if (isMasterCard(value) && !acceptedCards.masterCard) {
+            return error;
+        }
+        if (!isValidCreditCardNumber(value)) {
+            return error;
+        }
+        if (getCreditCardNumberLength(value) !== value?.length) {
+            return error;
+        }
+        return validateProp?.(value, rawValue);
+    };
+
+    const processValue = (s: string) => s.replace(/\s/g, '');
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    return (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            onChange={(event) => {
+                fieldProps.onChange(event);
+                const rawValue = event.currentTarget.value;
+                const value = processValue(rawValue);
+                if (value.length >= getCreditCardNumberLength(value)) {
+                    const error = validate?.(value, rawValue);
+                    if (error) {
+                        setFormError({name, error});
+                    } else {
+                        jumpToNext(name);
+                    }
+                }
+            }}
+            inputComponent={CreditCardInput}
+            autoComplete={autoComplete}
+            endIcon={<CreditcardAdornment value={value ?? rawValues[name] ?? ''} />}
+            dataAttributes={{
+                'component-name': 'CreditCardNumberField',
+                testid: 'CreditCardNumberField',
+                ...dataAttributes,
+            }}
+        />
+    );
+};
+
+export default CreditCardNumberField;

package/src/cvv-field.tsx

@@ -0,0 +1,169 @@
+'use client';
+import * as React from 'react';
+import {useTheme} from './hooks';
+import IconCvvVisaMc from './icons/icon-cvv-visa-mc';
+import IconCvvAmex from './icons/icon-cvv-amex';
+import Popover from './popover';
+import IconInformationRegular from './generated/mistica-icons/icon-information-regular';
+import {useFieldProps, useForm} from './form-context';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+import {IntegerInput} from './integer-field';
+import Inline from './inline';
+import Stack from './stack';
+import Box from './box';
+import Divider from './divider';
+import Text2 from './text';
+import {vars} from './skins/skin-contract.css';
+import {pxToRem} from './utils/css';
+import {iconButtonSize} from './text-field-base.css';
+import Touchable from './touchable';
+import * as tokens from './text-tokens';
+
+import type {CommonFormFieldProps} from './text-field-base';
+import type {CardOptions} from './utils/credit-card';
+
+const TooltipContent = ({acceptedCards}: {acceptedCards: CardOptions}) => {
+    const {texts, t} = useTheme();
+
+    return (
+        <>
+            <Box padding={8}>
+                <Stack space={8}>
+                    <Inline space={16} alignItems="center">
+                        <IconCvvVisaMc size={48} role="img" />
+                        <Text2>
+                            {texts.formCreditCardCvvTooltipVisaMc || t(tokens.formCreditCardCvvTooltipVisaMc)}
+                        </Text2>
+                    </Inline>
+                    <Divider />
+                    {acceptedCards?.americanExpress && (
+                        <Inline space={16} alignItems="center">
+                            <IconCvvAmex size={48} role="img" />
+                            <Text2>
+                                {texts.formCreditCardCvvTooltipAmex || t(tokens.formCreditCardCvvTooltipAmex)}
+                            </Text2>
+                        </Inline>
+                    )}
+                </Stack>
+            </Box>
+        </>
+    );
+};
+
+export interface CvvFieldProps extends CommonFormFieldProps {
+    acceptedCards?: CardOptions;
+    onChangeValue?: (value: string, rawValue: string) => void;
+}
+
+const CvvField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate: validateProp,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue,
+    onBlur,
+    acceptedCards = {americanExpress: true, visa: true, masterCard: true},
+    maxLength = 4,
+    value,
+    autoComplete = 'cc-csc',
+    defaultValue,
+    dataAttributes,
+    ...rest
+}: CvvFieldProps): JSX.Element => {
+    const {texts, t} = useTheme();
+    const {setFormError, jumpToNext} = useForm();
+    const [isCvvHelpOpen, setIsCvvHelpOpen] = React.useState(false);
+
+    const validate = (value: string, rawValue: string) => {
+        if (value.length !== maxLength) {
+            return texts.formCreditCardCvvError || t(tokens.formCreditCardCvvError);
+        }
+        return validateProp?.(value, rawValue);
+    };
+
+    const processValue = (s: string) => s;
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    const iconSize = pxToRem(16);
+
+    return (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            maxLength={maxLength}
+            onChange={(event) => {
+                fieldProps.onChange(event);
+                const rawValue = event.currentTarget.value;
+                const value = processValue(rawValue);
+                if (value.length === maxLength) {
+                    const error = validate(value, rawValue);
+                    if (error) {
+                        setFormError({name, error});
+                    } else {
+                        jumpToNext(name);
+                    }
+                }
+            }}
+            endIcon={
+                <Popover
+                    position="top"
+                    open={isCvvHelpOpen}
+                    children={<TooltipContent acceptedCards={acceptedCards} />}
+                    onClose={() => setIsCvvHelpOpen(false)}
+                    target={
+                        <div style={{width: iconSize, height: iconSize}}>
+                            <Touchable
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: iconButtonSize,
+                                    height: iconButtonSize,
+                                    position: 'relative',
+                                    left: `calc(-1 * (${iconButtonSize} - ${iconSize}) / 2)`,
+                                    top: `calc(-1 * (${iconButtonSize} - ${iconSize}) / 2)`,
+                                }}
+                                onPress={() => setIsCvvHelpOpen(!isCvvHelpOpen)}
+                                aria-label={
+                                    isCvvHelpOpen
+                                        ? texts.formCreditCardCvvTooltipVisaMcButtonClose ||
+                                          t(tokens.formCreditCardCvvTooltipVisaMcButtonClose)
+                                        : texts.formCreditCardCvvTooltipVisaMcButtonOpen ||
+                                          t(tokens.formCreditCardCvvTooltipVisaMcButtonOpen)
+                                }
+                            >
+                                <IconInformationRegular size={iconSize} color={vars.colors.neutralMedium} />
+                            </Touchable>
+                        </div>
+                    }
+                />
+            }
+            autoComplete={autoComplete}
+            inputComponent={IntegerInput}
+            dataAttributes={{'component-name': 'CvvField', testid: 'CvvField', ...dataAttributes}}
+        />
+    );
+};
+
+export default CvvField;