Refactor newsletter petition localization

[robdivincenzo]

Description

This PR refactors the localization methods for the newsletter and petition components. Now that gettext is exporting localization strings properly via inv makemessages, we're revisiting these components to replace the hardcoded getText method.

This first PR is a confirmation that everything is exporting properly for Pontoon translation. Further work is needed to remove locale-strings.jsx and getText method across the codebase, and will be completed via follow-up issues.

Link to sample test page:
Related PRs/issues: #11910 #12100 #12049

To Test

1. Ensure your localization string repo is set up
2. Export the strings via inv makemessages
3. Review for new changes in .po files to note that the gettext strings are exported for translation

┆Issue is synchronized with this Jira Story

[TheoChevalier]

Thanks @robdivincenzo , can’t wait to see this hack go away :)

Just flagged a few strings that were sneakily using aliases with a different copy than the actual string (mostly due to HTML tags).

This being said, I can confirm the content gets properly extracted in .po files!

[robdivincenzo]

Great catch @TheoChevalier ! I've updated the gettext calls to include the actual string rather than the aliases. From my understanding of the docs, it's ok to include html tags as part of the translation. And they do seem to export fine. But I'm curious to hear if everything imports back from Pontoon ok. Any thoughts?

[TheoChevalier]

This doesn’t work unfortunately, I suspect we need to do interpolation for tags, I can have a look tomorrow

[TheoChevalier]

Note that the documentation linked is for templates only, here we can only use what is in the JavaScript section and it works slightly differently: https://docs.djangoproject.com/en/5.0/topics/i18n/translation/#internationalization-in-javascript-code

[robdivincenzo]

Thanks Theo, I see it now 😅. Since that value is passed back to React, React is going to escape it by default. The html needs explicitly defined. How would you feel with the translated text fragmented out? Something like:

    const label = (<span>
      {pgettext("Fragment of: I'm okay with Mozilla handling my info as explained in this Privacy Notice","I'm okay with Mozilla handling my info as explained in this ")}
      <a target='_blank' href='https://www.mozilla.org/privacy/websites/'>{pgettext("Fragment of: I'm okay with Mozilla handling my info as explained in this Privacy Notice","Privacy Notice")}</a>
    </span>)

    return (
      <InputCheckboxWithLabel
        id={this.ids[name]}
        name={name}
        label={label}
        value={this.getFormFieldValue(name)}
        checked={this.getFormFieldValue(name) === "true"}
        onChange={(event) => this.handlePrivacyChange(event)}
        required={true}
        errorMessage={this.props.errors[name]}
      />
    );
  }

We could use pgettext to export a comment you'd think necessary for an accurate translation of the fragments. I made it "Fragment of: [alias]" so it could be identified as a fragment of whatever alias. We could also put the whole html string there if you wanted, but that might be too verbose.

[TheoChevalier]

Thanks @robdivincenzo , let’s please use the whole HTML then, because it won’t work in some languages as translators often need to move the linked part (maybe not true for our current set of languages, but will surely be the case in other strings or when we support new languages)

[robdivincenzo]

Hey @TheoChevalier, knowing that translators might need to move the link around, I've tweaked the idea slightly. The translation now has 3 pieces for pre-link text, link text, and post-link text. This will enable translators to edit any part of the privacy notice text, rendering the link wherever as necessary, and securely presenting the HTML.

[TheoChevalier]

Unfortunately, strings with back-ticks are not extracted anymore

[robdivincenzo]

Thanks @TheoChevalier, please try once more. The docs suggested it was available in our version of gettext, but you're right that it doesn't export.

[TheoChevalier]

Hm, looks like the translator notes are not fully extracted now, I suspect the concatenation needs to be done slightly differently with pgettext in JS