%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/pages/migration/steps/
Upload File :
Create Path :
Current File : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/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,
};

Zerion Mini Shell 1.0