refactor(UserInteractionResource): Change context prop type

src/components/templates/LandingPageOne/index.tsx

@@ -118,7 +118,12 @@ function LandingPage(props: LandingPageProps) {
 
  // optional props
  origin="Landing Page"
- // context="AntD Card"
+ dataContext={{
+ app: {
+ version: "0",
+ },
+ context: "Custom Landing page"
+ }}
  />,
  ]}>
 

src/components/templates/LoginForm/index.tsx

@@ -63,7 +63,12 @@ function LoginForm(props: LoginFormProps) {
 
  // optional props
  origin="Login Button"
- // context="AntD Card"
+ dataContext={{
+ app: {
+ version: "0",
+ },
+ context: "Custom login page"
+ }}
  />,
  <Button
  type="ghost"
@@ -75,16 +80,31 @@ function LoginForm(props: LoginFormProps) {
  type="text"
  placeholder="email"
 
- trackers={[{
- action: "onClick",
- track: logEvent,
- data: {
- customKey1: "input",
+ trackers={[
+ {
+ action: "onClick",
+ track: logEvent,
+ data: {
+ customKey1: "input",
+ }
+ },
+ {
+ action: "onChange",
+ track: logEvent,
+ data: {
+ customKey1: "input",
+ }
  }
- }]}
+ ]}
 
  // optional props
- origin="Email Input"
+ origin="Login Page Email Input"
+ dataContext={{
+ app: {
+ version: "0",
+ },
+ context: "Custom login page"
+ }}
  />
  <Input
  type="password"

src/library/user-analytics/lib/interaction-tracking/browser.ts

@@ -1,4 +1,9 @@
-export function getUserOS() {
+interface OSDetails{
+ name: string;
+ version: string;
+}
+
+export function getUserOS() : OSDetails {
  const userAgent = window.navigator.userAgent;
  const platform = window.navigator.platform;
  const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];

src/library/user-analytics/lib/resources/userInteractionResource.ts

@@ -11,7 +11,7 @@ export default interface UserInteractionResource extends BaseResource {
  action: UserInteraction.Action;
  source: {
  context: string;
- origin: string;
+ origin?: string;
  component: string;
  element: {
  currentTarget: string;

src/library/user-analytics/react/components/withTracking.tsx

@@ -8,7 +8,7 @@ import {
 import { DataContext } from '../contexts/dataContext';
 
 type TrackerProps = {
- context?: string,
+ dataContext?: UserInteraction.DataContext;
  origin?: string,
  trackers: UserInteraction.Tracker[]
 } & Object<any>;
@@ -18,10 +18,13 @@ export function withTracking (
 ) {
  return function Fn(props: TrackerProps) {
  let eventHandlers: Object<any> = {};
- const { trackers, ...originalProps } = props;
+ const { trackers, origin, dataContext: dataContextFromProps, ...originalProps } = props;
 
- const dataContext = useContext(DataContext);
- const context = props.context ? props.context : dataContext.context;
+ let dataContext = useContext(DataContext);
+
+ if (dataContextFromProps) {
+ dataContext = dataContextFromProps
+ }
 
  function trackUserInteraction(
  e: React.SyntheticEvent,
@@ -33,8 +36,10 @@ export function withTracking (
  dataContext.app,
  tracker.action,
  {
- context,
- origin: originalProps.origin || "",
+ context: dataContext.context,
+ ...(originalProps.origin && {
+ origin: originalProps.origin
+ }),
  component: Component.displayName || Component.name,
  element: {
  currentTarget: e.currentTarget.nodeName,
@@ -63,7 +68,7 @@ export function withTracking (
 
  return (
  <Component
- { ...props }
+ { ...originalProps }
  { ...eventHandlers }
  />
  );