@trycourier/courier-react-native 5.4.3 → 5.5.1

package/lib/example/src/pages/Auth.js

@@ -0,0 +1,224 @@
+import Courier from "@trycourier/courier-react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Button, Modal, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import Env from "../Env";
+import { ExampleServer } from "../Utils";
+import { usePoke } from '../Poke';
+const Auth = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [userId, setUserId] = useState();
+    const [tenantId, setTenantId] = useState();
+    useEffect(() => {
+        const initAuth = async () => {
+            const authListener = await Courier.shared.addAuthenticationListener({
+                onUserChanged: async (userId) => {
+                    setUserId(userId);
+                    setTenantId(await Courier.shared.getTenantId());
+                    console.log(`User changed: ${userId}`);
+                    console.log(`Tenant changed: ${await Courier.shared.getTenantId()}`);
+                }
+            });
+            const userId = await Courier.shared.getUserId();
+            const tenantId = await Courier.shared.getTenantId();
+            console.log(`Initial user: ${userId}`);
+            console.log(`Initial tenant: ${tenantId}`);
+            refreshJWT(userId, tenantId);
+            return authListener;
+        };
+        let listener;
+        initAuth().then(result => {
+            listener = result;
+        });
+        return () => {
+            if (listener) {
+                listener.remove();
+            }
+        };
+    }, []);
+    async function refreshJWT(userId, tenantId) {
+        console.log('Refreshing JWT');
+        if (!userId) {
+            console.log(`No user found`);
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            console.log(`User ID: ${userId}`);
+            await Courier.shared.signOut();
+            const token = await ExampleServer.generateJwt({
+                authKey: Env.authKey,
+                userId: userId,
+            });
+            console.log(`New token: ${token}`);
+            await Courier.shared.signIn({
+                accessToken: token,
+                userId: userId,
+                tenantId: tenantId,
+            });
+        }
+        catch (e) {
+            console.error(e);
+        }
+        setIsLoading(false);
+    }
+    async function signIn(userId, tenantId) {
+        console.log('Signing User In');
+        console.log(`User ID: ${userId}`);
+        console.log(`Tenant ID: ${tenantId}`);
+        setIsLoading(true);
+        try {
+            const token = await ExampleServer.generateJwt({
+                authKey: Env.authKey,
+                userId: userId,
+            });
+            console.log(`New token: ${token}`);
+            await Courier.shared.signIn({
+                accessToken: token,
+                userId: userId,
+                tenantId: tenantId.length ? tenantId : undefined
+            });
+            setUserId(await Courier.shared.getUserId());
+            setTenantId(await Courier.shared.getTenantId());
+        }
+        catch (e) {
+            console.error(e);
+        }
+        setIsLoading(false);
+    }
+    async function signOut() {
+        await Courier.shared.signOut();
+        setUserId(await Courier.shared.getUserId());
+        setTenantId(await Courier.shared.getTenantId());
+    }
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        text: {
+            marginBottom: 10,
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+            fontSize: 16,
+        },
+    });
+    const AuthButton = (props) => {
+        const [modalVisible, setModalVisible] = useState(false);
+        const [userId, setUserId] = useState('');
+        const [tenantId, setTenantId] = useState('');
+        const inputRef = useRef(null);
+        const styles = StyleSheet.create({
+            button: {
+                backgroundColor: 'lightgray',
+                padding: 10,
+                borderRadius: 5,
+            },
+            buttonText: {
+                fontSize: 16,
+                fontFamily: Platform.select({
+                    ios: 'Courier',
+                    android: 'monospace',
+                    default: 'monospace',
+                }),
+            },
+            modalContainer: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            },
+            modalContent: {
+                backgroundColor: 'white',
+                padding: 20,
+                borderRadius: 5,
+                elevation: 5,
+                minWidth: 300,
+            },
+            input: {
+                borderWidth: 1,
+                borderColor: 'gray',
+                borderRadius: 5,
+                padding: 10,
+                marginBottom: 10,
+            },
+        });
+        useEffect(() => {
+            if (modalVisible) {
+                inputRef.current.focus();
+            }
+        }, [modalVisible]);
+        const handleButtonPress = async () => {
+            if (await Courier.shared.getUserId()) {
+                await signOut();
+            }
+            else {
+                setModalVisible(true);
+            }
+        };
+        const handleModalClose = () => {
+            setModalVisible(false);
+        };
+        const handleUserIdInputChange = (text) => {
+            setUserId(text);
+        };
+        const handleTenantIdInputChange = (text) => {
+            setTenantId(text);
+        };
+        const handleSaveButtonPress = () => {
+            signIn(userId, tenantId);
+            setModalVisible(false);
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Modal, { visible: modalVisible, animationType: "slide", transparent: true },
+                React.createElement(View, { style: styles.modalContainer },
+                    React.createElement(View, { style: styles.modalContent },
+                        React.createElement(Text, null, "Set Courier User Id:"),
+                        React.createElement(TextInput, { ref: inputRef, style: styles.input, value: userId, autoCapitalize: "none", autoCorrect: false, onChangeText: handleUserIdInputChange }),
+                        React.createElement(Text, null, "Set Tenant Id:"),
+                        React.createElement(TextInput, { style: styles.input, value: tenantId, autoCapitalize: "none", autoCorrect: false, onChangeText: handleTenantIdInputChange }),
+                        React.createElement(Button, { title: "Sign In", onPress: handleSaveButtonPress }),
+                        React.createElement(Button, { title: "Cancel", onPress: handleModalClose })))),
+            React.createElement(TouchableOpacity, { style: styles.button, onPress: handleButtonPress },
+                React.createElement(Text, { style: styles.buttonText }, props.buttonText))));
+    };
+    const ToggleTouchesButton = () => {
+        const styles = StyleSheet.create({
+            button: {
+                backgroundColor: 'lightgray',
+                padding: 10,
+                borderRadius: 5,
+                marginTop: 10, // Add some space between buttons
+            },
+            buttonText: {
+                fontSize: 16,
+                fontFamily: Platform.select({
+                    ios: 'Courier',
+                    android: 'monospace',
+                    default: 'monospace',
+                }),
+            },
+        });
+        const [enabled, setEnabledState] = useState(false);
+        const { setEnabled } = usePoke();
+        const handleToggle = () => {
+            const newEnabled = !enabled;
+            setEnabledState(newEnabled);
+            setEnabled(newEnabled);
+        };
+        return (React.createElement(TouchableOpacity, { style: styles.button, onPress: handleToggle },
+            React.createElement(Text, { style: styles.buttonText }, enabled ? 'Hide Touches' : 'Show Touches')));
+    };
+    return (React.createElement(View, { style: styles.container },
+        isLoading && (React.createElement(ActivityIndicator, { size: "small" })),
+        !isLoading && (React.createElement(React.Fragment, null,
+            userId && React.createElement(Text, { style: styles.text }, userId),
+            tenantId && React.createElement(Text, { style: styles.text }, tenantId),
+            React.createElement(AuthButton, { buttonText: userId ? 'Sign Out' : 'Sign In' }),
+            React.createElement(ToggleTouchesButton, null)))));
+};
+export default Auth;

package/lib/example/src/pages/Inbox.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import InboxDefault from './inbox/InboxDefault';
+import InboxStyled from './inbox/InboxStyled';
+import InboxCustom from './inbox/InboxCustom';
+import { TabControl } from '../Tabs';
+const tabs = [
+    { title: 'Default', key: 'Default' },
+    { title: 'Styled', key: 'Styled' },
+    { title: 'Custom', key: 'Custom' },
+];
+const Inbox = () => {
+    const [selectedTab, setSelectedTab] = useState('Default');
+    const renderContent = () => {
+        switch (selectedTab) {
+            case 'Default':
+                return React.createElement(InboxDefault, null);
+            case 'Styled':
+                return React.createElement(InboxStyled, null);
+            case 'Custom':
+                return React.createElement(InboxCustom, null);
+            default:
+                return null;
+        }
+    };
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(TabControl, { tabs: tabs, selectedTab: selectedTab, setSelectedTab: setSelectedTab }),
+        React.createElement(View, { style: styles.content }, renderContent())));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+    },
+});
+export default Inbox;

package/lib/example/src/pages/Preferences.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import PreferencesCustom from './preferences/PreferencesCustom';
+import PreferencesDefault from './preferences/PreferencesDefault';
+import PreferencesStyled from './preferences/PreferencesStyled';
+const Tab = createMaterialTopTabNavigator();
+const PreferencesTab = () => {
+    return (React.createElement(Tab.Navigator, null,
+        React.createElement(Tab.Screen, { name: "Default", component: PreferencesDefault }),
+        React.createElement(Tab.Screen, { name: "Styled", component: PreferencesStyled }),
+        React.createElement(Tab.Screen, { name: "Custom", component: PreferencesCustom })));
+};
+export default PreferencesTab;

package/lib/example/src/pages/PreferencesStack.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import Preferences from './Preferences';
+import PreferencesDetail from './preferences/PreferencesDetail';
+const Stack = createStackNavigator();
+const PreferencesStack = () => {
+    return (React.createElement(Stack.Navigator, null,
+        React.createElement(Stack.Screen, { name: "PreferencesTab", component: Preferences }),
+        React.createElement(Stack.Screen, { name: "PreferencesDetail", component: PreferencesDetail })));
+};
+export default PreferencesStack;

package/lib/example/src/pages/Push.js

@@ -0,0 +1,93 @@
+import Courier, { CourierPushProvider } from '@trycourier/courier-react-native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Clipboard, ActivityIndicator, Platform } from 'react-native';
+const Push = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [tokens, setTokens] = useState(new Map());
+    useEffect(() => {
+        setExampleToken();
+    }, []);
+    const refreshTokens = async () => {
+        const tokensMap = await Courier.shared.getAllTokens();
+        setTokens(tokensMap);
+    };
+    const setExampleToken = async () => {
+        setIsLoading(true);
+        const requestStatus = await Courier.requestNotificationPermission();
+        console.log('Request Notification Status: ' + requestStatus);
+        console.log('Get Notification Status: ' + await Courier.getNotificationPermissionStatus());
+        // Example of setting an expo token
+        await Courier.shared.setTokenForProvider({
+            provider: CourierPushProvider.EXPO,
+            token: 'example_expo_token'
+        });
+        setIsLoading(false);
+        refreshTokens();
+    };
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            gap: 20,
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 20,
+        },
+        button: {
+            backgroundColor: 'lightgray',
+            padding: 10,
+            borderRadius: 5,
+        },
+        buttonText: {
+            fontSize: 16,
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+        },
+        itemContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: 8,
+        },
+        keyText: {
+            flex: 1,
+            textAlign: 'left',
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+            fontWeight: 'bold',
+            fontSize: 16,
+        },
+        valueText: {
+            flex: 1,
+            textAlign: 'right',
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+            fontSize: 16,
+        },
+    });
+    const handleCopyToClipboard = (value) => {
+        Clipboard.setString(value);
+    };
+    const handleButtonPress = () => {
+        Courier.requestNotificationPermission();
+    };
+    return (React.createElement(View, { style: styles.container },
+        isLoading && (React.createElement(ActivityIndicator, { size: "small" })),
+        !isLoading && (React.createElement(React.Fragment, null,
+            Array.from(tokens).map(([key, value]) => (React.createElement(TouchableOpacity, { key: key, onPress: () => handleCopyToClipboard(value), style: styles.itemContainer },
+                React.createElement(Text, { style: styles.keyText }, key),
+                React.createElement(Text, { style: styles.valueText }, value)))),
+            React.createElement(TouchableOpacity, { style: styles.button, onPress: refreshTokens },
+                React.createElement(Text, { style: styles.buttonText }, "Refresh Tokens")),
+            React.createElement(TouchableOpacity, { style: styles.button, onPress: handleButtonPress },
+                React.createElement(Text, { style: styles.buttonText }, "Request Permissions"))))));
+};
+export default Push;

package/lib/example/src/pages/Styles.js

@@ -0,0 +1,26 @@
+import { Platform } from "react-native";
+export const Styles = (isDark) => {
+    return {
+        Fonts: {
+            heading: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf',
+            title: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf',
+            subtitle: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf'
+        },
+        Colors: {
+            heading: isDark ? '#9747FF' : '#9747FF',
+            title: isDark ? '#FFFFFF' : '#000000',
+            subtitle: isDark ? '#9A9A9A' : '#BEBEBE',
+            warning: isDark ? '#C32F27' : '#C32F27',
+            option: isDark ? '#1F1F1F' : '#F0F0F0',
+            action: isDark ? '#9747FF' : '#9747FF',
+        },
+        TextSizes: {
+            heading: 24,
+            title: 18,
+            subtitle: 16,
+        },
+        Corners: {
+            button: 100
+        }
+    };
+};