Add mailing list form to our start page (microsoft#15816)

* Add mailing list form to our start page * Really format with prettier * mess up with formatting * Format with prettier once again:
huongnt-2545 · Apr 9, 2021 · 830065a · 830065a
1 parent ba80e4d
commit 830065a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/package.nls.json b/package.nls.json
@@ -222,6 +222,7 @@
     "StartPage.openInteractiveWindow": "Use the Interactive Window to develop Python Scripts",
     "StartPage.interactiveWindowDesc": "- You can create cells on a Python file by typing \"#%%\" <br /> - Use \"<div class=\"italics\">Shift + Enter</div> \" to run a cell, the output will be shown in the interactive window",
     "StartPage.releaseNotes": "Take a look at our <a class=\"link\" href={0}>Release Notes</a> to learn more about the latest features.",
+    "StartPage.mailingList": "<a class=\"link\" href={0}>Sign up</a> for tips and tutorials through our mailing list.",
     "StartPage.tutorialAndDoc": "Explore more features in our <a class=\"link\" href={0}>Tutorials</a> or check <a class=\"link\" href={1}>Documentation</a> for tips and troubleshooting.",
     "StartPage.dontShowAgain": "Don't show this page again",
     "StartPage.helloWorld": "Hello world",

diff --git a/src/client/common/utils/localize.ts b/src/client/common/utils/localize.ts
@@ -439,6 +439,10 @@ export namespace StartPage {
         'StartPage.tutorialAndDoc',
         'Explore more features in our <a class="link" href={0}>Tutorials</a> or check <a class="link" href={1}>Documentation</a> for tips and troubleshooting.',
     );
+    export const mailingList = localize(
+        'StartPage.mailingList',
+        '<a class="link" href={0}>Sign up</a> for tips and tutorials through our mailing list.',
+    );
     export const dontShowAgain = localize('StartPage.dontShowAgain', "Don't show this page again");
     export const helloWorld = localize('StartPage.helloWorld', 'Hello world');
     // When localizing sampleNotebook, the translated notebook must also be included in

diff --git a/src/startPage-ui/startPage/startPage.tsx b/src/startPage-ui/startPage/startPage.tsx
@@ -130,6 +130,7 @@ export class StartPage extends React.Component<IStartPageProps> implements IMess
                 <div className="releaseNotesRow">
                     {this.renderReleaseNotesLink()}
                     {this.renderTutorialAndDoc()}
+                    {this.renderMailingList()}
                 </div>
                 <div className="block">
                     <input
@@ -262,6 +263,20 @@ export class StartPage extends React.Component<IStartPageProps> implements IMess
         );
     }
 
+    private renderMailingList(): JSX.Element {
+        return (
+            <div
+                className="paragraph"
+                dangerouslySetInnerHTML={{
+                    __html: getLocString(
+                        'StartPage.mailingList',
+                        '<a class="link" href={0}>Sign up</a> for tips and tutorials through our mailing list.',
+                    ).format('https://aka.ms/AAbopxr'),
+                }}
+            />
+        );
+    }
+
     private openBlankNotebook = () => {
         this.postOffice.sendMessage<IStartPageMapping>(StartPageMessages.OpenBlankNotebook);
     };