@trycourier/courier-react-native 5.6.17 → 5.7.0

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

@@ -1,141 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,220 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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;