All files / app/components request-diagnostics.layout.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Box, Button, Flex, color, Stack, Text, FlexProps } from '@stacks/ui';
import { OnboardingSelector } from 'app/tests/features/onboarding.selectors';
import React, { FC } from 'react';
import { FiCheck } from 'react-icons/fi';
 
interface ReasonToAllowDiagnosticsProps extends FlexProps {
  text: string;
}
const ReasonToAllowDiagnostics: FC<ReasonToAllowDiagnosticsProps> = ({ text, ...props }) => {
  return (
    <Flex color={color('text-caption')} textStyle="body.small" {...props}>
      <Box mr="tight" mt="3px">
        <FiCheck />
      </Box>
      <Box>{text}</Box>
    </Flex>
  );
};
 
interface AllowDiagnosticsLayoutProps {
  onUserAllowDiagnostics(): void;
  onUserDenyDiagnosticsPermissions(): void;
}
export const AllowDiagnosticsLayout: FC<AllowDiagnosticsLayoutProps> = props => {
  const { onUserAllowDiagnostics, onUserDenyDiagnosticsPermissions } = props;
 
  return (
    <>
      <Text maxWidth="520px">
        We would like to gather de-identified usage data to help improve your experience with
        Leather.
      </Text>
      <Stack mt="loose" mb="extra-loose" spacing="base-tight" textAlign="left" maxWidth="520px">
        <ReasonToAllowDiagnostics text="Send anonymous data about page views and clicks" />
        <ReasonToAllowDiagnostics text="This data is tied to randomly-generated IDs and not personal data, such as your Stacks addresses, keys, balance, or IP addresses" />
        <ReasonToAllowDiagnostics text="This data is used to generate and send crash reports, help us fix errors, and analyze trends and statistics" />
      </Stack>
      <Flex mt="base" fontSize="14px">
        <Button
          type="button"
          mode="primary"
          px="extra-loose"
          onClick={() => onUserAllowDiagnostics()}
          data-test={OnboardingSelector.BtnAcceptDiagnosticPermission}
          mr="base-tight"
        >
          Allow
        </Button>
        <Button
          type="button"
          mode="tertiary"
          px="extra-loose"
          ml="base"
          variant="link"
          onClick={() => onUserDenyDiagnosticsPermissions()}
        >
          Deny
        </Button>
      </Flex>
    </>
  );
};