github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-06 15:12:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[web] BS5 projects page banners

GitOrigin-RevId: f5ceccbb7009c010f2917e0c34b7d3f02d7511f1
This commit is contained in:
ilkin-overleaf 2024-08-13 17:02:33 +03:00 • committed by Copybot
parent 0f5184ac27
commit ca802eab82
4 changed files with 76 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>
)
}

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

@ -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>
)
}

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

@ -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>
)
}

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

@ -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>}
/>
)
}