Merge pull request #19892 from overleaf/ii-bs5-projects-geo-banners

[web] BS5 projects page banners

GitOrigin-RevId: f5ceccbb7009c010f2917e0c34b7d3f02d7511f1

services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx

@@ -1,8 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import usePersistedState from '../../../../../shared/hooks/use-persisted-state'
 import * as eventTracking from '../../../../../infrastructure/event-tracking'
-import { Modal, Button } from 'react-bootstrap'
-import AccessibleModal from '../../../../../shared/components/accessible-modal'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 
 export default function BRLBanner() {
@@ -83,11 +88,11 @@ export default function BRLBanner() {
   }
 
   return (
-    <AccessibleModal show={showModal} onHide={handleHide}>
-      <Modal.Header closeButton>
-        <Modal.Title>{t('latam_discount_modal_title')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body className="modal-body-share">
+    <OLModal show={showModal} onHide={handleHide}>
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('latam_discount_modal_title')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
         <p>
           <img
             alt={t('latam_discount_modal_title')}
@@ -103,15 +108,15 @@ export default function BRLBanner() {
             currencyName: 'Brazilian Reais',
           })}
         </p>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button bsStyle="default" onClick={handleMaybeLater}>
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={handleMaybeLater}>
           {t('maybe_later')}
-        </Button>
-        <Button type="button" bsStyle="primary" onClick={handleClick}>
+        </OLButton>
+        <OLButton variant="primary" onClick={handleClick}>
           {t('get_discounted_plan')}
-        </Button>
-      </Modal.Footer>
-    </AccessibleModal>
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
   )
 }

services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx

@@ -2,8 +2,13 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import usePersistedState from '../../../../../shared/hooks/use-persisted-state'
 import * as eventTracking from '../../../../../infrastructure/event-tracking'
-import { Modal, Button } from 'react-bootstrap'
-import AccessibleModal from '../../../../../shared/components/accessible-modal'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 export default function INRBanner() {
   const { t } = useTranslation()
@@ -81,11 +86,11 @@ export default function INRBanner() {
   }
 
   return (
-    <AccessibleModal show={showModal} onHide={handleHide} backdrop="static">
-      <Modal.Header closeButton>
-        <Modal.Title>{t('inr_discount_modal_title')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body className="modal-body-share">
+    <OLModal show={showModal} onHide={handleHide} backdrop="static">
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('inr_discount_modal_title')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
         <p>
           <img
             alt={t('inr_discount_modal_title')}
@@ -96,15 +101,15 @@ export default function INRBanner() {
           />
         </p>
         <p>{t('inr_discount_modal_info')}</p>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button bsStyle="default" onClick={handleMaybeLater}>
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={handleMaybeLater}>
           {t('maybe_later')}
-        </Button>
-        <Button type="button" bsStyle="primary" onClick={handleClick}>
+        </OLButton>
+        <OLButton variant="primary" onClick={handleClick}>
           {t('get_discounted_plan')}
-        </Button>
-      </Modal.Footer>
-    </AccessibleModal>
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
   )
 }

services/web/frontend/js/features/project-list/components/notifications/ads/latam-banner.tsx

@@ -1,8 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import usePersistedState from '../../../../../shared/hooks/use-persisted-state'
 import * as eventTracking from '../../../../../infrastructure/event-tracking'
-import { Modal, Button } from 'react-bootstrap'
-import AccessibleModal from '../../../../../shared/components/accessible-modal'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 import getMeta from '@/utils/meta'
 
@@ -123,11 +128,11 @@ export default function LATAMBanner() {
   }
 
   return (
-    <AccessibleModal show={showModal} onHide={handleHide} backdrop="static">
-      <Modal.Header closeButton>
-        <Modal.Title>{t('latam_discount_modal_title')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body className="modal-body-share">
+    <OLModal show={showModal} onHide={handleHide} backdrop="static">
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('latam_discount_modal_title')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
         <p>
           <img
             alt={t('latam_discount_modal_title')}
@@ -143,15 +148,15 @@ export default function LATAMBanner() {
             currencyName,
           })}
         </p>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button bsStyle="default" onClick={handleMaybeLater}>
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={handleMaybeLater}>
           {t('maybe_later')}
-        </Button>
-        <Button type="button" bsStyle="primary" onClick={handleClick}>
+        </OLButton>
+        <OLButton variant="primary" onClick={handleClick}>
           {t('get_discounted_plan')}
-        </Button>
-      </Modal.Footer>
-    </AccessibleModal>
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
   )
 }

services/web/frontend/js/features/ui/components/ol/ol-modal.tsx

@@ -1,4 +1,11 @@
-import { Modal as BS5Modal } from 'react-bootstrap-5'
+import {
+  Modal as BS5Modal,
+  ModalProps,
+  ModalHeaderProps,
+  ModalTitleProps,
+  ModalBody,
+  ModalFooterProps,
+} from 'react-bootstrap-5'
 import {
   Modal as BS3Modal,
   ModalProps as BS3ModalProps,
@@ -10,25 +17,25 @@ import {
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import AccessibleModal from '@/shared/components/accessible-modal'
 
-type OLModalProps = React.ComponentProps<typeof BS5Modal> & {
+type OLModalProps = ModalProps & {
   bs3Props?: Record<string, unknown>
   size?: 'sm' | 'lg'
   onHide: () => void
 }
 
-type OLModalHeaderProps = React.ComponentProps<typeof BS5Modal> & {
+type OLModalHeaderProps = ModalHeaderProps & {
   bs3Props?: Record<string, unknown>
 }
 
-type OLModalTitleProps = React.ComponentProps<typeof BS5Modal> & {
+type OLModalTitleProps = ModalTitleProps & {
   bs3Props?: Record<string, unknown>
 }
 
-type OLModalBodyProps = React.ComponentProps<typeof BS5Modal> & {
+type OLModalBodyProps = React.ComponentProps<typeof ModalBody> & {
   bs3Props?: Record<string, unknown>
 }
 
-type OLModalFooterProps = React.ComponentProps<typeof BS5Modal> & {
+type OLModalFooterProps = ModalFooterProps & {
   bs3Props?: Record<string, unknown>
 }
 
@@ -54,11 +61,7 @@ export default function OLModal({ children, ...props }: OLModalProps) {
   )
 }
 
-export function OLModalHeader({
-  children,
-  closeButton,
-  ...props
-}: OLModalHeaderProps) {
+export function OLModalHeader({ children, ...props }: OLModalHeaderProps) {
   const { bs3Props, ...bs5Props } = props
 
   const bs3ModalProps: BS3ModalHeaderProps = {
@@ -69,16 +72,8 @@ export function OLModalHeader({
   }
   return (
     <BootstrapVersionSwitcher
-      bs3={
-        <BS3Modal.Header {...bs3ModalProps} closeButton={closeButton}>
-          {children}
-        </BS3Modal.Header>
-      }
-      bs5={
-        <BS5Modal.Header {...bs5Props} closeButton={closeButton}>
-          {children}
-        </BS5Modal.Header>
-      }
+      bs3={<BS3Modal.Header {...bs3ModalProps}>{children}</BS3Modal.Header>}
+      bs5={<BS5Modal.Header {...bs5Props}>{children}</BS5Modal.Header>}
     />
   )
 }