[CP-2192] I want to be informed about problem with connecting a device (

#1395)

packages/app/src/__deprecated__/renderer/locales/default/en-US.json

@@ -259,10 +259,10 @@
   "module.connecting.criticalBatteryLevelModalDescription": "Charge your Pure, then disconnect and reconnect your phone to use Mudita Center.",
   "module.connecting.criticalBatteryLevelModalHeaderTitle": "MuditaOS",
   "module.connecting.criticalBatteryLevelModalTitle": "The battery in your Pure is flat.",
-  "module.connecting.errorConnectingDescription": "Please restart your device and try again",
-  "module.connecting.errorConnectingModalHeaderTitle": "Connecting Error",
+  "module.connecting.errorConnectingDescription": "If you still have problems connecting to your device, have a look at our {link}",
+  "module.connecting.errorConnectingModalHeaderTitle": "We couldn't connect to your device...",
   "module.connecting.errorConnectingModalSecondaryButton": "Cancel",
-  "module.connecting.errorConnectingModalTitle": "Your device is not responding",
+  "module.connecting.errorConnectingModalTitle": "Make sure your device is plugged in using a USB C cable and <b>restart Mudita Center or your computer</b> to try again",
   "module.connecting.errorSyncModalButton": "Try again",
   "module.connecting.errorSyncModalDescription": "Please try to reconnect your device",
   "module.connecting.errorSyncModalHeaderTitle": "Error",

packages/app/src/__deprecated__/renderer/wrappers/base-app.component.tsx

@@ -49,6 +49,7 @@ interface Props {
   osVersion: string | undefined
   checkingForOsForceUpdate: boolean
   shouldCheckForForceUpdateNeed: boolean
+  initializationFailed: boolean
 }
 
 const BaseApp: FunctionComponent<Props> = ({
@@ -68,6 +69,7 @@ const BaseApp: FunctionComponent<Props> = ({
   osVersion,
   checkingForOsForceUpdate,
   shouldCheckForForceUpdateNeed,
+  initializationFailed,
 }) => {
   useRouterListener(history, {
     [URL_MAIN.contacts]: [],
@@ -93,7 +95,12 @@ const BaseApp: FunctionComponent<Props> = ({
       return
     }
 
-    if (deviceConnecting || deviceLocked || checkingForOsForceUpdate) {
+    if (
+      deviceConnecting ||
+      deviceLocked ||
+      checkingForOsForceUpdate ||
+      initializationFailed
+    ) {
       history.push(URL_ONBOARDING.connecting)
     } else if (!deviceFeaturesVisible) {
       history.push(URL_ONBOARDING.welcome)
@@ -154,6 +161,7 @@ const isDeviceRestarting = (state: RootState & ReduxRootState): boolean => {
 
 const mapStateToProps = (state: RootState & ReduxRootState) => {
   return {
+    initializationFailed: !state.dataSync.initialized,
     deviceFeaturesVisible:
       (state.device.status.connected &&
         Boolean(state.device.status.unlocked)) ||

packages/app/src/__deprecated__/renderer/wrappers/root-wrapper.test.tsx

@@ -19,6 +19,7 @@ import { modalsManagerReducer } from "App/modals-manager/reducers"
 import { settingsReducer } from "App/settings/reducers"
 import { checkUpdateAvailable } from "App/settings/actions/check-update-available.action"
 import { updateOsReducer } from "App/update/reducers"
+import { dataSyncReducer } from "App/data-sync/reducers"
 
 jest.mock("App/settings/actions/check-update-available.action")
 
@@ -109,6 +110,7 @@ const store = init({
       modalsManager: modalsManagerReducer,
       settings: settingsReducer,
       update: updateOsReducer,
+      dataSync: dataSyncReducer,
     },
   },
 }) as Store

packages/app/src/connecting/components/connecting-content.component.tsx

@@ -13,6 +13,8 @@ import Loader from "App/__deprecated__/renderer/components/core/loader/loader.co
 import { LoaderType } from "App/__deprecated__/renderer/components/core/loader/loader.interface"
 import styled from "styled-components"
 import { backgroundColor } from "App/__deprecated__/renderer/styles/theming/theme-getters"
+import { useSelector } from "react-redux"
+import { ReduxRootState } from "App/__deprecated__/renderer/store"
 
 export const Container = styled.section`
   display: grid;
@@ -47,6 +49,7 @@ interface Props {
 }
 
 const ConnectingContent: FunctionComponent<Props> = ({ longerConnection }) => {
+  const { initialized } = useSelector((state: ReduxRootState) => state.dataSync)
   return (
     <Container>
       <main>
@@ -56,9 +59,10 @@ const ConnectingContent: FunctionComponent<Props> = ({ longerConnection }) => {
         <Text
           displayStyle={TextDisplayStyle.Headline3}
           message={{
-            id: longerConnection
-              ? "module.onboarding.connectingLongMessage"
-              : "module.onboarding.connectingMessage",
+            id:
+              longerConnection && initialized
+                ? "module.onboarding.connectingLongMessage"
+                : "module.onboarding.connectingMessage",
           }}
         />
       </main>

packages/app/src/connecting/components/connecting.test.tsx

@@ -14,6 +14,8 @@ import { SynchronizationState } from "App/data-sync/reducers"
 import { DeviceType } from "App/device/constants"
 import { RequestResponseStatus } from "App/core/types/request-response.interface"
 import { CriticalBatteryLevelModalTestIds } from "App/connecting/components/critical-battery-level-modal/critical-battery-level-modal-test-ids.enum"
+import { Provider } from "react-redux"
+import store from "App/__deprecated__/renderer/store"
 
 jest.mock("App/connecting/requests/register-first-phone-connection")
 
@@ -45,7 +47,11 @@ const render = (extraProps?: Partial<Props>) => {
     ...defaultProps,
     ...extraProps,
   }
-  const outcome = renderWithThemeAndIntl(<Connecting {...props} />)
+  const outcome = renderWithThemeAndIntl(
+    <Provider store={store}>
+      <Connecting {...props} />
+    </Provider>
+  )
   return {
     ...outcome,
   }

packages/app/src/connecting/components/error-connecting-modal.tsx

@@ -4,20 +4,30 @@
  */
 
 import { FunctionComponent } from "App/__deprecated__/renderer/types/function-component.interface"
-import { intl } from "App/__deprecated__/renderer/utils/intl"
-import { RoundIconWrapper } from "App/__deprecated__/renderer/components/core/modal-shared/modal-shared"
+import { intl, textFormatters } from "App/__deprecated__/renderer/utils/intl"
 import Icon from "App/__deprecated__/renderer/components/core/icon/icon.component"
-import { ModalText } from "App/contacts/components/sync-contacts-modal/sync-contacts.styled"
-import { TextDisplayStyle } from "App/__deprecated__/renderer/components/core/text/text.component"
+import Text, {
+  TextDisplayStyle,
+} from "App/__deprecated__/renderer/components/core/text/text.component"
 import React, { ComponentProps } from "react"
 import { defineMessages } from "react-intl"
 import styled from "styled-components"
-import { ModalDialog } from "App/ui/components/modal-dialog"
+import {
+  ModalContent,
+  ModalDialog,
+  RoundIconWrapper,
+} from "App/ui/components/modal-dialog"
 import { ModalSize } from "App/__deprecated__/renderer/components/core/modal/modal.interface"
 import { Size } from "App/__deprecated__/renderer/components/core/button/button.config"
 import { ErrorConnectingModalTestIds } from "App/connecting/components/error-connecting-modal-test-ids.enum"
 import { IconType } from "App/__deprecated__/renderer/components/core/icon/icon-type"
 import { ModalLayers } from "App/modals-manager/constants/modal-layers.enum"
+import {
+  fontWeight,
+  textColor,
+} from "App/__deprecated__/renderer/styles/theming/theme-getters"
+import { ipcRenderer } from "electron-better-ipc"
+import { HelpActions } from "App/__deprecated__/common/enums/help-actions.enum"
 
 const messages = defineMessages({
   errorConnectingModalHeaderTitle: {
@@ -33,20 +43,23 @@ const messages = defineMessages({
     id: "module.connecting.errorConnectingDescription",
   },
 })
-
-const ModalContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  p:first-of-type {
-    margin-top: 0;
+const StyledLink = styled.a`
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 1.4rem;
+  font-weight: ${fontWeight("default")};
+  color: ${textColor("action")};
+`
+const StyledModalContent = styled(ModalContent)`
+  p {
+    text-align: left;
   }
 `
 
 const ErrorConnectingModal: FunctionComponent<
   ComponentProps<typeof ModalDialog>
 > = ({ onClose, ...props }) => {
+  const openHelpWindow = () => ipcRenderer.callMain(HelpActions.OpenWindow)
   return (
     <ModalDialog
       testId={ErrorConnectingModalTestIds.Container}
@@ -61,19 +74,35 @@ const ErrorConnectingModal: FunctionComponent<
       layer={ModalLayers.ErrorConnecting}
       {...props}
     >
-      <ModalContent>
+      <StyledModalContent>
         <RoundIconWrapper>
           <Icon type={IconType.ThinFail} width={3.2} />
         </RoundIconWrapper>
-        <ModalText
-          displayStyle={TextDisplayStyle.Headline4}
-          message={messages.errorConnectingModalTitle}
+        <Text
+          displayStyle={TextDisplayStyle.Paragraph4}
+          color="secondary"
+          message={{
+            ...messages.errorConnectingModalTitle,
+            values: {
+              ...textFormatters,
+            },
+          }}
         />
-        <ModalText
+        <Text
           displayStyle={TextDisplayStyle.Paragraph4}
-          message={messages.errorConnectingDescription}
+          color="secondary"
+          message={{
+            ...messages.errorConnectingDescription,
+            values: {
+              link: (
+                <StyledLink onClick={openHelpWindow}>
+                  connection help page.
+                </StyledLink>
+              ),
+            },
+          }}
         />
-      </ModalContent>
+      </StyledModalContent>
     </ModalDialog>
   )
 }

packages/app/src/modals-manager/components/modals-manager.component.test.tsx

@@ -43,7 +43,6 @@ const defaultProps: Props = {
   appForcedUpdateFlowShow: false,
   appUpdateFlowShow: false,
   contactSupportFlowShow: false,
-  deviceInitializationFailedModalShowEnabled: false,
   hideModals: jest.fn(),
 }
 
@@ -153,25 +152,4 @@ describe("`ModalsManager` component", () => {
       ).not.toBeInTheDocument()
     })
   })
-
-  describe("when component is render with proper where `deviceInitializationFailedModalShowEnabled` is set to `true`", () => {
-    test("`ErrorConnectingModal` is visible", () => {
-      const { queryByTestId } = render({
-        deviceInitializationFailedModalShowEnabled: true,
-      })
-
-      expect(
-        queryByTestId(ErrorConnectingModalTestIds.Container)
-      ).toBeInTheDocument()
-      expect(
-        queryByTestId(ContactSupportFlowTestIds.ContactSupportModal)
-      ).not.toBeInTheDocument()
-      expect(
-        queryByTestId(AppUpdateFlowTestIds.Container)
-      ).not.toBeInTheDocument()
-      expect(
-        queryByTestId(AppForcedUpdateFlowTestIds.Container)
-      ).not.toBeInTheDocument()
-    })
-  })
 })

packages/app/src/modals-manager/components/modals-manager.component.tsx

@@ -11,7 +11,6 @@ import {
 } from "App/settings/components"
 import ContactSupportFlow from "App/contact-support/containers/contact-support-flow.container"
 import { UpdateOsInterruptedFlowContainer } from "App/update/components/update-os-interrupted-flow"
-import ErrorConnectingModal from "App/connecting/components/error-connecting-modal"
 import { useSelector } from "react-redux"
 import { ReduxRootState } from "App/__deprecated__/renderer/store"
 import PrivacyPolicyModal from "App/settings/components/privacy-policy-modal/privacy-policy-modal.component"
@@ -20,16 +19,13 @@ type Props = {
   appForcedUpdateFlowShow: boolean
   appUpdateFlowShow: boolean
   contactSupportFlowShow: boolean
-  deviceInitializationFailedModalShowEnabled: boolean
   hideModals: () => void
 }
 
 const ModalsManager: FunctionComponent<Props> = ({
   appForcedUpdateFlowShow,
   appUpdateFlowShow,
   contactSupportFlowShow,
-  deviceInitializationFailedModalShowEnabled,
-  hideModals,
 }) => {
   const { privacyPolicyAccepted } = useSelector(
     (state: ReduxRootState) => state.settings
@@ -41,9 +37,6 @@ const ModalsManager: FunctionComponent<Props> = ({
 
   return (
     <>
-      {deviceInitializationFailedModalShowEnabled && (
-        <ErrorConnectingModal open closeModal={hideModals} />
-      )}
       {appForcedUpdateFlowShow && <AppForcedUpdateFlowContainer />}
       {appUpdateFlowShow && <AppUpdateFlowContainer />}
       {contactSupportFlowShow && <ContactSupportFlow />}