UX issue: translator popup opens on every page load

[konopkja]

Describe the bug

When I visit non-translated page on other than english page, I see a popup highliting translator program.

When I close this popup to keep reading the content and then go to another page on our domain, the popup appears again. If i close it again, it will show on another page visit again.

This is annoying - if user shows a desire to hide this popup, the popup should remain closed on every new page load.

To reproduce

1. Go to https://ethereum.org/cs/learn/
2. Click on '.x.' to close translator popup
3. Go to web3 page
4. See error - popup appears again.

Expected behavior

Pop up remains closed if user closed it.

Screenshots

No response

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Additional context

Would you like to work on this issue?

• [ ] Yes
• [X] No

[konopkja]

design sync discussion: add button "dont show this again" which hides the banner for "x" time e.g. 2 weeks

[rohan9024]

@konopkja I would like to work on this. Please assign me.

[wackerow]

Thanks @rohan9024!

Some things to keep in mind here... Non-English paths (ie: /es/anything) can either:

• (a) have no translated content available for a given page,
• (b) have translated content that isn't fully up to date with English, or
• (c) be fully up-to-date with English copy.

For (a), we display the English page instead, with a notice asking if they'd like to contribute to translations For (b), we display the available translations, with a notice asking if they'd like to contribute to translations AND also an option to view the full English page For (c), we don't/shouldn't display anything

Sounds like we want the option to dismiss the solicitation for contributing specifically. Just keep in mind that we'll still want to show the banner for users who land on a page with more up-to-date content available on the English version (option b above)... @konopkja if you have any thoughts from the design side on how to best handle this that could be helpful.

Also @rohan9024, note that we have a useLocalStorage hook that can be used to help store this preference

[rohan9024]

Thank you @wackerow

I'll proceed with implementing option b

[rohan9024]

A quick question @wackerow

Can you please help me navigating the translation pages in the codebase? So that I can just figure out why this bug is occurring

[konopkja]

ping @corwintines @wackerow

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity.

[wackerow]

Hey @rohan9024, apologies that we let this run stale.. Q4 was busy for our team and still catching up.

First, curious if you're still interested in tackling this?

If so,

For (a), we display the English page instead, with a notice asking if they'd like to contribute to translations For (b), we display the available translations, with a notice asking if they'd like to contribute to translations AND also an option to view the full English page For (c), we don't/shouldn't display anything

I'll proceed with implementing option b

Sorry for the confusion, but a, b and c above were not choices, but they are the three possible scenarios we encounter for a given page. We need to account for all three.

For (a), we display the English page instead, with a notice asking if they'd like to contribute to translations

design sync discussion: add button "dont show this again" which hides the banner for "x" time e.g. 2 weeks

In this scenario, we need to add a second button to not show again.

• This button should set an expiration date in localstorage (saved in the browser) for 2 weeks (ie. translationBannerHideUntil=2024-05-16T21:45:00Z).
• We then also need to add logic to check if this key exists in localstorage, and if it's a date in the future, prevent showing this popup to begin with.

For (b), we display the available translations, with a notice asking if they'd like to contribute to translations AND also an option to view the full English page

@konopkja Curious how you want to handle this case. In this case, the content is more up-to-date in English, but some translate content does exist. We have two buttons here already—one to go to the more-updated English content, and one soliciting help translating.

Can you please help me navigating the translation pages in the codebase? So that I can just figure out why this bug is occurring

For reference, the logic for when this banner shows up or not can be traced from the RootLayout.tsx component:

// src/layouts/RootLayout.tsx

export const RootLayout = ({
  children,
  contentIsOutdated,
  contentNotTranslated,
  lastDeployDate,
}: Root) => {

//...

  const isPageLanguageEnglish = locale === DEFAULT_LOCALE

  const shouldShowTranslationBanner =
    (contentIsOutdated || (contentNotTranslated && !isPageLanguageEnglish)) &&
    !isLegal

// ...
      <TranslationBanner
        shouldShow={shouldShowTranslationBanner}
        isPageContentEnglish={contentNotTranslated}
        originalPagePath={originalPagePath}
      />

The component itself would be src/Components/TranslationBanner.tsx. This is where I would focus by adding a button and the above logic to work with localStorage.

[konopkja]

Hey @rohan9024, apologies that we let this run stale.. Q4 was busy for our team and still catching up.

First, curious if you're still interested in tackling this?

If so,

For (a), we display the English page instead, with a notice asking if they'd like to contribute to translations For (b), we display the available translations, with a notice asking if they'd like to contribute to translations AND also an option to view the full English page For (c), we don't/shouldn't display anything

I'll proceed with implementing option b

Sorry for the confusion, but a, b and c above were not choices, but they are the three possible scenarios we encounter for a given page. We need to account for all three.

For (a), we display the English page instead, with a notice asking if they'd like to contribute to translations

design sync discussion: add button "dont show this again" which hides the banner for "x" time e.g. 2 weeks

In this scenario, we need to add a second button to not show again.

• This button should set an expiration date in localstorage (saved in the browser) for 2 weeks (ie. translationBannerHideUntil=2024-05-16T21:45:00Z).
• We then also need to add logic to check if this key exists in localstorage, and if it's a date in the future, prevent showing this popup to begin with.

For (b), we display the available translations, with a notice asking if they'd like to contribute to translations AND also an option to view the full English page

@konopkja Curious how you want to handle this case. In this case, the content is more up-to-date in English, but some translate content does exist. We have two buttons here already—one to go to the more-updated English content, and one soliciting help translating.

Can you please help me navigating the translation pages in the codebase? So that I can just figure out why this bug is occurring

For reference, the logic for when this banner shows up or not can be traced from the RootLayout.tsx component:

// src/layouts/RootLayout.tsx

export const RootLayout = ({
  children,
  contentIsOutdated,
  contentNotTranslated,
  lastDeployDate,
}: Root) => {

//...

  const isPageLanguageEnglish = locale === DEFAULT_LOCALE

  const shouldShowTranslationBanner =
    (contentIsOutdated || (contentNotTranslated && !isPageLanguageEnglish)) &&
    !isLegal

// ...
      <TranslationBanner
        shouldShow={shouldShowTranslationBanner}
        isPageContentEnglish={contentNotTranslated}
        originalPagePath={originalPagePath}
      />

The component itself would be src/Components/TranslationBanner.tsx. This is where I would focus by adding a button and the above logic to work with localStorage.

i dont remember why we decided this way, but i think any action to close the popup should be remembered for XYZ amount of time.

With that in mind in the scenario where there is translated but outdated content we should prioritize 2 most important actions:

1. Go to English
2. dont show again

In regular scenario

1. Go to the translation program
2. dont show again