Update privacy modal and content (#107)

PBI: 32527
Task: 32239

* Change privacy modal logic

* Change third party website message content

* Fix casing conventions and ordering of constants

* Improve readability of redirect description

locales/en/out/constants.i18n.json

@@ -26,7 +26,7 @@
   "info.redirect": "You are being redirected.",
   "info.runningCode": "Running user code",
   "info.privacyStatement": "Privacy Statement",
-  "info.thirdPartyWebsite": "You will be redirect to adafruit.com, a website outside Microsoft. Read the privacy statement on Adafruit:",
+  "info.thirdPartyWebsite": "By clicking \"Agree and Proceed\" you will be redirected to adafruit.com, a third party website not managed by Microsoft. Please note that your activity on adafruit.com is subject to Adafruit's privacy policy",
   "info.welcomeOutputTab": "Welcome to the Adafruit Simulator output tab !\n\n",
   "label.webviewPanel": "Adafruit CPX",
   "name": "Pacifica Simulator",

src/constants.ts

@@ -94,7 +94,7 @@ export const CONSTANTS = {
     RUNNING_CODE: localize("info.runningCode", "Running user code"),
     THIRD_PARTY_WEBSITE: localize(
       "info.thirdPartyWebsite",
-      "You will be redirect to adafruit.com, a website outside Microsoft. Read the privacy statement on Adafruit:"
+      "By clicking \"Agree and Proceed\" you will be redirected to adafruit.com, a third party website not managed by Microsoft. Please note that your activity on adafruit.com is subject to Adafruit's privacy policy",
     ),
     WELCOME_OUTPUT_TAB: localize(
       "info.welcomeOutputTab",
@@ -167,6 +167,9 @@ export namespace DialogResponses {
   export const ACCEPT_AND_RUN: MessageItem = {
     title: localize("dialogResponses.agreeAndRun", "Agree and Run")
   };
+  export const AGREE_AND_PROCEED: MessageItem = {
+    title: localize("dialogResponses.agreeAndProceed", "Agree and Proceed")
+  };
   export const CANCEL: MessageItem = {
     title: localize("dialogResponses.cancel", "Cancel")
   }

src/extension_utils/utils.ts

@@ -28,14 +28,17 @@ export const validCodeFileName = (filePath: string) => {
 
 export const showPrivacyModal = (okAction: () => void) => {
   window.showInformationMessage(
-    `${CONSTANTS.INFO.THIRD_PARTY_WEBSITE} ${CONSTANTS.LINKS.PRIVACY}`,
-    DialogResponses.MESSAGE_UNDERSTOOD
+    `${CONSTANTS.INFO.THIRD_PARTY_WEBSITE}: ${CONSTANTS.LINKS.PRIVACY}`,
+    DialogResponses.AGREE_AND_PROCEED,
+    DialogResponses.CANCEL,
   )
     .then((privacySelection: MessageItem | undefined) => {
-      if (privacySelection === DialogResponses.MESSAGE_UNDERSTOOD) {
+      if (privacySelection === DialogResponses.AGREE_AND_PROCEED) {
         okAction();
+      } else if (privacySelection === DialogResponses.CANCEL) {
+        // do nothing
       }
-    })
+    });
 }
 
 export const checkPythonDependency = async () => {

src/view/components/toolbar/ToolBar.tsx

@@ -255,14 +255,14 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
       <span>
         <div className="redirect-modal">
           <div className="redirect-description">{`${
-            CONSTANTS.REDIRECT.description
-          } : \n ${CONSTANTS.REDIRECT.privacy}`}</div>
+            CONSTANTS.REDIRECT.DESCRIPTION
+          } : \n ${CONSTANTS.REDIRECT.PRIVACY}`}</div>
           <a
             className="redirect-button"
             id="redirect"
             aria-label={"Information pop-up"}
             onClick={this.handleOnClickButton}
-            href={CONSTANTS.REDIRECT.link}
+            href={CONSTANTS.REDIRECT.LINK}
           >
             {`Got it`}
           </a>
@@ -285,7 +285,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
     );
     const linkAnchor = (
       <span className="redirect-learn-link">
-        <a href={CONSTANTS.REDIRECT.link}>Learn More</a>
+        <a href={CONSTANTS.REDIRECT.LINK}>Learn More</a>
       </span>
     );
     return this.state.doNotShowAgain ? linkAnchor : linkString;
@@ -300,7 +300,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
     if (this.state.doNotShowAgain) {
       const ref = window.document.getElementById("redirect");
       if (ref) {
-        window.location.assign(CONSTANTS.REDIRECT.link);
+        window.location.assign(CONSTANTS.REDIRECT.LINK);
       }
     }
   };

src/view/constants.ts

@@ -35,11 +35,11 @@ export const CONSTANTS = {
     NUMERIC_SEVEN: "7"
   },
   REDIRECT: {
-    link:
+    DESCRIPTION:
+      "By clicking \"Agree and Proceed\" you will be redirected to adafruit.com, a third party website not managed by Microsoft. Please note that your activity on adafruit.com is subject to Adafruit's privacy policy",
+    LINK:
       "https://learn.adafruit.com/adafruit-circuit-playground-express/circuitpython-quickstart",
-    privacy: "https://www.adafruit.com/privacy",
-    description:
-      "You will be redirect to adafruit.com, a website outside Microsoft. Read the privacy statement on Adafruit:"
+    PRIVACY: "https://www.adafruit.com/privacy"
   },
   TOOLBAR_INFO: `Explore what's on the board:`
 };