@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/HiPaymentMeans/HiPaymentMeans.js

@@ -0,0 +1,566 @@
+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);