%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/Packages.jsx |
import React from "react"; import { arrayOf, func, object, } from "prop-types"; import Grid from "@material-ui/core/Grid"; import { withStyles } from "@material-ui/core/styles"; import Package from "components/Package"; import { withTranslation } from "react-i18next"; import styles from "common/components/styles"; function Packages({ productPackagesInfo, t, onClick, }) { return ( <> {productPackagesInfo.map((productPackage) => { const splitPackageName = productPackage.name.split(" "); const packageName = splitPackageName.slice(-1); const recurringFee = `${productPackage.recurringFee} ${productPackage.currency}`; const priceSpecifier = t("signup.packageSelection.priceSpecifier"); const parkingServiceFee = productPackage.serviceFeePerParking?.value; // Percentage or fixed const parkingServiceFeeFinal = productPackage.serviceFeePerParking?.type === "fixed" ? `${parkingServiceFee} ${productPackage.currency}` : `${parkingServiceFee}%`; const packageDescription = [ { content: t("signup.packageSelection.text1"), id: 1, }, { content: t("signup.packageSelection.text2"), id: 2, }, { content: t("signup.packageSelection.text3"), id: 3, }, { content: t("signup.packageSelection.text4"), id: 4, }, { content: t("signup.packageSelection.text5").replace("$fee", parkingServiceFeeFinal), id: 5, }, ]; const subtitle = productPackage.type === "pro" ? t("signup.packageSelection.proDescription") : t("signup.packageSelection.premiumDescription"); const subtitleReplaced = subtitle.replace("<br>", "\n"); const selectButtonLabel = t("signup.packageSelection.selectButtonText"); return ( <Grid item key={productPackage.id} xs={12} sm={6} > <Package description={packageDescription} parkingServiceFee={parkingServiceFeeFinal} price={recurringFee} priceSpecifier={priceSpecifier} name={packageName} onClick={() => { onClick(productPackage.id); }} selectButtonLabel={selectButtonLabel} subtitle={subtitleReplaced} /> </Grid> ); })} </> ); } Packages.propTypes = { onClick: func.isRequired, productPackagesInfo: arrayOf(object).isRequired, t: func.isRequired, }; export default withTranslation()(withStyles(styles)(Packages));