github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

[web] Migrate /user/subscription/thank-you to BS5 (#20588)

Browse source 
* [web] Initialize BS5 in subscription page

* [web] Backend wiring for `user/subscription/thank-you` to BS5

* [web] Update `SuccessfulSubscription` to BS5

GitOrigin-RevId: 45162664c116eb04b73e16443c84fa24ea8b220c
This commit is contained in:
Antoine Clausse 2024-09-25 12:11:51 +02:00 committed by Copybot
parent d480faf60b
commit 6b4c483269
3 changed files with 47 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
services/web/app/src/Features/Subscription/SubscriptionController.js
View file

@ -422,6 +422,12 @@ async function successfulSubscription(req, res) {
if (!personalSubscription) {
res.redirect('/user/subscription/plans')
} else {
await SplitTestHandler.promises.getAssignment(
req,
res,
'bootstrap-5-subscription'
)
res.render('subscriptions/successful-subscription-react', {
title: 'thank_you',
personalSubscription,

4
services/web/app/views/subscriptions/successful-subscription-react.pug
View file

@ -1,5 +1,9 @@
extends ../layout-marketing
block vars
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
block entrypointVar
- entrypoint = 'pages/user/subscription/successful-subscription'

65
services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx
View file

@ -1,9 +1,12 @@
import { useTranslation, Trans } from 'react-i18next'
import { Col, Row } from 'react-bootstrap'
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()
@ -16,37 +19,43 @@ function SuccessfulSubscription() {
return (
<div className="container">
<Row>
<Col md={8} mdOffset={2}>
<div className="card">
<OLRow>
<OLCol lg={{ span: 8, offset: 2 }}>
<OLCard>
<div className="page-header">
<h2>{t('thanks_for_subscribing')}</h2>
</div>
<div role="alert" className="alert alert-success">
{subscription.recurly.trial_ends_at && (
<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>
<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
/>
{t('to_modify_your_subscription_go_to')}&nbsp;
<a href="/user/subscription" rel="noopener noreferrer">
{t('manage_subscription')}.
</a>
</p>
<PriceExceptions subscription={subscription} />
</>
)}
<p>
{t('to_modify_your_subscription_go_to')}&nbsp;
<a href="/user/subscription" rel="noopener noreferrer">
{t('manage_subscription')}.
</a>
</p>
</div>
}
/>
{subscription.groupPlan && (
<p>
<a
@ -97,9 +106,9 @@ function SuccessfulSubscription() {
&lt; {t('back_to_your_projects')}
</a>
</p>
</div>
</Col>
</Row>
</OLCard>
</OLCol>
</OLRow>
</div>
)
}