diff --git a/services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx b/services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx index fc4944a2ff..078a5f338e 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx +++ b/services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx @@ -5,6 +5,7 @@ import Notification from '../notification' import * as eventTracking from '../../../../../infrastructure/event-tracking' import { Modal, Button } from 'react-bootstrap' import AccessibleModal from '../../../../../shared/components/accessible-modal' +import getMeta from '@/utils/meta' interface VariantContents { default: string @@ -25,6 +26,10 @@ type INRBannerProps = { export default function INRBanner({ variant, splitTestName }: INRBannerProps) { const { t } = useTranslation() + const newNotificationStyle = getMeta( + 'ol-newNotificationStyle', + false + ) as boolean const [dismissedUntil, setDismissedUntil] = usePersistedState< Date | undefined >(`has_dismissed_inr_banner_until`) @@ -107,9 +112,9 @@ export default function INRBanner({ variant, splitTestName }: INRBannerProps) { } action={ ) : ( +
+ ]} // eslint-disable-line react/jsx-key + /> + + )} + + } + /> + ) + } + + return ( + {isLoading ? ( <> {t('resending_confirmation_email')} @@ -114,60 +159,21 @@ function ConfirmEmailNotification({ userEmail }: { userEmail: UserEmailData }) {
{getUserFacingMessage(error)}
) : ( <> - ]} // eslint-disable-line react/jsx-key - /> - -
- ]} // eslint-disable-line react/jsx-key - /> + ({t('resend_confirmation_email')}) + )} - - - ) - } - - return ( - - - {isLoading ? ( - <> - {t('resending_confirmation_email')} - … - - ) : isError ? ( -
{getUserFacingMessage(error)}
- ) : ( - <> - {t('please_confirm_email', { - emailAddress: userEmail.email, - })}{' '} - - - )} - - + + } + /> ) } diff --git a/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-cancel-subscription.tsx b/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-cancel-subscription.tsx index b49ac690ea..2729f44485 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-cancel-subscription.tsx +++ b/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-cancel-subscription.tsx @@ -4,6 +4,7 @@ import type { Dispatch, SetStateAction } from 'react' import Notification from '../../notification' import { GroupInvitationStatus } from './hooks/use-group-invitation-notification' import type { NotificationGroupInvitation } from '../../../../../../../../types/project/dashboard/notification' +import getMeta from '@/utils/meta' type GroupInvitationCancelIndividualSubscriptionNotificationProps = { setGroupInvitationStatus: Dispatch> @@ -19,30 +20,41 @@ export default function GroupInvitationCancelIndividualSubscriptionNotification( notification, }: GroupInvitationCancelIndividualSubscriptionNotificationProps) { const { t } = useTranslation() + const newNotificationStyle = getMeta( + 'ol-newNotificationStyle', + false + ) as boolean const { messageOpts: { inviterName }, } = notification return ( - - - {t('invited_to_group_have_individual_subcription', { inviterName })} - - - - - - + + + + + } + /> ) } diff --git a/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx b/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx index 193e5ef773..0cb1c4b072 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx +++ b/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-join.tsx @@ -2,6 +2,7 @@ import { Button } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import Notification from '../../notification' import type { NotificationGroupInvitation } from '../../../../../../../../types/project/dashboard/notification' +import getMeta from '@/utils/meta' type GroupInvitationNotificationProps = { acceptGroupInvite: () => void @@ -17,26 +18,30 @@ export default function GroupInvitationNotificationJoin({ dismissGroupInviteNotification, }: GroupInvitationNotificationProps) { const { t } = useTranslation() + const newNotificationStyle = getMeta( + 'ol-newNotificationStyle', + false + ) as boolean const { messageOpts: { inviterName }, } = notification return ( - - - {t('invited_to_group', { inviterName })} - - + {t('join_now')} - - + } + /> ) } diff --git a/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-successful.tsx b/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-successful.tsx index b919fee9e5..abdd242c27 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-successful.tsx +++ b/services/web/frontend/js/features/project-list/components/notifications/groups/group-invitation/group-invitation-successful.tsx @@ -1,6 +1,7 @@ import Notification from '../../notification' import { useTranslation } from 'react-i18next' import Icon from '../../../../../../shared/components/icon' +import getMeta from '@/utils/meta' type GroupInvitationSuccessfulNotificationProps = { hideNotification: () => void @@ -10,13 +11,23 @@ export default function GroupInvitationSuccessfulNotification({ hideNotification, }: GroupInvitationSuccessfulNotificationProps) { const { t } = useTranslation() + const newNotificationStyle = getMeta( + 'ol-newNotificationStyle', + false + ) as boolean return ( - - - - + + {!newNotificationStyle && ( +
- }} - values={{ appName }} - shouldUnescape - tOptions={{ interpolation: { escapeValue: true } }} - />{' '} - - {t('learn_more')} - -
- - + + {' '} +

+ }} + values={{ appName, email, institutionName }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + /> +

+
+ }} + values={{ appName }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + />{' '} + + {t('learn_more')} + +
+ + } + action={ - - + } + /> )} {templateKey === 'notification_institution_sso_linked' && ( id && handleDismiss(id)} - > - + body={ }} @@ -89,76 +97,88 @@ function Institution() { shouldUnescape tOptions={{ interpolation: { escapeValue: true } }} /> - - + } + /> )} {templateKey === 'notification_institution_sso_non_canonical' && ( id && handleDismiss(id)} - > - - - }} - values={{ appName, email: requestedEmail }} - shouldUnescape - tOptions={{ interpolation: { escapeValue: true } }} - />{' '} - }} - values={{ email: institutionEmail }} - shouldUnescape - tOptions={{ interpolation: { escapeValue: true } }} - /> - - + body={ + <> + {!newNotificationStyle && ( + <> + {' '} + + )} + }} + values={{ appName, email: requestedEmail }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + />{' '} + }} + values={{ email: institutionEmail }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + /> + + } + /> )} {templateKey === 'notification_institution_sso_already_registered' && ( id && handleDismiss(id)} - > - - }} - values={{ appName, email }} - shouldUnescape - tOptions={{ interpolation: { escapeValue: true } }} - />{' '} - {t('we_logged_you_in')} - - + body={ + <> + }} + values={{ appName, email }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + />{' '} + {t('we_logged_you_in')} + + } + action={ - - + } + /> )} {templateKey === 'notification_institution_sso_error' && ( id && handleDismiss(id)} - > - - {' '} - {t('generic_something_went_wrong')}. -
- {error?.translatedMessage - ? error?.translatedMessage - : error?.message} -
- {error?.tryAgain ? `${t('try_again')}.` : null} - - + body={ + <> + {!newNotificationStyle && ( + <> + {' '} + + )} + {t('generic_something_went_wrong')}. +
+ {error?.translatedMessage + ? error?.translatedMessage + : error?.message} +
+ {error?.tryAgain ? `${t('try_again')}.` : null} + + } + /> )} ) diff --git a/services/web/frontend/js/features/project-list/components/notifications/notification.tsx b/services/web/frontend/js/features/project-list/components/notifications/notification.tsx index 979b3c74ed..3d6664c6a5 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/notification.tsx +++ b/services/web/frontend/js/features/project-list/components/notifications/notification.tsx @@ -61,13 +61,15 @@ function Notification({ bsStyle === 'danger' ? 'error' : bsStyle ) as NotificationType return ( - +
  • + +
    • ) } diff --git a/services/web/frontend/js/features/project-list/components/notifications/user-notifications.tsx b/services/web/frontend/js/features/project-list/components/notifications/user-notifications.tsx index 36637bee1b..b2f13ae2a2 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/user-notifications.tsx +++ b/services/web/frontend/js/features/project-list/components/notifications/user-notifications.tsx @@ -13,6 +13,7 @@ import getMeta from '../../../../utils/meta' import importOverleafModules from '../../../../../macros/import-overleaf-module.macro' import customLocalStorage from '../../../../infrastructure/local-storage' import { sendMB } from '../../../../infrastructure/event-tracking' +import classNames from 'classnames' import { isSplitTestEnabled } from '@/utils/splitTestUtils' const isChromium = () => @@ -34,6 +35,10 @@ const EnrollmentNotification: JSXElementConstructor<{ }> = enrollmentNotificationModule?.import.default function UserNotifications() { + const newNotificationStyle = getMeta( + 'ol-newNotificationStyle', + false + ) as boolean const groupSubscriptionsPendingEnrollment: Subscription[] = getMeta( 'ol-groupSubscriptionsPendingEnrollment', [] @@ -61,7 +66,7 @@ function UserNotifications() { } const show = - user.writefull?.enabled === true || // show to any users who have writefull enabled regardless of split test + user?.writefull?.enabled === true || // show to any users who have writefull enabled regardless of split test (!writefullIntegrationSplitTestEnabled && // show old banner to users who are not in the split test, who are on chrome and havent dismissed isChromium() && getMeta('ol-showWritefullPromoBanner')) @@ -71,7 +76,7 @@ function UserNotifications() { location: 'dashboard-banner', page: '/project', name: - user.writefull?.enabled === true || + user?.writefull?.enabled === true || writefullIntegrationSplitTestEnabled ? 'writefull-premium' : 'writefull', @@ -83,7 +88,11 @@ function UserNotifications() { const [dismissedWritefull, setDismissedWritefull] = useState(false) return ( -
    +