%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/components/SignUpBusiness/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.632e77b3fb93bc8da5b589b869bc0037/static/js/components/SignUpBusiness/ChoosePaymentMethod.jsx |
import React, { useEffect } from "react"; import { array, func, number, object, string, } from "prop-types"; import { withStyles } from "@material-ui/core/styles"; import { Box } from "common/components"; import ToggleButton from "@material-ui/lab/ToggleButton"; import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; import creditCard from "assets/images/signup-pm-creditcard.svg"; import sepa from "assets/images/signup-pm-sepa.svg"; import brainTree from "assets/images/signup-pm-braintree.svg"; import paypal from "assets/images/signup-pm-paypal.svg"; import visa from "assets/images/signup-pm-visa.svg"; import master from "assets/images/signup-pm-master.svg"; import { Grid } from "@material-ui/core"; import { useTranslation } from "react-i18next"; import Title from "common/components/Title.jsx"; import HelpText from "common/components/HelpText"; const styles = (theme) => ({ buttonGroup: { border: "1px solid rgba(0, 0, 0, 0.12) !important", backgroundColor: "#ffffff", borderRadius: "22px", color: "#000000", margin: "5px", }, buttonSelected: { borderTopRightRadius: "22px !important", borderBottomRightRadius: "22px !important", borderTopLeftRadius: "22px !important", borderBottomLeftRadius: "22px !important", borderRadius: "22px", backgroundColor: "#872878 !important", color: "#ffffff !important", }, button: { padding: "5px 15px", border: "0px none !important", transition: "all 0.5s ease", borderRadius: "22px", "&:hover": { backgroundColor: "#FFF", }, "&:focus": { backgroundColor: "#FFF", }, }, buttonPaymentMethod: { border: "0px none !important", borderBottom: "1px solid !important", borderColor: "rgba(0, 0, 0, 0.12) !important", padding: "12px 30px", transition: "all 0.5s ease", flex: 1, backgroundRepeat: "no-repeat", backgroundPosition: "center", "&:hover": { backgroundColor: "#FFF", borderBottomColor: theme.palette.primary.main, }, "&:focus": { backgroundColor: "#FFF", borderBottomColor: theme.palette.primary.main, }, "&:active": { borderBottomColor: theme.palette.primary.main, }, }, buttonpaymentmethodadyen: { backgroundImage: `url(${creditCard})`, }, buttonpaymentmethodsepa: { backgroundImage: `url(${sepa})`, }, buttonpaymentmethodbraintree: { backgroundImage: `url(${brainTree})`, }, buttonpaymentmethodpaypal: { backgroundImage: `url(${paypal})`, }, buttonpaymentmethodnabvisa: { backgroundImage: `url(${visa})`, }, buttonpaymentmethodnabcreditcard: { backgroundImage: `url(${creditCard})`, }, buttonpaymentmethodnabmastercard: { backgroundImage: `url(${master})`, }, twoLineText: { whiteSpace: "pre-line", }, }); function ChoosePaymentMethod({ paymentMethods, paymentMethodId, selectPaymentMethod, classes, subtitle, }) { const [t] = useTranslation(); useEffect(() => { if (paymentMethodId === 0) { const defaultSelected = paymentMethods.find(({ paymentMethod }) => paymentMethod !== "PAYPAL"); if (defaultSelected) selectPaymentMethod(defaultSelected.id); } }, []); // eslint-disable-line react-hooks/exhaustive-deps return ( <div className="ChoosePaymentMethod"> <Box container spacing={3}> <Grid item xs={12}> <Title paddingBottom={0}>{t("signup.paymentMethodSelection.title")}</Title> <HelpText><span className={classes.twoLineText}>{subtitle.replace("<br>", "\n")}</span></HelpText> </Grid> <ToggleButtonGroup classes={{ root: classes.buttonGroup, }} exclusive value={paymentMethodId} onChange={(e, v) => { selectPaymentMethod(v); }} aria-label="select payment method" > {paymentMethods.map( ({ name, id, label, }) => ( <ToggleButton classes={{ root: classes.button, selected: classes.buttonSelected, }} key={id} value={id} aria-label={name} > {label} </ToggleButton> ), )} </ToggleButtonGroup> </Box> </div> ); } ChoosePaymentMethod.propTypes = { classes: object.isRequired, paymentMethodId: number.isRequired, paymentMethods: array.isRequired, selectPaymentMethod: func.isRequired, subtitle: string.isRequired, }; export default withStyles(styles)(ChoosePaymentMethod);