75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
import { CircleFill, Circle } from "react-bootstrap-icons";
|
|
import check from "../Assets/Images/check.png";
|
|
import "../styles/radio.scss";
|
|
|
|
const Radio = (props) => {
|
|
const {
|
|
name,
|
|
description,
|
|
onClick,
|
|
value,
|
|
price,
|
|
disabled,
|
|
activeRadioOption,
|
|
details,
|
|
isAnnual,
|
|
isUpgrade,
|
|
currentPlan,
|
|
} = props;
|
|
|
|
const classCheckbox = "checkbox";
|
|
const classOption = "option";
|
|
const index = isAnnual === 1 ? Number("1") : Number("0");
|
|
console.log("isUpgrade", isUpgrade);
|
|
const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
|
|
|
|
return (
|
|
<div className="radio-container">
|
|
<div className="radio-option-container" key={name}>
|
|
<>
|
|
<div className={`radio-circle-container ${upgradeClass}`}>
|
|
<div
|
|
className="radio-circle-top"
|
|
onClick={() => !disabled && onClick && onClick(value)}
|
|
>
|
|
{value == activeRadioOption && !isUpgrade ? (
|
|
<div className="radio-circle-box">
|
|
<CircleFill color="#1a76c7" size="20px" />
|
|
</div>
|
|
) : (
|
|
<div className="radio-circle-box">
|
|
<Circle color="#1a76c7" size="20px" />
|
|
</div>
|
|
)}
|
|
<div className="radio-name-box"> {`${name}`} </div>
|
|
<div className="radio-price-box">
|
|
<div className="radio-price">
|
|
{`$${price[index]["amount"]}/mo`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="radio-circle-lower">
|
|
<div className="radio-description-box">
|
|
{description.map((item, i) => {
|
|
const el =
|
|
item == "First month free!" ? (
|
|
<div className="offer-div">
|
|
<p className="signup-feat-item-bold">{item}</p>
|
|
</div>
|
|
) : (
|
|
<p className="signup-feat-item">{item}</p>
|
|
);
|
|
return el;
|
|
})}
|
|
</div>
|
|
<div className="radio-description-box">{`${details}`} </div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Radio;
|