From 48e62c4caffd263408d97074df48238733c4d9c5 Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <7019101+cwillisf@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:10:13 -0700
Subject: [PATCH] feat: link Scratch Link landing page from extension pages

---
 .../install-scratch-link.jsx                  | 109 +++++++++++-------
 src/l10n.json                                 |   7 +-
 2 files changed, 75 insertions(+), 41 deletions(-)

diff --git a/src/components/extension-landing/install-scratch-link.jsx b/src/components/extension-landing/install-scratch-link.jsx
index 507cdbeb7..71a9b2a51 100644
--- a/src/components/extension-landing/install-scratch-link.jsx
+++ b/src/components/extension-landing/install-scratch-link.jsx
@@ -17,52 +17,53 @@ const InstallScratchLink = ({
         <FlexRow className="inner column">
             <h2><FormattedMessage id="installScratchLink.installHeaderTitle" /></h2>
             <Steps>
-                <div className="step">
-                    <Step
-                        compact
-                        number={1}
-                    >
-                        <span className="step-description">
-                            <FormattedMessage id="installScratchLink.downloadAndInstall" />
-                        </span>
-                        <div className="downloads-container">
-                            <a
-                                href={
-                                    currentOS === OS_ENUM.WINDOWS ?
-                                        'https://www.microsoft.com/store/productId/9N48XLLCZH0X' :
-                                        'https://itunes.apple.com/us/app/scratch-link/id1408863490'
-                                }
-                                rel="noopener noreferrer"
-                                target="_blank"
-                            >
-                                <img
-                                    alt=""
-                                    className="store-badge"
-                                    src={`/images/badges/${
-                                        currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
-                                    }-store-badge.svg`}
-                                />
-                            </a>
-                            <span className="horizontal-divider">
-                                <FormattedMessage id="installScratch.or" />
-                            </span>
-                            <a
-                                href={`https://downloads.scratch.mit.edu/link/${
+                <Step
+                    compact
+                    number={1}
+                >
+                    <span className="step-description">
+                        <FormattedMessage id="installScratchLink.downloadAndInstall" />
+                    </span>
+                    <div className="downloads-container">
+                        <a
+                            href={
+                                currentOS === OS_ENUM.WINDOWS ?
+                                    'https://www.microsoft.com/store/productId/9N48XLLCZH0X' :
+                                    'https://itunes.apple.com/us/app/scratch-link/id1408863490'
+                            }
+                            rel="noopener noreferrer"
+                            target="_blank"
+                        >
+                            <img
+                                alt=""
+                                className="store-badge"
+                                src={`/images/badges/${
                                     currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
-                                }.zip`}
-                            >
-                                <FormattedMessage id="installScratch.directDownload" />
-                            </a>
-                        </div>
-                    </Step>
-
-                </div>
+                                }-store-badge.svg`}
+                            />
+                        </a>
+                        <span className="horizontal-divider">
+                            <FormattedMessage id="installScratch.or" />
+                        </span>
+                        <a
+                            href={`https://downloads.scratch.mit.edu/link/${
+                                currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
+                            }.zip`}
+                        >
+                            <FormattedMessage id="installScratch.directDownload" />
+                        </a>
+                    </div>
+                </Step>
                 <Step
                     compact
                     number={2}
                 >
                     <span className="step-description">
-                        <FormattedMessage id="installScratchLink.startScratchLink" />
+                        <FormattedMessage
+                            id={`installScratchLink.startScratchLink.${
+                                currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
+                            }`}
+                        />
                     </span>
                     <div className="step-image">
                         <img
@@ -73,6 +74,34 @@ const InstallScratchLink = ({
                             }-toolbar.png`}
                         />
                     </div>
+                    <p className="step-description">
+                        <FormattedMessage
+                            id={`installScratchLink.startScratchLink2.${
+                                currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
+                            }`}
+                        />
+                    </p>
+                </Step>
+                <Step
+                    compact
+                    number={3}
+                >
+                    <span className="step-description">
+                        <FormattedMessage
+                            id="installScratchLink.learnMore.bodyText"
+                            values={{
+                                linkText: (
+                                    <a
+                                        href="/download/scratch-link"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                    >
+                                        <FormattedMessage id="installScratchLink.learnMore.linkText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </span>
                 </Step>
             </Steps>
         </FlexRow>
diff --git a/src/l10n.json b/src/l10n.json
index 4b6c25e6c..4778e4511 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -167,7 +167,12 @@
 
     "installScratchLink.installHeaderTitle": "Install Scratch Link",
     "installScratchLink.downloadAndInstall": "Download and install Scratch Link.",
-    "installScratchLink.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
+    "installScratchLink.startScratchLink.macOS": "Start Scratch Link and make sure it is running. It should appear in your menu bar.",
+    "installScratchLink.startScratchLink.Windows": "Start Scratch Link and make sure it is running. It should appear in your notification area (system tray).",
+    "installScratchLink.startScratchLink2.macOS": "If it does not appear, run Scratch Link from your Applications folder.",
+    "installScratchLink.startScratchLink2.Windows": "If it does not appear, run Scratch Link from your Start menu.",
+    "installScratchLink.learnMore.bodyText": "To learn more about Scratch Link, click {linkText}.",
+    "installScratchLink.learnMore.linkText": "here",
 
     "parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
     "parents.FaqAgeRangeQ": "What is the age range for Scratch?",