{"version":3,"sources":["components/Modals/SignView/Tutorial.js"],"names":["Tutorial","useState","active","setActive","useTranslation","t","i18n","useSign","modal","tutorialScreens","dispatch","screens","useMemo","name","SCREEN_OPTIONS","UPLOAD_DOWNLOAD_VERSION_TUTORIAL","subtitle","text","image","language","COMMENTS_TUTORIAL","NEGOTIATE_OR_SIGN_TUTORIAL","SIGN_TUTORIAL","CONFIDENTIAL_ATTACHMENTS_TUTORIAL","HELP_TUTORIAL","handleClose","type","CONTROL_MODAL","close","TUTORIAL_MODAL","validScreens","defaultScreens","filter","s","includes","useEffect","index","isOpen","centered","toggle","className","src","alt","map","clsx","onClick","e","color","disabled","length"],"mappings":"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","file":"static/js/22.072e0a10.chunk.js","sourcesContent":["import React, { useState, useMemo, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useSign, CONTROL_TUTORIAL_MODAL, TUTORIAL_MODAL, CONTROL_MODAL } from 'context/signview';\r\nimport { SCREEN_OPTIONS } from 'app-constants';\r\nimport clsx from 'clsx';\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter, ButtonGroup } from 'reactstrap';\r\n\r\nfunction Tutorial() {\r\n    const [active, setActive] = useState({})\r\n    const { t, i18n } = useTranslation();\r\n    const [{ modal, tutorialScreens }, dispatch] = useSign();\r\n\r\n    const screens = useMemo(() => [\r\n        {\r\n            name: SCREEN_OPTIONS.UPLOAD_DOWNLOAD_VERSION_TUTORIAL,\r\n            subtitle: 'subtitle_one',\r\n            text: 'text_one',\r\n            image: `word-step-1-${i18n.language}.svg`,\r\n        },\r\n        {\r\n            name: SCREEN_OPTIONS.UPLOAD_DOWNLOAD_VERSION_TUTORIAL,\r\n            subtitle: 'subtitle_two',\r\n            text: 'text_two',\r\n            image: `word-step-2-${i18n.language}.svg`,\r\n        },\r\n        {\r\n            name: SCREEN_OPTIONS.COMMENTS_TUTORIAL,\r\n            subtitle: 'message_subtitle',\r\n            text: 'comment_in_word',\r\n            image: `tutorial-step-3-${i18n.language}.svg`,\r\n        },\r\n        {\r\n            name: SCREEN_OPTIONS.COMMENTS_TUTORIAL,\r\n            subtitle: 'message_subtitle',\r\n            text: 'message_text',\r\n            image: `tutorial-step-1-${i18n.language}.svg`\r\n        },\r\n        {\r\n            name: SCREEN_OPTIONS.NEGOTIATE_OR_SIGN_TUTORIAL,\r\n            subtitle: 'negociate_subtitle',\r\n            text: 'negociate_text',\r\n            image: `tutorial-step-2-${i18n.language}.svg`\r\n        },\r\n        {\r\n            name: SCREEN_OPTIONS.SIGN_TUTORIAL,\r\n            subtitle: 'sign_subtitle',\r\n            text: 'sign_text',\r\n            image: `tutorial-step-4-${i18n.language}.svg`\r\n        },\r\n        {\r\n            name: SCREEN_OPTIONS.CONFIDENTIAL_ATTACHMENTS_TUTORIAL,\r\n            subtitle: 'share_subtitle',\r\n            text: 'share_text',\r\n            image: `tutorial-step-3-${i18n.language}.svg`\r\n        },\r\n        {\r\n            name: SCREEN_OPTIONS.HELP_TUTORIAL,\r\n            subtitle: 'help_subtitle',\r\n            text: 'help_text',\r\n            image: `tutorial-step-3-${i18n.language}.svg`\r\n        },\r\n        // TODO\r\n        // {\r\n        //     name: SCREEN_OPTIONS.PAGARE_TUTORIAL,\r\n        //     subtitle: 'pagare_subtitle',\r\n        //     text: 'pagare_text',\r\n        //     image: `tutorial-pagare-1-${i18n.language}.png`\r\n        // }\r\n    ], [i18n.language]);\r\n\r\n\r\n    const handleActive = (e) => setActive(e)\r\n\r\n    const handleClose = () => dispatch({ type: CONTROL_MODAL, close: TUTORIAL_MODAL });\r\n\r\n    const validScreens = useMemo(() => {\r\n        const defaultScreens = [SCREEN_OPTIONS.HELP_TUTORIAL, SCREEN_OPTIONS.COMMENTS_TUTORIAL];\r\n        return screens.filter(s => tutorialScreens.includes(s.name) || defaultScreens.includes(s.name))\r\n    }, [screens, tutorialScreens])\r\n\r\n    const handleNext = () => {\r\n        if (active.index <= validScreens.length)\r\n            setActive({ ...validScreens[active.index + 1], index: active.index + 1 })\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (validScreens) {\r\n            setActive({ ...validScreens[0], index: 0 })\r\n        }\r\n    }, [validScreens]);\r\n\r\n    return (\r\n        <Modal isOpen={modal.includes(TUTORIAL_MODAL)} centered>\r\n            <ModalHeader toggle={handleClose}>\r\n                {t('sign.tutorial_modal.header_title')}\r\n            </ModalHeader>\r\n            <ModalBody>\r\n                <div className=\"screen text-center\">\r\n                    <h5 className=\"font-weight-bold text-center mt-0 mb-1\">{t(`sign.tutorial_modal.${active.subtitle || ''}`)}</h5>\r\n                    <p className=\"text-body text-muted mb-4\">{t(`sign.tutorial_modal.${active.text || ''}`)}</p>\r\n                    <div className=\"container-1 tutorial-steps position-relative border rounded\">\r\n                        <img src={`/images/${active.image}`} className=\"rounded\" alt='' />\r\n                    </div>\r\n                </div>\r\n                <div className=\"pagination justify-content-center mt-3\">\r\n                    {validScreens?.map((s, index) => (\r\n                        <div\r\n                            key={index}\r\n                            name={index}\r\n                            className={clsx('circle mr-2', active.index === index ? 'circle-orange' : 'circle-gray')}\r\n                            onClick={() => handleActive({ ...s, index })}>\r\n                        </div>\r\n                    ))}\r\n                </div>\r\n            </ModalBody>\r\n            <ModalFooter>\r\n                <ButtonGroup className=\"d-flex flex-grow-1\">\r\n                    <Button color=\"secondary\" disabled={active.index >= validScreens?.length - 1} onClick={handleNext}>\r\n                        {t('sign.tutorial_modal.button_text')}\r\n                    </Button>\r\n                    <Button color=\"primary\" onClick={handleClose}>\r\n                        {t('sign.tutorial_modal.button_finish')}\r\n                    </Button>\r\n                </ButtonGroup >\r\n            </ModalFooter>\r\n        </Modal>\r\n    )\r\n}\r\n\r\nexport default Tutorial;\r\n"],"sourceRoot":""}