mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-05 13:05:14 -05:00
6b4c483269
* [web] Initialize BS5 in subscription page * [web] Backend wiring for `user/subscription/thank-you` to BS5 * [web] Update `SuccessfulSubscription` to BS5 GitOrigin-RevId: 45162664c116eb04b73e16443c84fa24ea8b220c
116 lines
4 KiB
TypeScript
116 lines
4 KiB
TypeScript
import { useTranslation, Trans } from 'react-i18next'
|
|
import { PriceExceptions } from '../shared/price-exceptions'
|
|
import PremiumFeaturesLink from '../dashboard/premium-features-link'
|
|
import getMeta from '../../../../utils/meta'
|
|
import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
|
|
import OLRow from '@/features/ui/components/ol/ol-row'
|
|
import OLCol from '@/features/ui/components/ol/ol-col'
|
|
import OLCard from '@/features/ui/components/ol/ol-card'
|
|
import OLNotification from '@/features/ui/components/ol/ol-notification'
|
|
|
|
function SuccessfulSubscription() {
|
|
const { t } = useTranslation()
|
|
const { personalSubscription: subscription } =
|
|
useSubscriptionDashboardContext()
|
|
const postCheckoutRedirect = getMeta('ol-postCheckoutRedirect')
|
|
const { appName, adminEmail } = getMeta('ol-ExposedSettings')
|
|
|
|
if (!subscription || !('recurly' in subscription)) return null
|
|
|
|
return (
|
|
<div className="container">
|
|
<OLRow>
|
|
<OLCol lg={{ span: 8, offset: 2 }}>
|
|
<OLCard>
|
|
<div className="page-header">
|
|
<h2>{t('thanks_for_subscribing')}</h2>
|
|
</div>
|
|
<OLNotification
|
|
type="success"
|
|
content={
|
|
<>
|
|
{subscription.recurly.trial_ends_at && (
|
|
<>
|
|
<p>
|
|
<Trans
|
|
i18nKey="next_payment_of_x_collectected_on_y"
|
|
values={{
|
|
paymentAmmount: subscription.recurly.displayPrice,
|
|
collectionDate:
|
|
subscription.recurly.nextPaymentDueAt,
|
|
}}
|
|
shouldUnescape
|
|
tOptions={{ interpolation: { escapeValue: true } }}
|
|
components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
|
|
/>
|
|
</p>
|
|
<PriceExceptions subscription={subscription} />
|
|
</>
|
|
)}
|
|
<p>
|
|
{t('to_modify_your_subscription_go_to')}
|
|
<a href="/user/subscription" rel="noopener noreferrer">
|
|
{t('manage_subscription')}.
|
|
</a>
|
|
</p>
|
|
</>
|
|
}
|
|
/>
|
|
{subscription.groupPlan && (
|
|
<p>
|
|
<a
|
|
href={`/manage/groups/${subscription._id}/members`}
|
|
className="btn btn-primary btn-large"
|
|
>
|
|
{t('add_your_first_group_member_now')}
|
|
</a>
|
|
</p>
|
|
)}
|
|
<p>
|
|
{t('thanks_for_subscribing_you_help_sl', {
|
|
planName: subscription.plan.name,
|
|
})}
|
|
</p>
|
|
<PremiumFeaturesLink />
|
|
<p>
|
|
{t('need_anything_contact_us_at')}
|
|
<a href={`mailto:${adminEmail}`} rel="noopener noreferrer">
|
|
{adminEmail}
|
|
</a>
|
|
.
|
|
</p>
|
|
<p>
|
|
<Trans
|
|
i18nKey="help_improve_overleaf_fill_out_this_survey"
|
|
components={[
|
|
// eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
|
|
<a
|
|
href="https://forms.gle/CdLNX9m6NLxkv1yr5"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
/>,
|
|
]}
|
|
/>
|
|
</p>
|
|
<p>
|
|
{t('regards')},
|
|
<br />
|
|
The {appName} Team
|
|
</p>
|
|
<p>
|
|
<a
|
|
className="btn btn-primary"
|
|
href={postCheckoutRedirect || '/project'}
|
|
rel="noopener noreferrer"
|
|
>
|
|
< {t('back_to_your_projects')}
|
|
</a>
|
|
</p>
|
|
</OLCard>
|
|
</OLCol>
|
|
</OLRow>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SuccessfulSubscription
|