[web] Migrate /user/subscription/canceled to BS5 (#20590)

* [web] Initialize BS5 in subscription page

* [web] Backend wiring for `/user/subscription/canceled` to BS5

* [web] Backend `Canceled` to BS5

GitOrigin-RevId: 660458145c06e0d2dd1343186d31b6a7662b01a0
This commit is contained in:
Antoine Clausse 2024-09-25 12:12:31 +02:00 committed by Copybot
parent 6b4c483269
commit 44103dd6a5
3 changed files with 32 additions and 17 deletions

View file

@ -458,7 +458,12 @@ function cancelSubscription(req, res, next) {
* @param {import('express').NextFunction} next * @param {import('express').NextFunction} next
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
function canceledSubscription(req, res, next) { async function canceledSubscription(req, res, next) {
await SplitTestHandler.promises.getAssignment(
req,
res,
'bootstrap-5-subscription'
)
return res.render('subscriptions/canceled-subscription-react', { return res.render('subscriptions/canceled-subscription-react', {
title: 'subscription_canceled', title: 'subscription_canceled',
}) })
@ -753,7 +758,7 @@ module.exports = {
interstitialPaymentPage: expressify(interstitialPaymentPage), interstitialPaymentPage: expressify(interstitialPaymentPage),
successfulSubscription: expressify(successfulSubscription), successfulSubscription: expressify(successfulSubscription),
cancelSubscription, cancelSubscription,
canceledSubscription, canceledSubscription: expressify(canceledSubscription),
cancelV1Subscription, cancelV1Subscription,
updateSubscription, updateSubscription,
cancelPendingSubscriptionChange, cancelPendingSubscriptionChange,

View file

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

View file

@ -1,25 +1,31 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Col, Row, Alert } from 'react-bootstrap' 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 Canceled() { function Canceled() {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div className="container"> <div className="container">
<Row> <OLRow>
<Col md={8} mdOffset={2}> <OLCol lg={{ span: 8, offset: 2 }}>
<div className="card"> <OLCard>
<div className="page-header"> <div className="page-header">
<h2>{t('subscription_canceled')}</h2> <h2>{t('subscription_canceled')}</h2>
</div> </div>
<Alert bsStyle="info"> <OLNotification
<p> type="info"
{t('to_modify_your_subscription_go_to')}&nbsp; content={
<a href="/user/subscription" rel="noopener noreferrer"> <p>
{t('manage_subscription')}. {t('to_modify_your_subscription_go_to')}&nbsp;
</a> <a href="/user/subscription" rel="noopener noreferrer">
</p> {t('manage_subscription')}.
</Alert> </a>
</p>
}
/>
<p> <p>
<a <a
className="btn btn-primary" className="btn btn-primary"
@ -29,9 +35,9 @@ function Canceled() {
&lt; {t('back_to_your_projects')} &lt; {t('back_to_your_projects')}
</a> </a>
</p> </p>
</div> </OLCard>
</Col> </OLCol>
</Row> </OLRow>
</div> </div>
) )
} }