%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/static/js/pages/migration/steps/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/static/js/pages/migration/steps/CreditCardStep.js |
import React, { useState, useEffect } from "react"; import Adyen from "components/SignUpBusiness/Adyen"; import ChoosePaymentMethod from "components/SignUpBusiness/ChoosePaymentMethod"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; import { useDispatch, useSelector } from "react-redux"; import { setBusinessPaymentMethod } from "actions/api_actions"; import { setBusinessIframeSuccess, setBusinessIframeError } from "actions/list_actions"; import { getLanguage } from "utils/getLanguage"; import { migrationData, paymentMethods } from "../selectors"; export function CreditCardStep({ classes, handleNext }) { const [t] = useTranslation(); const dispatch = useDispatch(); const { billingAccountId, customerId } = useSelector(migrationData); const paymentMethodStatus = useSelector((state) => state.signUpBusiness.get("paymentMethodStatus")); const paymentOptions = useSelector(paymentMethods).filter(({ paymentMethod }) => paymentMethod !== "SEPA"); const requestedPaymentMethod = useSelector((state) => state.signUpBusiness.get("requestedPaymentMethod")); const showPaymentMethodContainer = useSelector((state) => state.signUpBusiness.get("showPaymentMethodContainer")); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState({}); const [selectedPaymentMethodId, setSelectedPaymentMethodId] = useState(0); const showSkipButton = paymentMethodStatus === 2; useEffect(() => { if (paymentMethodStatus === 1) handleNext(); }, [paymentMethodStatus, handleNext]); const selectPaymentMethod = (v) => { const paymentMethodId = parseInt(v, 10); const paymentMethod = paymentOptions.filter( (el) => paymentMethodId === el.id, )[0]; if (paymentMethod?.paymentMethod) { setSelectedPaymentMethod(paymentMethod); setSelectedPaymentMethodId(paymentMethodId); dispatch(setBusinessPaymentMethod({ billingAccountId, customerId, paymentMethodId, paymentMethod, language: getLanguage(), isMigration: true, })); } else { console.error("NO paymentMethod"); } }; const showPaymentMethod = (paymentMethodName) => selectedPaymentMethod?.paymentMethod === paymentMethodName && showPaymentMethodContainer && requestedPaymentMethod !== ""; const receiveMessage = (event) => { const response = event.data; if (response === "accept") { dispatch(setBusinessIframeSuccess({})); window.removeEventListener("message", receiveMessage); } else if (response === "error") { dispatch(setBusinessIframeError({})); window.removeEventListener("message", receiveMessage); } }; const renderPayPal = () => { if ( selectedPaymentMethod?.paymentMethod === "PAYPAL" && showPaymentMethodContainer && requestedPaymentMethod !== "" ) { window.location.href = requestedPaymentMethod; return null; } return null; }; return ( <> <ChoosePaymentMethod paymentMethods={paymentOptions} paymentMethodId={selectedPaymentMethodId} selectPaymentMethod={selectPaymentMethod} subtitle={t("migration.creditCard.subtitle")} /> {showPaymentMethod("ADYEN") && ( <Adyen requestedPaymentMethod={requestedPaymentMethod} receiveMessage={receiveMessage} /> )} {renderPayPal()} {showSkipButton && ( <button type="button" className={classes.lightButton} style={{ marginTop: "30px" }} onClick={handleNext}>{t("migration.addLater")}</button> )} </> ); } CreditCardStep.propTypes = { classes: PropTypes.object.isRequired, handleNext: PropTypes.func.isRequired, };