@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/src/HiPaymentMeans/HiPaymentMeans.js

@@ -1,566 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-
-export const styles = theme => ({
-    bankCard: {
-        position: 'relative',
-        width: 256,
-        height: 160,
-        borderRadius: 13,
-    },
-    wallet: {
-        position: 'relative',
-        width: 256,
-        height: 160,
-        filter: 'drop-shadow(30px 10px 4px #4444dd)',
-        webkitFilter: 'drop-shadow(30px 10px 4px #4444dd)',
-    },
-    shadow: {
-        boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.24)',
-    },
-    walletShadow: {
-        width: 256,
-        height: 160,
-        backgroundSize: '100%',
-        filter: 'drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))',
-        webkitFilter: 'drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))',
-        mozFilter: 'drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))',
-    },
-    sepa: {
-        position: 'relative',
-        width: 256,
-        height: 160,
-        borderRadius: 3,
-    },
-    logo: {
-        height: 36,
-        marginTop: 2,
-    },
-    logoRight: {
-        float: 'right',
-        marginRight: 18,
-    },
-    logoLeft: {
-        marginLeft: 18,
-    },
-    logoMerchant: {
-        marginLeft: '-31px',
-    },
-    stripe: {
-        width: 96,
-        height: 40,
-        background: '#FFFFFF',
-    },
-    stripeTopRight: {
-        display: 'inline-block',
-        float: 'right',
-        marginTop: 11,
-    },
-    stripeTopLeft: {
-        display: 'inline-block',
-        float: 'left',
-        marginTop: 11,
-    },
-    stripeBottomLeft: {
-        display: 'inline-block',
-        float: 'left',
-        marginTop: 38,
-    },
-    stripeGradient: {
-        width: 111,
-        height: 40,
-    },
-    stripeGradientTopRight: {
-        background: 'linear-gradient(to right, rgba(0,255,0,0), #FFFFFF)',
-        marginTop: 11,
-    },
-    stripeGradientTopLeft: {
-        background: 'linear-gradient(to left, rgba(0,255,0,0), #FFFFFF)',
-        marginTop: 11,
-    },
-    stripeGradientBottomLeft: {
-        background: 'linear-gradient(to left, rgba(0,255,0,0), #FFFFFF)',
-        marginTop: 38,
-    },
-    labelMedium: {
-        display: 'block',
-        fontFamily: theme.typography.fontFamily,
-        fontSize: 10,
-        color: '#FFFFFF',
-    },
-    corporateNumberLabel: {
-        float: 'left',
-        marginTop: 5,
-        paddingLeft: 22,
-        height: 10,
-        width: 234,
-    },
-    cardNumberLabel: {
-        float: 'left',
-        paddingLeft: 22,
-        height: 10,
-        width: 234,
-        marginBottom: 18,
-    },
-    giftCardNumberLabel: {
-        float: 'left',
-        paddingLeft: 21,
-        height: 10,
-        width: 234,
-        marginTop: 25,
-    },
-    ibanLabel: {
-        float: 'left',
-        marginTop: 23,
-        paddingLeft: 12,
-        height: 10,
-        width: 234,
-    },
-    number: {
-        display: 'block',
-        float: 'left',
-        fontFamily: theme.typography.fontFamily,
-        color: '#FFFFFF',
-    },
-    cardNumber: {
-        fontSize: 18,
-        width: 235,
-        paddingLeft: 21,
-        marginTop: 16,
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-    },
-    giftCardNumber: {
-        fontSize: 18,
-        width: 235,
-        paddingLeft: 21,
-        marginBottom: 28,
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-    },
-    corporateNumber: {
-        fontSize: 18,
-        height: 25,
-        width: 234,
-        paddingLeft: 22,
-        marginBottom: 4,
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-    },
-    ibanNumber: {
-        fontSize: 14,
-        height: 16,
-        width: 256,
-        paddingLeft: 12,
-        marginBottom: 11,
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-    },
-    memberSince: {
-        display: 'block',
-        float: 'left',
-        paddingLeft: 22,
-        maxHeight: 19,
-        maxWidth: 52,
-        lineHeight: '9px',
-        textAlign: 'right',
-        verticalAlign: 'middle',
-        fontFamily: theme.typography.fontFamily,
-        fontSize: 8,
-        color: '#FFFFFF',
-    },
-    yearMember: {
-        display: 'block',
-        float: 'left',
-        marginLeft: 4,
-        marginTop: 2,
-        height: 19,
-        width: 33,
-        fontFamily: theme.typography.fontFamily,
-        fontSize: 14,
-        color: '#FFFFFF',
-    },
-    validThru: {
-        position: 'absolute',
-        right: 67,
-        bottom: 22,
-        display: 'block',
-        maxHeight: 19,
-        maxWidth: 35,
-        lineHeight: '9px',
-        textAlign: 'right',
-        verticalAlign: 'middle',
-        fontFamily: theme.typography.fontFamily,
-        fontSize: 8,
-        color: '#FFFFFF',
-    },
-    dateValid: {
-        position: 'absolute',
-        left: 192,
-        bottom: 20,
-        display: 'block',
-        height: 19,
-        width: 55,
-        fontFamily: theme.typography.fontFamily,
-        fontSize: 14,
-        color: '#FFFFFF',
-    },
-    labelLarge: {
-        display: 'block',
-        fontFamily: theme.typography.fontFamily,
-        fontSize: 13,
-        color: '#FFFFFF',
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        textOverflow: "ellipsis",
-    },
-    userNameCard: {
-        position: 'absolute',
-        left: 22,
-        bottom: 21,
-        height: 16,
-        width: 150,
-    },
-    userNameSepa: {
-        position: 'absolute',
-        left: 12,
-        bottom: 21,
-        height: 16,
-        width: 150,
-    },
-    userNameCorporate: {
-        float: 'left',
-        marginTop: 8,
-        paddingLeft: 22,
-        height: 16,
-        width: 234,
-    },
-    userNameWallet: {
-        float: 'left',
-        marginTop: 54,
-        paddingLeft: 22,
-        height: 16,
-        width: 184,
-    },
-    businessName: {
-        float: 'left',
-        paddingLeft: 22,
-        height: 16,
-        width: 234,
-    },
-    labelDebitCredit: {
-        position: 'absolute',
-        right: 15,
-        bottom: 8,
-        height: 15,
-        fontWeight: '500',
-    },
-    corporateLabel: {
-        float: 'right',
-        marginRight: '-25px',
-        marginTop: 10,
-        fontFamily: theme.typography.fontFamily,
-        fontSize: 18,
-        fontWeight: '500',
-    },
-});
-
-class HiPaymentMeans extends React.Component {
-    static propTypes = {
-        /**
-         * Nom de la société de l'utilisateur si affichage de type CORPORATE
-         */
-        businessName: PropTypes.string,
-        /**
-         * Numéro du moyen de paiement (CB, SEPA, etc)
-         */
-        cardNumber: PropTypes.string,
-        /**
-         * Utilisateur du moyen de paiement
-         */
-        cardUser: PropTypes.string,
-        /**
-         * Genre du card user
-         * F: female
-         * M: male
-         * U: unknown
-         */
-        cardUserGender: PropTypes.oneOf(['F', 'M', 'U']),
-        /**
-         * Validité du moyen de paiement
-         */
-        cardValidity: PropTypes.string,
-        /**
-         * Surcharge les classes du composant
-         */
-        classes: PropTypes.object,
-        /**
-         * Couleur principal du moyen de paiement
-         */
-        colorPrimary: PropTypes.string,
-        /**
-         * Couleur secondaire du moyen de paiement (si dégradé)
-         */
-        colorSecondary: PropTypes.string,
-        /**
-         * Dans le cas d'un virement
-         * if TRUE, c'est un crédit (default)
-         * else FALSE, c'est un débit
-         */
-        credit: PropTypes.bool,
-        /**
-         * Chemin vers l'image à afficher par défaut si le logo n'est pas trouvé
-         */
-        fallbackImage: PropTypes.string,
-        /**
-         * Logo du moyen de paiement
-         */
-        logo: PropTypes.string,
-        /**
-         * Logo du marchand dans le cas d'une carte cadeau
-         */
-        logoMerchant: PropTypes.string,
-        /**
-         * Chemin des svg du composant
-         */
-        svgPath: PropTypes.string,
-        /**
-         * Objet themes du composant
-         */
-        theme: PropTypes.object,
-        /**
-         * Objet de traductions du composant
-         */
-        translations: PropTypes.object,
-        /**
-         * Propriété utilisée pour discriminer les templates
-         */
-        type: PropTypes.string,
-        /**
-         * Année depuis laquelle l'utilisateur est membre dans le cas d'une carte CORPORATE
-         */
-        yearMember: PropTypes.string,
-    };
-
-    static defaultProps = {
-        cardUserGender: 'U',
-        credit: true,
-        translations: {
-            credit: 'credit',
-            debit: 'debit',
-            gift_card: 'GIFT CARD',
-            gender_female: 'Mrs',
-            gender_male: 'Mr',
-        },
-    };
-
-    buildPaymentLayoutByType = () => {
-        const {
-            businessName,
-            cardNumber,
-            cardUser,
-            cardUserGender,
-            cardValidity,
-            classes,
-            colorPrimary,
-            colorSecondary,
-            credit,
-            logo,
-            logoMerchant,
-            svgPath,
-            theme,
-            translations,
-            type,
-            yearMember,
-            fallbackImage,
-        } = this.props;
-
-        let formatNumber;
-        if (type === 'credit-card' || type === 'debit-card' || type === 'prepaid-card') {
-            formatNumber = cardNumber && this.formatCardNumber(cardNumber);
-        } else if (type === 'open-invoice' || type === 'payment-reference' || type === 'credit-consumption' || type === 'realtime-banking') {
-            formatNumber = cardNumber && this.formatIBANNumber(cardNumber);
-        }
-        let color1 = colorPrimary;
-        let color2 = colorSecondary;
-        if (!color1) {
-            color1 = theme.palette.primary.main;
-            color2 = theme.palette.primary.dark;
-        }
-
-        let brandLogo = logo;
-        if (!brandLogo) {
-            brandLogo = `${svgPath}sans_logo_full.svg`;
-        }
-
-        let username = cardUser;
-        if (cardUserGender === 'F') {
-            username = `${translations.gender_female} ${cardUser}`;
-        } else if (cardUserGender === 'M') {
-            username = `${translations.gender_male} ${cardUser}`;
-        }
-
-        let creditDebit = null;
-        if (translations.credit && translations.debit) {
-            creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
-        }
-
-        const imgComponent = <img
-            src={brandLogo}
-            alt={''}
-            className={classNames(classes.logo, {
-                [classes.logoLeft]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0,
-                [classes.logoRight]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0,
-            })}
-            onError={(e) => {
-                if (fallbackImage) {
-                    e.target.src = `${fallbackImage}`;
-                } else {
-                    e.target.style.display = 'none';
-                }
-            }} />;
-
-        let cardLayout;
-        switch (type) {
-            case 'ewallet':
-                cardLayout = (
-                    <div style={{ backgroundImage: `url("${svgPath}Wallet_shape.svg")` }} className={classes.walletShadow}>
-                        <div
-                            style={{ background: `linear-gradient(${color1}, ${color2 || color1})`, WebkitMask: `url("${svgPath}Wallet_shape.svg")` }}
-                            className={classes.wallet}>
-                            <div className={classNames(classes.labelLarge, classes.userNameWallet)} title={username}>{username}</div>
-                            <span className={classNames(classes.stripe, classes.stripeBottomLeft)}>
-                                {imgComponent}
-                            </span>
-                            <span className={classNames(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)} />
-                        </div>
-                    </div>
-                );
-                break;
-            case 'credit-card':
-            case 'debit-card':
-                cardLayout = (
-                    <div
-                        className={classNames(classes.bankCard, classes.shadow)}
-                        style={{ background: `linear-gradient(${color1}, ${color2 || color1})` }}>
-                        <span className={classNames(classes.stripe, classes.stripeTopRight)}>
-                            {imgComponent}
-                        </span>
-                        <span className={classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)} />
-                        <div className={classNames(classes.number, classes.cardNumber)}>{formatNumber}</div>
-                        { cardNumber && <div className={classNames(classes.labelMedium, classes.cardNumberLabel)}>Card number</div>}
-                        <div className={classNames(classes.labelLarge, classes.userNameCard)} title={username}>{username}</div>
-                        <div className={classes.dateValid}>{cardValidity}</div>
-                        { cardValidity && <div className={classes.validThru}>Valid Thru</div>}
-                    </div>
-                );
-                break;
-            case 'corporate':
-                cardLayout = (
-                    <div
-                        className={classNames(classes.bankCard, classes.shadow)}
-                        style={{ background: `linear-gradient(${color1}, ${color2 || color1})` }}>
-                        <span className={classNames(classes.stripe, classes.stripeTopRight)}>
-                            {imgComponent}
-                        </span>
-                        <span className={classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)}>
-                            <div className={classes.corporateLabel} style={{ color: color1 }}>CORPORATE</div>
-                        </span>
-                        { cardNumber && <div className={classNames(classes.labelMedium, classes.corporateNumberLabel)}>Card number</div>}
-                        <div className={classNames(classes.number, classes.corporateNumber)}>{cardNumber}</div>
-                        { yearMember && <div className={classes.memberSince}>Member Since</div>}
-                        <div className={classes.yearMember}>{yearMember}</div>
-                        <div className={classes.dateValid}>{cardValidity}</div>
-                        { cardValidity && <div className={classes.validThru}>Valid Thru</div>}
-                        <div className={classNames(classes.labelLarge, classes.userNameCorporate)} title={cardUser}>{cardUser}</div>
-                        <div className={classNames(classes.labelLarge, classes.businessName)} title={businessName}>{businessName}</div>
-                    </div>
-                );
-                break;
-            case 'open-invoice':
-            case 'payment-reference':
-            case 'credit-consumption':
-            case 'realtime-banking':
-                cardLayout = (
-                    <div
-                        className={classNames(classes.sepa, classes.shadow)}
-                        style={{ background: `linear-gradient(${color1}, ${color2 || color1})` }}>
-                        <span className={classNames(classes.stripe, classes.stripeTopLeft)}>
-                            {imgComponent}
-                        </span>
-                        <span className={classNames(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)} />
-                        { cardNumber && <div className={classNames(classes.labelMedium, classes.ibanLabel)}>IBAN</div>}
-                        <div className={classNames(classes.number, classes.ibanNumber)}>{formatNumber}</div>
-                        <div className={classNames(classes.labelLarge, classes.userNameSepa)} title={username}>{username}</div>
-                        <div className={classNames(classes.labelLarge, classes.labelDebitCredit)}>{creditDebit}</div>
-                    </div>
-                );
-                break;
-            case 'prepaid-card':
-                cardLayout = (
-                    <div
-                        className={classNames(classes.bankCard, classes.shadow)}
-                        style={{ background: `url("${svgPath}Gift_shape.svg"), linear-gradient(${color1},
-                         ${color2 || color1})` }}>
-                        <span className={classNames(classes.stripe, classes.stripeTopRight)}>
-                            {imgComponent}
-                        </span>
-                        <span className={classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)}>
-                            <img src={logoMerchant} alt={''} className={classNames(classes.logo, classes.logoMerchant)} />
-                        </span>
-                        { cardNumber && <div className={classNames(classes.labelMedium, classes.giftCardNumberLabel)}>Card number</div>}
-                        <div className={classNames(classes.number, classes.giftCardNumber)}>{cardNumber}</div>
-                        <div className={classNames(classes.labelLarge, classes.labelDebitCredit)}>{translations.gift_card}</div>
-                    </div>
-                );
-                break;
-            default:
-                cardLayout = (
-                    <div
-                        className={classNames(classes.bankCard, classes.shadow)}
-                        style={{ background: `linear-gradient(${color1}, ${color2 || color1})` }}>
-                        <span className={classNames(classes.stripe, classes.stripeTopRight)}>
-                            {imgComponent}
-                        </span>
-                        <span className={classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)} />
-                        <div className={classNames(classes.number, classes.cardNumber)}>{cardNumber}</div>
-                        { cardNumber && <div className={classNames(classes.labelMedium, classes.cardNumberLabel)}>Card number</div>}
-                        <div className={classNames(classes.labelLarge, classes.userNameCard)} title={username}>{username}</div>
-                        <div className={classes.dateValid}>{cardValidity}</div>
-                        { cardValidity && <div className={classes.validThru}>Valid Thru</div>}
-                    </div>
-                );
-        }
-        return cardLayout;
-    };
-
-    formatCardNumber = (cardNumber) => {
-        if (cardNumber.search(/X/g) >= 0) {
-            cardNumber = cardNumber.replace(/X/g, '*');
-        }
-        if (cardNumber.search(' ') < 0) {
-            cardNumber = `${cardNumber.substring(0, 4)} ${cardNumber.substring(4, 8)} ${cardNumber.substring(8, 12)} ${cardNumber.substring(12, 16)}`;
-        }
-
-        return cardNumber;
-    };
-
-    formatIBANNumber = (iban) => {
-        // 1) remove spaces
-        let res = iban.replace(/\s/g, '');
-        // 2) add space each 4 chars
-        return [...res].map((char, index) => (index > 0 && index % 4 === 0) ? ' ' + char : char).join('');
-    };
-
-    render() {
-        return this.buildPaymentLayoutByType();
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiHiPaymentMean', withTheme: true })(HiPaymentMeans);