\n \n Billing starts on {billingStartStr}, the end of your free trial, and\n will renew automatically every month. Payments won't be refunded for\n partial billing periods. Cancel at any time.\n
\n \n By continuing, you verify that you are at least 18 years old and agree\n to, which include details of your right to withdrawal within 14 days.\n No refunds for partial billing periods.\n
\n \n By continuing, you agree to{\" \"}\n \n Term of Use\n \n ,{\" \"}\n \n Term of Service\n {\" \"}\n and{\" \"}\n \n Privacy Notice\n {\" \"}\n at BookingCampus and{\" \"}\n \n Privacy & Terms\n {\" \"}\n at Stripe to make this purchase.\n
\n \n \n );\n};\n","import ReactModalAdapter from \"helpers/ReactModalAdapter\";\nimport { ReactComponent as CloseIcon } from \"images/bc/icons/x.svg\";\nimport { ReactComponent as ArrowIcon } from \"images/bc/icons/back.svg\";\nimport RadioCheckedImage from \"images/bc/icons/radio-checked.svg\";\nimport styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport YourAddressForm, { SubmitButton } from \"./YourAddressForm\";\nimport { useEffect, useState } from \"react\";\nimport AboutYouForm from \"./AboutYouForm\";\nimport PaymentForm, { SectionTitle } from \"./PaymentForm\";\nimport moment from \"moment\";\nimport { BrowserView, MobileView } from \"react-device-detect\";\nimport { loadStripe } from \"@stripe/stripe-js\";\nimport { Elements } from \"@stripe/react-stripe-js\";\nimport {\n TRIAL_DURATIONS,\n TRIAL_DURATION_APPLY,\n} from \"booking-campus/helpers/constants\";\n\nconst stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API_KEY);\n\nconst MobileViewFull = tw(MobileView)`w-full`;\nconst StyledModal = styled(ReactModalAdapter)`\n &.mainHeroModal__overlay {\n ${tw`fixed flex items-center justify-center inset-0 z-50 bg-black bg-opacity-50 transition-none`}\n }\n &.mainHeroModal__content {\n ${tw`xl:mx-auto flex-grow flex-col items-center justify-center h-full py-3 sm:(flex block max-h-[90vh] m-16 h-auto m-4 py-12 rounded-modal) lg:py-20 max-w-screen-modal relative inset-0 bg-white outline-none`}\n }\n .content {\n ${tw`w-full px-5 overflow-auto max-h-[calc(100vh - 4rem)] md:(px-12 max-h-[calc(90vh - 10rem)]) lg:px-16`}\n }\n`;\nconst ModalTitle = tw.h5`font-bold text-lg text-bc-neutral1 pl-16 mb-3 font-normal md:(text-center pl-0 mb-0 font-bold) lg:text-xl xl:text-2xl`;\nconst ModalDescription = tw.p`text-bc-neutral3 mt-5 md:(text-center mb-4 mt-0)`;\nconst IconButton = styled.button`\n ${tw`absolute mt-4 md:mt-8 text-black text-opacity-50 hocus:text-opacity-100`}\n svg path {\n ${tw`fill-current`}\n }\n`;\nconst BackButton = tw(IconButton)`top-0 left-0 ml-5 md:ml-8`;\nconst CloseButton = tw(IconButton)`top-0 right-0 mr-6`;\nconst FormContainer = styled.div`\n ${tw`py-4 text-base`}\n label {\n ${tw`text-bc-neutral2`}\n }\n`;\nconst XSpace = tw.div`px-0 lg:px-22`;\nconst SuccessWrapper = tw(XSpace)`text-center`;\nconst SuccessImage = tw.img`w-12 h-12 mx-auto`;\nconst SuccessMessage = tw(SectionTitle)`mt-5 mb-7`;\n\nconst steps = [\n {\n index: 0,\n title: \"Your Business Address\",\n description: \"Where can clients find you?\",\n },\n {\n index: 1,\n title: \"About you\",\n description: \"Tell us more about yourself and your business\",\n },\n {\n index: 2,\n title: \"Add Payment Card\",\n },\n {\n index: 3,\n },\n];\n\nexport default ({ isOpen = false, toggleModal, selectedPlan = {} }) => {\n const [step, setStep] = useState(steps[0]);\n const [formValues, setFormValues] = useState({});\n const billingStart = moment().add(\n TRIAL_DURATIONS[TRIAL_DURATION_APPLY].days,\n \"days\"\n );\n const [affixContainer, setAffixContainer] = useState();\n\n useEffect(() => {\n if (isOpen) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"unset\";\n }\n }, [isOpen]);\n\n const handleNext = (formValues) => {\n if (formValues) {\n setFormValues((prevState) => ({\n ...prevState,\n ...formValues,\n }));\n }\n if (step.index < steps.length - 1) {\n setStep((prevState) => steps[prevState.index + 1]);\n } else {\n handleClose();\n }\n };\n\n const handleBack = () => {\n if (step.index > 0) {\n setStep((prevState) => steps[prevState.index - 1]);\n } else {\n handleClose();\n }\n };\n\n const handleClose = () => {\n setStep(steps[0]);\n setFormValues({});\n toggleModal();\n };\n\n return (\n