@telefonica/mistica 16.59.0-beta.1 → 16.59.0

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

@@ -1,187 +0,0 @@
-'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

@@ -1,56 +0,0 @@
-'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

@@ -1,47 +0,0 @@
-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

@@ -1,245 +0,0 @@
-'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

@@ -1,169 +0,0 @@
-'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;