All files / app/pages/onboarding/01-diagnostics diagnostics.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Onboarding, OnboardingTitle } from '@components/onboarding';
import { AllowDiagnosticsLayout } from '@components/request-diagnostics.layout';
import routes from '@constants/routes.json';
import { useBackButton } from '@hooks/use-back-url';
import { Flex } from '@stacks/ui';
import { grantDiagnosticsPermission, revokeDiagnosticPermission } from '@store/settings';
import React from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
 
export function Diagnostics() {
  const history = useHistory();
  const dispatch = useDispatch();
  useBackButton(routes.TERMS);
 
  return (
    <Onboarding maxWidth="800px" px="base-loose">
      <OnboardingTitle mb="base" mt="extra-loose">
        Help us improve
      </OnboardingTitle>
      <Flex
        flexDirection="column"
        justifyContent="center"
        textAlign="center"
        alignItems="center"
        mt="extra-loose"
        pb="extra-loose"
      >
        <AllowDiagnosticsLayout
          onUserAllowDiagnostics={() => {
            dispatch(grantDiagnosticsPermission());
            history.push(routes.WELCOME);
          }}
          onUserDenyDiagnosticsPermissions={() => {
            dispatch(revokeDiagnosticPermission());
            history.push(routes.WELCOME);
          }}
        />
      </Flex>
    </Onboarding>
  );
}