Merge pull request #6909 from cwillisf/conf-2022-scratch-link-info

add macOS troubleshooting info on all extension pages

src/components/extension-landing/extension-troubleshooting.jsx

@@ -0,0 +1,52 @@
+const FormattedMessage = require('react-intl').FormattedMessage;
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const ExtensionSection = require('./extension-section.jsx');
+
+// TODO: after the Scratch Conference 2022, migrate from the individual extension landing pages all the
+// troubleshooting steps which are common to all extensions.
+const ExtensionTroubleshooting = props => {
+    const sharedValues = {
+        deviceName: props.deviceName,
+        deviceNameShort: props.deviceNameShort || props.deviceName
+    };
+    return (
+        <ExtensionSection className="faq">
+            <h2><FormattedMessage
+                id="extensions.troubleshootingTitle"
+                values={sharedValues}
+            /></h2>
+            <h3 className="faq-title"><FormattedMessage
+                id="extensions.browserCompatibilityTitle"
+                values={sharedValues}
+            /></h3>
+            <p><FormattedMessage
+                id="extensions.browserCompatibilityText"
+                values={sharedValues}
+            /></p>
+            {props.children}
+            {!props.scratchLinkOnly && (
+                <React.Fragment>
+                    <h3 className="faq-title"><FormattedMessage
+                        id="bluetooth.enableLocationServicesTitle"
+                        values={sharedValues}
+                    /></h3>
+                    <p><FormattedMessage
+                        id="bluetooth.enableLocationServicesText"
+                        values={sharedValues}
+                    /></p>
+                </React.Fragment>
+            )}
+        </ExtensionSection>
+    );
+};
+
+ExtensionTroubleshooting.propTypes = {
+    children: PropTypes.node,
+    deviceName: PropTypes.string.isRequired,
+    deviceNameShort: PropTypes.string,
+    scratchLinkOnly: PropTypes.bool
+};
+
+module.exports = ExtensionTroubleshooting;

src/l10n.json

@@ -423,6 +423,19 @@
     "helpWidget.submit": "Send",
     "helpWidget.confirmation": "Thank you for your message.",
 
+    "extensions.troubleshootingTitle": "Troubleshooting",
+    "extensions.browserCompatibilityTitle": "Make sure your browser is compatible with Scratch Link",
+    "extensions.browserCompatibilityText": "Scratch Link 1.4 is not compatible with Safari. If you use macOS, please use another supported browser, such as Chrome or Firefox.",
+    "extensions.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
+    "extensions.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
+    "extensions.checkOsVersionText2": "If you are using macOS 12, please update to macOS 12.3 or newer. Earlier versions of macOS 12 do not work correctly with Scratch Link.",
+    "extensions.winOSVersionLinkText": "Windows",
+    "extensions.macOSVersionLinkText": "Mac OS",
+    "extensions.closeScratchCopiesTitle": "Close other copies of Scratch",
+    "extensions.closeScratchCopiesText": "Only one copy of Scratch can connect with the {deviceName} at a time. If you have Scratch open in other browser tabs, close it and try again.",
+    "extensions.otherComputerConnectedTitle": "Make sure no other computer is connected to your {deviceNameShort}",
+    "extensions.otherComputerConnectedText": "Only one computer can be connected to a {deviceName} at a time. If you have another computer connected to your {deviceName}, disconnect the {deviceName} or close Scratch on that computer and try again.",
+
     "bluetooth.enableLocationServicesTitle": "Make sure you have location services enabled on Chromebooks or Android tablets",
     "bluetooth.enableLocationServicesText": "Bluetooth can be used to provide location data to the app. In addition to granting the Scratch App permission to access location, location must be enabled in your general device settings. Search for 'Location' in your settings, and make sure it is on. On Chromebooks search for 'Location' in the Google Play Store Android preferences."
 }

src/views/boost/boost.jsx

@@ -15,6 +15,7 @@ const ExtensionLanding = require('../../components/extension-landing/extension-l
 const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
 const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
+const ExtensionTroubleshooting = require('../../components/extension-landing/extension-troubleshooting.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
 const InstallScratch = require('../../components/install-scratch/install-scratch.jsx');
 const ProjectCard = require('../../components/extension-landing/project-card.jsx');
@@ -191,8 +192,7 @@ class Boost extends ExtensionLanding {
                         />
                     </Steps>
                 </ExtensionSection>
-                <ExtensionSection className="faq">
+                <ExtensionTroubleshooting deviceName="BOOST">
-                    <h2><FormattedMessage id="boost.troubleshootingTitle" /></h2>
                     {isDownloaded(this.state.OS) && (
                         <React.Fragment>
                             <h3 className="faq-title"><FormattedMessage id="boost.updateScratchLinkTitle" /></h3>
@@ -225,6 +225,7 @@ class Boost extends ExtensionLanding {
                                     }}
                                 />
                             </p>
+                            <p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
                         </React.Fragment>
                     )}
                     <h3 className="faq-title"><FormattedMessage id="boost.closeScratchCopiesTitle" /></h3>
@@ -235,11 +236,7 @@ class Boost extends ExtensionLanding {
                     <p>
                         <FormattedMessage id="boost.otherComputerConnectedText" />
                     </p>
-                    <h3 className="faq-title"><FormattedMessage id="bluetooth.enableLocationServicesTitle" /></h3>
+                </ExtensionTroubleshooting>
-                    <p>
-                        <FormattedMessage id="bluetooth.enableLocationServicesText" />
-                    </p>
-                </ExtensionSection>
             </div>
         );
     }

src/views/ev3/ev3.jsx

@@ -26,6 +26,7 @@ const Step = require('../../components/steps/step.jsx');
 
 const OS_ENUM = require('../../lib/os-enum.js');
 const {isDownloaded, isFromGooglePlay} = require('../../components/install-scratch/install-util.js');
+const ExtensionTroubleshooting = require('../../components/extension-landing/extension-troubleshooting.jsx');
 
 require('../../components/extension-landing/extension-landing.scss');
 require('./ev3.scss');
@@ -279,8 +280,10 @@ class EV3 extends ExtensionLanding {
                         />
                     </Steps>
                 </ExtensionSection>
-                <ExtensionSection className="faq">
+                <ExtensionTroubleshooting
-                    <h2><FormattedMessage id="ev3.troubleshootingTitle" /></h2>
+                    deviceName="EV3"
+                    scratchLinkOnly // EV3 is Bluetooth Classic so it's only available through Scratch Link
+                >
                     {isDownloaded(this.state.OS) && (
                         <React.Fragment>
                             <h3 className="faq-title"><FormattedMessage id="ev3.checkOSVersionTitle" /></h3>
@@ -309,6 +312,7 @@ class EV3 extends ExtensionLanding {
                                     }}
                                 />
                             </p>
+                            <p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
                         </React.Fragment>
                     )}
                     <h3 className="faq-title"><FormattedMessage id="ev3.makeSurePairedTitle" /></h3>
@@ -357,11 +361,7 @@ class EV3 extends ExtensionLanding {
                             }}
                         />
                     </p>
-                    <h3 className="faq-title"><FormattedMessage id="bluetooth.enableLocationServicesTitle" /></h3>
+                </ExtensionTroubleshooting>
-                    <p>
-                        <FormattedMessage id="bluetooth.enableLocationServicesText" />
-                    </p>
-                </ExtensionSection>
             </div>
         );
     }

src/views/gdxfor/gdxfor.jsx

@@ -15,6 +15,7 @@ const ExtensionLanding = require('../../components/extension-landing/extension-l
 const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
 const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
+const ExtensionTroubleshooting = require('../../components/extension-landing/extension-troubleshooting.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
 const InstallScratch = require('../../components/install-scratch/install-scratch.jsx');
 const ProjectCard = require('../../components/extension-landing/project-card.jsx');
@@ -204,8 +205,10 @@ class GdxFor extends ExtensionLanding {
                         />
                     </Steps>
                 </ExtensionSection>
-                <ExtensionSection className="faq">
+                <ExtensionTroubleshooting
-                    <h2><FormattedMessage id="gdxfor.troubleshootingTitle" /></h2>
+                    deviceName={this.props.intl.formatMessage({id: 'gdxfor.deviceName'})}
+                    deviceNameShort={this.props.intl.formatMessage({id: 'gdxfor.deviceNameShort'})}
+                >
                     {isDownloaded(this.state.OS) && (
                         <React.Fragment>
                             <h3 className="faq-title"><FormattedMessage id="gdxfor.checkOSVersionTitle" /></h3>
@@ -234,6 +237,7 @@ class GdxFor extends ExtensionLanding {
                                     }}
                                 />
                             </p>
+                            <p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
                         </React.Fragment>
                     )}
                     <h3 className="faq-title"><FormattedMessage id="gdxfor.closeScratchCopiesTitle" /></h3>
@@ -244,11 +248,7 @@ class GdxFor extends ExtensionLanding {
                     <p>
                         <FormattedMessage id="gdxfor.otherComputerConnectedText" />
                     </p>
-                    <h3 className="faq-title"><FormattedMessage id="bluetooth.enableLocationServicesTitle" /></h3>
+                </ExtensionTroubleshooting>
-                    <p>
-                        <FormattedMessage id="bluetooth.enableLocationServicesText" />
-                    </p>
-                </ExtensionSection>
             </div>
         );
     }

src/views/gdxfor/l10n.json

@@ -1,4 +1,6 @@
 {
+    "gdxfor.deviceName": "Force and Acceleration sensor",
+    "gdxfor.deviceNameShort": "sensor",
     "gdxfor.headerText": "The {gdxforLink} sensor is a powerful scientific tool that unlocks new ways to connect the physical world to your Scratch projects. Measure force as you push and pull, and interact by shaking, spinning, free falling and more.",
     "gdxfor.gettingStarted": "Getting Started",
     "gdxfor.connectingGdxfor": "Connecting Force & Acceleration sensor to Scratch",

src/views/microbit/microbit.jsx

@@ -16,6 +16,7 @@ const ExtensionLanding = require('../../components/extension-landing/extension-l
 const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
 const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
+const ExtensionTroubleshooting = require('../../components/extension-landing/extension-troubleshooting.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
 const InstallScratch = require('../../components/install-scratch/install-scratch.jsx');
 const ProjectCard = require('../../components/extension-landing/project-card.jsx');
@@ -318,8 +319,7 @@ class MicroBit extends ExtensionLanding {
                     </FlexRow>
                     <hr />
                 </ExtensionSection>
-                <ExtensionSection className="faq">
+                <ExtensionTroubleshooting deviceName="micro:bit">
-                    <h2><FormattedMessage id="microbit.troubleshootingTitle" /></h2>
                     {isDownloaded(this.state.OS) && (
                         <React.Fragment>
                             <h3 className="faq-title"><FormattedMessage id="microbit.checkOSVersionTitle" /></h3>
@@ -348,6 +348,7 @@ class MicroBit extends ExtensionLanding {
                                     }}
                                 />
                             </p>
+                            <p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
                         </React.Fragment>
                     )}
                     <h3 className="faq-title"><FormattedMessage id="microbit.closeScratchCopiesTitle" /></h3>
@@ -362,11 +363,7 @@ class MicroBit extends ExtensionLanding {
                     <p>
                         <FormattedMessage id="microbit.resetButtonText" />
                     </p>
-                    <h3 className="faq-title"><FormattedMessage id="bluetooth.enableLocationServicesTitle" /></h3>
+                </ExtensionTroubleshooting>
-                    <p>
-                        <FormattedMessage id="bluetooth.enableLocationServicesText" />
-                    </p>
-                </ExtensionSection>
             </div>
         );
     }

src/views/wedo2/wedo2.jsx

@@ -16,6 +16,7 @@ const ExtensionHeader = require('../../components/extension-landing/extension-he
 const ExtensionVideo = require('../../components/extension-landing/extension-video.jsx');
 const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
+const ExtensionTroubleshooting = require('../../components/extension-landing/extension-troubleshooting.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
 const InstallScratch = require('../../components/install-scratch/install-scratch.jsx');
 const ProjectCard = require('../../components/extension-landing/project-card.jsx');
@@ -190,8 +191,7 @@ class Wedo2 extends ExtensionLanding {
                         />
                     </Steps>
                 </ExtensionSection>
-                <ExtensionSection className="faq">
+                <ExtensionTroubleshooting deviceName="WeDo 2.0">
-                    <h2><FormattedMessage id="wedo2.troubleshootingTitle" /></h2>
                     {isDownloaded(this.state.OS) && (
                         <React.Fragment>
                             <h3 className="faq-title"><FormattedMessage id="wedo2.checkOSVersionTitle" /></h3>
@@ -220,6 +220,7 @@ class Wedo2 extends ExtensionLanding {
                                     }}
                                 />
                             </p>
+                            <p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
                         </React.Fragment>
                     )}
                     <h3 className="faq-title"><FormattedMessage id="wedo2.closeScratchCopiesTitle" /></h3>
@@ -251,11 +252,7 @@ class Wedo2 extends ExtensionLanding {
                             }}
                         />
                     </p>
-                    <h3 className="faq-title"><FormattedMessage id="bluetooth.enableLocationServicesTitle" /></h3>
+                </ExtensionTroubleshooting>
-                    <p>
-                        <FormattedMessage id="bluetooth.enableLocationServicesText" />
-                    </p>
-                </ExtensionSection>
             </div>
         );
     }