%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/pages/migration/steps/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/pages/migration/steps/WelcomeStep.js |
import React from "react"; import { useSelector } from "react-redux"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; import { getLanguage } from "utils/getLanguage"; import { replaceJSX } from "utils"; export function WelcomeStep({ classes, handleNext }) { const [t] = useTranslation(); const language = getLanguage(); const config = useSelector((state) => state.config.toJS().config); const firstName = useSelector((state) => state.user.getIn(["current", "login", "firstName"])); const getTermsAndConditionsLink = () => ( <a href={config.appConfig.terms?.[language]} className={classes.link} target="_blank" rel="noreferrer"> {t("migration.welcome.termsAndConditions")} </a> ); const getPrivacyPolicyLink = () => ( <a href={config.appConfig.privacy?.[language]} className={classes.link} target="_blank" rel="noreferrer"> {t("migration.welcome.privacyPolicy")} </a> ); const getBottomText = () => { const parts = replaceJSX( t("migration.welcome.bottomText"), "$link1", getTermsAndConditionsLink(), ); if (!parts[2]) { return null; } const secondPart = replaceJSX( parts[2], "$link2", getPrivacyPolicyLink(), ); return [parts[0], parts[1], secondPart]; }; return ( <> <div className={classes.centerMobileText}> <h2 className={classes.heading2}> {t("migration.welcome.title").replace("$name", firstName)} </h2> <p className={classes.paragraph}> {t("migration.welcome.description")} </p> <div className={classes.instructionsWrapper}> <h3 className={classes.heading3}> {t("migration.welcome.nextSteps")} </h3> <div className={`${classes.paragraph} ${classes.centerMobileSteps}`}> <div>{`1. ${t("migration.welcome.firstStep")}`}</div> <div>{`2. ${t("migration.welcome.secondStep")}`}</div> <div>{`3. ${t("migration.welcome.thirdStep")}`}</div> </div> </div> </div> <div className={classes.bottomWrapper}> <p className={classes.smallParagraph}> {getBottomText()} </p> <button type="button" className={classes.button} onClick={handleNext}>{t("general-continue")}</button> </div> </> ); } WelcomeStep.propTypes = { classes: PropTypes.object.isRequired, handleNext: PropTypes.func.isRequired, };