From 3ef06d57c6adb82922c670fd4c0756ea5e7674a5 Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Tue, 14 May 2024 17:47:39 +0200 Subject: [PATCH] Merge pull request #18256 from overleaf/rd-a11y-form [web] Create accessibility survey link on the project dashboard GitOrigin-RevId: 49503da67347c9e0e15a10f041252f25f0effc15 --- .../web/frontend/extracted-translations.json | 2 + .../accessibility-survey-banner.tsx | 47 ++++++++++++++++ .../notifications/user-notifications.tsx | 3 ++ .../writefull-premium-promo-banner.tsx | 54 ++++++++++--------- .../components/project-list-root.tsx | 1 + services/web/locales/en.json | 2 + .../components/notifications.test.tsx | 7 ++- 7 files changed, 89 insertions(+), 27 deletions(-) create mode 100644 services/web/frontend/js/features/project-list/components/notifications/accessibility-survey-banner.tsx diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 4a0b614fa3..c6d8de1928 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -510,6 +510,7 @@ "headers": "", "help": "", "help_improve_overleaf_fill_out_this_survey": "", + "help_improve_screen_reader_fill_out_this_survey": "", "hide_configuration": "", "hide_deleted_user": "", "hide_document_preamble": "", @@ -1290,6 +1291,7 @@ "tag_name_is_already_used": "", "tags": "", "take_short_survey": "", + "take_survey": "", "tc_everyone": "", "tc_guests": "", "tc_switch_everyone_tip": "", diff --git a/services/web/frontend/js/features/project-list/components/notifications/accessibility-survey-banner.tsx b/services/web/frontend/js/features/project-list/components/notifications/accessibility-survey-banner.tsx new file mode 100644 index 0000000000..47418cb7fd --- /dev/null +++ b/services/web/frontend/js/features/project-list/components/notifications/accessibility-survey-banner.tsx @@ -0,0 +1,47 @@ +import { memo, useEffect, useState } from 'react' +import Notification from './notification' +import customLocalStorage from '@/infrastructure/local-storage' +import { useTranslation } from 'react-i18next' + +function AccessibilitySurveyBanner() { + const { t } = useTranslation() + const [show, setShow] = useState(false) + + useEffect(() => { + const isDismissed = customLocalStorage.getItem( + 'has_dismissed_accessibility_survey_banner' + ) + if (!isDismissed) setShow(true) + }, []) + + const handleClose = () => { + customLocalStorage.setItem( + 'has_dismissed_accessibility_survey_banner', + 'true' + ) + setShow(false) + } + + if (!show) return null + + return ( + {t('help_improve_screen_reader_fill_out_this_survey')}

} + action={ + + {t('take_survey')} + + } + /> + ) +} + +export default memo(AccessibilitySurveyBanner) 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 7190a932b5..e0ca0783c7 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 @@ -12,6 +12,7 @@ import customLocalStorage from '../../../../infrastructure/local-storage' import { sendMB } from '../../../../infrastructure/event-tracking' import classNames from 'classnames' import GeoBanners from './geo-banners' +import AccessibilitySurveyBanner from './accessibility-survey-banner' type Subscription = { groupId: string @@ -85,6 +86,8 @@ function UserNotifications() { {!showWritefull && !dismissedWritefull && } + + - Enjoying Writefull? Get 10% off Writefull Premium, - giving you access to TeXGPT—AI assistance to generate LaTeX code. Use{' '} - OVERLEAF10 at the checkout. - - } - action={ - { - sendMB('promo-click', eventSegmentation) - }} - > - {' '} - Get Writefull Premium - - } - /> +
+ + Enjoying Writefull? Get 10% off Writefull Premium, + giving you access to TeXGPT—AI assistance to generate LaTeX code. + Use OVERLEAF10 at the checkout. + + } + action={ + { + sendMB('promo-click', eventSegmentation) + }} + > + {' '} + Get Writefull Premium + + } + /> +
) } diff --git a/services/web/frontend/js/features/project-list/components/project-list-root.tsx b/services/web/frontend/js/features/project-list/components/project-list-root.tsx index c886b1939e..c23c545e5c 100644 --- a/services/web/frontend/js/features/project-list/components/project-list-root.tsx +++ b/services/web/frontend/js/features/project-list/components/project-list-root.tsx @@ -78,6 +78,7 @@ function ProjectListPageContent() { ) : ( <> +
{totalProjectsCount > 0 ? ( <> diff --git a/services/web/locales/en.json b/services/web/locales/en.json index fa9fb173b6..897592f869 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -756,6 +756,7 @@ "help": "Help", "help_articles_matching": "Help articles matching your subject", "help_improve_overleaf_fill_out_this_survey": "If you would like to help us improve Overleaf, please take a moment to fill out <0>this survey.", + "help_improve_screen_reader_fill_out_this_survey": "Help us improve your experience using a screen reader with __appName__ by filling out this quick survey.", "hide_configuration": "Hide configuration", "hide_deleted_user": "Hide deleted users", "hide_document_preamble": "Hide document preamble", @@ -1833,6 +1834,7 @@ "tags": "Tags", "take_me_home": "Take me home!", "take_short_survey": "Take a short survey", + "take_survey": "Take survey", "tc_everyone": "Everyone", "tc_guests": "Guests", "tc_switch_everyone_tip": "Toggle track-changes for everyone", diff --git a/services/web/test/frontend/features/project-list/components/notifications.test.tsx b/services/web/test/frontend/features/project-list/components/notifications.test.tsx index f6ec623ce4..d759e36b43 100644 --- a/services/web/test/frontend/features/project-list/components/notifications.test.tsx +++ b/services/web/test/frontend/features/project-list/components/notifications.test.tsx @@ -998,7 +998,12 @@ describe('', function () { it('dismisses the banner when the close button is clicked', function () { renderWithinProjectListProvider(UserNotifications) screen.getByRole('link', { name: /Writefull/ }) - const closeButton = screen.getByRole('button', { name: 'Close' }) + const WritefullPromoBanner = screen.getByTestId( + 'writefull-premium-promo-banner' + ) + const closeButton = within(WritefullPromoBanner).getByRole('button', { + name: 'Close', + }) fireEvent.click(closeButton) expect(screen.queryByRole('link', { name: /Writefull/ })).to.be.null expect(localStorage.getItem('has_dismissed_writefull_promo_banner')).to