agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24154 from overleaf/em-bs5-subscription-preview

Browse Source 
Migrate the subscription change preview page to BS5

GitOrigin-RevId: beb398ef3a81be1b8d35536c524af6c110ea1b3d
This commit is contained in:
Eric Mc Sween
2025-03-10 08:33:24 -04:00
committed by Copybot
parent eedf5367fc
commit 1ea577ef12
3 changed files with 58 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
services/web/app/views/subscriptions/preview-change.pug
View File

@@ -1,5 +1,8 @@
extends ../layout-marketing
block vars
- bootstrap5PageStatus = 'enabled'
block entrypointVar
- entrypoint = 'pages/user/subscription/preview-change'

83
services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback } from 'react'
import { Grid, Row, Col, Button } from 'react-bootstrap'
import { Grid, Row } from 'react-bootstrap'
import moment from 'moment'
import { useTranslation, Trans } from 'react-i18next'
import {
@@ -14,6 +14,9 @@ import { useLocation } from '@/shared/hooks/use-location'
import { debugConsole } from '@/utils/debugging'
import { postJSON } from '@/infrastructure/fetch-json'
import Notification from '@/shared/components/notification'
import OLCard from '@/features/ui/components/ol/ol-card'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLButton from '@/features/ui/components/ol/ol-button'
import { subscriptionUpdateUrl } from '@/features/subscription/data/subscription-url'
import * as eventTracking from '@/infrastructure/event-tracking'
import sparkleText from '@/shared/svgs/ai-sparkle-text.svg'
@@ -49,8 +52,8 @@ function PreviewSubscriptionChange() {
return (
<Grid>
<Row>
<Col md={8} mdOffset={2}>
<div className="card p-5">
<OLCol md={{ offset: 2, span: 8 }}>
<OLCard className="p-3">
{preview.change.type === 'add-on-purchase' ? (
<h1>
{t('add_add_on_to_your_plan', {
@@ -77,7 +80,7 @@ function PreviewSubscriptionChange() {
)}
{aiAddOnChange && (
<div className="text-small">
<div>
<Trans
i18nKey="add_error_assist_to_your_projects"
components={{
@@ -95,46 +98,46 @@ function PreviewSubscriptionChange() {
</div>
)}
<div className="payment-summary-card mt-5">
<OLCard className="payment-summary-card mt-5">
<h3>{t('due_today')}:</h3>
<Row>
<Col xs={9}>{changeName}</Col>
<Col xs={3} className="text-right">
<OLCol xs={9}>{changeName}</OLCol>
<OLCol xs={3} className="text-end">
<strong>
{formatCurrency(
preview.immediateCharge.subtotal,
preview.currency
)}
</strong>
</Col>
</OLCol>
</Row>
{preview.immediateCharge.tax > 0 && (
<Row className="mt-1">
<Col xs={9}>
<OLCol xs={9}>
{t('vat')} {preview.nextInvoice.tax.rate * 100}%
</Col>
<Col xs={3} className="text-right">
</OLCol>
<OLCol xs={3} className="text-end">
{formatCurrency(
preview.immediateCharge.tax,
preview.currency
)}
</Col>
</OLCol>
</Row>
)}
<Row>
<Col xs={9}>{t('total_today')}</Col>
<Col xs={3} className="text-right">
<Row className="mt-1">
<OLCol xs={9}>{t('total_today')}</OLCol>
<OLCol xs={3} className="text-end">
<strong>
{formatCurrency(
preview.immediateCharge.total,
preview.currency
)}
</strong>
</Col>
</OLCol>
</Row>
</div>
</OLCard>
<div className="mt-5">
<Trans
@@ -154,65 +157,65 @@ function PreviewSubscriptionChange() {
</div>
<div className="mt-5">
<Button
bsStyle="primary"
bsSize="large"
<OLButton
variant="primary"
size="lg"
onClick={handlePayNowClick}
disabled={payNowTask.isLoading || payNowTask.isSuccess}
>
{t('pay_now')}
</Button>
</OLButton>
</div>
<div className="payment-summary-card mt-5">
<OLCard className="payment-summary-card mt-5">
<h3>{t('future_payments')}:</h3>
<Row className="mt-1">
<Col xs={9}>{preview.nextInvoice.plan.name}</Col>
<Col xs={3} className="text-right">
<OLCol xs={9}>{preview.nextInvoice.plan.name}</OLCol>
<OLCol xs={3} className="text-end">
{formatCurrency(
preview.nextInvoice.plan.amount,
preview.currency
)}
</Col>
</OLCol>
</Row>
{preview.nextInvoice.addOns.map(addOn => (
<Row className="mt-1" key={addOn.code}>
<Col xs={9}>
<OLCol xs={9}>
{addOn.name}
{addOn.quantity > 1 ? ` ×${addOn.quantity}` : ''}
</Col>
<Col xs={3} className="text-right">
</OLCol>
<OLCol xs={3} className="text-end">
{formatCurrency(addOn.amount, preview.currency)}
</Col>
</OLCol>
</Row>
))}
{preview.nextInvoice.tax.rate > 0 && (
<Row className="mt-1">
<Col xs={9}>
<OLCol xs={9}>
{t('vat')} {preview.nextInvoice.tax.rate * 100}%
</Col>
<Col xs={3} className="text-right">
</OLCol>
<OLCol xs={3} className="text-end">
{formatCurrency(
preview.nextInvoice.tax.amount,
preview.currency
)}
</Col>
</OLCol>
</Row>
)}
<Row className="mt-1">
<Col xs={9}>
<OLCol xs={9}>
{preview.nextPlan.annual
? t('total_per_year')
: t('total_per_month')}
</Col>
<Col xs={3} className="text-right">
</OLCol>
<OLCol xs={3} className="text-end">
{formatCurrency(preview.nextInvoice.total, preview.currency)}
</Col>
</OLCol>
</Row>
</div>
</OLCard>
<div className="mt-5">
<Trans
@@ -223,8 +226,8 @@ function PreviewSubscriptionChange() {
tOptions={{ interpolation: { escapeValue: true } }}
/>
</div>
</div>
</Col>
</OLCard>
</OLCol>
</Row>
</Grid>
)

12
services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss
View File

@@ -499,3 +499,15 @@
}
}
}
.payment-summary-card {
@extend .card-gray;
border-radius: var(--border-radius-large);
h3 {
margin-top: 0;
margin-bottom: var(--spacing-08);
font-weight: 600;
}
}