Merge pull request #23203 from overleaf/ii-flexible-group-licensing-no-billing-details

[web] FL handle subscriptions with missing billing info

GitOrigin-RevId: 34209299c039992a80da5739e086beb5d0ede7b0

services/web/frontend/extracted-translations.json

@@ -794,6 +794,7 @@
   "is_email_affiliated": "",
   "issued_on": "",
   "it_looks_like_that_didnt_work_you_can_try_again_or_get_in_touch": "",
+  "it_looks_like_your_payment_details_are_missing_please_update_your_billing_information": "",
   "join_beta_program": "",
   "join_now": "",
   "join_overleaf_labs": "",
@@ -951,6 +952,7 @@
   "message_received": "",
   "missing_field_for_entry": "",
   "missing_fields_for_entry": "",
+  "missing_payment_details": "",
   "money_back_guarantee": "",
   "month": "",
   "month_plural": "",

services/web/frontend/js/features/group-management/components/missing-billing-information.tsx

@@ -0,0 +1,51 @@
+import { Trans, useTranslation } from 'react-i18next'
+import { Card, CardBody, Row, Col } from 'react-bootstrap-5'
+import getMeta from '@/utils/meta'
+import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+
+function MissingBillingInformation() {
+  const { t } = useTranslation()
+  const groupName = getMeta('ol-groupName')
+
+  return (
+    <div className="container">
+      <Row>
+        <Col xl={{ span: 4, offset: 4 }} md={{ span: 6, offset: 3 }}>
+          <div className="group-heading" data-testid="group-heading">
+            <IconButton
+              variant="ghost"
+              href="/user/subscription"
+              size="lg"
+              icon="arrow_back"
+              accessibilityLabel={t('back_to_subscription')}
+            />
+            <h2>{groupName || t('group_subscription')}</h2>
+          </div>
+          <Card>
+            <CardBody>
+              <OLNotification
+                type="error"
+                title={t('missing_payment_details')}
+                content={
+                  <Trans
+                    i18nKey="it_looks_like_your_payment_details_are_missing_please_update_your_billing_information"
+                    components={[
+                      // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                      <a href="/user/subscription" rel="noreferrer noopener" />,
+                      // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                      <a href="/contact" rel="noreferrer noopener" />,
+                    ]}
+                  />
+                }
+                className="m-0"
+              />
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  )
+}
+
+export default MissingBillingInformation

services/web/frontend/js/pages/user/subscription/group-management/missing-billing-information.tsx

@@ -0,0 +1,8 @@
+import '../base'
+import ReactDOM from 'react-dom'
+import MissingBillingInformation from '@/features/group-management/components/missing-billing-information'
+
+const element = document.getElementById('missing-billing-information-root')
+if (element) {
+  ReactDOM.render(<MissingBillingInformation />, element)
+}