@trycourier/courier-react-native 5.6.16 → 5.7.0

package/src/views/CourierInboxView.tsx

@@ -1,19 +1,31 @@
-import React, { useEffect } from "react";
-import { Platform, ViewStyle, DeviceEventEmitter, EmitterSubscription } from "react-native";
-import { InboxAction } from "../models/InboxAction";
-import { InboxMessage } from "../models/InboxMessage";
-import { CourierInboxTheme } from "../models/CourierInboxTheme";
-import { Modules } from "../Modules";
+import React, { useEffect } from 'react';
+import {
+  Platform,
+  ViewStyle,
+  DeviceEventEmitter,
+  EmitterSubscription,
+} from 'react-native';
+import { InboxAction } from '../models/InboxAction';
+import { InboxMessage } from '../models/InboxMessage';
+import { CourierInboxTheme } from '../models/CourierInboxTheme';
+import { Modules } from '../Modules';
 
 type CourierInboxViewProps = {
-  canSwipePages?: boolean,
-  theme?: { 
-    light?: CourierInboxTheme, 
-    dark?: CourierInboxTheme 
+  canSwipePages?: boolean;
+  theme?: {
+    light?: CourierInboxTheme;
+    dark?: CourierInboxTheme;
   };
   onClickInboxMessageAtIndex?: (message: InboxMessage, index: number) => void;
-  onLongPressInboxMessageAtIndex?: (message: InboxMessage, index: number) => void;
-  onClickInboxActionForMessageAtIndex?: (action: InboxAction, message: InboxMessage, index: number) => void;
+  onLongPressInboxMessageAtIndex?: (
+    message: InboxMessage,
+    index: number
+  ) => void;
+  onClickInboxActionForMessageAtIndex?: (
+    action: InboxAction,
+    message: InboxMessage,
+    index: number
+  ) => void;
   onScrollInbox?: (offsetY: number, offsetX: number) => void;
   style?: ViewStyle;
 };
@@ -21,128 +33,124 @@ type CourierInboxViewProps = {
 const CourierInbox = Modules.getNativeComponent('CourierInboxView');
 
 export const CourierInboxView = (props: CourierInboxViewProps) => {
-
-  let onClickInboxMessageAtIndexListener: EmitterSubscription | undefined = undefined;
-  let onLongPressInboxMessageAtIndexListener: EmitterSubscription | undefined = undefined;
-  let onClickInboxActionForMessageAtIndexListener: EmitterSubscription | undefined = undefined;
-  let onScrollInboxListener: EmitterSubscription | undefined = undefined;
+  let onClickInboxMessageAtIndexListener: EmitterSubscription | undefined;
+  let onLongPressInboxMessageAtIndexListener: EmitterSubscription | undefined;
+  let onClickInboxActionForMessageAtIndexListener:
+    | EmitterSubscription
+    | undefined;
+  let onScrollInboxListener: EmitterSubscription | undefined;
 
   useEffect(() => {
-
     return () => {
       onClickInboxMessageAtIndexListener?.remove();
       onLongPressInboxMessageAtIndexListener?.remove();
       onClickInboxActionForMessageAtIndexListener?.remove();
       onScrollInboxListener?.remove();
-    }
-
+    };
   }, []);
 
   useEffect(() => {
-
     onClickInboxMessageAtIndexListener?.remove();
 
     if (Platform.OS === 'android' && props.onClickInboxMessageAtIndex) {
-      onClickInboxMessageAtIndexListener = DeviceEventEmitter.addListener('courierClickMessageAtIndex', onClickInboxMessageAtIndex);
+      onClickInboxMessageAtIndexListener = DeviceEventEmitter.addListener(
+        'courierClickMessageAtIndex',
+        onClickInboxMessageAtIndex
+      );
     }
-
   }, [props.onClickInboxMessageAtIndex]);
 
   const onClickInboxMessageAtIndex = (event: any) => {
-
     // Parse the native event data
     if (props.onClickInboxMessageAtIndex) {
-
-      const index = event["index"];
-      const message = InboxMessage.fromJson(event["message"]);
+      const index = event.index;
+      const message = InboxMessage.fromJson(event.message);
 
       props.onClickInboxMessageAtIndex(message, index);
-
     }
-
-  }
+  };
 
   useEffect(() => {
-
     onLongPressInboxMessageAtIndexListener?.remove();
 
     if (Platform.OS === 'android' && props.onLongPressInboxMessageAtIndex) {
-      onLongPressInboxMessageAtIndexListener = DeviceEventEmitter.addListener('courierLongPressMessageAtIndex', onLongPressInboxMessageAtIndex);
+      onLongPressInboxMessageAtIndexListener = DeviceEventEmitter.addListener(
+        'courierLongPressMessageAtIndex',
+        onLongPressInboxMessageAtIndex
+      );
     }
-
   }, [props.onLongPressInboxMessageAtIndex]);
 
   const onLongPressInboxMessageAtIndex = (event: any) => {
-
     // Parse the native event data
     if (props.onLongPressInboxMessageAtIndex) {
-
-      const index = event["index"];
-      const message = InboxMessage.fromJson(event["message"]);
+      const index = event.index;
+      const message = InboxMessage.fromJson(event.message);
 
       props.onLongPressInboxMessageAtIndex(message, index);
-
     }
-
-  }
+  };
 
   useEffect(() => {
-
     onClickInboxActionForMessageAtIndexListener?.remove();
 
-    if (Platform.OS === 'android' && props.onClickInboxActionForMessageAtIndex) {
-      onClickInboxActionForMessageAtIndexListener = DeviceEventEmitter.addListener('courierClickActionAtIndex', onClickInboxActionForMessageAtIndex);
+    if (
+      Platform.OS === 'android' &&
+      props.onClickInboxActionForMessageAtIndex
+    ) {
+      onClickInboxActionForMessageAtIndexListener =
+        DeviceEventEmitter.addListener(
+          'courierClickActionAtIndex',
+          onClickInboxActionForMessageAtIndex
+        );
     }
-
   }, [props.onClickInboxActionForMessageAtIndex]);
 
   const onClickInboxActionForMessageAtIndex = (event: any) => {
-
     // Parse the native event data
     if (props.onClickInboxActionForMessageAtIndex) {
-
-      const index = event["index"];
-      const action = InboxAction.fromJson(event["action"]);
-      const message = InboxMessage.fromJson(event["message"]);
+      const index = event.index;
+      const action = InboxAction.fromJson(event.action);
+      const message = InboxMessage.fromJson(event.message);
 
       props.onClickInboxActionForMessageAtIndex(action, message, index);
-
     }
-
-  }
+  };
 
   useEffect(() => {
-
     onScrollInboxListener?.remove();
 
     if (Platform.OS === 'android' && props.onScrollInbox) {
-      onScrollInboxListener = DeviceEventEmitter.addListener('courierScrollInbox', onScrollInbox);
+      onScrollInboxListener = DeviceEventEmitter.addListener(
+        'courierScrollInbox',
+        onScrollInbox
+      );
     }
-
-  }, [props.onScrollInbox])
+  }, [props.onScrollInbox]);
 
   const onScrollInbox = (event: any) => {
-
     // Parse the native event data
     if (props.onScrollInbox) {
-
-      const contentOffset = event["contentOffset"];
-      props.onScrollInbox(contentOffset["y"], contentOffset["x"]);
-
+      const contentOffset = event.contentOffset;
+      props.onScrollInbox(contentOffset.y, contentOffset.x);
     }
-
-  }
+  };
 
   return (
-    <CourierInbox 
+    <CourierInbox
       canSwipePages={props.canSwipePages ?? false}
-      theme={props.theme ?? { light: undefined, dark: undefined }} 
-      onClickInboxMessageAtIndex={(event: any) => onClickInboxMessageAtIndex(event.nativeEvent)}
-      onLongPressInboxMessageAtIndex={(event: any) => onLongPressInboxMessageAtIndex(event.nativeEvent)}
-      onClickInboxActionForMessageAtIndex={(event: any) => onClickInboxActionForMessageAtIndex(event.nativeEvent)}
+      theme={props.theme ?? { light: undefined, dark: undefined }}
+      onClickInboxMessageAtIndex={(event: any) =>
+        onClickInboxMessageAtIndex(event.nativeEvent)
+      }
+      onLongPressInboxMessageAtIndex={(event: any) =>
+        onLongPressInboxMessageAtIndex(event.nativeEvent)
+      }
+      onClickInboxActionForMessageAtIndex={(event: any) =>
+        onClickInboxActionForMessageAtIndex(event.nativeEvent)
+      }
       onScrollInbox={(event: any) => onScrollInbox(event.nativeEvent)}
       style={props.style}
     />
-  )
-
-}
+  );
+};

package/src/views/CourierPreferencesView.tsx

@@ -1,13 +1,21 @@
-import React, { useEffect } from "react";
-import { DeviceEventEmitter, EmitterSubscription, Platform, ViewStyle } from "react-native";
-import { CourierPreferencesMode, CourierPreferencesTheme } from "../models/CourierPreferencesTheme";
-import { Modules } from "../Modules";
+import React, { useEffect } from 'react';
+import {
+  DeviceEventEmitter,
+  EmitterSubscription,
+  Platform,
+  ViewStyle,
+} from 'react-native';
+import {
+  CourierPreferencesMode,
+  CourierPreferencesTheme,
+} from '../models/CourierPreferencesTheme';
+import { Modules } from '../Modules';
 
 type CourierPreferencesProps = {
-  mode?: CourierPreferencesMode,
-  theme?: { 
-    light?: CourierPreferencesTheme, 
-    dark?: CourierPreferencesTheme 
+  mode?: CourierPreferencesMode;
+  theme?: {
+    light?: CourierPreferencesTheme;
+    dark?: CourierPreferencesTheme;
   };
   onScrollPreferences?: (offsetY: number, offsetX: number) => void;
   onPreferenceError?: (message: string) => void;
@@ -17,59 +25,50 @@ type CourierPreferencesProps = {
 const CourierPreferences = Modules.getNativeComponent('CourierPreferencesView');
 
 export const CourierPreferencesView = (props: CourierPreferencesProps) => {
-
-  let onScrollPreferencesListener: EmitterSubscription | undefined = undefined;
+  let onScrollPreferencesListener: EmitterSubscription | undefined;
 
   useEffect(() => {
-
     return () => {
       onScrollPreferencesListener?.remove();
-    }
-
+    };
   }, []);
 
   useEffect(() => {
-
     onScrollPreferencesListener?.remove();
 
     if (Platform.OS === 'android' && props.onScrollPreferences) {
-      onScrollPreferencesListener = DeviceEventEmitter.addListener('courierScrollPreferences', onScrollPreferences);
+      onScrollPreferencesListener = DeviceEventEmitter.addListener(
+        'courierScrollPreferences',
+        onScrollPreferences
+      );
     }
-
-  }, [props.onScrollPreferences])
+  }, [props.onScrollPreferences]);
 
   const onScrollPreferences = (event: any) => {
-
     // Parse the native event data
     if (props.onScrollPreferences) {
-
-      const contentOffset = event["contentOffset"];
-      props.onScrollPreferences(contentOffset["y"], contentOffset["x"]);
-
+      const contentOffset = event.contentOffset;
+      props.onScrollPreferences(contentOffset.y, contentOffset.x);
     }
-
-  }
+  };
 
   const onPreferenceError = (event: any) => {
-
     // Parse the native event data
     if (props.onPreferenceError) {
-
-      const message = event["error"];
+      const message = event.error;
       props.onPreferenceError(message);
-
     }
-
-  }
+  };
 
   return (
-    <CourierPreferences 
+    <CourierPreferences
       mode={props.mode}
       theme={props.theme ?? { light: undefined, dark: undefined }}
-      onScrollPreferences={(event: any) => onScrollPreferences(event.nativeEvent)}
+      onScrollPreferences={(event: any) =>
+        onScrollPreferences(event.nativeEvent)
+      }
       onPreferenceError={(event: any) => onPreferenceError(event.nativeEvent)}
       style={props.style}
     />
-  )
-
-}
+  );
+};

package/lib/example/src/App.js

@@ -1,11 +0,0 @@
-import { NavigationContainer } from '@react-navigation/native';
-import React from 'react';
-import Home from './Home';
-import Toast from 'react-native-toast-message';
-import { Poke } from './Poke';
-export default function App() {
-    return (React.createElement(Poke, { initialEnabled: false },
-        React.createElement(NavigationContainer, null,
-            React.createElement(Home, null),
-            React.createElement(Toast, null))));
-}

package/lib/example/src/Emitter.js

@@ -1,11 +0,0 @@
-import EventEmitter from 'eventemitter3';
-const eventEmitter = new EventEmitter();
-export function emitEvent(eventName, eventData) {
-    eventEmitter.emit(eventName, eventData);
-}
-export function addListener(eventName, listener) {
-    eventEmitter.on(eventName, listener);
-}
-export function removeListener(eventName, listener) {
-    eventEmitter.off(eventName, listener);
-}

package/lib/example/src/Env.js

@@ -1,6 +0,0 @@
-export default class Env {
-    static brandId = 'MX9K96KBP84ZF8JAVKN5F45Q1EVE';
-    static authKey = 'pk_prod_NGYE57FM5M4P3MKPTVQDQD9KPPN2';
-    static clientKey = 'YzM1YmFiYjUtZjA2My00NGU3LWEyODYtODU3ODUyNDNmYTcw';
-    static topicId = '35K24W99WCME21MRG7X2BPDF6CK7';
-}

package/lib/example/src/Home.js

@@ -1,67 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Alert, Button } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import Auth from './pages/Auth';
-import Push from './pages/Push';
-import Inbox from './pages/Inbox';
-import Courier from '@trycourier/courier-react-native';
-import PreferencesStack from './pages/PreferencesStack';
-import Tests from './pages/Tests';
-const Tab = createBottomTabNavigator();
-const Home = () => {
-    const [unreadCount, setUnreadCount] = useState(0);
-    useEffect(() => {
-        const setupInbox = async () => {
-            // Setup Push
-            Courier.setIOSForegroundPresentationOptions({ options: ['sound', 'badge', 'list', 'banner'] });
-            const pushListener = Courier.shared.addPushNotificationListener({
-                onPushNotificationClicked(push) {
-                    console.log(push);
-                    Alert.alert('👆 Push Notification Clicked', JSON.stringify(push));
-                },
-                onPushNotificationDelivered(push) {
-                    console.log(push);
-                    Alert.alert('📬 Push Notification Delivered', JSON.stringify(push));
-                }
-            });
-            // Setup Inbox
-            await Courier.shared.setInboxPaginationLimit(100);
-            const inboxListener = await Courier.shared.addInboxListener({
-                onUnreadCountChanged(unreadCount) {
-                    setUnreadCount(unreadCount);
-                },
-            });
-            return { pushListener, inboxListener };
-        };
-        const listeners = setupInbox();
-        return () => {
-            listeners.then(({ pushListener, inboxListener }) => {
-                pushListener.remove();
-                inboxListener.remove();
-            });
-        };
-    }, []);
-    const inboxOptions = () => {
-        const badgeCount = () => {
-            return unreadCount > 0 ? unreadCount : undefined;
-        };
-        return {
-            headerRight: () => (React.createElement(Button, { onPress: () => Courier.shared.readAllInboxMessages(), title: "Read All" })),
-            tabBarBadge: badgeCount(),
-            tabBarIcon: ({ color, size }) => (React.createElement(MaterialCommunityIcons, { name: 'bell', color: color, size: size }))
-        };
-    };
-    const icon = (icon) => {
-        return {
-            tabBarIcon: ({ color, size }) => (React.createElement(MaterialCommunityIcons, { name: icon, color: color, size: size }))
-        };
-    };
-    return (React.createElement(Tab.Navigator, null,
-        React.createElement(Tab.Screen, { name: "Auth", component: Auth, options: icon('account-circle') }),
-        React.createElement(Tab.Screen, { name: "Push", component: Push, options: icon('message-badge') }),
-        React.createElement(Tab.Screen, { name: "Inbox", component: Inbox, options: inboxOptions() }),
-        React.createElement(Tab.Screen, { name: "Preferences", component: PreferencesStack, options: { ...icon('wrench'), headerShown: false } }),
-        React.createElement(Tab.Screen, { name: "Tests", component: Tests, options: icon('test-tube') })));
-};
-export default Home;

package/lib/example/src/Poke.js

@@ -1,75 +0,0 @@
-import React, { useState, useEffect, useMemo, createContext, useContext } from 'react';
-import { View, StyleSheet, Animated, Easing } from 'react-native';
-const PokeContext = createContext(undefined);
-export const usePoke = () => {
-    const context = useContext(PokeContext);
-    if (!context) {
-        throw new Error('usePoke must be used within a PokeProvider');
-    }
-    return context;
-};
-export const Poke = ({ children, initialEnabled = true, initialIndicatorStyle, initialTouchTimeout = 150, }) => {
-    const [enabled, setEnabled] = useState(initialEnabled);
-    const [indicatorStyle, setIndicatorStyle] = useState(initialIndicatorStyle || {});
-    const [touchTimeout, setTouchTimeout] = useState(initialTouchTimeout);
-    const contextValue = useMemo(() => ({
-        setEnabled,
-        setIndicatorStyle,
-        setTouchTimeout,
-    }), []);
-    return (React.createElement(PokeContext.Provider, { value: contextValue },
-        React.createElement(TouchIndicator, { enabled: enabled, indicatorStyle: indicatorStyle, touchTimeout: touchTimeout }, children)));
-};
-const TouchIndicator = ({ children, indicatorStyle, enabled, touchTimeout }) => {
-    const [latestTouch, setLatestTouch] = useState(null);
-    const indicatorSize = indicatorStyle?.size || 50;
-    const indicatorColor = indicatorStyle?.color || 'rgba(0, 122, 255, 0.4)'; // Default blue color
-    useEffect(() => {
-        if (latestTouch) {
-            const timer = setTimeout(() => {
-                setLatestTouch(null);
-            }, touchTimeout);
-            return () => clearTimeout(timer);
-        }
-        return () => { }; // Add this line
-    }, [latestTouch, touchTimeout]);
-    const handleTouch = (event) => {
-        if (!enabled)
-            return;
-        const touch = event.nativeEvent.touches[0]; // Get only the latest touch
-        if (touch) {
-            const newTouch = {
-                id: `${touch.identifier}-${Date.now()}`,
-                x: touch.pageX,
-                y: touch.pageY,
-                timestamp: Date.now(),
-                animation: new Animated.Value(1),
-            };
-            Animated.timing(newTouch.animation, {
-                toValue: 0,
-                duration: touchTimeout,
-                useNativeDriver: true,
-                easing: Easing.out(Easing.cubic),
-            }).start();
-            setLatestTouch(newTouch);
-        }
-    };
-    const touchIndicatorStyle = useMemo(() => ({
-        position: 'absolute',
-        width: indicatorSize,
-        height: indicatorSize,
-        borderRadius: indicatorSize / 2,
-        backgroundColor: indicatorColor,
-        zIndex: 9999,
-    }), [indicatorSize, indicatorColor]);
-    return (React.createElement(View, { style: StyleSheet.absoluteFill, onTouchStart: handleTouch, onTouchMove: handleTouch, onTouchEnd: handleTouch },
-        children,
-        enabled && latestTouch && (React.createElement(Animated.View, { key: latestTouch.id, style: [
-                touchIndicatorStyle,
-                {
-                    left: latestTouch.x - indicatorSize / 2,
-                    top: latestTouch.y - indicatorSize / 2,
-                    opacity: latestTouch.animation,
-                },
-            ] }))));
-};

package/lib/example/src/Tabs.js

@@ -1,36 +0,0 @@
-import React from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-export const Tab = ({ title, isSelected, onPress }) => (React.createElement(TouchableOpacity, { onPress: onPress, style: [styles.tabButton, isSelected && styles.selectedTabButton] },
-    React.createElement(Text, { style: [styles.tabText, isSelected && styles.selectedTabText] }, title)));
-export const TabControl = ({ tabs, selectedTab, setSelectedTab }) => (React.createElement(View, { style: styles.segmentedControl }, tabs.map((tab) => (React.createElement(Tab, { key: tab.key, title: tab.title, isSelected: selectedTab === tab.key, onPress: () => setSelectedTab(tab.key) })))));
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    segmentedControl: {
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-        width: '100%',
-    },
-    content: {
-        flex: 1,
-        width: '100%',
-        height: '100%',
-    },
-    tabButton: {
-        padding: 16,
-        flex: 1,
-        alignItems: 'center',
-        borderBottomWidth: 2,
-        borderBottomColor: 'transparent',
-    },
-    selectedTabButton: {
-        borderBottomColor: 'blue',
-    },
-    tabText: {
-        color: 'black',
-    },
-    selectedTabText: {
-        fontWeight: 'bold',
-    },
-});

package/lib/example/src/Utils.js

@@ -1,71 +0,0 @@
-export class ExampleServer {
-    static async generateJwt(props) {
-        return new Promise((resolve, reject) => {
-            const url = 'https://api.courier.com/auth/issue-token';
-            const request = {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${props.authKey}`
-                },
-                body: JSON.stringify({
-                    scope: `user_id:${props.userId} write:user-tokens inbox:read:messages inbox:write:events read:preferences write:preferences read:brands`,
-                    expires_in: '2 days'
-                })
-            };
-            fetch(url, request)
-                .then(response => response.json())
-                .then((data) => {
-                resolve(data.token);
-            })
-                .catch(error => {
-                reject(error);
-            });
-        });
-    }
-    static async sendTest(props) {
-        const url = 'https://api.courier.com/send';
-        const headers = {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${props.authKey}`,
-        };
-        const body = JSON.stringify({
-            'message': {
-                'to': {
-                    'user_id': props.userId
-                },
-                'content': {
-                    'title': props.title ?? 'Test',
-                    'body': props.body ?? 'Body',
-                },
-                'routing': {
-                    'method': 'all',
-                    'channels': [props.channel],
-                },
-            },
-        });
-        const response = await fetch(url, {
-            method: 'POST',
-            headers: headers,
-            body: body,
-        });
-        if (response.status === 202) {
-            const json = await response.json();
-            return json['requestId'] ?? 'Error';
-        }
-        else {
-            throw new Error('Failed to send test message');
-        }
-    }
-}
-export class Utils {
-    static generateUUID() {
-        let uuid = '';
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        const charactersLength = characters.length;
-        for (let i = 0; i < 16; i++) {
-            uuid += characters.charAt(Math.floor(Math.random() * charactersLength));
-        }
-        return uuid;
-    }
-}