/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import { Trans } from 'react-i18next'; import { withRouter } from 'next/router'; import { routes } from 'env/routes'; import { useState } from 'react'; import { LocalizedPrice } from 'env/utils/NumbersLocalization'; import DateInputField from 'ui/components/forms/DateInputField'; import BooleanInputField from 'ui/components/forms/BooleanInputField'; import LoadingSpinner from 'ui/components/LoadingSpinner'; import { inject, observer } from 'mobx-react'; import i18next from 'i18next'; import moment from 'moment'; import withCustomComponent from 'ui/components/withCustomComponent'; import { PlanFrequencyLabel } from 'ui/_pages/plan/PlanFrequencyLabel'; import clip from 'text-clipper'; export const PlanDetails = withCustomComponent('PlanDetails')( inject('appStore')( withRouter( observer( ({ onPlanSelected, isLoading, onShowTermsFor, onShowDescriptionFor, match, service, t, showStartDate, startDate, onChangeDate, buttonLabel, appStore, router, }) => { const [clicked, setClicked] = useState(false); const [agreedTc, agreedTcClicked] = useState(false); const maxDate = moment().add(3, 'months').toDate(); // Maximum of 1 month in advance const shouldBeDisabled = isLoading || (appStore.configuration['Members.CanSignup'] && service.TermsAndConditions && !agreedTc); const clippedHtml = clip(service.Description, 100, { html: true, maxLines: 2, }); const isClipped = service.Description?.length > clippedHtml?.length; const isCorporateDashboard = appStore.corporateDashboard; buttonLabel = appStore.configuration['Members.CanSignup'] ? buttonLabel || t('Join') : appStore.configuration['PublicWebSite.Contact'] ? t('Contact Us') : null; return (

{service.Name}

{isCorporateDashboard == true ? ( <> ) : ( <>

{LocalizedPrice({ lang: i18next.language, currency: service.Currency.Code, amount: service.PriceDecimal, })}

)}

{isClipped && (

{ ev.preventDefault(); onShowDescriptionFor(service); }} className="btn btn-link text-gray-700 fs-14 tdu" href="#" > {t('Read more')}

)}

{appStore.configuration['Members.CanSignup'] && service.TermsAndConditions && (

I agree to these { ev.preventDefault(); onShowTermsFor(service); }} > terms and conditions } id={service.Id + '-TermsAndConditions'} labelClassName={'fs-12 pt-4'} value={agreedTc} onChange={(prop, checked) => { agreedTcClicked(checked); }} type="checkbox" >

)} {showStartDate != false && appStore.configuration['Members.CanSignup'] && ( onChangeDate(value)} className={`mb-8`} disabled={shouldBeDisabled} customProps={{ min: new Date(), max: maxDate, // Add max date limit here }} /> )} {(appStore.configuration['Members.CanSignup'] || appStore.configuration['PublicWebSite.Contact']) && ( { if (shouldBeDisabled) return; ev.preventDefault(); setClicked(true); if (!appStore.configuration['Members.CanSignup']) { router.push(routes.contact); return; } onPlanSelected({ tariff: service, startDate: moment(startDate).startOf('day').toDate(), }); }} className={`btn w-100 ${ shouldBeDisabled ? 'disabled' : '' }`} > {clicked && isLoading ? ( ) : ( buttonLabel || t('Join') )} )}

); } ) ) ) );

Get in touch with us

Contact details