%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/SignUpBusiness/DirectDebit/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/SignUpBusiness/DirectDebit/DirectDebitTerms.jsx |
import React, { useState } from "react"; import PropTypes from "prop-types"; import { Trans, useTranslation } from "react-i18next"; import { useSelector } from "react-redux"; import { Text, TEXT_KINDS, TEXT_SIZES } from "common/components/Text"; import { Field, FIELD_COMPONENTS } from "common/components/Field"; import { Button } from "common/components/Button/Button"; import errorIcon from "assets/images/errorIcon.svg"; import redirectIcon from "assets/images/redirect.svg"; import appConfig from "config/countryData"; import { DirectDebitGrid, ErrorRow, IconWrapper, DirectDebitFooter, BackButtonContainer, StyledIcon, } from "../SignUpBusiness.styles"; import DirectDebitHeader from "./DirectDebitHeader"; function DirectDebitTerms({ defaultValue, onClose, onConfirm, onBack, }) { const [termsAccepted, setTermsAccepted] = useState(defaultValue); const [isTouched, setIsTouched] = useState(false); const [t, i18n] = useTranslation(); const countryCode = useSelector((state) => state.config.toJS().config.countryConstant); const onChangeHandler = () => { setTermsAccepted(!termsAccepted); setIsTouched(true); }; const onConfirmHandler = () => { setIsTouched(true); if (!termsAccepted) { return; } onConfirm(termsAccepted); }; const termsBusinessLink = appConfig.countryData?.[countryCode]?.termsBusiness?.[i18n.language] || ""; const privacyLink = appConfig.countryData?.[countryCode]?.privacy?.[i18n.language] || ""; const text = ( <Trans i18nKey="directDebit.termsAndConditions" components={{ 1: ( <a href={termsBusinessLink} target="_blank" rel="noreferrer"> <Text kind={TEXT_KINDS.LINK} size={TEXT_SIZES.MEDIUM} bottomMargin> Terms & Conditions </Text> </a> ), 2: ( <a href={privacyLink} target="_blank" rel="noreferrer"> <Text kind={TEXT_KINDS.LINK} size={TEXT_SIZES.MEDIUM} bottomMargin> Privacy Privacy </Text> </a> ), }} /> ); return ( <> <DirectDebitHeader label={t("directDebit.acceptTerms")} /> <DirectDebitGrid container spacing={2} data-cy="direct-debit-terms"> {isTouched && !termsAccepted && ( <DirectDebitGrid item md={12} data-cy="terms-not-accepted"> <ErrorRow> <IconWrapper> <img src={errorIcon} alt="Error" /> </IconWrapper> <Text kind={TEXT_KINDS.LABEL} size={TEXT_SIZES.MEDIUM} bottomMargin > {t("directDebit.termsError")} </Text> </ErrorRow> </DirectDebitGrid> )} <Field component={FIELD_COMPONENTS.CHECKBOX} labelRight={text} value={termsAccepted} onChange={onChangeHandler} /> </DirectDebitGrid> <DirectDebitFooter> <BackButtonContainer> <Button onClick={onBack}>{t("general-back")}</Button> </BackButtonContainer> <Button onClick={onClose}>{t("cancel")}</Button> <Button filled onClick={onConfirmHandler} id="terms-next-button"> <> {t("general-next")} {" "} <StyledIcon src={redirectIcon} alt="" /> </> </Button> </DirectDebitFooter> </> ); } DirectDebitTerms.propTypes = { onBack: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired, defaultValue: PropTypes.bool.isRequired, }; export default DirectDebitTerms;