From 7dff0081f6ef90cb0fdb641aecfa88d04fb613a3 Mon Sep 17 00:00:00 2001 From: Hani Date: Wed, 25 Oct 2023 17:06:43 +0530 Subject: [PATCH] set embedded message dismiss event --- react-example/src/components/EmbeddedForm.tsx | 88 +++++++++++++++++++ react-example/src/views/Embedded.tsx | 76 ++++++++++++++-- src/events/consts.ts | 3 +- src/events/embedded/events.schema.ts | 13 +++ src/events/embedded/events.ts | 19 +++- src/events/embedded/types.ts | 15 ++++ 6 files changed, 203 insertions(+), 11 deletions(-) create mode 100644 react-example/src/components/EmbeddedForm.tsx diff --git a/react-example/src/components/EmbeddedForm.tsx b/react-example/src/components/EmbeddedForm.tsx new file mode 100644 index 00000000..d45abe51 --- /dev/null +++ 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; +} + +export const EmbeddedForm: FC = ({ + method, + endpointName, + heading, + hasInput: hasInput +}) => { + const [trackResponse, setTrackResponse] = useState( + 'Endpoint JSON goes here' + ); + + const [trackEvent, setTrackEvent] = useState(''); + + const [isTrackingEvent, setTrackingEvent] = useState(false); + + const handleTrack = (e: FormEvent) => { + 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 ( + <> + POST {heading} + +
+ {hasInput && ( + <> + + setTrackEvent(e.target.value)} + id="item-1" + placeholder={'e.g. df3fe3'} + {...inputAttr} + /> + + )} + + + + {trackResponse} +
+ + ); +}; + +export default EmbeddedForm; diff --git a/react-example/src/views/Embedded.tsx b/react-example/src/views/Embedded.tsx index cc27e813..ec42be46 100644 --- a/react-example/src/views/Embedded.tsx +++ b/react-example/src/views/Embedded.tsx @@ -1,12 +1,18 @@ 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'; @@ -14,6 +20,11 @@ interface Props {} export const EmbeddedMessage: FC = () => { const [userId, setUserId] = useState(); + const [trackResponse, setTrackResponse] = useState( + 'Endpoint JSON goes here' + ); + const [isTrackingEvent, setTrackingEvent] = useState(false); + const [inputValue, setInputValue] = useState(''); useEffect(() => { initialize(process.env.API_KEY); @@ -112,26 +123,64 @@ export const EmbeddedMessage: FC = () => { }); }; + const submitEmbeddedMessagesDismissEvent = async ( + e: FormEvent + ) => { + 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 = () => { {element.heading}
- + {element.hasInput && ( + setInputValue(e.target.value)} + id="item-1" + placeholder={'e.g. df3fe3'} + /> + )} + + {trackResponse}
))} diff --git a/src/events/consts.ts b/src/events/consts.ts index 61442c90..5625504b 100644 --- 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 index 4ab06031..607a9270 100644 --- 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 index 4b501671..f9f174a1 100644 --- 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({ + 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 index 150f64bb..4c3070f8 100644 --- a/src/events/embedded/types.ts +++ b/src/events/embedded/types.ts @@ -55,3 +55,18 @@ export interface IEmbeddedSession { impressions?: Array; 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; +}