Redirect to CreateAI dialog (#605)

Task (private): https://microbit-global.monday.com/boards/1125389526/pulses/2022067347

- Show redirect to CreateAI dialog to everyone before cookie dialog
- Remove "Are you a UK primary school teacher" redirect dialog
- Update `maint-nextgen` branch to be `STAGING`

Author: microbit-grace

bin/print-ci-env.cjs

@@ -2,7 +2,7 @@
 
 const ref = process.env.GITHUB_REF;
 let stage;
-if (ref === 'refs/heads/main') {
+if (ref === 'refs/heads/maint-nextgen') {
   stage = 'STAGING';
 } else if (ref.startsWith('refs/tags/v')) {
   stage = 'PRODUCTION';

src/App.svelte

@@ -9,12 +9,11 @@
   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 AppVersionRedirectDialog from './components/AppVersionRedirectDialog.svelte';
+  import CreateAiVersionRedirectDialog from './components/CreateAiVersionRedirectDialog.svelte';
   import Router from './router/Router.svelte';
   import ControlBar from './components/control-bar/ControlBar.svelte';
   import { t } from './i18n';
@@ -33,17 +32,8 @@
     connectionDialogState,
   } from './script/stores/connectDialogStore';
   import { isLoading } from 'svelte-i18n';
-  import { fetchBrowserInfo } from './script/utils/api';
-  import { get } from 'svelte/store';
 
-  let isPotentiallyNonNextGenUser: boolean = false;
   onMount(async () => {
-    if (!get(hasSeenAppVersionRedirectDialog)) {
-      const { country } = await fetchBrowserInfo();
-      const nextGenAvailableCountries = ['GB', 'JE', 'IM', 'GG'];
-      isPotentiallyNonNextGenUser = !nextGenAvailableCountries.includes(country || '');
-    }
-
     const { bluetooth, usb } = $compatibility;
     // Value must switch from false to true after mount to trigger dialog transition
     isCompatibilityWarningDialogOpen.set(!bluetooth && !usb);
@@ -73,12 +63,12 @@
       <div class="h-full w-full m-0 relative flex">
         <OverlayView />
         <!-- Wait for consent dialog to avoid a clash -->
+        {#if !$isCompatibilityWarningDialogOpen}
+          <CreateAiVersionRedirectDialog />
+        {/if}
         {#if $consent}
           <CompatibilityWarningDialog />
         {/if}
-        {#if $consent && !$isCompatibilityWarningDialogOpen && isPotentiallyNonNextGenUser}
-          <AppVersionRedirectDialog />
-        {/if}
         <div class="w-full flex flex-col bg-backgrounddark">
           <ControlBar>
             <div class="flex items-center divide-x h-full">

src/components/AppVersionRedirectDialog.svelte

@@ -0,0 +1,55 @@
+<!--
+  (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 StandardDialog from './dialogs/StandardDialog.svelte';
+  import StandardButton from './StandardButton.svelte';
+  import createAiTestingPage from '../imgs/createai_testing_page.png';
+  import { initialShowConsent } from '../script/stores/complianceStore';
+
+  let isOpen = true;
+
+  const createAIVersionRedirect = () => {
+    window.location.href = 'https://createai.microbit.org/';
+  };
+
+  const onClose = () => {
+    isOpen = false;
+    initialShowConsent();
+  };
+</script>
+
+<StandardDialog
+  {isOpen}
+  hasCloseButton
+  closeOnOutsideClick={false}
+  closeOnEscape={false}
+  class="w-110 space-y-5"
+  {onClose}>
+  <svelte:fragment slot="heading">
+    {$t('popup.createAIVersionRedirect.header')}
+  </svelte:fragment>
+  <svelte:fragment slot="body">
+    <div class="space-y-5">
+      <img src={createAiTestingPage} alt="" />
+      <div class="space-y-2">
+        <p>{$t('popup.createAIVersionRedirect.explain1')}</p>
+        <p>{$t('popup.createAIVersionRedirect.explain2')}</p>
+      </div>
+      <div class="flex flex-col justify-end space-y-2">
+        <StandardButton
+          type="primary"
+          size="normal"
+          class="w-170px"
+          onClick={createAIVersionRedirect}
+          >{$t('popup.createAIVersionRedirect.button.redirect')}</StandardButton>
+        <StandardButton onClick={onClose} type="secondary" size="normal" class="w-170px"
+          >{$t('popup.createAIVersionRedirect.button.stay')}</StandardButton>
+      </div>
+    </div>
+  </svelte:fragment>
+</StandardDialog>

src/components/CreateAiVersionRedirectDialog.svelte

@@ -27,6 +27,10 @@
   };
 
   const onCloseDialog = () => {
+    if (!isOpen) {
+      // Don't close dialog if already closed.
+      return;
+    }
     onClose();
     if (finalFocusRef) {
       (finalFocusRef as HTMLElement).focus();

src/components/dialogs/StandardDialog.svelte

@@ -285,11 +285,11 @@
   "popup.outdatedmicrobit.button.update": "Update now",
   "popup.outdatedmicrobit.button.update.mkcd": "Open MakeCode",
 
-  "popup.appVersionRedirect.header": "Are you a UK* primary school teacher?",
-  "popup.appVersionRedirect.explain": "If you are not a UK* primary school teacher, you will be redirected to our prototype version of this tool. This version is only for the UK's BBC micro:bit playground survey.",
-  "popup.appVersionRedirect.button.redirect": "I'm not a UK primary school teacher",
-  "popup.appVersionRedirect.button.stay": "I'm a UK primary school teacher",
-  "popup.appVersionRedirect.uk": "*includes crown dependencies Jersey, Guernsey and the Isle of Man",
+  "popup.createAIVersionRedirect.header": "Try micro:bit CreateAI",
+  "popup.createAIVersionRedirect.explain1": "micro:bit CreateAI is our updated version of the micro:bit machine learning tool.",
+  "popup.createAIVersionRedirect.explain2": "Using CreateAI you can train and test a machine learning model then use it in a Microsoft MakeCode program on your micro:bit.",
+  "popup.createAIVersionRedirect.button.redirect": "Try CreateAI",
+  "popup.createAIVersionRedirect.button.stay": "Not now",
 
   "arrowIconRight.altText": "arrow pointing right",
   "arrowIconDown.altText": "arrow pointing down",

src/imgs/createai_testing_page.png

@@ -68,6 +68,14 @@ function showConsent(
   w.commonConsent?.show({ userTriggered, config });
 }
 
+export function initialShowConsent() {
+  if (w.commonConsent) {
+    showConsent();
+  } else {
+    w.addEventListener('consentinit', showConsent);
+  }
+}
+
 export function manageCookies() {
   showConsent({ userTriggered: true });
 }
@@ -79,8 +87,3 @@ const updateListener = (event: CustomEvent<CookieConsent>) => {
   consent.set(event.detail);
 };
 w.addEventListener('consentchange', updateListener);
-if (w.commonConsent) {
-  showConsent();
-} else {
-  w.addEventListener('consentinit', showConsent);
-}

src/messages/ui.en.json

@@ -43,11 +43,6 @@ if (compatibilityResult.bluetooth) {
 
 export const isCompatibilityWarningDialogOpen = writable<boolean>(false);
 
-export const hasSeenAppVersionRedirectDialog = persistantWritable<boolean>(
-  'hasSeenAppVersionRedirectDialog',
-  false,
-);
-
 export enum ModelView {
   TILE,
   STACK,