javascript/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx at fb1c683710fb74fbf7ed9a8a0acf52d4f9271858 · knocklabs/javascript · GitHub

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { useGuideContext } from "@knocklabs/react-core";
import { Box, Stack } from "@telegraph/layout";
import { Tooltip } from "@telegraph/tooltip";
import { Text } from "@telegraph/typography";

export const GuideContextDetails = () => {
  const { client } = useGuideContext();

  return (
    <Box py="3" px="3">
      <Tooltip
        label={
          <Text as="span" size="1">
            The tenant and data payload passed to the guide client that are used
            for targeting
            <br />
            (via the `targetParams` prop to `KnockGuideProvider`)
          </Text>
        }
        delayDuration={500}
      >
        <Text
          as="label"
          size="1"
          weight="medium"
          borderBottom="px"
          borderStyle="dashed"
          style={{
            whiteSpace: "nowrap",
          }}
        >
          Target params
        </Text>
      </Tooltip>
      <Stack direction="column" gap="2" mt="2">
        <Stack direction="row" gap="2" align="center">
          <Text
            as="span"
            size="1"
            weight="medium"
            color="gray"
            width="36"
            mt="1"
          >
            Tenant
          </Text>
          <Box
            rounded="2"
            overflow="auto"
            backgroundColor="surface-2"
            border="px"
            p="1"
            style={{ flex: 1, minWidth: 0 }}
          >
            <pre style={{ fontSize: "11px", margin: 0 }}>
              <code>{client.targetParams.tenant || "-"}</code>
            </pre>
          </Box>
        </Stack>
        <Stack direction="row" gap="2" align="flex-start">
          <Text
            as="span"
            size="1"
            weight="medium"
            color="gray"
            width="36"
            mt="1"
          >
            Data
          </Text>
          <Box
            rounded="2"
            overflow="auto"
            backgroundColor="surface-2"
            border="px"
            p="1"
            style={{
              flex: 1,
              minWidth: 0,
              minHeight: "50px",
              maxHeight: "200px",
            }}
          >
            <pre style={{ fontSize: "11px", margin: 0 }}>
              <code>
                {client.targetParams.data
                  ? JSON.stringify(client.targetParams.data, null, 2)
                  : "-"}
              </code>
            </pre>
          </Box>
        </Stack>
      </Stack>
    </Box>
  );
};