React Redux

button-cmp.js

import React from 'react';

const Button = ({ title = 'Default', className = 'button', onChange, styles = {}, ...props }) => {
    return (
        <button className={className} onClick={onChange} style={styles} {...props}>{title}</button>
    )
};

export default Button;

checkbox-cmp.js

import React from 'react';

const Checkbox = ({ title = 'Default', value = false, url = '', onChange = () => { } }) => {
    return (
        <label className="container-custom-checkbox container-checkbox-value">
            {title} {url && <a href={url}>handelsbetingelser </a>}
            <input type="checkbox" checked={value ? true : false} onChange={() => {}}/>
            <span className={`custom-checkmark active`} onClick={onChange}></span>
        </label>
    )
};

export default Checkbox;

custom-select-cmp.js

import React from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

export default class CustomSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: '',
    };

  }

  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
  }

  render() {
    const { selectedOption } = this.state;
    const { placeholder = '',data=['Nej, start automatisk','[Ja, kræver godkendelse'] } = this.props;
    const options = [];

    data.forEach(el => {
      options.push({value: el, label: el})
    });

    return (
      <Select
        name="form-field-name"
        placeholder={placeholder}
        value={selectedOption}
        onChange={this.handleChange}
        
        options={options}
      />
    );
  }
}

f1.js

import { Button, Input } from '../../../../smpl-components/index';
import defaultProps from '../../../../default';
import Validation from '../../../validation';
import ModalVideo from './modalVideo'
import React from 'react';

export default class Integration extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
        this.data = [{ name: 'step 1', value: 'test test 1' }, { name: 'step 2', value: 'test test 2' }, {
            name: 'step 3',
            value: 'test test 3',
            openModal: false
        }];

        this.openModal = this.openModal.bind(this);
    }

    updatedDone() {
        this.state.update && this.setState({ update: false })
    }

    selectData(name, value) {
        let { data } = this.state;
        let stop = true;

        data.forEach((el, index) => {
            if (el.name === name) {
                data[index].value = value;
                stop = false;
                this.setState(data);
                return
            }
        })
        if (stop) {
            data.push({ name: name, value: value })
            this.setState(data);
        }

        this.props.saveData(data);
    }

    getSaveData(name) {
        const { entry = [] } = this.props;
        let value = '';
        entry.forEach((el, index) => {
            if (el.name === name) {
                value = entry[index].value;
            }
        })
        return value;
    }

    checkData() {
        const { data } = this.state;
        let succses = true;
        this.setState({ update: true })
        if (data.length < 2) {
            succses = false;
        }
        data.forEach((el) => {
            if (el.value.length === 0)
                succses = false
        })
        return succses;
    }

    openModal(status) {
        this.setState({ openModal: status ? status : false })
    }

    render() {
        const { btnPrimaryColor } = defaultProps.btnStyles;
        const { changeStep, data } = this.props;
        const { update, openModal } = this.state;

        return ([openModal && <ModalVideo openModal={this.openModal} key={13} />,
        <div className="container" key={14}>
            <div className="left-panel-block">
                <div className="left-panel-container-header">
                    {data.content.container_header}
                </div>
                <div className="left-panel-container-header-content left-panel-container-text">
                    {data.content.header_content} <a href='#' className="panel-bl-content">på 71 74 93 62 eller få os til at opsætte
                        integrationen </a>
                </div>
                <div className="left-panel-container-body">
                    <div>
                        <div className="container-inp">
                            <Input title={'Dit Dinero firma ID'}
                                name='firmaID'
                                updatedDone={this.updatedDone()}
                                autofocus={true}
                                update={update}
                                defaultValue={this.getSaveData('firmaID')}
                                placeholder={'Skriv dit firma ID'}
                                errorMes={'ID er forkert'}
                                error={(el) => { return Validation.validationName(el) }}
                                onChange={(name, value) => { this.selectData(name, value) }} />
                        </div>
                        {/* {program === 'dinero' && */}
                        <div className="container-inp">
                            <Input title={'Din dinero API nøgle'}
                                name='API'
                                updatedDone={this.updatedDone()}
                                update={update}
                                defaultValue={this.getSaveData('API')}
                                placeholder={'Skriv din API nøgle '}
                                errorMes={'API er forkert'}
                                error={(el) => { return Validation.validationName(el) }}
                                onChange={(name, value) => { this.selectData(name, value) }} />
                        </div>
                        {/* } */}
                    </div>
                    <div className="left-panel-container-body-content">
                        <span className="left-panel-container-body-content-title">Sådan gør du:</span>
                        <div>
                            {this.data.map((el, index) => {
                                return <span key={index}>{el.name}: {el.value}</span>
                            })}
                        </div>
                        <span className="left-panel-container-body-content-footer"> Du kan også se vores video guide, <u onClick={() => this.openModal(true)}>klik her</u> </span>
                    </div>
                </div>
                <div className="container-button">
                    <Button onChange={() => { this.checkData(true) ? changeStep(true) : () => {} }} title={<span className="button-container-title">Opsæt integration <span className='block-arrow'>→</span> </span>} styles={{ backgroundColor: btnPrimaryColor, width: 230 }} />
                    <Button onChange={() => changeStep(false)} title={'Afbryd'} className={'button button-back'} />
                </div>
            </div>
        </div>
        ])
    }
}

modal-video-cmp.js

import React from 'react';

const ModalVideo = ({ title = 'Video guide: Sådan synkroniserer du Likvido med Dinero', url = '' }) => {
    return (
        <div className="modal-container">
            <div className="modal">
                <div className="modal-header">
                    <div className="modal-header-title">
                        {title}
                    </div>
                    <div className="modal-header-icon">
                        <a className='close' />
                    </div>
                </div>
                <div className="modal-video">
                    <iframe width="760" height="400" title='...' src="https://www.youtube.com/embed/Ct6BUPvE2sM" frameBorder="0" allow="autoplay; encrypted-media" />
                </div>
            </div>
        </div>
    )
};

export default ModalVideo;

redux.js

import axios from 'axios';
import { FETCH_USER, FETCH_SURVEYS } from './types';

export const fetchUser = () => async dispatch => {
  const res = await axios.get('/api/current_user');

  dispatch({ type: FETCH_USER, payload: res.data });
};

export const handleToken = token => async dispatch => {
  const res = await axios.post('/api/stripe', token);

  dispatch({ type: FETCH_USER, payload: res.data });
};

export const submitSurvey = (values, history) => async dispatch => {
  const res = await axios.post('/api/surveys', values);

  history.push('/surveys');
  dispatch({ type: FETCH_USER, payload: res.data });
};

export const fetchSurveys = () => async dispatch => {
  const res = await axios.get('/api/surveys');

  dispatch({ type: FETCH_SURVEYS, payload: res.data });
};

select-cmp.js

import React from 'react';
import { Button, Spinner } from '../index';
import defaultProps from '../../default'
import Home from '../../styles/img/home.png';

export default class TopPanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showItem: false,
            searchValue: '',
            openInput: false
        };
        this.handleClick = this.handleClick.bind(this);
        this.handleOutsideClick = this.handleOutsideClick.bind(this);
    }

    componentWillMount() {
        this.updatedSelect();
    }

    updatedSelect = () => {
        this.setState({ searchValue: this.props.selectValue })
    }

    handleClick() {
        if (!this.state.showItem) {
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
            document.removeEventListener('click', this.handleOutsideClick, false);
        }
        this.setState(prevState => ({
            showItem: !prevState.showItem,
        }));
    }

    handleOutsideClick(e) {
        if (this.node.contains(e.target)) {
            return;
        }
        this.handleClick();
    }

    render() {
        const { data = [], changeStep = () => { }, loader = true, search = () => { } } = this.props;
        const { showItem, searchValue } = this.state;
        const { btnPrimaryColor } = defaultProps.btnStyles;
        return (
            <div>
                <div className="search-container">
                    <img className="icon-home" src={Home} alt="..." />
                    <span className="divider" />
                    <input className='search-value' placeholder={'Skriv navnet på din virksomhed eller dit CVR nummer'}
                        value={searchValue}
                        type="text"
                        onChange={(el) => { this.setState({ searchValue: el.target.value }); search(el) }}
                        onClick={() => this.setState({ showItem: !showItem, openInput: false })} />
                    <Button onChange={!!searchValue ? () => changeStep(true, searchValue) : () => { }} title={<span className="button-container-title">Søg <span className='block-arrow'>→</span> </span>} styles={{ backgroundColor: btnPrimaryColor }} />
                    <div className={`search-container-block ${this.state.showItem ? 'show' : ''}`} >
                        <div styles={{ position: 'relative' }}>
                            <div className="search-container-block-list">
                                {loader && <Spinner />}
                                <div className="search-container-block-item">
                                    <span className="search-container-block-label-main">Virksomhedsnavn</span>
                                    <span className="search-container-block-cvr-main">CVR</span>
                                    <span className="search-container-block-arrow">→</span>
                                </div>
                                {data.map((el, index) => {
                                    return <div className="search-container-block-item" key={index}
                                        onClick={() => changeStep(true, el.registrationName)} >
                                        <span className="search-container-block-label">{el.label}</span>
                                        <span className="search-container-block-cvr">{el.registrationName}</span>
                                        <span className="search-container-block-arrow">→</span>
                                    </div>
                                })}
                            </div>
                        </div>
                        <div className="search-container-block-item" >
                            <span className="search-value" onClick={changeStep} style={{ color: btnPrimaryColor }}>Opret manuelt, klik her</span>
                        </div>
                    </div>
                </div>

            </div>
        )
    }
}

validation.js

const Validation = {};

Validation.validationEmail = (el) => {
    return /^(?!\.)(""([^""\r\\]|\\[""\r\\])*""|([-a-z0-9!#$%&'*+/=?^_`{|}~]|(?<!\.)\.)*)(?<!\.)@[a-z0-9][\w\.-]*[a-z0-9]\.[a-z][a-z\.]*[a-z]$/.test(el);

};

Validation.validationPass = (el) => {
    return !!/^(?=.*\d)(?=.*[a-z])(?=(.*[a-z]){4}).{8,20}$/.test(el);
}

Validation.validationDublPass = (pass, pass2) => {
    return pass === pass2;
}

Validation.validationName = (el) => {
    return el.length > 0;
}

Validation.validationCVR = (el) => {
    return /^[\S]{8,11}$/i.test(el);
}
Validation.validationZipcode = (el) => {
    return /^[0-9]{4}$/.test(el);
}

export default Validation;