set embedded message dismiss event

Iterable · Oct 25, 2023 · 7dff008 · 7dff008
1 parent ad05a33
commit 7dff008
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 11 deletions.
diff --git a/react-example/src/components/EmbeddedForm.tsx b/react-example/src/components/EmbeddedForm.tsx
@@ -0,0 +1,88 @@
+import { FC, FormEvent, useState } from 'react';
+import {
+  Button,
+  EndpointWrapper,
+  Form,
+  Heading,
+  Response
+} from '../views/Components.styled';
+import { IterablePromise, IterableResponse } from '@iterable/web-sdk';
+import TextField from 'src/components/TextField';
+
+interface Props {
+  endpointName: string;
+  heading: string;
+  hasInput?: boolean;
+  method: (...args: any) => IterablePromise<IterableResponse>;
+}
+
+export const EmbeddedForm: FC<Props> = ({
+  method,
+  endpointName,
+  heading,
+  hasInput: hasInput
+}) => {
+  const [trackResponse, setTrackResponse] = useState<string>(
+    'Endpoint JSON goes here'
+  );
+
+  const [trackEvent, setTrackEvent] = useState<string>('');
+
+  const [isTrackingEvent, setTrackingEvent] = useState<boolean>(false);
+
+  const handleTrack = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setTrackingEvent(true);
+
+    const conditionalParams = hasInput
+      ? { messageId: trackEvent }
+      : { messageId: null };
+    method({
+      ...conditionalParams,
+      deviceInfo: {
+        appPackageName: 'my-website'
+      }
+    })
+      .then((response) => {
+        setTrackResponse(JSON.stringify(response.data));
+        setTrackingEvent(false);
+      })
+      .catch((e) => {
+        setTrackResponse(JSON.stringify(e.response.data));
+        setTrackingEvent(false);
+      });
+  };
+
+  const formAttr = { [`data-qa-${endpointName}-submit`]: true };
+  const inputAttr = { [`data-qa-${endpointName}-input`]: true };
+  const responseAttr = { [`data-qa-${endpointName}-response`]: true };
+
+  return (
+    <>
+      <Heading>POST {heading}</Heading>
+      <EndpointWrapper>
+        <Form onSubmit={handleTrack} {...formAttr}>
+          {hasInput && (
+            <>
+              <label htmlFor="item-1"> Enter Message ID </label>
+              <TextField
+                value={trackEvent}
+                onChange={(e) => setTrackEvent(e.target.value)}
+                id="item-1"
+                placeholder={'e.g. df3fe3'}
+                {...inputAttr}
+              />
+            </>
+          )}
+
+          <Button disabled={isTrackingEvent} type="submit">
+            Submit
+          </Button>
+        </Form>
+        <Response {...responseAttr}>{trackResponse}</Response>
+      </EndpointWrapper>
+    </>
+  );
+};
+
+export default EmbeddedForm;
diff --git a/react-example/src/views/Embedded.tsx b/react-example/src/views/Embedded.tsx
@@ -1,19 +1,30 @@
 import { FC, FormEvent, useEffect, useState } from 'react';
-import { Button, EndpointWrapper, Form, Heading } from './Components.styled';
-
+import {
+  Button,
+  EndpointWrapper,
+  Form,
+  Heading,
+  Response
+} from '../views/Components.styled';
 import {
   initialize,
   EmbeddedManager,
   trackEmbeddedMessageReceived,
   trackEmbeddedMessageClick,
-  trackEmbeddedSession
+  trackEmbeddedSession,
+  trackEmbeddedMessagingDismiss
 } from '@iterable/web-sdk';
 import TextField from 'src/components/TextField';
 
 interface Props {}
 
 export const EmbeddedMessage: FC<Props> = () => {
   const [userId, setUserId] = useState<string>();
+  const [trackResponse, setTrackResponse] = useState<string>(
+    'Endpoint JSON goes here'
+  );
+  const [isTrackingEvent, setTrackingEvent] = useState<boolean>(false);
+  const [inputValue, setInputValue] = useState<string>('');
 
   useEffect(() => {
     initialize(process.env.API_KEY);
@@ -112,26 +123,64 @@ export const EmbeddedMessage: FC<Props> = () => {
       });
   };
 
+  const submitEmbeddedMessagesDismissEvent = async (
+    e: FormEvent<HTMLFormElement>
+  ) => {
+    e.preventDefault();
+    const sessionData = {
+      email: userId,
+      userId: userId,
+      messageId: inputValue,
+      buttonIdentifier: '123',
+      deviceInfo: {
+        deviceId: '123',
+        platform: 'web',
+        appPackageName: 'my-website'
+      },
+      createdAt: 1627060811283
+    };
+
+    trackEmbeddedMessagingDismiss(sessionData)
+      .then((response) => {
+        setTrackResponse(JSON.stringify(response.data));
+        setTrackingEvent(false);
+      })
+      .catch((error) => {
+        setTrackResponse(JSON.stringify(error.response.data));
+        setTrackingEvent(false);
+      });
+  };
+
   const eventsList = [
     {
       heading: 'GET /embedded-messaging/events/received',
       onSubmit: handleFetchEmbeddedMessages,
-      btnText: 'Fetch Embedded Messages'
+      btnText: 'Fetch Embedded Messages',
+      hasInput: false
     },
     {
       heading: 'POST /embedded-messaging/events/received',
       onSubmit: submitEmbeddedMessagesReceivedEvent,
-      btnText: 'Submit'
+      btnText: 'Submit',
+      hasInput: false
     },
     {
       heading: 'POST /embedded-messaging/events/click',
       onSubmit: submitEmbeddedMessagesClickEvent,
-      btnText: 'Submit'
+      btnText: 'Submit',
+      hasInput: false
     },
     {
       heading: 'POST /embedded-messaging/events/impression',
       onSubmit: submitEmbeddedMessagesImpressionEvent,
-      btnText: 'Submit'
+      btnText: 'Submit',
+      hasInput: false
+    },
+    {
+      heading: 'POST /embedded-messaging/events/dismiss',
+      onSubmit: submitEmbeddedMessagesDismissEvent,
+      btnText: 'Submit',
+      hasInput: true
     }
   ];
 
@@ -153,8 +202,19 @@ export const EmbeddedMessage: FC<Props> = () => {
           <Heading>{element.heading}</Heading>
           <EndpointWrapper>
             <Form onSubmit={element.onSubmit} data-qa-cart-submit>
-              <Button type="submit">{element.btnText}</Button>
+              {element.hasInput && (
+                <TextField
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  id="item-1"
+                  placeholder={'e.g. df3fe3'}
+                />
+              )}
+              <Button disabled={isTrackingEvent} type="submit">
+                {element.btnText}
+              </Button>
             </Form>
+            <Response>{trackResponse}</Response>
           </EndpointWrapper>
         </>
       ))}

diff --git a/src/events/consts.ts b/src/events/consts.ts
@@ -7,5 +7,6 @@ export const EndPoints = {
   track_app_open: '/events/trackInAppOpen',
   track_app_click: '/events/trackInAppClick',
   track_app_delivery: '/events/trackInAppDelivery',
-  track_app_consume: '/events/inAppConsume'
+  track_app_consume: '/events/inAppConsume',
+  msg_dismiss: '/embedded-messaging/events/dismiss'
 };
diff --git a/src/events/embedded/events.schema.ts b/src/events/embedded/events.schema.ts
@@ -59,3 +59,16 @@ export const trackEmbeddedSessionSchema = object().shape({
   ),
   id: string()
 });
+
+export const embaddedMessagingDismissSchema = object().shape({
+  email: string(),
+  userId: string(),
+  messageId: string().required(),
+  buttonIdentifier: string(),
+  deviceInfo: object().shape({
+    deviceId: string().required(),
+    platform: string().required(),
+    appPackageName: string().required()
+  }),
+  createdAt: number()
+});
diff --git a/src/events/embedded/events.ts b/src/events/embedded/events.ts
@@ -2,13 +2,15 @@ import { baseIterableRequest } from '../../request';
 import {
   IEmbeddedMessage,
   IEmbeddedMessageMetadata,
-  IEmbeddedSession
+  IEmbeddedSession,
+  EnbeddedMessagingDismiss
 } from './types';
 import { IterableResponse } from '../../types';
 import {
   trackEmbeddedMessageSchema,
   trackEmbeddedMessageClickSchema,
-  trackEmbeddedSessionSchema
+  trackEmbeddedSessionSchema,
+  embaddedMessagingDismissSchema
 } from './events.schema';
 import { EndPoints } from '../consts';
 
@@ -56,3 +58,16 @@ export const trackEmbeddedSession = (payload: IEmbeddedSession) => {
     }
   });
 };
+
+export const trackEmbeddedMessagingDismiss = (
+  payload: EnbeddedMessagingDismiss
+) => {
+  return baseIterableRequest<IterableResponse>({
+    method: 'POST',
+    url: EndPoints.msg_dismiss,
+    data: payload,
+    validation: {
+      data: embaddedMessagingDismissSchema
+    }
+  });
+};
diff --git a/src/events/embedded/types.ts b/src/events/embedded/types.ts
@@ -55,3 +55,18 @@ export interface IEmbeddedSession {
   impressions?: Array<IEmbeddedImpression>;
   id: string;
 }
+
+export interface DeviceInfo {
+  deviceId: string;
+  platform: string;
+  appPackageName: string;
+}
+
+export interface EnbeddedMessagingDismiss {
+  email: string;
+  userId: string;
+  messageId: string;
+  buttonIdentifier: string;
+  deviceInfo: DeviceInfo;
+  createdAt: number;
+}