Move support links to the theme (#354)

The content isn't parameterised by brand/product name.

Author: microbit-matt-hillsdon

.github/workflows/build.yml

@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/ml-trainer-microbit@0.2.0-dev.8 @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
+      - run: npm install --no-save @microbit-foundation/ml-trainer-microbit@0.2.0-dev.9 @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/components/AppLogo.tsx

@@ -20,7 +20,7 @@ const AppLogo = ({
     >
       {OrgLogo && (
         <>
-          <OrgLogo />
+          <OrgLogo color="white" />
           <Divider
             aria-hidden
             borderColor={color}

src/components/ConnectBatteryDialog.tsx

@@ -1,15 +1,17 @@
 import { Icon, Image, Link, Text, VStack } from "@chakra-ui/react";
+import { RiExternalLinkLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
+import { useDeployment } from "../deployment";
 import microbitConnectedImage from "../images/stylised-microbit-connected.svg";
 import ConnectContainerDialog, {
   ConnectContainerDialogProps,
 } from "./ConnectContainerDialog";
-import { RiExternalLinkLine } from "react-icons/ri";
 
 export interface ConnectBatteryDialogProps
   extends Omit<ConnectContainerDialogProps, "children" | "headingId"> {}
 
 const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
+  const { supportLinks } = useDeployment();
   return (
     <ConnectContainerDialog
       headingId="connectMB.connectBattery.heading"
@@ -20,8 +22,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
           <FormattedMessage id="connectMB.connectBattery.subtitle" />
           <Link
             color="brand.600"
-            //TODO: Replace with real support link.
-            href="https://support.microbit.org/support/home"
+            href={supportLinks.wearable}
             target="_blank"
             rel="noopener"
             display="flex"

src/components/ConnectErrorDialog.tsx

@@ -19,6 +19,7 @@ import {
   ConnectionFlowType,
 } from "../connection-stage-hooks";
 import ExternalLink from "./ExternalLink";
+import { useDeployment } from "../deployment";
 
 interface ConnectErrorDialogProps {
   isOpen: boolean;
@@ -68,6 +69,7 @@ const ReconnectErrorDialog = ({
   flowType,
   errorStep,
 }: ConnectErrorDialogProps) => {
+  const { supportLinks } = useDeployment();
   const errorTextIdPrefix = errorTextIdPrefixConfig[errorStep];
   const flowTypeText = {
     [ConnectionFlowType.ConnectBluetooth]: "bluetooth",
@@ -116,7 +118,7 @@ const ReconnectErrorDialog = ({
           <ModalFooter justifyContent="space-between" px={0} pb={0}>
             <ExternalLink
               textId="connectMB.troubleshooting"
-              href="https://support.microbit.org/a/solutions/articles/19000157495"
+              href={supportLinks.troubleshooting}
             />
             <HStack gap={5}>
               <Button onClick={onClose} variant="secondary" size="lg">

src/components/HelpMenu.tsx

@@ -64,11 +64,11 @@ const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => {
         />
         <Portal>
           <MenuList>
-            {deployment.supportLink && (
+            {deployment.supportLinks.main && (
               <>
                 <MenuItem
                   as="a"
-                  href={deployment.supportLink}
+                  href={deployment.supportLinks.main}
                   target="_blank"
                   rel="noopener"
                   icon={<RiExternalLinkLine />}

src/components/UnsupportedMicrobitDialog.tsx

@@ -12,6 +12,7 @@ import {
 } from "@chakra-ui/react";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
+import { useDeployment } from "../deployment";
 import Link from "./Link";
 
 interface UnsupportedMicrobitDialogProps {
@@ -27,6 +28,7 @@ const UnsupportedMicrobitDialog = ({
   onStartBluetoothClick,
   isBluetoothSupported,
 }: UnsupportedMicrobitDialogProps) => {
+  const { supportLinks } = useDeployment();
   return (
     <Modal
       closeOnOverlayClick={false}
@@ -71,8 +73,7 @@ const UnsupportedMicrobitDialog = ({
                         link: (chunks: ReactNode) => (
                           <Link
                             color="brand.600"
-                            // TODO: Replace with real support link.
-                            href="https://support.microbit.org/support/home"
+                            href={supportLinks.bluetooth}
                             target="_blank"
                             rel="noopener"
                           >

src/components/WhatYouWillNeedDialog.tsx

@@ -10,6 +10,7 @@ import ConnectContainerDialog, {
   ConnectContainerDialogProps,
 } from "./ConnectContainerDialog";
 import ExternalLink from "./ExternalLink";
+import { useDeployment } from "../deployment";
 
 const itemsConfig = {
   radio: [
@@ -71,6 +72,7 @@ const WhatYouWillNeedDialog = ({
   onLinkClick,
   ...props
 }: WhatYouWillNeedDialogProps) => {
+  const { supportLinks } = useDeployment();
   return (
     <ConnectContainerDialog
       {...props}
@@ -92,7 +94,7 @@ const WhatYouWillNeedDialog = ({
           )}
           {reconnect && (
             <ExternalLink
-              href="https://support.microbit.org/a/solutions/articles/19000157495"
+              href={supportLinks.troubleshooting}
               textId="connectMB.troubleshoot"
             />
           )}

src/deployment/default/index.tsx

@@ -45,6 +45,13 @@ const defaultDeploymentFactory: DeploymentConfigFactory = () => ({
     consentContext: stubConsentContext,
     manageCookies: undefined,
   },
+  supportLinks: {
+    // Just placeholders, these need replacing in a real deployment with branded help content.
+    bluetooth: "https://support.microbit.org",
+    main: "https://support.microbit.org",
+    troubleshooting: "https://support.microbit.org",
+    wearable: "https://support.microbit.org",
+  },
 });
 
 export default defaultDeploymentFactory;

src/deployment/index.ts

@@ -47,7 +47,13 @@ export interface DeploymentConfig {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   chakraTheme: any;
 
-  supportLink?: string;
+  supportLinks: {
+    main: string;
+    troubleshooting: string;
+    bluetooth: string;
+    wearable: string;
+  };
+
   termsOfUseLink?: string;
   privacyPolicyLink?: string;