@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiPaymentMeans/HiPaymentMeans.md

@@ -0,0 +1,168 @@
+HiPaymentMeans example:
+
+```js
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import HiPaymentMeans from './HiPaymentMeans';
+import HiRadio from '../HiRadio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const dataList = [
+    // SEPA
+    {
+        card_number: 'IBAN',
+        cardNumber: 'FR7630076020821234567890186',
+        cardUser: 'Banous Riviera',
+        credit: true,
+    },
+    // BANK CARD
+    {
+        cardNumber: '123456XXXXXX5432',
+        cardUser: 'Banous Riviera',
+        cardUserGender: 'M',
+        cardValidity: '03-2017',
+    },
+    // CORPORATE
+    {
+        cardNumber: '3759 ****** 01009',
+        cardUser: 'Thomas Delanoé',
+        cardValidity: '03-2017',
+        yearMember: '2015',
+        businessName: 'Le Comptoir des Binocles',
+    },
+    // GIFT CARD
+    {
+        cardNumber: '3759 ****** 01009',
+        labelGiftCard: 'CARTE CADEAU',
+    },
+    // WALLET
+    {
+        cardUser: 'Thomas Delanoé',
+    },
+    // NO DATA
+    {},
+];
+
+const translateFR = {
+    credit: 'credit',
+    debit: 'debit',
+    gender_female: 'Mme',
+    gender_male: 'Mr',
+    gift_card: 'Carte cadeau',
+};
+
+const translateEn = {
+    credit: 'credit',
+    debit: 'debit',
+    gender_female: 'Mrs',
+    gender_male: 'Mr',
+    gift_card: 'Gift card',
+};
+
+const paymentMeansList = [
+    {
+        type: 'realtime-banking',
+        logo: '/static/hmu/images/payment-means/sepa-refund-transfer full.svg',
+        svgPath: '/static/hmu/images/payment-means/',
+        color1: '#0A4A8D',
+    },
+    {
+        type: 'credit-card',
+        logo: '/static/hmu/images/payment-means/visa.svg',
+        svgPath: '/static/hmu/images/payment-means/',
+        color1: '#EC982D',
+        color2: '#263379',
+    },
+    {
+        type: 'corporate',
+        logo: '/static/hmu/images/payment-means/american-express full.svg',
+        svgPath: '/static/hmu/images/payment-means/',
+        color1: '#009DDC',
+    },
+    {
+        type: 'prepaid-card',
+        logo: '/static/hmu/images/payment-means/carte-cadeau full.svg',
+        svgPath: '/static/hmu/images/payment-means/',
+        logoMerchant: '/static/hmu/images/payment-means/o2 full.svg',
+        color1: '#8BBC06',
+    },
+    {
+        type: 'ewallet',
+        logo: '/static/hmu/images/payment-means/skrill full.svg',
+        svgPath: '/static/hmu/images/payment-means/',
+        color1: '#862164',
+    },
+    {
+        type: 'wrongType',
+        svgPath: '/static/hmu/images/payment-means/',
+    },
+];
+
+class PaymentMeans extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            typePM: '1',
+        };
+        
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({ typePM: event.target.value });
+    };
+
+    render() {
+        const { typePM } = this.state;
+
+        const paymentMean = paymentMeansList[typePM];
+        const data = dataList[typePM];
+
+        return (
+            <div style={{width: '100% !important'}}>
+                <div style={{margin: 15}}>HiPaymentMean</div>
+                <Grid container>
+                    <Grid item sm={6} style={{padding: 50, backgroundColor: '#F8F9FB'}}>
+                        <HiPaymentMeans
+                            // data
+                            businessName={data.businessName}
+                            cardNumber={data.cardNumber}
+                            cardUser={data.cardUser}
+                            cardUserGender={data.cardUserGender}
+                            cardValidity={data.cardValidity}
+                            yearMember={data.yearMember}
+                            credit={data.credit}
+                            // payment mean
+                            colorPrimary={paymentMean.color1}
+                            colorSecondary={paymentMean.color2}
+                            logo={paymentMean.logo}
+                            logoMerchant={paymentMean.logoMerchant}
+                            svgPath={paymentMean.svgPath}
+                            type={paymentMean.type}
+                            translations={translateFR}
+                        />
+                    </Grid>
+                    <Grid item sm={6} style={{padding: 50, backgroundColor: '#F8F9FB'}}>
+                        <RadioGroup
+                            aria-label="Type PaymentMeans"
+                            name="typePaymentMeans"
+                            value={typePM}
+                            onChange={this.handleChange}
+                        >
+                            <FormControlLabel value="0" control={<HiRadio color="primary" />} label="SEPA" />
+                            <FormControlLabel value="1" control={<HiRadio color="primary" />} label="Bank card" />
+                            <FormControlLabel value="2" control={<HiRadio color="primary" />} label="Corporate" />
+                            <FormControlLabel value="3" control={<HiRadio color="primary" />} label="Gift card" />
+                            <FormControlLabel value="4" control={<HiRadio color="primary" />} label="Wallet" />
+                            <FormControlLabel value="5" control={<HiRadio color="primary" />} label="Default" />
+                        </RadioGroup>
+                    </Grid>
+                </Grid>
+            </div>
+        );
+    }
+}
+;<PaymentMeans/>
+```

package/src/HiPaymentMeans/HiPaymentMeans.test.js

@@ -0,0 +1,193 @@
+import React from 'react';
+import { createMount, createShallow, getClasses } from '../test-utils';
+import HiPaymentMeans from './HiPaymentMeans';
+import { assert } from 'chai';
+
+describe('<HiPaymentMeans />', () => {
+    let shallow;
+    let classes;
+    let mount;
+    let translations;
+
+    before(() => {
+        translations = {
+            credit: 'credit',
+            debit: 'debit',
+            gift_card: 'GIFT CARD',
+            gender_female: 'Mrs',
+            gender_male: 'Mr',
+        };
+        shallow = createShallow({ dive: true });
+        classes = getClasses(<HiPaymentMeans
+            logo={'/static/hmu/images/payment-means/sans_logo full.svg'}
+            cardNumber={'55555'}
+            cardUser={'Lulu Rouget'}
+            cardUserGender={'F'}
+            cardValidity={'2019'}
+            colorPrimary={'#fff'}
+            colorSecondary={'#000'}
+            logoMerchant={'logoMerchant'}
+            type={'credit-card'}
+            translations={translations}
+            credit={false}
+        />);
+        mount = createMount();
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    describe('Should render bank card template', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiPaymentMeans
+                    logo={'/static/hmu/images/payment-means/sans_logo full.svg'}
+                    cardNumber={'55555'}
+                    cardUser={'Lulu Rouget'}
+                    cardUserGender={'F'}
+                    cardValidity={'2019'}
+                    colorPrimary={'#fff'}
+                    colorSecondary={'#000'}
+                    logoMerchant={'logoMerchant'}
+                    type={'credit-card'}
+                    translations={translations}
+                />,
+            );
+        });
+
+        it('Should render the bank card template', () => {
+            assert.strictEqual(wrapper.hasClass(classes.bankCard), true);
+            assert.strictEqual(wrapper.find('span').at(1).hasClass(classes.stripeTopRight), true);
+            assert.strictEqual(wrapper.find('span').find('img').hasClass(classes.logoRight), true);
+            assert.strictEqual(wrapper.find('div').at(2).hasClass(classes.cardNumberLabel), true);
+            assert.strictEqual(wrapper.find('div').at(5).hasClass(classes.validThru), true);
+        });
+    });
+
+    describe('Should render default card template', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiPaymentMeans
+                    logo={'/static/hmu/images/payment-means/sans_logo full.svg'}
+                    type={'wrongType'}
+                    translations={translations}
+                />,
+            );
+        });
+
+        it('Should render default card template with just the logo', () => {
+            assert.strictEqual(wrapper.hasClass(classes.bankCard), true);
+            assert.strictEqual(wrapper.find('span').at(1).hasClass(classes.stripeTopRight), true);
+            assert.strictEqual(wrapper.find('span').find('img').hasClass(classes.logoRight), true);
+            assert.strictEqual(wrapper.find('div').at(2).hasClass(classes.cardNumberLabel), false);
+            assert.strictEqual(wrapper.find('div').at(5).exists(), false);
+        });
+    });
+
+    describe('Should render gift card template', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiPaymentMeans
+                    logo={'/static/hmu/images/payment-means/sans_logo full.svg'}
+                    logoMerchant={'/static/hmu/images/payment-means/sans_logo full.svg'}
+                    type={'prepaid-card'}
+                    translations={translations}
+                />,
+            );
+        });
+
+        it('Should render default gift template with the logo merchant', () => {
+            assert.strictEqual(wrapper.hasClass(classes.bankCard), true);
+            assert.strictEqual(wrapper.find('span').at(0).find('img').hasClass(classes.logoRight), true);
+            assert.strictEqual(wrapper.find('span').at(1).hasClass(classes.stripeTopRight), true);
+            assert.strictEqual(wrapper.find('span').at(1).find('img').hasClass(classes.logoMerchant), true);
+        });
+    });
+
+    describe('Should render sepa card template', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiPaymentMeans
+                    logo={'/static/hmu/images/payment-means/sans_logo full.svg'}
+                    cardNumber={'652568248'}
+                    bic={'QJFOQJOIZEI'}
+                    type={'credit-consumption'}
+                    creditDebit={translations.creditDebit}
+                    translations={translations}
+                />,
+            );
+        });
+
+        it('Should render sepa card template with iban, bic and debit label', () => {
+            assert.strictEqual(wrapper.hasClass(classes.sepa), true, '1');
+            assert.strictEqual(wrapper.find('span').at(1).hasClass(classes.stripeTopLeft), true, '2');
+            assert.strictEqual(wrapper.find('span').find('img').hasClass(classes.logoLeft), true, '3');
+            assert.strictEqual(wrapper.find('div').at(1).hasClass(classes.ibanLabel), true, '4');
+            assert.strictEqual(wrapper.find('div').at(3).hasClass(classes.userNameSepa), true, '5');
+            assert.strictEqual(wrapper.find('div').at(4).text(), 'CREDIT', '6');
+        });
+    });
+
+    describe('Should render corporate card template', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiPaymentMeans
+                    logo={'/static/hmu/images/payment-means/sans_logo full.svg'}
+                    type={'corporate'}
+                    cardNumber={'6536587525'}
+                    cardUser={'Joe Quaie'}
+                    businessName={'Canne à son'}
+                    translations={translations}
+                    yearMember={'2000'}
+                    cardValidity={'12/20'}
+                />,
+            );
+        });
+
+        it('Should render corporate card template with all infos', () => {
+            assert.strictEqual(wrapper.hasClass(classes.bankCard), true, '1');
+            assert.strictEqual(wrapper.find('span').at(1).hasClass(classes.stripeTopRight), true, '2');
+            assert.strictEqual(wrapper.find('span').find('img').hasClass(classes.logoRight), true, '3');
+            assert.strictEqual(wrapper.find('span').find('div').text(), 'CORPORATE', '3');
+            assert.strictEqual(wrapper.find('div').at(2).hasClass(classes.corporateNumberLabel), true, '4');
+            assert.strictEqual(wrapper.find('div').at(4).hasClass(classes.memberSince), true, '5');
+            assert.strictEqual(wrapper.find('div').at(7).hasClass(classes.validThru), true, '6');
+            assert.strictEqual(wrapper.find('div').at(8).text(), 'Joe Quaie', '7');
+            assert.strictEqual(wrapper.find('div').at(9).text(), 'Canne à son', '8');
+        });
+    });
+
+    describe('Should render wallet card template', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiPaymentMeans
+                    logo={'/static/hmu/images/payment-means/sans_logo full.svg'}
+                    type={'ewallet'}
+                    cardUser={'Sarah Courssi'}
+                    cardUserGender={'F'}
+                    translations={translations}
+                />,
+            );
+        });
+
+        it('Should render wallet card template with user and logo', () => {
+            assert.strictEqual(wrapper.hasClass(classes.walletShadow), true, '1');
+            assert.strictEqual(wrapper.find('div').at(1).hasClass(classes.wallet), true, '2');
+            assert.strictEqual(wrapper.find('div').at(2).text(), 'Mrs Sarah Courssi', '3');
+            assert.strictEqual(wrapper.find('div').find('span').find('img').hasClass(classes.logoLeft), true, '4');
+        });
+    });
+});

package/src/HiPaymentMeans/index.js

@@ -0,0 +1 @@
+export { default } from './HiPaymentMeans';

package/src/HiPdfReader/HiPdfReader.js

@@ -0,0 +1,195 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiButton from '../HiButton';
+import HiIcon from '../HiIcon';
+// import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+// import ChevronRightIcon from '@material-ui/icons/ChevronRight/';
+import CircularProgress from '@material-ui/core/CircularProgress/';
+import { withStyles } from '@material-ui/core/styles';
+
+export const styles = theme => ({
+    root: {
+        position: 'relative',
+    },
+    pageNumber: {
+        position: 'absolute',
+        bottom: 16,
+        left: -24,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 4,
+        paddingTop: 7,
+        paddingBottom: 7,
+        paddingRight: 8,
+        paddingLeft: 8,
+        fontSize: 15,
+        fontFamily: theme.typography.fontFamily,
+        boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+        color: '#737373',
+    },
+    pagesNavigation: {
+        position: 'absolute',
+        top: 16,
+        right: -30,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 3,
+        paddingTop: 4,
+        paddingBottom: 4,
+        paddingRight: 3,
+        paddingLeft: 3,
+        fontFamily: theme.typography.fontFamily,
+        boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+        color: '#737373',
+        '&>button:first-child': {
+            marginRight: 6,
+        },
+    },
+    navigationButton: {
+        padding: 0,
+        minWidth: 0,
+        minHeight: 0,
+    },
+});
+
+// Constantes utilisées pour le redimentionnement du PDF (format mobile par exemple)
+const maxWindowWidth = 900;
+const maxPdfWidth = 600;
+
+
+let Document;
+let Page;
+
+class HiPdfReader extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Surcharge les classes du composant
+         */
+        classes: PropTypes.object,
+        /**
+         * On affiche les boutons de navigation entre les pages si le PDF contient plusieurs pages
+         */
+        displayNavigationButtons: PropTypes.bool,
+        /**
+         * On affiche la pagination si le PDF contient plusieurs pages
+         */
+        displayPagination: PropTypes.bool,
+        /**
+         * Chemin vers le fichier PDF
+         */
+        file: PropTypes.string.isRequired,
+    };
+
+    static defaultProps = {
+        displayPagination: true,
+        displayNavigationButtons: true,
+    };
+
+    state = {
+        numPages: null,
+        pageNumber: 1,
+        error: false,
+        width: 600,
+    };
+
+    componentDidMount() {
+        this.updateDimensions();
+        window.addEventListener('resize', this.updateDimensions.bind(this));
+        /* eslint-disable */
+        Document = require('react-pdf').Document;
+        Page = require('react-pdf').Page;
+        /* eslint-enable */
+        this.forceUpdate();
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.updateDimensions.bind(this));
+    }
+
+    // Fonction appelée une fois le pdf correctement chargé
+    handleLoadSuccess = ({ numPages }) => {
+        this.setState({ numPages, error: false });
+    };
+
+    // Fonction appelée en cas d'erreur de chargement du pdf
+    handleLoadError = () => {
+        this.setState({ error: true });
+    };
+
+    // Fonction appelée au clic du bouton pour visualiser la page suivante du pdf
+    handleClickNextPage = () => {
+        this.setState(prevState => ({ pageNumber: prevState.pageNumber + 1 }));
+    };
+
+    // Fonction appelée au clic du bouton pour visualiser la page précédente du pdf
+    handleClickPreviousPage = () => {
+        this.setState(prevState => ({ pageNumber: prevState.pageNumber - 1 }));
+    };
+
+    // Calculate & Update state of new dimensions
+    updateDimensions() {
+        if (window.innerWidth < maxWindowWidth) {
+            const updateWidth = Math.round(
+                window.innerWidth * 100 / maxWindowWidth / 100 * maxPdfWidth,
+            );
+            this.setState({ width: updateWidth });
+        } else {
+            this.setState({ width: maxPdfWidth });
+        }
+    }
+
+    // Render
+    render() {
+        const { pageNumber, numPages, error } = this.state;
+        const { classes, file, displayPagination, displayNavigationButtons, ...props } = this.props;
+
+        if (!Document || !Page) return null;
+
+        return (
+            <div className={classes.root}>
+                <Document
+                    className={classes.style}
+                    file={file}
+                    onLoadSuccess={this.handleLoadSuccess}
+                    onLoadError={this.handleLoadError}
+                    loading={<CircularProgress />}
+                    {...props}
+                >
+                    <Page
+                        pageNumber={pageNumber}
+                        renderAnnotations={false}
+                        renderTextLayer={false}
+                        width={this.state.width}
+                    />
+                </Document>
+                {!error &&
+                numPages > 1 &&
+                displayPagination && (
+                    <span className={classes.pageNumber}>
+                            Page {pageNumber} sur {numPages}
+                    </span>
+                )}
+                {!error &&
+                numPages > 1 &&
+                displayNavigationButtons && (
+                    <span className={classes.pagesNavigation}>
+                        <HiButton
+                            onClick={this.handleClickPreviousPage}
+                            disabled={pageNumber === 1}
+                            className={classes.navigationButton}
+                        >
+                            <HiIcon icon="chevron_left" />
+                        </HiButton>
+                        <HiButton
+                            onClick={this.handleClickNextPage}
+                            disabled={pageNumber === numPages}
+                            className={classes.navigationButton}
+                        >
+                            <HiIcon icon="chevron_right" />
+                        </HiButton>
+                    </span>
+                )}
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles, { name: 'HmuiHiPdfReader', index: 51 })(HiPdfReader);

package/src/HiPdfReader/index.js

@@ -0,0 +1 @@
+export { default } from './HiPdfReader';

package/src/HiPin/HiPin.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    root: {
+        display: 'inline-block',
+        padding: '0px 9px',
+        height: 17,
+        lineHeight: '17px',
+        minWidth: 25,
+        textAlign: 'center',
+        borderRadius: '45px',
+        verticalAlign: 'middle',
+        fontSize: 11,
+        fontWeight: theme.typography.fontWeightMedium,
+        fontFamily: theme.typography.fontFamily,
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.grey[300],
+    },
+    clickable: {
+        cursor: 'pointer',
+    },
+    primary: {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+    },
+    secondary: {
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.secondary.contrastText,
+    },
+    positive: {
+        backgroundColor: theme.palette.positive.main,
+        color: theme.palette.positive.contrastText,
+    },
+    negative: {
+        backgroundColor: theme.palette.negative.main,
+        color: theme.palette.negative.contrastText,
+    },
+    middle: {
+        backgroundColor: theme.palette.middle.main,
+        color: theme.palette.middle.contrastText,
+    },
+    neutral: {
+        backgroundColor: theme.palette.neutral.main,
+        color: theme.palette.neutral.contrastText,
+    }
+}));
+
+/**
+ * HiPins
+ *
+ * Tiny contained button used to display subsidiary datas like item count, (...), and throw an onClick event.
+ * Used in:
+ * - CellStatus to display operations count and to deploy operation rows on click.
+ *
+ */
+function HiPin(props) {
+    const { children, color, onClick, className } = props;
+
+    const classes = useStyles(props);
+
+    const pinClass = classNames(
+        classes.root,
+        {
+            [classes.clickable]: onClick,
+            [classes.primary]: color === 'primary',
+            [classes.secondary]: color === 'secondary',
+            [classes.positive]: color === 'positive',
+            [classes.negative]: color === 'negative',
+            [classes.middle]: color === 'middle',
+            [classes.neutral]: color === 'neutral',
+        },
+        className,
+    );
+    return (
+        <div
+            className={pinClass}
+            onClick={onClick}
+            role={onClick ? 'button' : undefined}
+        >
+            {children}
+        </div>
+    );
+}
+
+HiPin.propTypes = {
+    children: PropTypes.node.isRequired,
+    /**
+     * Override classes
+     */
+    classes: PropTypes.object,
+    /**
+     * Apply style on top level element
+     */
+    className: PropTypes.string,
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
+    color: PropTypes.oneOf([
+        'default',
+        'inherit',
+        'primary',
+        'secondary',
+        'positive',
+        'negative',
+        'middle',
+        'neutral',
+    ]),
+    onClick: PropTypes.func,
+};
+
+HiPin.defaultProps = {
+    color: 'default',
+};
+
+HiPin.useStyles = useStyles;
+
+export default HiPin;