@trycourier/courier-react-native 5.4.2 → 5.5.0

package/lib/example/src/pages/inbox/InboxCustom.js

@@ -0,0 +1,141 @@
+import Courier from '@trycourier/courier-react-native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, FlatList, StyleSheet, TouchableOpacity, RefreshControl, ActivityIndicator, Platform } from 'react-native';
+const InboxCustom = () => {
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [messages, setMessages] = useState([]);
+    const [canPaginate, setCanPaginate] = useState(false);
+    useEffect(() => {
+        const initInbox = async () => {
+            await Courier.shared.setInboxPaginationLimit(100);
+            const inboxListener = await Courier.shared.addInboxListener({
+                onInitialLoad(isRefresh) {
+                    if (isRefresh) {
+                        setIsRefreshing(true);
+                    }
+                    else {
+                        setIsLoading(true);
+                    }
+                },
+                onError(error) {
+                    setIsLoading(false);
+                    setError(error);
+                },
+                onFeedChanged(messageSet) {
+                    setIsLoading(false);
+                    setError(null);
+                    setMessages(messageSet.messages);
+                    setCanPaginate(messageSet.canPaginate);
+                },
+                onMessageChanged(feed, index, message) {
+                    if (feed === 'feed') {
+                        setMessages(prevMessages => {
+                            const newMessages = [...prevMessages];
+                            newMessages[index] = message;
+                            return newMessages;
+                        });
+                    }
+                },
+                onMessageAdded(feed, index, message) {
+                    if (feed === 'feed') {
+                        setMessages(prevMessages => {
+                            const newMessages = [...prevMessages];
+                            newMessages.splice(index, 0, message);
+                            return newMessages;
+                        });
+                    }
+                },
+                onMessageRemoved(feed, index) {
+                    if (feed === 'feed') {
+                        setMessages(prevMessages => {
+                            const newMessages = [...prevMessages];
+                            newMessages.splice(index, 1);
+                            return newMessages;
+                        });
+                    }
+                },
+                onPageAdded(feed, messageSet) {
+                    if (feed === 'feed') {
+                        setMessages(prevMessages => [...prevMessages, ...messageSet.messages]);
+                        setCanPaginate(messageSet.canPaginate);
+                    }
+                }
+            });
+            return inboxListener;
+        };
+        let inboxListener;
+        initInbox().then(listener => {
+            inboxListener = listener;
+        });
+        return () => {
+            if (inboxListener) {
+                inboxListener.remove();
+            }
+        };
+    }, []);
+    const ListItem = (props) => {
+        const styles = StyleSheet.create({
+            container: {
+                padding: 20,
+                borderBottomWidth: 1,
+                borderBottomColor: '#ccc',
+            },
+            unread: {
+                backgroundColor: 'red'
+            },
+            text: {
+                width: Platform.OS === 'ios' ? undefined : '100%',
+                fontFamily: Platform.select({
+                    ios: 'Courier',
+                    android: 'monospace',
+                    default: 'monospace',
+                }),
+                fontSize: 16,
+            },
+        });
+        const isRead = props.message.read;
+        async function toggleMessage() {
+            const messageId = props.message.messageId;
+            await Courier.shared.clickMessage({ messageId: messageId });
+            isRead ? await Courier.shared.unreadMessage({ messageId: messageId }) : await Courier.shared.readMessage({ messageId: messageId });
+            console.log(props.message);
+        }
+        return (React.createElement(TouchableOpacity, { style: [styles.container, isRead ? undefined : styles.unread], onPress: toggleMessage },
+            React.createElement(Text, { style: styles.text }, JSON.stringify(props.message, null, 2))));
+    };
+    const PaginationItem = () => {
+        return (React.createElement(View, { style: { paddingVertical: 20 } },
+            React.createElement(ActivityIndicator, { size: "small" })));
+    };
+    const refresh = async () => {
+        setIsRefreshing(true);
+        await Courier.shared.refreshInbox();
+        setIsRefreshing(false);
+    };
+    function buildContent() {
+        if (isLoading) {
+            return React.createElement(Text, null, "Loading");
+        }
+        if (error) {
+            return React.createElement(Text, null, error);
+        }
+        return (React.createElement(FlatList, { data: messages, keyExtractor: message => message.messageId, renderItem: message => React.createElement(ListItem, { message: message.item }), refreshControl: React.createElement(RefreshControl, { refreshing: isRefreshing, onRefresh: refresh }), ListFooterComponent: () => {
+                return canPaginate ? React.createElement(PaginationItem, null) : null;
+            }, onEndReached: () => {
+                if (canPaginate) {
+                    Courier.shared.fetchNextPageOfMessages({ inboxMessageFeed: 'feed' });
+                }
+            } }));
+    }
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
+    return (React.createElement(View, { style: styles.container }, buildContent()));
+};
+export default InboxCustom;

package/lib/example/src/pages/inbox/InboxDefault.js

@@ -0,0 +1,22 @@
+import Courier, { CourierInboxView } from '@trycourier/courier-react-native';
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+const InboxDefault = () => {
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        box: {
+            width: '100%',
+            height: '100%',
+        },
+    });
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(CourierInboxView, { onClickInboxMessageAtIndex: async (message, _index) => {
+                console.log('onClickInboxMessageAtIndex', message.read);
+                message.read ? await Courier.shared.unreadMessage({ messageId: message.messageId }) : await Courier.shared.readMessage({ messageId: message.messageId });
+            }, onClickInboxActionForMessageAtIndex: (action, _message, _index) => {
+                console.log(action);
+            }, style: styles.box })));
+};
+export default InboxDefault;

package/lib/example/src/pages/inbox/InboxStyled.js

@@ -0,0 +1,220 @@
+import Courier, { CourierInboxView } from '@trycourier/courier-react-native';
+import React from 'react';
+import { View, StyleSheet, ActionSheetIOS, Platform, Alert } from 'react-native';
+import { Styles } from '../Styles';
+import Env from '../../Env';
+const InboxStyled = () => {
+    function getTheme(isDark) {
+        const styles = Styles(isDark);
+        return {
+            brandId: Env.brandId,
+            tabIndicatorColor: styles.Colors.action,
+            tabStyle: {
+                selected: {
+                    font: {
+                        family: styles.Fonts.title,
+                        size: styles.TextSizes.title,
+                        color: styles.Colors.heading
+                    },
+                    indicator: {
+                        font: {
+                            family: styles.Fonts.title,
+                            size: 14,
+                            color: '#FFFFFF'
+                        },
+                        color: styles.Colors.action
+                    }
+                },
+                unselected: {
+                    font: {
+                        family: styles.Fonts.title,
+                        size: styles.TextSizes.title,
+                        color: styles.Colors.subtitle
+                    },
+                    indicator: {
+                        font: {
+                            family: styles.Fonts.title,
+                            size: 14,
+                            color: '#000000'
+                        },
+                        color: styles.Colors.subtitle
+                    }
+                }
+            },
+            readingSwipeActionStyle: {
+                read: {
+                    icon: Platform.OS === 'ios' ? 'icon_undo' : 'icon_undo',
+                    color: styles.Colors.subtitle
+                },
+                unread: {
+                    icon: Platform.OS === 'ios' ? 'icon_check' : 'icon_check',
+                    color: styles.Colors.action
+                }
+            },
+            archivingSwipeActionStyle: {
+                archive: {
+                    icon: Platform.OS === 'ios' ? 'icon_archive' : 'icon_archive',
+                    color: styles.Colors.warning
+                }
+            },
+            unreadIndicatorStyle: {
+                indicator: 'dot',
+                color: styles.Colors.action
+            },
+            titleStyle: {
+                unread: {
+                    family: styles.Fonts.title,
+                    size: styles.TextSizes.title,
+                    color: styles.Colors.title
+                },
+                read: {
+                    family: styles.Fonts.title,
+                    size: styles.TextSizes.title,
+                    color: styles.Colors.subtitle
+                }
+            },
+            timeStyle: {
+                unread: {
+                    family: styles.Fonts.subtitle,
+                    size: styles.TextSizes.subtitle,
+                    color: styles.Colors.title
+                },
+                read: {
+                    family: styles.Fonts.subtitle,
+                    size: styles.TextSizes.subtitle,
+                    color: styles.Colors.subtitle
+                }
+            },
+            bodyStyle: {
+                unread: {
+                    family: styles.Fonts.subtitle,
+                    size: styles.TextSizes.subtitle,
+                    color: styles.Colors.subtitle
+                },
+                read: {
+                    family: styles.Fonts.subtitle,
+                    size: styles.TextSizes.subtitle,
+                    color: styles.Colors.subtitle
+                }
+            },
+            buttonStyle: {
+                unread: {
+                    font: {
+                        family: styles.Fonts.subtitle,
+                        size: styles.TextSizes.subtitle,
+                        color: '#FFFFFF'
+                    },
+                    backgroundColor: styles.Colors.action,
+                    cornerRadius: styles.Corners.button
+                },
+                read: {
+                    font: {
+                        family: styles.Fonts.subtitle,
+                        size: styles.TextSizes.subtitle,
+                        color: styles.Colors.title,
+                    },
+                    backgroundColor: styles.Colors.option,
+                    cornerRadius: styles.Corners.button
+                }
+            },
+            infoViewStyle: {
+                font: {
+                    family: styles.Fonts.title,
+                    size: styles.TextSizes.title,
+                    color: styles.Colors.title
+                },
+                button: {
+                    font: {
+                        family: styles.Fonts.subtitle,
+                        size: styles.TextSizes.subtitle,
+                        color: styles.Colors.action
+                    },
+                    backgroundColor: styles.Colors.title,
+                    cornerRadius: styles.Corners.button
+                }
+            },
+            iOS: {
+                messageAnimationStyle: 'right',
+                cellStyles: {
+                    separatorStyle: 'singleLineEtched',
+                    separatorInsets: {
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0
+                    }
+                }
+            },
+            android: {
+                dividerItemDecoration: 'vertical'
+            }
+        };
+    }
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        box: {
+            width: '100%',
+            height: '100%',
+        },
+    });
+    const showMessageActions = (message) => {
+        if (Platform.OS === 'android') {
+            Alert.alert('Message Actions', '', [
+                {
+                    text: message.read ? 'Mark as Unread' : 'Mark as Read',
+                    onPress: () => {
+                        message.read ? Courier.shared.unreadMessage({ messageId: message.messageId }) : Courier.shared.readMessage({ messageId: message.messageId });
+                    },
+                },
+                {
+                    text: message.archived ? 'Unarchive' : 'Archive',
+                    onPress: () => {
+                        message.archived ? null : Courier.shared.archiveMessage({ messageId: message.messageId });
+                    },
+                },
+                {
+                    text: 'Cancel',
+                    style: 'cancel',
+                },
+            ]);
+        }
+        else if (Platform.OS === 'ios') {
+            ActionSheetIOS.showActionSheetWithOptions({
+                options: [message.read ? 'Mark as Unread' : 'Mark as Read', message.archived ? 'Unarchive' : 'Archive', 'Cancel'],
+                cancelButtonIndex: 2,
+                destructiveButtonIndex: 1,
+            }, (buttonIndex) => {
+                switch (buttonIndex) {
+                    case 0:
+                        message.read ? Courier.shared.unreadMessage({ messageId: message.messageId }) : Courier.shared.readMessage({ messageId: message.messageId });
+                        break;
+                    case 1:
+                        message.archived ? null : Courier.shared.archiveMessage({ messageId: message.messageId });
+                        break;
+                }
+            });
+        }
+    };
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(CourierInboxView, { canSwipePages: false, theme: {
+                light: getTheme(false),
+                dark: getTheme(true)
+            }, onClickInboxMessageAtIndex: async (message, _index) => {
+                console.log(message);
+                if (message.read) {
+                    await Courier.shared.unreadMessage({ messageId: message.messageId });
+                }
+                else {
+                    await Courier.shared.readMessage({ messageId: message.messageId });
+                }
+            }, onLongPressInboxMessageAtIndex: (message, _index) => {
+                showMessageActions(message);
+            }, onClickInboxActionForMessageAtIndex: (action, _message, _index) => {
+                console.log(action);
+            }, onScrollInbox: (y, _x) => {
+                console.log(`Inbox scroll offset y: ${y}`);
+            }, style: styles.box })));
+};
+export default InboxStyled;

package/lib/example/src/pages/preferences/PreferencesCustom.js

@@ -0,0 +1,91 @@
+import Courier from "@trycourier/courier-react-native";
+import { addListener } from "../../Emitter";
+import React, { useEffect, useState } from "react";
+import { ActivityIndicator, Dimensions, FlatList, Platform, RefreshControl, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+const ListItem = (props) => {
+    const SCREEN_WIDTH = Dimensions.get("screen").width;
+    const styles = StyleSheet.create({
+        container: {
+            width: SCREEN_WIDTH,
+        },
+        text: {
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+            fontSize: 16,
+        }
+    });
+    return (React.createElement(TouchableOpacity, { style: styles.container, onPress: props.onClick },
+        React.createElement(View, { style: { padding: 16 } },
+            React.createElement(Text, { style: styles.text }, JSON.stringify(props.topic, null, 2)))));
+};
+const PreferencesCustom = ({ navigation }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [userId, setUserId] = useState();
+    const [topics, setTopics] = useState([]);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    useEffect(() => {
+        const initUser = async () => {
+            const id = await Courier.shared.getUserId();
+            setUserId(id);
+        };
+        initUser();
+        const handleSaveClicked = (_) => {
+            if (userId) {
+                getPrefs();
+            }
+        };
+        // Add listener when component mounts
+        addListener('saveButtonClicked', handleSaveClicked);
+    }, []);
+    useEffect(() => {
+        if (userId) {
+            getPrefs();
+        }
+    }, [userId]);
+    async function getPrefs(refresh = false) {
+        const client = await Courier.shared.getClient();
+        if (!client) {
+            return;
+        }
+        if (refresh) {
+            setIsRefreshing(true);
+        }
+        else {
+            setIsLoading(true);
+        }
+        try {
+            console.log('getPrefs');
+            const res = await client.preferences.getUserPreferences();
+            setTopics(res.items);
+        }
+        catch (e) {
+            console.log(e);
+        }
+        if (refresh) {
+            setIsRefreshing(false);
+        }
+        else {
+            setIsLoading(false);
+        }
+    }
+    const onItemClick = (topic) => {
+        navigation.push('PreferencesDetail', { id: topic.topicId });
+    };
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        text: {
+            marginBottom: 10,
+        },
+    });
+    return (React.createElement(View, { style: styles.container },
+        isLoading && (React.createElement(ActivityIndicator, { size: "small" })),
+        !isLoading && (React.createElement(FlatList, { data: topics, renderItem: ({ item }) => React.createElement(ListItem, { topic: item, onClick: () => onItemClick(item) }), keyExtractor: (item) => item.topicId ?? 'empty', refreshControl: React.createElement(RefreshControl, { refreshing: isRefreshing, onRefresh: () => getPrefs(true) }) }))));
+};
+export default PreferencesCustom;

package/lib/example/src/pages/preferences/PreferencesDefault.js

@@ -0,0 +1,17 @@
+import { CourierPreferencesView } from "@trycourier/courier-react-native";
+import React from "react";
+import { StyleSheet, View } from "react-native";
+const PreferencesDefault = () => {
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        box: {
+            width: '100%',
+            height: '100%',
+        },
+    });
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(CourierPreferencesView, { mode: { type: 'topic' }, style: styles.box })));
+};
+export default PreferencesDefault;

package/lib/example/src/pages/preferences/PreferencesDetail.js

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from "react";
+import { ActivityIndicator, Button, Platform, ScrollView, StyleSheet, Switch, Text, View } from "react-native";
+import SegmentedControl from '@react-native-segmented-control/segmented-control';
+import Courier, { CourierUserPreferencesChannel, CourierUserPreferencesStatus } from "@trycourier/courier-react-native";
+import { emitEvent } from "../../Emitter";
+import Toast from 'react-native-toast-message';
+const PreferencesDetail = ({ route, navigation }) => {
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            padding: 20,
+        },
+        switchItem: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderBottomWidth: 1,
+            borderBottomColor: '#ccc',
+        },
+        text: {
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+            fontSize: 16,
+        },
+        section: {
+            marginBottom: 20,
+        },
+        title: {
+            fontWeight: 'bold',
+            marginBottom: 8,
+        },
+        loading: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
+    const statuses = [
+        { status: CourierUserPreferencesStatus.OptedIn, name: "OPTED_IN" },
+        { status: CourierUserPreferencesStatus.OptedOut, name: "OPTED_OUT" },
+        { status: CourierUserPreferencesStatus.Required, name: "REQUIRED" }
+    ];
+    const { id } = route.params;
+    const [isLoading, setIsLoading] = useState(false);
+    const [statusIndex, setStatusIndex] = useState(0);
+    const [useCustomRouting, setUseCustomRouting] = useState(false);
+    const [routingChannels, setRoutingChannels] = useState([]);
+    useEffect(() => {
+        navigation.setOptions({
+            headerTitle: id,
+        });
+        getTopic(id);
+    }, []);
+    async function getTopic(topicId) {
+        const client = await Courier.shared.getClient();
+        if (!client) {
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const topic = await client.preferences.getUserPreferenceTopic({ topicId });
+            setStatusIndex(statuses.findIndex(status => status.status === topic.status) || 0);
+            setUseCustomRouting(topic.hasCustomRouting || false);
+            setRoutingChannels(topic.customRouting || []);
+        }
+        catch (error) {
+            console.error("Error fetching topic:", error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }
+    async function savePreferences() {
+        const client = await Courier.shared.getClient();
+        if (!client) {
+            return;
+        }
+        setIsLoading(true);
+        try {
+            await client.preferences.putUserPreferenceTopic({
+                topicId: id,
+                status: statuses[statusIndex]?.status || CourierUserPreferencesStatus.OptedIn,
+                hasCustomRouting: useCustomRouting,
+                customRouting: routingChannels,
+            });
+            emitEvent('saveButtonClicked', {});
+            navigation.goBack();
+        }
+        catch (error) {
+            console.error("Error saving preferences:", error);
+            Toast.show({
+                type: 'error',
+                text1: error.message,
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }
+    return (React.createElement(React.Fragment, null, isLoading ? (React.createElement(View, { style: styles.loading },
+        React.createElement(ActivityIndicator, { size: "small" }))) : (React.createElement(ScrollView, { style: styles.container },
+        React.createElement(View, { style: styles.section },
+            React.createElement(Text, { style: styles.title }, "Status"),
+            React.createElement(SegmentedControl, { values: statuses.map(status => status.name), selectedIndex: statusIndex, fontStyle: styles.text, onChange: ({ nativeEvent }) => setStatusIndex(nativeEvent.selectedSegmentIndex) })),
+        React.createElement(View, { style: styles.section },
+            React.createElement(Text, { style: styles.title }, "Use Custom Routing"),
+            React.createElement(View, { style: styles.switchItem },
+                React.createElement(Text, { style: styles.text }, "Use Custom Routing"),
+                React.createElement(Switch, { value: useCustomRouting, onValueChange: value => {
+                        setUseCustomRouting(value);
+                    } }))),
+        React.createElement(View, { style: styles.section },
+            React.createElement(Text, { style: styles.title }, "Routing Channels"),
+            Object.values(CourierUserPreferencesChannel).map(channel => (React.createElement(View, { key: channel, style: styles.switchItem },
+                React.createElement(Text, { style: styles.text }, channel),
+                React.createElement(Switch, { value: routingChannels.includes(channel), onValueChange: value => {
+                        setRoutingChannels(prevChannels => value
+                            ? [...prevChannels, channel]
+                            : prevChannels.filter(c => c !== channel));
+                    } }))))),
+        React.createElement(View, { style: styles.section },
+            React.createElement(Button, { onPress: () => savePreferences(), title: "Save" }))))));
+};
+export default PreferencesDetail;