webtrigon-workex-onboarding/src/pages/signup/AdditionalQuestions.tsx

import { IonContent, IonRange, IonButton, IonSlides, IonSlide, IonIcon } from '@ionic/react';
import React, { useState, useRef } from 'react';
import styles from './AdditionalQuestions.module.scss';

const slideOpts = {
    initialSlide: 0,
    speed: 400,
    followFinger: false,
    draggable: false,
    longSwipes: false,
    noSwiping: true,
};

const jobSectors = [{
    value: 1,
    icon: 'assets/images/signup/categories/laptop.svg',
    text: 'Information Technology',
}, {
    value: 2,
    icon: 'assets/images/signup/categories/medical-cross.svg',
    text: 'Health Care'
}, {
    value: 3,
    icon: 'assets/images/signup/categories/money.svg',
    text: 'Finance'
}, {
    value: 4,
    icon: 'assets/images/signup/categories/headset.svg',
    text: 'Communication Services'
}, {
    value: 5,
    icon: 'assets/images/signup/categories/industry.svg',
    text: 'Industrials'
}, {
    value: 6,
    icon: 'assets/images/signup/categories/line-chart-line.svg',
    text: 'Consumer Staples'
}, {
    value: 7,
    icon: 'assets/images/signup/categories/night-lightning.svg',
    text: 'Energy'
}, {
    value: 8,
    icon: 'assets/images/signup/categories/cog-outline.svg',
    text: 'Utilities'
}, {
    value: 9,
    icon: 'assets/images/signup/categories/sprout.svg',
    text: 'Real Estate'
}, {
    value: 10,
    icon: 'assets/images/signup/categories/pattern.svg',
    text: 'Others'
}];


const pluginModules = [{
    value: 1,
    icon: 'assets/images/signup/modules/tasks-line.svg',
    text: 'Task'
}, {
    value: 2,
    icon: 'assets/images/signup/modules/briefcase-outline.svg',
    text: 'Client'
}, {
    value: 3,
    icon: 'assets/images/signup/modules/bxs-user-badge.svg',
    text: 'Employee'
}, {
    value: 4,
    icon: 'assets/images/signup/modules/pen.svg',
    text: 'Training'
}, {
    value: 5,
    icon: 'assets/images/signup/modules/money.svg',
    text: 'Financial'
}, {
    value: 6,
    icon: 'assets/images/signup/modules/chat-bubble.svg',
    text: 'Chat'
}, {
    value: 7,
    icon: 'assets/images/signup/modules/tennisball-outline.svg',
    text: 'Recreation'
}, {
    value: 8,
    icon: 'assets/images/signup/modules/mail-outline.svg',
    text: 'Email'
}, {
    value: 9,
    icon: 'assets/images/signup/modules/lock.svg',
    text: 'Password'
}];


const profileImages = [
    'assets/images/signup/profile-pictures/avatar1.svg',
    'assets/images/signup/profile-pictures/avatar2.svg',
    'assets/images/signup/profile-pictures/avatar3.svg',
    'assets/images/signup/profile-pictures/avatar4.svg',
    'assets/images/signup/profile-pictures/avatar5.svg',
    'assets/images/signup/profile-pictures/avatar6.svg',
    'assets/images/signup/profile-pictures/avatar7.svg',
    'assets/images/signup/profile-pictures/avatar8.svg',
    'assets/images/signup/profile-pictures/avatar9.svg',
    'assets/images/signup/profile-pictures/avatar10.svg',
    'assets/images/signup/profile-pictures/avatar11.svg',
    'assets/images/signup/profile-pictures/avatar12.svg',
    'assets/images/signup/profile-pictures/avatar13.svg'
]

const AdditionalQuestions: React.FC = () => {
    let [index, setIndex] = useState(0),
    [userType, changeUserType] = useState('INDIVIDUAL'),
    [userSector, changeUserSector] = useState(jobSectors[0]),
    [showPicker, toggleShowPicker] = useState(false),
    [totalSlides, setSlideCount] = useState(0),
    [teamSize, setTeamSize] = useState({
        start: 1,
        end: 10
    }),
    [selectedModules, setModules] = useState([pluginModules[0].value]),
    [selectedImage, setProfileImage] = useState(profileImages[0]);

    const additionalSlides: any = useRef(null);

    const getDigitPadding = (digit: number)  => {
        return digit.toString().padStart(2, '0');
    }

    const changeIndex = async (event: any) => {
        await event.target.getActiveIndex().then((index: number) => setIndex(index = index));
        await event.target.length().then((length: number) => { setSlideCount(totalSlides = length) });
    }    

    const nextSlide = async () => {
        const swiper: any = await additionalSlides.current?.getSwiper();
        swiper.slideNext();
    }

    const prevSlide = async () => {
        const swiper: any = await additionalSlides.current?.getSwiper();
        swiper.slidePrev();
    }

    const toggleModule = (value: number) => {
        let tempModules = selectedModules;

        if (tempModules.includes(value)) {
            tempModules.splice(tempModules.indexOf(value), 1);
        } else {
            tempModules.push(value);
        }

        setModules(selectedModules);

    }

    return (<IonContent fullscreen>
        <header className={styles.slidersNavBar}>
            <h4>
                { getDigitPadding(index + 1)}<span>/{ getDigitPadding(totalSlides) } </span>
            </h4>
            <IonButton> Skip <IonIcon src='assets/images/signup/skip.svg'></IonIcon> </IonButton>
        </header>

        <IonSlides options={slideOpts} 
        className={styles.slides} 
        ref={additionalSlides} onIonSlideDidChange={(e) => changeIndex(e)}
        onIonSlidesDidLoad={(e) => changeIndex(e)}>
            <IonSlide>
                <div className={styles.questionContainer}>
                    <p className={styles.question}> Select if you represent a <strong> company </strong> or if you're an <strong> individual </strong> </p>
                    <p className={styles.hint}> Select answer below </p>
                </div>
                <div className={styles.choiceContainer}>
                    <div className={styles.optionButtons}>
                        <button className={ userType === 'COMPANY' ? styles.active : '' }
                            onClick={() => changeUserType(userType = 'COMPANY')}> <IonIcon className={styles.leftIcon} src='assets/images/signup/building.svg'></IonIcon> Company <IonIcon className={styles.checkmark} src='assets/images/signup/checkmark.svg'></IonIcon> </button>
                        <button className={ userType === 'INDIVIDUAL' ? styles.active : '' }
                            onClick={() => changeUserType(userType = 'INDIVIDUAL')}> <IonIcon className={styles.leftIcon} src='assets/images/signup/user.svg'></IonIcon> Individual <IonIcon className={styles.checkmark} src='assets/images/signup/checkmark.svg'></IonIcon> </button>
                    </div>
                </div>
            </IonSlide>

            <IonSlide>
                <div className={styles.questionContainer}>
                    <p className={styles.question}> Which <strong> sector </strong> 
                    { userType === 'COMPANY' && <span> does your company below to? </span> } 
                    { userType === 'INDIVIDUAL' && <span> do you work under? </span> } </p>
                    <p className={styles.hint}> Select answer below </p>
                </div>
                <div className={styles.choiceContainer}>
                    <div className={styles.optionButtons}>
                        <button className={styles.optionButton} onClick={ () => toggleShowPicker( showPicker = true )}> { userSector ? <span> <IonIcon className={styles.sectorIcon} src={ userSector.icon }></IonIcon> { userSector.text } </span> : <span> Select an Option </span> } <IonIcon className={styles.option} src='assets/images/signup/options.svg'></IonIcon> </button>
                    </div>
                </div>
            </IonSlide>


            <IonSlide>
                <div className={styles.questionContainer}>
                    <p className={styles.question}> What is your working <strong> team size? </strong>  </p>
                    <p className={styles.hint}> Select answer below </p>
                </div>
                <div className={styles.choiceContainer}>
                    <p>
                        { teamSize.end > 9 && <span> { getDigitPadding(teamSize.start) } to </span> } { getDigitPadding(teamSize.end) }
                    </p>
                    <IonRange onIonChange={ (e: any) => setTeamSize({ 
                        start: (e.detail.value === 10 ? 1: e.detail.value - 10),
                        end: e.detail.value 
                    }) } mode={'ios'} value={teamSize.end} min={10} max={100} step={10} snaps={true} />
                </div>
            </IonSlide>


            <IonSlide>
                <div className={styles.questionContainer}>
                    <p className={styles.question}> Select the <strong> modules </strong> that you would like to use.  </p>
                    <p className={styles.hint}> Select answer below </p>
                </div>
                <div className={styles.choiceContainer}>
                    <ul className={styles.modules}>
                        { pluginModules.map((module) => {
                            return <li key={module.value}>
                                <button className={selectedModules.includes(module.value) ? styles.active : ''}
                                onClick={() => toggleModule(module.value)}>
                                    <IonIcon src={module.icon}></IonIcon> <label> { module.text } </label>
                                </button>
                            </li>
                        }) }
                    </ul>
                </div>
            </IonSlide>

            <IonSlide>
                <div className={styles.questionContainer}>
                    <p className={styles.question}> Select a cool <strong> avatar </strong> or upload your ugly <strong> photo </strong> for <strong> profile picture </strong> </p>
                    <p className={styles.hint}> Select answer below </p>
                </div>
                <div className={styles.choiceContainer}>
                    <ul className={styles.profileImages}>
                        { profileImages.map((image) => {
                            return <li key={image}>
                                <button className={selectedImage === image ? styles.active : ''}>
                                    <IonIcon src={image}></IonIcon>
                                </button>
                            </li>
                        }) }
                    </ul>
                </div>
            </IonSlide>             
        </IonSlides>


        <IonButton className={styles.prevButton + ' ' + ( index <= 0 ? styles.inactive : '' )} fill="outline" onClick={ () => prevSlide() }>
            <IonIcon src='assets/images/signup/arrow-next.svg'></IonIcon>
        </IonButton>

        <IonButton className={styles.nextButton + ' ' + (index >= (totalSlides - 1) ? styles.inactive : '')} onClick={ () => nextSlide() }>
            Next <IonIcon src='assets/images/signup/arrow-next.svg'></IonIcon>
        </IonButton>


        { showPicker && <section className={styles.picker}>
            <div className={styles.container}>
                <ul>
                    { jobSectors.map((sector) => <li key={sector.value} 
                    className={userSector === sector ? styles.active : ''}
                    onClick={() => { toggleShowPicker(showPicker = false); changeUserSector(userSector = sector); } }> 
                        <IonIcon src={sector.icon}></IonIcon> { sector.text } 
                    </li>) }
                </ul>
            </div>
        </section> }

    </IonContent>);
};

export default AdditionalQuestions;