@hipay/hipay-material-ui 3.12.0 → 3.12.2

package/src/HiPaymentMeans/HiPaymentMeans.js

@@ -1,612 +0,0 @@
-import React, { useMemo } from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import { useTheme } from "@mui/material/styles";
-
-import makeStyles from '@mui/styles/makeStyles';
-
-const formatCardNumber = (cardNumber) => {
-    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;
-};
-
-/**
- * Format number with group of $size char
- * ie : ("123456789", 4) => "1234 5678 9"
- */
-const formatNumber = (number, digitGroupLength = 4) => {
-    // 1) remove spaces
-    let res = number.replace(/\s/g, "");
-    // 2) add space each 4 chars
-    return [...res].map((char, index) => (index > 0 && index % digitGroupLength === 0) ? ` ${char}` : char).join("");
-};
-
-const CREDIT_CARD = "credit-card";
-const DEBIT_CARD = "debit-card";
-const PREPAID_CARD = "prepraid-card";
-const OPEN_INVOICE = "open-invoice";
-const CREDIT_CONSUMPTION = "credit-consumption";
-const REALTIME_BANKING = "realtime-banking";
-const PAYMENT_REFERENCE = "payment-reference";
-const EWALLET = "ewallet";
-
-export const formatIBANNumber = (value) => formatNumber(value, 4);
-export const formatReferenceNumber = (value) => formatNumber(value, 3);
-
-export const useStyles = makeStyles(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,
-        textTransform: "uppercase",
-    },
-    entityLabel: {
-        float: "left",
-        paddingLeft: 12,
-        height: 10,
-        width: 234,
-        textTransform: "uppercase",
-    },
-    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",
-    },
-    entityNumber: {
-        fontSize: 14,
-        height: 16,
-        width: 256,
-        paddingLeft: 12,
-        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",
-    },
-}));
-
-const HiPaymentMeans = (props) => {
-
-    const {
-        businessName,
-        cardNumber,
-        cardUser,
-        cardUserGender,
-        cardValidity,
-        colorPrimary,
-        colorSecondary,
-        credit,
-        logo,
-        logoMerchant,
-        svgPath,
-        translations,
-        type,
-        yearMember,
-        fallbackImage,
-        entity,
-    } = props;
-
-    const classes = useStyles(props);
-    const theme = useTheme();
-
-    const formatNumber = useMemo(() => {
-        if ([CREDIT_CARD, DEBIT_CARD, PREPAID_CARD].includes(type)) {
-            return cardNumber && formatCardNumber(cardNumber);
-        }
-
-        if ([OPEN_INVOICE, CREDIT_CONSUMPTION, REALTIME_BANKING].includes(type)) {
-            return cardNumber && formatIBANNumber(cardNumber);
-        }
-
-        if (PAYMENT_REFERENCE === type) {
-            return cardNumber && formatReferenceNumber(cardNumber);
-        }
-
-        return cardNumber;
-    }, [type, cardNumber]);
-
-    const [color1, color2] = colorPrimary
-        ? [colorPrimary, colorSecondary]
-        : [theme.palette.primary.main, theme.palette.primary.dark];
-
-    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 = useMemo(() => (
-        <img
-            src={logo || `${svgPath}sans_logo_full.svg`}
-            alt=""
-            className={classNames(
-                classes.logo,
-                {
-                    [classes.logoLeft]: [EWALLET, OPEN_INVOICE, PAYMENT_REFERENCE, CREDIT_CONSUMPTION, REALTIME_BANKING].includes(type),
-                    [classes.logoRight]: ![EWALLET, OPEN_INVOICE, PAYMENT_REFERENCE, CREDIT_CONSUMPTION, REALTIME_BANKING].includes(type),
-                }
-            )}
-            onError={(e) => {
-                if (fallbackImage) {
-                    e.target.src = fallbackImage;
-                } else {
-                    e.target.style.display = "none";
-                }
-            }}
-        />
-    ), [classes, fallbackImage, logo, type, svgPath]);
-
-    // RENDER
-    switch (type) {
-        case EWALLET:
-            return (
-                <div
-                    className={classes.walletShadow}
-                    style={{ backgroundImage: `url("${svgPath}Wallet_shape.svg")` }}
-                    data-name="ewallet"
-                >
-                    <div
-                        className={classes.wallet}
-                        style={{
-                            background: `linear-gradient(${color1}, ${color2 || color1})`,
-                            WebkitMask: `url("${svgPath}Wallet_shape.svg")`
-                        }}
-                    >
-                        <div className={classNames(classes.labelLarge, classes.userNameWallet)} title={username} data-name="card_name">{username}</div>
-                        <span className={classNames(classes.stripe, classes.stripeBottomLeft)}>{imgComponent}</span>
-                        <span className={classNames(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)} />
-                    </div>
-                </div>
-            );
-        case "credit-card":
-        case "debit-card":
-            return (
-                <div
-                    className={classNames(classes.bankCard, classes.shadow)}
-                    style={{ background: `linear-gradient(${color1}, ${color2 || color1})` }}
-                    data-name="card"
-                >
-                    <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)} data-name="card_number">{formatNumber}</div>
-                    {cardNumber && <div className={classNames(classes.labelMedium, classes.cardNumberLabel)}>Card number</div>}
-                    <div className={classNames(classes.labelLarge, classes.userNameCard)} title={username} data-name="card_name">{username}</div>
-                    <div className={classes.dateValid} data-name="card_validity">{cardValidity}</div>
-                    {cardValidity && <div className={classes.validThru}>Valid Thru</div>}
-                </div>
-            );
-        case "corporate":
-            return (
-                <div
-                    className={classNames(classes.bankCard, classes.shadow)}
-                    style={{ background: `linear-gradient(${color1}, ${color2 || color1})` }}
-                    data-name="corporate"
-                >
-                    <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)} data-name="card_number">{cardNumber}</div>
-                    {yearMember && <div className={classes.memberSince}>Member Since</div>}
-                    <div className={classes.yearMember} data-name="year_member">{yearMember}</div>
-                    <div className={classes.dateValid} data-name="card_validity">{cardValidity}</div>
-                    {cardValidity && <div className={classes.validThru}>Valid Thru</div>}
-                    <div className={classNames(classes.labelLarge, classes.userNameCorporate)} title={cardUser} data-name="card_name">{cardUser}</div>
-                    <div className={classNames(classes.labelLarge, classes.businessName)} title={businessName} data-name="business_name">{businessName}</div>
-                </div>
-            );
-        case OPEN_INVOICE:
-        case PAYMENT_REFERENCE:
-        case CREDIT_CONSUMPTION:
-        case REALTIME_BANKING:
-            return (
-                <div
-                    className={classNames(classes.sepa, classes.shadow)}
-                    style={{ background: `linear-gradient(${color1}, ${color2 || color1})` }}
-                    data-name="sepa"
-                >
-                    <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)}>{PAYMENT_REFERENCE === type ? "REFERENCE" : translations.iban}</div>}
-                    <div className={classNames(classes.number, classes.ibanNumber)} data-name="card_number">{formatNumber}</div>
-                    {entity && <>
-                        <div className={classNames(classes.labelMedium, classes.entityLabel)}>{translations.entity ? translations.entity : "ENTITY"}</div>
-                        <div className={classNames(classes.number, classes.entityNumber)} data-name="entity_number">{entity}</div>
-                    </>}
-                    <div className={classNames(classes.labelLarge, classes.userNameSepa)} title={username} data-name="card_name">{username}</div>
-                    <div className={classNames(classes.labelLarge, classes.labelDebitCredit)} data-name="type_iban">{creditDebit}</div>
-                </div>
-            );
-        case "prepaid-card":
-            return (
-                <div
-                    className={classNames(classes.bankCard, classes.shadow)}
-                    style={{ background: `url("${svgPath}Gift_shape.svg"), linear-gradient(${color1}, ${color2 || color1})` }}
-                    data-name="prepaid-card"
-                >
-                    <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)} data-name="card_number">{cardNumber}</div>
-                    <div className={classNames(classes.labelLarge, classes.labelDebitCredit)}>{translations.gift_card}</div>
-                </div>
-            );
-        default:
-            return (
-                <div
-                    className={classNames(classes.bankCard, classes.shadow)}
-                    style={{ background: `linear-gradient(${color1}, ${color2 || color1})` }}
-                    data-name="card"
-                >
-                    <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)} data-name="card_number">{cardNumber}</div>
-                    {cardNumber && <div className={classNames(classes.labelMedium, classes.cardNumberLabel)}>Card number</div>}
-                    <div className={classNames(classes.labelLarge, classes.userNameCard)} title={username} data-name="card_name">{username}</div>
-                    <div className={classes.dateValid} data-name="card_validity">{cardValidity}</div>
-                    {cardValidity && <div className={classes.validThru}>Valid Thru</div>}
-                </div>
-            );
-    }
-};
-
-HiPaymentMeans.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,
-};
-
-HiPaymentMeans.defaultProps = {
-    cardUserGender: "U",
-    credit: true,
-    translations: {
-        credit: "credit",
-        debit: "debit",
-        gift_card: "GIFT CARD",
-        gender_female: "Mrs",
-        gender_male: "Mr",
-        iban: "IBAN",
-    },
-};
-
-export default HiPaymentMeans;