notifly-sdk 2.3.4 → 2.3.6

package/src/in_app_message.js

@@ -0,0 +1,258 @@
+import React from 'react';
+import { View, Linking, Dimensions } from 'react-native';
+import RootSiblings from 'react-native-root-siblings';
+import Modal from 'react-native-modal';
+import WebView from 'react-native-webview';
+import logEvent from './log_event';
+import { setUserProperties } from './user';
+
+/**
+ * Displays an in-app message in a modal WebView.
+ *
+ * @async
+ * @param {Object} data - An object containing information about the in-app message to display.
+ * @param {Object} openedInAppWebViewCount - An object containing the count of opened in-app web views.
+ * @returns {Promise<void>} A promise that resolves when the in-app message has been displayed, or rejects with an error.
+ *
+ * @example
+ * const data = { campaign_id: 'myCampaign', url: 'https://example.com' };
+ * const openedInAppWebViewCount = { count: 0 };
+ * await showInAppMessage(data, openedInAppWebViewCount);
+ */
+export async function showInAppMessage(data, openedInAppWebViewCount) {
+    if (openedInAppWebViewCount.count > 0) {
+        return;
+    }
+    if (!(data?.url && data?.modal_properties)) {
+        return;
+    }
+    const modalProperties = data.modal_properties || {};
+    const screenWidth = Dimensions.get('window').width;
+    const screenHeight = Dimensions.get('window').height;
+    const webViewProps = _translateWebviewProps(modalProperties, screenWidth, screenHeight);
+    const link = data.url; // default html link for only testing.
+    const injectedJavaScript = `
+        const button_trigger = document.getElementById('notifly-button-trigger');
+        button_trigger.addEventListener('click', function(event){
+            if (!event.notifly_button_click_type) return;
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+                type: event.notifly_button_click_type,
+                button_name: event.notifly_button_name,
+                link: event.notifly_button_click_link,
+                extra_data: event.notifly_extra_data,
+            }));
+        });
+    `;
+    const backdropOpacity = _getBackgroundOpacity(modalProperties?.backgroundOpacity);
+
+    const webviewMessageHandler = (e) => {
+        const message = JSON.parse(e.nativeEvent.data);
+        if (message.type === 'close') {
+            modal.destroy();
+            openedInAppWebViewCount.count = openedInAppWebViewCount.count - 1;
+            logEvent(
+                'close_button_click',
+                {
+                    type: 'message_event',
+                    channel: 'in-app-message',
+                    button_name: message.button_name,
+                    campaign_id: data.campaign_id,
+                    notifly_message_id: data.notifly_message_id,
+                },
+                null,
+                true
+            );
+        } else if (message.type === 'main_button') {
+            logEvent(
+                'main_button_click',
+                {
+                    type: 'message_event',
+                    channel: 'in-app-message',
+                    button_name: message.button_name,
+                    campaign_id: data.campaign_id,
+                    notifly_message_id: data.notifly_message_id,
+                },
+                null,
+                true
+            );
+            if (message.link) {
+                modal.destroy();
+                openedInAppWebViewCount.count = openedInAppWebViewCount.count - 1;
+                Linking.openURL(message.link);
+            }
+        } else if (message.type === 'hide_in_app_message') {
+            modal.destroy();
+            openedInAppWebViewCount.count = openedInAppWebViewCount.count - 1;
+            logEvent(
+                'hide_in_app_message_button_click',
+                {
+                    type: 'message_event',
+                    channel: 'in-app-message',
+                    button_name: message.button_name,
+                    campaign_id: data.campaign_id,
+                    notifly_message_id: data.notifly_message_id,
+                },
+                null,
+                true
+            );
+            if (modalProperties.template_name) {
+                const key = `hide_in_app_message_${modalProperties.template_name}`;
+                setUserProperties({
+                    [key]: true,
+                });
+            }
+        } else if (message.type === 'survey_submit_button') {
+            modal.destroy();
+            openedInAppWebViewCount.count = openedInAppWebViewCount.count - 1;
+            logEvent(
+                'survey_submit_button_click', {
+                    type: 'message_event',
+                    channel: 'in-app-message',
+                    button_name: message.button_name,
+                    campaign_id: data.campaign_id,
+                    notifly_message_id: data.notifly_message_id,
+                    notifly_extra_data: message.extra_data,
+                },
+                null,
+                true
+            );
+        }
+    };
+
+    openedInAppWebViewCount.count = openedInAppWebViewCount.count + 1;
+    logEvent(
+        'in_app_message_show',
+        { type: 'message_event', channel: 'in-app-message', campaign_id: data.campaign_id, notifly_message_id: data.notifly_message_id },
+        null,
+        true
+    ); // logging in app messaging delivered
+    const modal = new RootSiblings(
+        (
+            <Modal
+                isVisible={true}
+                transparent={true}
+                onBackdropPress={() => {
+                    openedInAppWebViewCount.count = openedInAppWebViewCount.count - 1;
+                    modal.destroy();
+                }}
+                onBackButtonPress={() => {
+                    openedInAppWebViewCount.count = openedInAppWebViewCount.count - 1;
+                    modal.destroy();
+                }}
+                backdropOpacity={backdropOpacity}
+                style={webViewProps.modalStyle}
+            >
+                <View>
+                    <View style={webViewProps.viewStyle}>
+                        <WebView
+                            originWhitelist={['*']}
+                            source={{
+                                uri: link,
+                            }}
+                            style={{
+                                width: screenWidth,
+                                height: screenHeight,
+                            }}
+                            onMessage={webviewMessageHandler}
+                            javaScriptEnabled={true}
+                            injectedJavaScript={injectedJavaScript}
+                        />
+                    </View>
+                </View>
+            </Modal>
+        )
+    );
+}
+
+function _translateWebviewProps(modalProps, screenWidth, screenHeight) {
+    const modalStyle = {
+        margin: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...(modalProps?.position === 'bottom' && {
+            position: 'absolute',
+            bottom: 0,
+        }),
+    };
+
+    const viewStyle = {
+        borderTopLeftRadius: modalProps?.borderTopLeftRadius || 0,
+        borderTopRightRadius: modalProps?.borderTopRightRadius || 0,
+        borderBottomLeftRadius: modalProps?.borderBottomLeftRadius || 0,
+        borderBottomRightRadius: modalProps?.borderBottomRightRadius || 0,
+        overflow: 'hidden',
+        width: _getViewWidth(modalProps, screenWidth, screenHeight),
+        height: _getViewHeight(modalProps, screenWidth, screenHeight),
+        justifyContent: 'center',
+        alignItems: 'center',
+    };
+
+    return {
+        modalStyle,
+        viewStyle,
+    };
+}
+
+function _getViewWidth(modalProps, screenWidth, screenHeight) {
+    let viewWidth;
+
+    if (modalProps.width) {
+        viewWidth = modalProps.width;
+    } else if (!screenWidth) {
+        console.error('screenWidth is not defined');
+        viewWidth = '100%';
+    } else if (modalProps.width_vw) {
+        viewWidth = screenWidth * (modalProps.width_vw / 100);
+    } else if (modalProps.width_vh && screenHeight) {
+        viewWidth = screenHeight * (modalProps.width_vh / 100);
+    } else {
+        viewWidth = '100%';
+    }
+
+    if (modalProps.min_width && viewWidth < modalProps.min_width) {
+        viewWidth = modalProps.minWidth;
+    }
+    if (modalProps.max_width && viewWidth > modalProps.max_width) {
+        viewWidth = modalProps.maxWidth;
+    }
+
+    return viewWidth;
+}
+
+function _getViewHeight(modalProps, screenWidth, screenHeight) {
+    let viewHeight;
+
+    if (modalProps.height) {
+        viewHeight = modalProps.height;
+    } else if (!screenHeight) {
+        console.error('screenHeight is not defined');
+        viewHeight = '100%';
+    } else if (modalProps.height_vh) {
+        viewHeight = screenHeight * (modalProps.height_vh / 100);
+    } else if (modalProps.height_vw && screenWidth) {
+        viewHeight = screenWidth * (modalProps.height_vw / 100);
+    } else {
+        viewHeight = '100%';
+    }
+
+    if (modalProps.min_height && viewHeight < modalProps.min_height) {
+        viewHeight = modalProps.min_height;
+    }
+    if (modalProps.max_height && viewHeight > modalProps.max_height) {
+        viewHeight = modalProps.max_height;
+    }
+
+    return viewHeight;
+}
+
+function _getBackgroundOpacity(backgroundOpacity) {
+    // if backgroundOpacity is not defined, default value is 0.2
+    if (backgroundOpacity === undefined) {
+        return 0.2;
+    }
+    // if backgroundOpacity is not between 0 and 1, default value is 0.2
+    if (backgroundOpacity < 0 || backgroundOpacity > 1) {
+        return 0.2;
+    }
+    return backgroundOpacity;
+}

package/src/log_event.js

@@ -0,0 +1,189 @@
+import { Platform } from 'react-native';
+import rnDeviceInfo from 'react-native-device-info';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import messaging from '@react-native-firebase/messaging';
+import { v5 as uuidv5 } from 'uuid';
+import { NAMESPACE, SDK_VERSION } from './constant';
+import { getNotiflyUserId } from './utils';
+import { getCognitoIdToken } from './auth';
+
+const NOTIFLY_LOG_EVENT_URL = 'https://12lnng07q2.execute-api.ap-northeast-2.amazonaws.com/prod/records';
+/**
+ * Logs an event to Notifly for the current user.
+ *
+ * @async
+ * @param {string} eventName - The name of the event to log.
+ * @param {Object} eventParams - The parameters to include in the event log.
+ * @param {string[]} [segmentationEventParamKeys=null] - The segmentation event parameter keys.
+ * @param {boolean} [isInternalEvent=false] - A flag indicating whether the event is for Notifly internal use.
+ * @returns {Promise<void>} A promise that resolves when the event has been logged, or rejects with an error.
+ *
+ * @example
+ * await logEvent('button_clicked', { 'button_name': 'myButton' });
+ */
+export default async function logEvent(
+    eventName,
+    eventParams,
+    segmentationEventParamKeys = null,
+    isInternalEvent = false
+) {
+    if (!eventName) {
+        console.warn('[Notifly] eventName must be provided.');
+        return;
+    }
+
+    try {
+        const [
+            cognitoToken,
+            notiflyUserId,
+            externalUserId,
+            prjId,
+            externalDeviceId,
+            osVersion,
+            appVersion,
+            deviceToken,
+        ] = await Promise.all([
+            AsyncStorage.getItem('notiflyCognitoIdToken'),
+            getNotiflyUserId(),
+            AsyncStorage.getItem('notiflyExternalUserId'),
+            AsyncStorage.getItem('notiflyProjectId'),
+            rnDeviceInfo.getUniqueId(),
+            rnDeviceInfo.getSystemVersion(),
+            rnDeviceInfo.getVersion(),
+            messaging().getToken(),
+        ]);
+
+        const eventId = uuidv5(`${notiflyUserId}${eventName}${new Date().valueOf()}`, NAMESPACE.EVENTID).replace(
+            /-/g,
+            ''
+        );
+        const notiflyDeviceId = uuidv5(externalDeviceId, NAMESPACE.DEVICEID).replace(/-/g, '');
+
+        let token = cognitoToken;
+        if (!token) {
+            const [userName, password] = await Promise.all([
+                AsyncStorage.getItem('notiflyUserName'),
+                AsyncStorage.getItem('notiflyUserPassword'),
+            ]);
+            token = await getCognitoIdToken(userName, password);
+            if (!token) {
+                console.warn('[Notifly] Failed to get cognito token.');
+                return;
+            }
+            await AsyncStorage.setItem('notiflyCognitoIdToken', token);
+        }
+
+        if (!token || !notiflyUserId || !prjId || !eventId || !externalDeviceId || !notiflyDeviceId || !deviceToken) {
+            const requiredParams = [
+                'token',
+                'notiflyUserId',
+                'prjId',
+                'eventId',
+                'externalDeviceId',
+                'notiflyDeviceId',
+                'deviceToken',
+            ];
+            const missingParam = requiredParams.find((param) => !eval(param));
+            console.warn(`[Notifly] Missing required parameter in logEvent: ${missingParam}`);
+            return;
+        }
+
+        const body = _getBodyForLogEvent(
+            notiflyUserId,
+            eventId,
+            eventName,
+            notiflyDeviceId,
+            externalDeviceId,
+            deviceToken,
+            isInternalEvent,
+            segmentationEventParamKeys,
+            prjId,
+            osVersion,
+            appVersion,
+            externalUserId,
+            eventParams
+        );
+        const requestOptions = _getRequestOptionsForLogEvent(token, body);
+
+        const response = await _apiCall(NOTIFLY_LOG_EVENT_URL, requestOptions);
+        const result = JSON.parse(response);
+
+        // If the token is expired, get a new token and retry the logEvent.
+        if (result.message == 'The incoming token has expired') {
+            const [userName, password] = await Promise.all([
+                AsyncStorage.getItem('notiflyUserName'),
+                AsyncStorage.getItem('notiflyUserPassword'),
+            ]);
+            const newToken = await getCognitoIdToken(userName, password);
+            await AsyncStorage.setItem('notiflyCognitoIdToken', newToken);
+            await logEvent(eventName, eventParams, segmentationEventParamKeys, isInternalEvent);
+        }
+    } catch (err) {
+        console.warn('[Notifly] Failed logging the event. Please retry the initialization. ', err);
+    }
+}
+
+async function _apiCall(apiUrl, requestOptions) {
+    const result = fetch(apiUrl, requestOptions).then((response) => response.text());
+    return result;
+}
+
+function _getRequestOptionsForLogEvent(token, body) {
+    const myHeaders = new Headers();
+    myHeaders.append('Authorization', token);
+    myHeaders.append('Content-Type', 'application/json');
+
+    const requestOptions = {
+        method: 'POST',
+        headers: myHeaders,
+        body: body,
+        redirect: 'follow',
+    };
+    return requestOptions;
+}
+
+function _getBodyForLogEvent(
+    notiflyUserId,
+    eventId,
+    eventName,
+    notiflyDeviceId,
+    externalDeviceId,
+    deviceToken,
+    isInternalEvent,
+    segmentationEventParamKeys,
+    prjId,
+    osVersion,
+    appVersion,
+    externalUserId,
+    eventParams
+) {
+    const eventData = JSON.stringify({
+        event_params: eventParams,
+        id: eventId,
+        name: eventName,
+        notifly_user_id: notiflyUserId,
+        time: parseInt(new Date().valueOf() / 1000),
+        notifly_device_id: notiflyDeviceId,
+        external_device_id: externalDeviceId,
+        device_token: deviceToken,
+        is_internal_event: isInternalEvent,
+        segmentationEventParamKeys: segmentationEventParamKeys,
+        project_id: prjId,
+        platform: Platform.OS,
+        os_version: osVersion,
+        app_version: appVersion,
+        sdk_version: SDK_VERSION,
+        sdk_type: "react_native",
+        external_user_id: externalUserId || undefined,
+    });
+
+    const body = JSON.stringify({
+        'records': [
+            {
+                'data': eventData,
+                'partitionKey': notiflyUserId,
+            },
+        ],
+    });
+    return body;
+}

package/src/user.js

@@ -0,0 +1,51 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { getNotiflyUserId } from './utils';
+import logEvent from './log_event';
+
+/**
+ * Sets user properties for the current user.
+ *
+ * @async
+ * @param {Object} params - An object containing the user properties to set.
+ * @returns {Promise<void>} A promise that resolves when the user properties have been set, or rejects with an error.
+ *
+ * @example
+ * await setUserProperties({ external_user_id: 'myUserID' });
+ */
+export async function setUserProperties(params) {
+    try {
+        if (params.external_user_id) {
+            const [previousNotiflyUserID, previousExternalUserID] = await Promise.all([
+                getNotiflyUserId(),
+                AsyncStorage.getItem('notiflyExternalUserId'),
+            ]);
+            await Promise.all([
+                AsyncStorage.setItem('notiflyExternalUserId', params.external_user_id),
+                AsyncStorage.removeItem('notiflyUserId'),
+            ]);
+            params['previous_notifly_user_id'] = previousNotiflyUserID;
+            params['previous_external_user_id'] = previousExternalUserID;
+        }
+        return await logEvent('set_user_properties', params, null, true);
+    } catch (err) {
+        console.warn('[Notifly] Failed to set user properties');
+    }
+}
+
+/**
+ * Removes the external user ID and Notifly user ID from storage.
+ *
+ * @async
+ * @returns {Promise<void>} A promise that resolves when the user IDs have been removed, or rejects with an error.
+ *
+ * @example
+ * await removeUserId();
+ */
+export async function removeUserId() {
+    try {
+        await Promise.all([AsyncStorage.removeItem('notiflyExternalUserId'), AsyncStorage.removeItem('notiflyUserId')]);
+        return await logEvent('remove_external_user_id', {}, null, true);
+    } catch (err) {
+        console.warn('[Notifly] Failed to remove userID');
+    }
+}

package/src/utils.js

@@ -0,0 +1,145 @@
+import { Platform, Linking } from 'react-native';
+import rnDeviceInfo from 'react-native-device-info';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import messaging from '@react-native-firebase/messaging';
+import { v5 as uuidv5 } from 'uuid';
+import { NAMESPACE } from './constant';
+import logEvent from './log_event';
+
+/**
+ * Gets the Notifly user ID for the current user.
+ *
+ * @async
+ * @returns {Promise<string>} A promise that resolves with the Notifly user ID, or rejects with an error.
+ *
+ * @example
+ * const notiflyUserId = await getNotiflyUserId();
+ */
+export async function getNotiflyUserId() {
+    const encodedUserId = await AsyncStorage.getItem('notiflyUserId');
+    if (encodedUserId) {
+        return encodedUserId;
+    }
+    const [prjId, externalUserId] = await Promise.all([
+        AsyncStorage.getItem('notiflyProjectId'),
+        AsyncStorage.getItem('notiflyExternalUserId'),
+    ]);
+    let notiflyUserId;
+    if (externalUserId) {
+        notiflyUserId = uuidv5(`${prjId}${externalUserId}`, NAMESPACE.REGISTERED_USERID).replace(/-/g, '');
+    } else {
+        notiflyUserId = uuidv5(`${prjId}${await messaging().getToken()}`, NAMESPACE.UNREGISTERED_USERID).replace(
+            /-/g,
+            ''
+        );
+    }
+    return notiflyUserId;
+}
+
+/**
+ * Logs a 'session_start' event with device information.
+ *
+ * @async
+ * @returns {Promise<void>} A promise that resolves when the event is logged, or rejects with an error.
+ *
+ * @example
+ * await sessionStart();
+ */
+export async function sessionStart() {
+    const platform = Platform.OS;
+    const apiLevelPromise = rnDeviceInfo.getApiLevel();
+    const brandPromise = rnDeviceInfo.getBrand();
+    const modelPromise = rnDeviceInfo.getModel();
+    const userAgentPromise = rnDeviceInfo.getUserAgent();
+    const notifAuthStatusPromise = messaging().hasPermission();
+
+    const [deviceModel, deviceBrand, apiLevel, userAgent, notifAuthStatus] = await Promise.all([
+        modelPromise,
+        brandPromise,
+        apiLevelPromise,
+        userAgentPromise,
+        notifAuthStatusPromise,
+    ]);
+
+    const sessionStartEventParams = {
+        platform,
+        type: 'session_start_event',
+        device_model: deviceModel,
+        properties: {
+            device_brand: deviceBrand,
+            api_level: apiLevel,
+            user_agent: userAgent,
+        },
+        notif_auth_status: notifAuthStatus,
+    };
+    await logEvent('session_start', sessionStartEventParams, null, true);
+}
+
+/**
+ * Handles a click event on a push notification.
+ *
+ * @async
+ * @function
+ * @param {Object} remoteMessage - The remote message object containing the notification data.
+ * @returns {Promise<void>} - A promise that resolves when the click event is handled.
+ *
+ * @example
+ * // Usage:
+ * const remoteMessage = {
+ *     data: {
+ *         link: 'https://example.com',
+ *         campaign_id: '1234'
+ *     }
+ * };
+ * await clickHandler(remoteMessage);
+ */
+export async function clickHandler(remoteMessage) {
+    if (!remoteMessage) {
+        console.warn('[Notifly] clickHandler receives a null remoteMessage.');
+        return;
+    }
+    if (remoteMessage.data?.notifly_message_type != 'push-notification') {
+        return;
+    }
+
+    try {
+        const { data: { link, campaign_id, notifly_message_id } = {} } = remoteMessage;
+
+        if (link) {
+            Linking.openURL(link);
+        }
+        await logEvent(
+            'push_click',
+            { channel: 'push-notification', type: 'message_event', campaign_id, notifly_message_id, status: 'quit' },
+            null,
+            true
+        );
+    } catch (err) {
+        console.warn('[Notifly] custom click handler registration failed.');
+    }
+}
+
+// React Native does not support Buffer out of the box, so we need to implement our own base64 decoder.
+export function base64Decode(input) {
+    const chars =
+        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+    let str = '';
+    let output = '';
+
+    for (let i = 0; i < input.length; i += 4) {
+        const encoded1 = chars.indexOf(input[i]);
+        const encoded2 = chars.indexOf(input[i + 1]);
+        const encoded3 = chars.indexOf(input[i + 2]);
+        const encoded4 = chars.indexOf(input[i + 3]);
+
+        const decoded1 = (encoded1 << 2) | (encoded2 >> 4);
+        const decoded2 = ((encoded2 & 15) << 4) | (encoded3 >> 2);
+        const decoded3 = ((encoded3 & 3) << 6) | encoded4;
+
+        output += String.fromCharCode(decoded1);
+        if (encoded3 !== 64) output += String.fromCharCode(decoded2);
+        if (encoded4 !== 64) output += String.fromCharCode(decoded3);
+    }
+
+    return output;
+}