[WIP] Connection flow changes for prototype version (#245)

- Remove wearing instructions dialog from connection flow
- Default to Web Bluetooth connection
- Update micro:bit V1 unsupported dialog
- Add persistent visual cue for prototype version
- Add link for ideas on connection micro:bit to wrist or object

Author: microbit-robert

src/App.svelte

@@ -5,36 +5,37 @@
  -->
 
 <script lang="ts">
-  import OverlayView from './views/OverlayView.svelte';
-  import PageContentView from './views/PageContentView.svelte';
-  import {
-    compatibility,
-    hasSeenAppVersionRedirectDialog,
-    isCompatibilityWarningDialogOpen,
-  } from './script/stores/uiStore';
-  import IncompatiblePlatformView from './views/IncompatiblePlatformView.svelte';
-  import CompatibilityWarningDialog from './components/CompatibilityWarningDialog.svelte';
+  import { onMount } from 'svelte';
+  import { isLoading } from 'svelte-i18n';
+  import { get } from 'svelte/store';
+  import HomeIcon from 'virtual:icons/ri/home-2-line';
   import AppVersionRedirectDialog from './components/AppVersionRedirectDialog.svelte';
-  import Router from './router/Router.svelte';
+  import CompatibilityWarningDialog from './components/CompatibilityWarningDialog.svelte';
+  import PrototypeVersionWarning from './components/PrototypeVersionWarning.svelte';
+  import ConnectDialogContainer from './components/connection-prompt/ConnectDialogContainer.svelte';
   import ControlBar from './components/control-bar/ControlBar.svelte';
-  import { t } from './i18n';
-  import { consent } from './script/stores/complianceStore';
-  import microbitLogoImage from './imgs/microbit-logo.svg';
-  import appNameImage from './imgs/app-name.svg';
   import HelpMenu from './components/control-bar/control-bar-items/HelpMenu.svelte';
   import SettingsMenu from './components/control-bar/control-bar-items/SettingsMenu.svelte';
-  import { onMount } from 'svelte';
-  import ConnectDialogContainer from './components/connection-prompt/ConnectDialogContainer.svelte';
+  import { t } from './i18n';
+  import appNameImage from './imgs/app-name.svg';
+  import microbitLogoImage from './imgs/microbit-logo.svg';
+  import Router from './router/Router.svelte';
   import { Paths, currentPath, getTitle, navigate } from './router/paths';
-  import HomeIcon from 'virtual:icons/ri/home-2-line';
-  import { btSelectMicrobitDialogOnLoad } from './script/stores/connectionStore';
+  import { consent } from './script/stores/complianceStore';
   import {
     ConnectDialogStates,
     connectionDialogState,
   } from './script/stores/connectDialogStore';
-  import { isLoading } from 'svelte-i18n';
+  import { btSelectMicrobitDialogOnLoad } from './script/stores/connectionStore';
+  import {
+    compatibility,
+    hasSeenAppVersionRedirectDialog,
+    isCompatibilityWarningDialogOpen,
+  } from './script/stores/uiStore';
   import { fetchBrowserInfo } from './script/utils/api';
-  import { get } from 'svelte/store';
+  import IncompatiblePlatformView from './views/IncompatiblePlatformView.svelte';
+  import OverlayView from './views/OverlayView.svelte';
+  import PageContentView from './views/PageContentView.svelte';
 
   let isPotentiallyNextGenUser: boolean = false;
   onMount(async () => {
@@ -104,6 +105,7 @@
               <HelpMenu />
             </div>
           </ControlBar>
+          <PrototypeVersionWarning />
 
           <div class="relative flex-1 flex-row">
             <PageContentView />

src/components/PrototypeVersionWarning.svelte

@@ -0,0 +1,16 @@
+<!--
+  (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
+
+  SPDX-License-Identifier: MIT
+ -->
+
+<script lang="ts">
+  import { t } from '../i18n';
+  import WarningIcon from 'virtual:icons/ri/error-warning-line';
+</script>
+
+<div
+  class="bg-red-600 text-white px-10 py-2 space-x-5 flex items-center sticky top-16 z-5">
+  <WarningIcon class="text-white text-2xl" />
+  <p class="font-bold">{$t('prototype.warning')}</p>
+</div>

src/components/UnsupportedMicrobitWarningDialog.svelte

@@ -6,6 +6,7 @@
 
 <script lang="ts">
   import { t } from '../i18n';
+  import { compatibility } from '../script/stores/uiStore';
   import DialogHeading from './DialogHeading.svelte';
   import HtmlFormattedMessage, { linkWithProps } from './HtmlFormattedMessage.svelte';
   import StandardButton from './StandardButton.svelte';
@@ -18,24 +19,13 @@
     target: '_blank',
     rel: 'noopener',
   });
-  const linkToBluetoothFlowId = 'link-to-bluetooth';
-  const linkToBluetoothFlow = linkWithProps(
-    {
-      id: linkToBluetoothFlowId,
-    },
-    { tag: 'button' },
-  );
-  // The elements in translated strings don't support Svelte event handlers
-  // so we wire it up ourselves.
-  const wireLinkToBluetoothFlow = (node: Element) => {
-    const link = node.querySelector('#' + linkToBluetoothFlowId);
-    link?.addEventListener('click', onStartBluetoothClick);
-    return {
-      destroy() {
-        link?.removeEventListener('click', onStartBluetoothClick);
-      },
-    };
-  };
+  const linkWithPropsForMicrobitBluetoothSupport = linkWithProps({
+    // TODO: Replace with real support link.
+    href: 'https://support.microbit.org/support/home',
+    target: '_blank',
+    rel: 'noopener',
+  });
+  const { bluetooth } = $compatibility;
 </script>
 
 <div class="w-175">
@@ -51,21 +41,30 @@
             },
           }} />
       </p>
-      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-      <p use:wireLinkToBluetoothFlow>
-        <HtmlFormattedMessage
-          id={$t('connectMB.unsupportedMicrobit.advice')}
-          options={{
-            values: {
-              link1: linkToBluetoothFlow,
-              link2: linkWithPropsForMicrobitVersionSupport,
-            },
-          }} />
-      </p>
+      {#if bluetooth}
+        <p>
+          {$t('connectMB.unsupportedMicrobit.withBluetooth')}
+        </p>
+      {:else}
+        <p>
+          <HtmlFormattedMessage
+            id={$t('connectMB.unsupportedMicrobit.withoutBluetooth')}
+            options={{
+              values: {
+                link: linkWithPropsForMicrobitBluetoothSupport,
+              },
+            }} />
+        </p>
+      {/if}
     </div>
     <div class="flex justify-end">
-      <StandardButton onClick={onClose} type="primary"
-        >{$t('actions.close')}</StandardButton>
+      {#if bluetooth}
+        <StandardButton onClick={onStartBluetoothClick} type="primary"
+          >{$t('connectMB.unsupportedMicrobit.ctaWithBluetooth')}</StandardButton>
+      {:else}
+        <StandardButton onClick={onClose} type="primary"
+          >{$t('actions.close')}</StandardButton>
+      {/if}
     </div>
   </div>
 </div>

src/components/WhatYouWillNeedDialog.svelte

@@ -19,7 +19,6 @@
 
   export let items: Item[];
   export let headingId: string;
-  export let subtitleId: string | undefined = undefined;
   export let switchTextId: string;
   export let onSwitchClick: (() => void) | undefined;
   export let onNextClick: () => void;
@@ -31,9 +30,6 @@
     {#if $state.reconnectState.reconnectFailed}
       <span>{$t('reconnectFailed.subtitle')}</span>
     {/if}
-    {#if subtitleId}
-      {$t(subtitleId)}
-    {/if}
   </p>
   <div class="inline-grid grid-cols-{items.length} gap-16 py-13 px-10">
     {#each items as item}

src/components/connection-prompt/ConnectDialogContainer.svelte

@@ -26,7 +26,6 @@
   } from '../../script/stores/connectionStore';
   import { compatibility, state } from '../../script/stores/uiStore';
   import StandardDialog from '../dialogs/StandardDialog.svelte';
-  import MicrobitWearingInstructionDialog from './MicrobitWearingInstructionDialog.svelte';
   import WebBluetoothTryAgain from './WebBluetoothTryAgain.svelte';
   import WebUsbTryAgain, { USBTryAgainType } from './WebUsbTryAgain.svelte';
   import BluetoothConnectDialog from './bluetooth/BluetoothConnectDialog.svelte';
@@ -246,7 +245,7 @@
             }
           : undefined}
         onNextClick={() => {
-          $connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP;
+          $connectionDialogState.connectionState = ConnectDialogStates.CONNECT_CABLE;
           flashStage = 'radio-remote';
         }} />
     {:else if $connectionDialogState.connectionState === ConnectDialogStates.START_BLUETOOTH}
@@ -258,26 +257,7 @@
             }
           : undefined}
         onNextClick={() =>
-          ($connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP)} />
-    {:else if $connectionDialogState.connectionState === ConnectDialogStates.WEARING_SETUP}
-      {#if flashStage === 'bluetooth'}
-        <MicrobitWearingInstructionDialog
-          {flashStage}
-          onBackClick={() =>
-            ($connectionDialogState.connectionState =
-              ConnectDialogStates.START_BLUETOOTH)}
-          onNextClick={() =>
-            ($connectionDialogState.connectionState =
-              ConnectDialogStates.CONNECT_CABLE)} />
-      {:else if flashStage === 'radio-remote'}
-        <MicrobitWearingInstructionDialog
-          {flashStage}
-          onBackClick={() =>
-            ($connectionDialogState.connectionState = ConnectDialogStates.START_RADIO)}
-          onNextClick={() =>
-            ($connectionDialogState.connectionState =
-              ConnectDialogStates.CONNECT_CABLE)} />
-      {/if}
+          ($connectionDialogState.connectionState = ConnectDialogStates.CONNECT_CABLE)} />
     {:else if $connectionDialogState.connectionState === ConnectDialogStates.CONNECT_CABLE}
       {#if flashStage === 'bluetooth'}
         <ConnectCableDialog
@@ -287,7 +267,8 @@
             ($connectionDialogState.connectionState =
               ConnectDialogStates.CONNECT_BATTERY)}
           onBackClick={() =>
-            ($connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP)}
+            ($connectionDialogState.connectionState =
+              ConnectDialogStates.START_BLUETOOTH)}
           onNextClick={() =>
             usb
               ? ($connectionDialogState.connectionState =
@@ -306,7 +287,7 @@
               }
             : undefined}
           onBackClick={() =>
-            ($connectionDialogState.connectionState = ConnectDialogStates.WEARING_SETUP)}
+            ($connectionDialogState.connectionState = ConnectDialogStates.START_RADIO)}
           onNextClick={() => {
             $connectionDialogState.connectionState =
               ConnectDialogStates.CONNECT_TUTORIAL_USB;

src/components/connection-prompt/MicrobitWearingInstructionDialog.svelte

@@ -6,20 +6,34 @@
 
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
+  import ExternalLinkIcon from 'virtual:icons/ri/external-link-line';
   import { t } from '../../../i18n';
   import microbitConnectedImage from '../../../imgs/stylised-microbit-connected.svg';
   import DialogHeading from '../../DialogHeading.svelte';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
+
+  //TODO: Replace with real support link.
+  const href = 'https://support.microbit.org/support/home';
 </script>
 
 <div class="w-175">
   <DialogHeading>
     {$t('connectMB.connectBattery.heading')}
   </DialogHeading>
   <div class="space-y-5">
-    <p>{$t('connectMB.connectBattery.subtitle')}</p>
+    <p>
+      {$t('connectMB.connectBattery.subtitle')}
+      <a
+        class="inline mr-auto gap-x-1 items-center text-link outline-none focus-visible:ring-4 focus-visible:ring-offset-1 focus-visible:ring-ring"
+        {href}
+        target="_blank"
+        rel="noopener">
+        {$t('connectMB.connectBattery.link')}
+        <ExternalLinkIcon class="inline transform -translate-y-0.25" />
+      </a>
+    </p>
     <img src={microbitConnectedImage} alt="" class="w-68 h-229px m-auto" />
   </div>
 </div>

src/components/connection-prompt/bluetooth/ConnectBatteryDialog.svelte

@@ -47,7 +47,6 @@
     : usb
       ? 'connectMB.bluetoothStart.heading'
       : 'connectMB.radioStart.heading'}
-  subtitleId="connectMB.bluetoothStart.subtitle"
   switchTextId="connectMB.bluetoothStart.switchRadio"
   onSwitchClick={onStartRadioClick}
   {onNextClick} />