Merge pull request #11973 from overleaf/ii-react-canceled-subscription

[web] Subscription page canceled subscription react migration

GitOrigin-RevId: dd127d753e72c194cd6bbb90b1ca1557742896d9

services/web/frontend/extracted-translations.json

@@ -467,6 +467,7 @@
   "manage_newsletter": "",
   "manage_publisher_managers": "",
   "manage_sessions": "",
+  "manage_subscription": "",
   "managers_management": "",
   "math_display": "",
   "math_inline": "",
@@ -762,6 +763,7 @@
   "submit_title": "",
   "subscribe": "",
   "subscription_admins_cannot_be_deleted": "",
+  "subscription_canceled": "",
   "subscription_canceled_and_terminate_on_x": "",
   "subscription_will_remain_active_until_end_of_billing_period_x": "",
   "sure_you_want_to_cancel_plan_change": "",
@@ -806,6 +808,7 @@
   "to_add_email_accounts_need_to_be_linked_2": "",
   "to_add_more_collaborators": "",
   "to_change_access_permissions": "",
+  "to_modify_your_subscription_go_to": "",
   "toggle_compile_options_menu": "",
   "token_read_only": "",
   "token_read_write": "",

services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next'
+import { Col, Row, Alert } from 'react-bootstrap'
+
+function Canceled() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="container">
+      <Row>
+        <Col md={8} mdOffset={2}>
+          <div className="card">
+            <div className="page-header">
+              <h2>{t('subscription_canceled')}</h2>
+              <Alert bsStyle="info">
+                <p>
+                  {t('to_modify_your_subscription_go_to')}&nbsp;
+                  <a href="/user/subscription" rel="noopener noreferrer">
+                    {t('manage_subscription')}.
+                  </a>
+                </p>
+              </Alert>
+              <p>
+                <a
+                  className="btn btn-primary"
+                  href="/project"
+                  rel="noopener noreferrer"
+                >
+                  &lt; {t('back_to_your_projects')}
+                </a>
+              </p>
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  )
+}
+
+export default Canceled

services/web/frontend/js/features/subscription/components/canceled-subscription/root.tsx

@@ -1,4 +1,5 @@
 import useWaitForI18n from '../../../../shared/hooks/use-wait-for-i18n'
+import CanceledSubscription from './canceled'
 
 function Root() {
   const { isReady } = useWaitForI18n()
@@ -7,7 +8,7 @@ function Root() {
     return null
   }
 
-  return <h2>React Subscription Canceled</h2>
+  return <CanceledSubscription />
 }
 
 export default Root

services/web/test/frontend/features/subscription/components/canceled-subscription/canceled-subscription.test.tsx

@@ -0,0 +1,24 @@
+import { expect } from 'chai'
+import { render, screen, within } from '@testing-library/react'
+import CanceledSubscription from '../../../../../../frontend/js/features/subscription/components/canceled-subscription/canceled'
+
+describe('canceled subscription page', function () {
+  it('renders the invoices link', function () {
+    render(<CanceledSubscription />)
+
+    screen.getByRole('heading', { name: /subscription canceled/i })
+    const alert = screen.getByRole('alert')
+    within(alert).getByText(/to modify your subscription go to/i)
+    const manageSubscriptionLink = within(alert).getByRole('link', {
+      name: /manage subscription/i,
+    })
+    expect(manageSubscriptionLink.getAttribute('href')).to.equal(
+      '/user/subscription'
+    )
+
+    const backToYourProjectsLink = screen.getByRole('link', {
+      name: /back to your projects/i,
+    })
+    expect(backToYourProjectsLink.getAttribute('href')).to.equal('/project')
+  })
+})