Fix #5275, add text to /hosting-shutdown page

locales/en-US/server.ftl

@@ -18,6 +18,9 @@ screenshotsLogo =
 bannerSignIn = <a>Sign in or sign up</a> to access your shots across devices and save your favorites forever.
 bannerUpsell = {gScreenshotsDescription} <a>Get Firefox now</a>
 shutdownWarning = <b>Saved screenshots are expiring soon.</b> Starting in June, Screenshots will no longer offer online storage. Want to keep shots from your library? <a>Download them to your computer.</a>
+shutdownPageTitle = Screenshots is changing
+shutdownPageDescription = Starting in June, Screenshots will no longer offer online storage. Want to keep shots from your library? Download shots individually or <a>in batch</a>. Thank you for using this feature, and we’re sorry for any inconvenience.
+shutdownPageContinue = We hope you’ll continue to use Screenshots to capture, copy, and download shots.
 
 # Text used in Firefox Account onboarding promo shown below
 # Sign in button in header

server/src/pages/hosting-shutdown/model.js

@@ -1,5 +1,5 @@
 exports.createModel = function(req) {
   return {
-    title: "shutdown" /* req.getText("shutdownPageTitle") */,
+    title: req.getText("shutdownPageTitle"),
   };
 };

server/src/pages/hosting-shutdown/view.js

@@ -1,6 +1,6 @@
 const reactruntime = require("../../reactruntime");
 const { Footer } = require("../../footer-view.js");
-// const { Localized } = require("fluent-react/compat");
+const { Localized } = require("fluent-react/compat");
 const React = require("react");
 const PropTypes = require("prop-types");
 const { Header } = require("../../header.js");
@@ -24,32 +24,27 @@ Head.propTypes = {
 
 class Body extends React.Component {
   render() {
+    const exportLink = <a href="/export"></a>;
     return (
       <reactruntime.BodyTemplate {...this.props}>
         <div className="column-space full-height">
           <Header hasLogo={true} hasFxa={this.props.hasFxa} />
           <div id="shot-index" className="flex-1">
             <div className="no-shots" key="no-shots-found">
-              {/* <Localized id="shutdownPageIntro"> */}
-              <h1>Screenshots is changing</h1>
-              {/* </Localized> */}
-              {/* <Localized id="shutdownPageDescription"> */}
-              <p>
-                The Firefox Screenshots server is shutting down in June of this
-                year. Thank you for using this feature, and we apologize for any
-                inconvenience.&nbsp;
-                <span className="if-indefinite">
-                  <a href="/export">Follow this link</a> to download all of the
-                  screenshots you currently have saved on our server.
-                </span>
-              </p>
-              <p>
-                Screenshots will continue to be a part of Firefox. You can still
-                capture screenshots, download them or copy them to your
-                clipboard.
-              </p>
-              Thank you
-              {/* </Localized> */}
+              <Localized id="shutdownPageTitle">
+                <h1>Screenshots is changing</h1>
+              </Localized>
+              <Localized id="shutdownPageDescription" a={exportLink}>
+                <p>
+                  Starting in June, Screenshots will no longer offer online storage. Want to keep shots from your library? Download shots individually or <a>in batch</a>. Thank you for using this feature, and we’re sorry for any inconvenience.
+                </p>
+              </Localized>
+              <p>&nbsp;</p>
+              <Localized id="shutdownPageContinue">
+                <p>
+                  We hope you’ll continue to use Screenshots to capture, copy, and download shots.
+                </p>
+              </Localized>
             </div>
           </div>
           <Footer {...this.props} />