firmware/restoreOfficialDialog: add new dialog

Author: dlech

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Added multi-step firmware flashing dialog.
 - Added support for flashing firmware via USB DFU ([support#659]).
 - Added an interactive introductory tour of the app.
+- Added restore official LEGO firmware dialog.
 
 ### Changed
 - Updated dependencies.

src/app/constants.ts

@@ -44,6 +44,11 @@ export const pybricksUsbDfuWindowsDriverInstallUrl =
 export const pybricksUsbLinuxUdevRulesUrl =
     'https://github.com/pybricks/support/discussions/688#discussioncomment-3239099';
 
+export const pybricksBleFirmwareRestoreVideoUrl =
+    'https://pybricks.com/install/technic-boost-city/#restoring-the-original-firmware';
+
+export const pybricksDfuRestoreUrl = 'https://dfu.pybricks.com';
+
 /** Pybricks copyright statement. */
 export const pybricksCopyright = 'Copyright (c) 2020-2022 The Pybricks Authors';
 

src/firmware/actions.ts

@@ -395,24 +395,3 @@ export const firmwareDidInstallPybricks = createAction(() => ({
 export const firmwareDidFailToInstallPybricks = createAction(() => ({
     type: 'firmware.action.didFailToInstallPybricks',
 }));
-
-/**
- * Action that triggers the restore LEGO firmware saga.
- */
-export const firmwareRestoreLego = createAction(() => ({
-    type: 'firmware.action.restoreLego',
-}));
-
-/**
- * Action that indicates {@link firmwareRestoreLego} succeeded.
- */
-export const firmwareDidRestoreLego = createAction(() => ({
-    type: 'firmware.action.didRestoreLego',
-}));
-
-/**
- * Action that indicates {@link firmwareRestoreLego} failed.
- */
-export const firmwareDidFailToRestoreLego = createAction(() => ({
-    type: 'firmware.action.didFailToRestoreLego',
-}));

src/firmware/reducers.test.ts

@@ -21,6 +21,9 @@ test('initial state', () => {
             "isOpen": false,
           },
           "progress": null,
+          "restoreOfficialDialog": Object {
+            "isOpen": false,
+          },
         }
     `);
 });

src/firmware/reducers.ts

@@ -4,6 +4,7 @@
 import { Reducer, combineReducers } from 'redux';
 import { didFailToFinish, didFinish, didProgress, didStart } from './actions';
 import installPybricksDialog from './installPybricksDialog/reducers';
+import restoreOfficialDialog from './restoreOfficialDialog/reducers';
 
 const flashing: Reducer<boolean> = (state = false, action) => {
     if (didStart.matches(action)) {
@@ -29,4 +30,9 @@ const progress: Reducer<number | null> = (state = null, action) => {
     return state;
 };
 
-export default combineReducers({ installPybricksDialog, flashing, progress });
+export default combineReducers({
+    installPybricksDialog,
+    restoreOfficialDialog,
+    flashing,
+    progress,
+});

src/firmware/restoreOfficialDialog/RestoreOfficialDialog.tsx

@@ -0,0 +1,54 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { Classes, Dialog } from '@blueprintjs/core';
+import classNames from 'classnames';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import {
+    pybricksBleFirmwareRestoreVideoUrl,
+    pybricksDfuRestoreUrl,
+} from '../../app/constants';
+import { useSelector } from '../../reducers';
+import ExternalLinkIcon from '../../utils/ExternalLinkIcon';
+import { firmwareRestoreOfficialDialogHide } from './actions';
+import { useI18n } from './i18n';
+
+const RestoreOfficialDialog: React.VoidFunctionComponent = () => {
+    const { isOpen } = useSelector((s) => s.firmware.restoreOfficialDialog);
+    const dispatch = useDispatch();
+    const i18n = useI18n();
+
+    return (
+        <Dialog
+            isOpen={isOpen}
+            title={i18n.translate('title')}
+            onClose={() => dispatch(firmwareRestoreOfficialDialogHide())}
+        >
+            <div className={classNames(Classes.DIALOG_BODY, Classes.RUNNING_TEXT)}>
+                <h4>{i18n.translate('poweredUpHubs.title')}</h4>
+                <p>{i18n.translate('poweredUpHubs.message')}</p>
+                <p>
+                    <a
+                        href={pybricksBleFirmwareRestoreVideoUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        {i18n.translate('poweredUpHubs.action')}
+                    </a>
+                    <ExternalLinkIcon />
+                </p>
+                <h4>{i18n.translate('spikeHubs.title')}</h4>
+                <p>{i18n.translate('spikeHubs.message')}</p>
+                <p>
+                    <a href={pybricksDfuRestoreUrl} target="_blank" rel="noreferrer">
+                        {i18n.translate('spikeHubs.action')}
+                    </a>
+                    <ExternalLinkIcon />
+                </p>
+            </div>
+        </Dialog>
+    );
+};
+
+export default RestoreOfficialDialog;

src/firmware/restoreOfficialDialog/actions.ts

@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+export {
+    show as firmwareRestoreOfficialDialogShow,
+    hide as firmwareRestoreOfficialDialogHide,
+} from './redux';

src/firmware/restoreOfficialDialog/i18n.ts

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../../i18n';
+import type translations from './translations/en.json';
+
+export function useI18n(): TypedI18n<typeof translations> {
+    // istanbul ignore next: babel-loader rewrites this line
+    const [i18n] = useShopifyI18n();
+    return i18n;
+}

src/firmware/restoreOfficialDialog/reducers.ts

@@ -0,0 +1,6 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import reducer from './redux';
+
+export default reducer;

src/firmware/restoreOfficialDialog/redux.ts

@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { createSlice } from '@reduxjs/toolkit';
+
+type State = {
+    isOpen: boolean;
+};
+
+const initialState: State = {
+    isOpen: false,
+};
+
+const slice = createSlice({
+    name: 'restoreOfficialDialog',
+    initialState,
+    reducers: {
+        show(state) {
+            state.isOpen = true;
+        },
+        hide(state) {
+            state.isOpen = false;
+        },
+    },
+});
+
+export const { show, hide } = slice.actions;
+export default slice.reducer;