@messenger-box/slack-ui-mobile 10.0.3-alpha.7 → 10.0.3-alpha.74

package/lib/screens/Organization/InviteOrganizationMembers.js

@@ -1,4 +1,4 @@
-import React__default,{useEffect}from'react';import {Share,Alert,Dimensions}from'react-native';import {Button,ButtonText,SafeAreaView,Box,VStack,Heading,Text}from'@admin-layout/gluestack-ui-mobile';import {NavigationRoutes}from'../../constants/routes.js';import {useSelector}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import {useNavigation,useFocusEffect}from'@react-navigation/native';import {Ionicons,AntDesign,MaterialCommunityIcons}from'@expo/vector-icons';Dimensions.get("window").width;
+import React__default,{useEffect}from'react';import {Share,Alert,SafeAreaView,Dimensions}from'react-native';import {useToast,Button,ButtonText,Box,VStack,Heading,Text,Toast,ToastTitle,ToastDescription}from'@admin-layout/gluestack-ui-mobile';import {useOrganizationSharableLinkQuery,useSendOrganizationInvitationMutation}from'../../queries/slackuiQueries.js';import {NavigationRoutes}from'../../constants/routes.js';import {useSelector}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import {useNavigation,useFocusEffect}from'@react-navigation/native';import {Ionicons,AntDesign,MaterialCommunityIcons}from'@expo/vector-icons';Dimensions.get("window").width;
 Dimensions.get("window").height;
 const InviteOrganizationMembers = ({
   route
@@ -6,6 +6,36 @@ const InviteOrganizationMembers = ({
   var _a;
   const navigation = useNavigation();
   useSelector(userSelector);
+  const toast = useToast();
+  const orgName = (_a = route == null ? void 0 : route.params) == null ? void 0 : _a.orgName;
+  const {
+    data: orgLinkData,
+    loading: orgLinkLoading
+  } = useOrganizationSharableLinkQuery(orgName);
+  const [sendInvitation, {
+    loading: sendingInvitation
+  }] = useSendOrganizationInvitationMutation({
+    onCompleted: (data) => {
+      toast.show({
+        placement: "top",
+        render: ({
+          id
+        }) => {
+          return /* @__PURE__ */ React__default.createElement(Toast, { nativeID: id, action: "success", variant: "solid" }, /* @__PURE__ */ React__default.createElement(VStack, { space: "xs" }, /* @__PURE__ */ React__default.createElement(ToastTitle, null, "Success"), /* @__PURE__ */ React__default.createElement(ToastDescription, null, "Invitation sent successfully")));
+        }
+      });
+    },
+    onError: (error) => {
+      toast.show({
+        placement: "top",
+        render: ({
+          id
+        }) => {
+          return /* @__PURE__ */ React__default.createElement(Toast, { nativeID: id, action: "error", variant: "solid" }, /* @__PURE__ */ React__default.createElement(VStack, { space: "xs" }, /* @__PURE__ */ React__default.createElement(ToastTitle, null, "Error"), /* @__PURE__ */ React__default.createElement(ToastDescription, null, error.message)));
+        }
+      });
+    }
+  });
   useFocusEffect(React__default.useCallback(() => {
     return () => {
     };
@@ -14,18 +44,16 @@ const InviteOrganizationMembers = ({
     if (navigation)
       navigation.setOptions({
         headerTintColor: "#1d1c1d",
-        headerRight: (props) => /* @__PURE__ */ React__default.createElement(Button, { mr: "$2", onPress: () => {
-          var _a2;
-          return navigation.navigate(NavigationRoutes.InitializeOrganizationChannel, {
-            orgName: (_a2 = route == null ? void 0 : route.params) == null ? void 0 : _a2.orgName
-          });
-        }, variant: "link" }, /* @__PURE__ */ React__default.createElement(ButtonText, { color: "$black" }, "SKIP"))
+        headerRight: (props) => /* @__PURE__ */ React__default.createElement(Button, { className: "mr-2", onPress: () => navigation.navigate(NavigationRoutes.InitializeOrganizationChannel, {
+          orgName
+        }), variant: "link" }, /* @__PURE__ */ React__default.createElement(ButtonText, { className: "text-black" }, "SKIP"))
       });
   }, [navigation]);
   const shareLink = React__default.useCallback(async () => {
     try {
+      const shareMessage = (orgLinkData == null ? void 0 : orgLinkData.getOrganizationSharableLink) || "CDMBSE | Messenger App";
       const result = await Share.share({
-        message: "CDMBSE | Messenger App"
+        message: shareMessage
       });
       if (result.action === Share.sharedAction) {
         if (result.activityType) {
@@ -36,6 +64,20 @@ const InviteOrganizationMembers = ({
     } catch (error) {
       Alert.alert(error.message);
     }
-  }, []);
-  return /* @__PURE__ */ React__default.createElement(SafeAreaView, { flex: 1 }, /* @__PURE__ */ React__default.createElement(Box, { borderTopColor: "$blue600", borderTopWidth: "$1", w: "50%" }), /* @__PURE__ */ React__default.createElement(Box, { flex: 1, bg: "$white" }, /* @__PURE__ */ React__default.createElement(VStack, { space: "lg", py: "$10", px: "$4" }, /* @__PURE__ */ React__default.createElement(Heading, { px: "$4", alignItems: "center", textAlign: "center" }, "Who else is on the ", (_a = route == null ? void 0 : route.params) == null ? void 0 : _a.orgName, " team?"), /* @__PURE__ */ React__default.createElement(Text, { textAlign: "center", fontSize: 15 }, "Invite your teammates to Workspace."), /* @__PURE__ */ React__default.createElement(Button, { my: "$1", size: "md", variant: "solid", onPress: async () => await shareLink(), bg: "$green800", "$pressed-bg": "$green600", "$active-bg": "$green600" }, /* @__PURE__ */ React__default.createElement(Ionicons, { color: "white", name: "share-outline", size: 20 }), /* @__PURE__ */ React__default.createElement(ButtonText, { ml: "$2", color: "$white", fontWeight: "$bold" }, "Share a Link")), /* @__PURE__ */ React__default.createElement(Button, { my: "$1", size: "md", bg: "$white", "$pressed-bg": "$trueGray200", "$active-bg": "$trueGray200", borderColor: "$trueGray400", variant: "outline" }, /* @__PURE__ */ React__default.createElement(AntDesign, { color: "black", name: "adduser", size: 20 }), /* @__PURE__ */ React__default.createElement(ButtonText, { ml: "$2", fontWeight: "$bold", color: "$black" }, "Add from Contacts")), /* @__PURE__ */ React__default.createElement(Button, { my: "$1", size: "md", bg: "$white", "$pressed-bg": "$trueGray200", "$active-bg": "$trueGray200", borderColor: "$trueGray400", variant: "outline", onPress: () => navigation.navigate(NavigationRoutes.AddPeopleByEmail) }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { color: "black", name: "email-outline", size: 20 }), /* @__PURE__ */ React__default.createElement(ButtonText, { ml: "$2", fontWeight: "$bold", color: "$black" }, "Add by Email")))));
+  }, [orgLinkData]);
+  return /* @__PURE__ */ React__default.createElement(SafeAreaView, { style: {
+    flex: 1
+  } }, /* @__PURE__ */ React__default.createElement(Box, { className: "border-t-blue-600 border-t w-[50%]" }), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1 bg-white" }, /* @__PURE__ */ React__default.createElement(VStack, { space: "lg", className: "py-10 px-4" }, /* @__PURE__ */ React__default.createElement(Heading, { className: "px-4 items-center text-center" }, "Who else is on the ", orgName, " team?"), /* @__PURE__ */ React__default.createElement(Text, { className: "text-center text-[15]" }, "Invite your teammates to Workspace."), /* @__PURE__ */ React__default.createElement(Button, { size: "md", variant: "solid", onPress: async () => await shareLink(), className: "my-1 bg-green-800 active:bg-green-600 hover:bg-green-600", isDisabled: orgLinkLoading }, /* @__PURE__ */ React__default.createElement(Ionicons, { color: "white", name: "share-outline", size: 20 }), /* @__PURE__ */ React__default.createElement(ButtonText, { className: "ml-2 font-bold text-white" }, "Share a Link")), /* @__PURE__ */ React__default.createElement(Button, { size: "md", variant: "outline", className: "my-1 bg-white border-gray-400 active:bg-gray-200 hover:bg-gray-200" }, /* @__PURE__ */ React__default.createElement(AntDesign, { color: "black", name: "adduser", size: 20 }), /* @__PURE__ */ React__default.createElement(ButtonText, { className: "ml-2 font-bold text-black" }, "Add from Contacts")), /* @__PURE__ */ React__default.createElement(Button, { size: "md", className: "my-1 bg-white border-gray-400 active:bg-gray-200 hover:bg-gray-200", variant: "outline", onPress: () => navigation.navigate(NavigationRoutes.AddPeopleByEmail, {
+    orgName,
+    sendInvitation: (email) => {
+      sendInvitation({
+        variables: {
+          request: {
+            orgName,
+            emails: [email]
+          }
+        }
+      });
+    }
+  }) }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { color: "black", name: "email-outline", size: 20 }), /* @__PURE__ */ React__default.createElement(ButtonText, { className: "ml-2 font-bold text-black" }, "Add by Email")))));
 };export{InviteOrganizationMembers as default};//# sourceMappingURL=InviteOrganizationMembers.js.map

package/lib/screens/Organization/InviteOrganizationMembers.js.map

@@ -1 +1 @@
-{"version":3,"file":"InviteOrganizationMembers.js","sources":["../../../src/screens/Organization/InviteOrganizationMembers.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useCallback } from 'react';\nimport { StyleSheet, TouchableOpacity, Dimensions, Share, Alert } from 'react-native';\nimport {\n    SafeAreaView,\n    Text,\n    VStack,\n    Box,\n    Button,\n    ButtonText,\n    Icon,\n    Divider,\n    HStack,\n    Center,\n    Heading,\n} from '@admin-layout/gluestack-ui-mobile';\nimport { useCreateOrganizationMutation, useGetAllUsersQuery } from 'common/lib/generated/generated.js';\nimport { NavigationRoutes } from '../../constants/routes';\nimport { useSelector } from 'react-redux';\nimport { userSelector, isUserAuthenticated } from '@adminide-stack/user-auth0-client';\nimport { useFocusEffect, useNavigation } from '@react-navigation/native';\nimport { Ionicons, AntDesign, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';\nconst windowWidth = Dimensions.get('window').width;\nconst windowHeight = Dimensions.get('window').height;\n\nconst InviteOrganizationMembers = ({ route }: any) => {\n    const navigation = useNavigation<any>();\n    const user: any = useSelector(userSelector);\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            return () => {\n                // Do something when the screen is unfocused\n                // Useful for cleanup functions\n            };\n        }, []),\n    );\n\n    useEffect(() => {\n        if (navigation)\n            navigation.setOptions({\n                headerTintColor: '#1d1c1d',\n                headerRight: (props: any) => (\n                    <Button\n                        mr={'$2'}\n                        onPress={() =>\n                            navigation.navigate(NavigationRoutes.InitializeOrganizationChannel, {\n                                orgName: route?.params?.orgName,\n                            })\n                        }\n                        variant={'link'}\n                    >\n                        <ButtonText color={'$black'}>SKIP</ButtonText>\n                    </Button>\n                ),\n            });\n    }, [navigation]);\n\n    const shareLink = React.useCallback(async () => {\n        try {\n            const result = await Share.share({\n                message: 'CDMBSE | Messenger App',\n            });\n            if (result.action === Share.sharedAction) {\n                if (result.activityType) {\n                    // shared with activity type of result.activityType\n                } else {\n                    // shared\n                }\n            } else if (result.action === Share.dismissedAction) {\n                // dismissed\n            }\n        } catch (error: any) {\n            Alert.alert(error.message);\n            // alert(error.message);\n        }\n    }, []);\n\n    return (\n        <SafeAreaView flex={1}>\n            <Box borderTopColor={'$blue600'} borderTopWidth={'$1'} w={'50%'} />\n            <Box flex={1} bg={'$white'}>\n                <VStack space={'lg'} py={'$10'} px={'$4'}>\n                    <Heading px={'$4'} alignItems={'center'} textAlign={'center'}>\n                        Who else is on the {route?.params?.orgName} team?\n                    </Heading>\n                    <Text textAlign={'center'} fontSize={15}>\n                        Invite your teammates to Workspace.\n                    </Text>\n                    <Button\n                        my={'$1'}\n                        size={'md'}\n                        variant={'solid'}\n                        onPress={async () => await shareLink()}\n                        bg={'$green800'}\n                        $pressed-bg=\"$green600\"\n                        $active-bg={'$green600'}\n                    >\n                        <Ionicons color={'white'} name=\"share-outline\" size={20} />\n                        <ButtonText ml={'$2'} color={'$white'} fontWeight=\"$bold\">\n                            Share a Link\n                        </ButtonText>\n                    </Button>\n                    <Button\n                        my={'$1'}\n                        size=\"md\"\n                        bg={'$white'}\n                        $pressed-bg=\"$trueGray200\"\n                        $active-bg={'$trueGray200'}\n                        borderColor=\"$trueGray400\"\n                        variant=\"outline\"\n                    >\n                        <AntDesign color={'black'} name=\"adduser\" size={20} />\n                        <ButtonText ml={'$2'} fontWeight=\"$bold\" color={'$black'}>\n                            Add from Contacts\n                        </ButtonText>\n                    </Button>\n                    <Button\n                        my={'$1'}\n                        size=\"md\"\n                        bg={'$white'}\n                        $pressed-bg=\"$trueGray200\"\n                        $active-bg={'$trueGray200'}\n                        borderColor=\"$trueGray400\"\n                        variant=\"outline\"\n                        onPress={() => navigation.navigate(NavigationRoutes.AddPeopleByEmail)}\n                    >\n                        <MaterialCommunityIcons color={'black'} name=\"email-outline\" size={20} />\n                        <ButtonText ml={'$2'} fontWeight=\"$bold\" color={'$black'}>\n                            Add by Email\n                        </ButtonText>\n                    </Button>\n                </VStack>\n            </Box>\n        </SafeAreaView>\n    );\n};\n\nexport default InviteOrganizationMembers;\n"],"names":["React","_a"],"mappings":"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"}
+{"version":3,"file":"InviteOrganizationMembers.js","sources":["../../../src/screens/Organization/InviteOrganizationMembers.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useCallback } from 'react';\nimport { StyleSheet, TouchableOpacity, Dimensions, Share, Alert, SafeAreaView } from 'react-native';\nimport {\n    Text,\n    VStack,\n    Box,\n    Button,\n    ButtonText,\n    Icon,\n    Divider,\n    HStack,\n    Center,\n    Heading,\n    Toast,\n    useToast,\n    ToastTitle,\n    ToastDescription,\n} from '@admin-layout/gluestack-ui-mobile';\nimport {\n    useCreateOrganizationMutation,\n    useAllUsersQuery,\n    useSendOrganizationInvitationMutation,\n    useOrganizationSharableLinkQuery,\n} from '../../queries/slackuiQueries';\nimport { NavigationRoutes } from '../../constants/routes';\nimport { useSelector } from 'react-redux';\nimport { userSelector, isUserAuthenticated } from '@adminide-stack/user-auth0-client';\nimport { useFocusEffect, useNavigation } from '@react-navigation/native';\nimport { Ionicons, AntDesign, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';\nimport Colors from 'tailwindcss/colors';\nconst windowWidth = Dimensions.get('window').width;\nconst windowHeight = Dimensions.get('window').height;\n\nconst InviteOrganizationMembers = ({ route }: any) => {\n    const navigation = useNavigation<any>();\n    const user: any = useSelector(userSelector);\n    const toast = useToast();\n    const orgName = route?.params?.orgName;\n\n    // Get organization sharable link\n    const { data: orgLinkData, loading: orgLinkLoading } = useOrganizationSharableLinkQuery(orgName);\n\n    // Send organization invitation mutation\n    const [sendInvitation, { loading: sendingInvitation }] = useSendOrganizationInvitationMutation({\n        onCompleted: (data) => {\n            toast.show({\n                placement: 'top',\n                render: ({ id }) => {\n                    return (\n                        <Toast nativeID={id} action=\"success\" variant=\"solid\">\n                            <VStack space=\"xs\">\n                                <ToastTitle>Success</ToastTitle>\n                                <ToastDescription>Invitation sent successfully</ToastDescription>\n                            </VStack>\n                        </Toast>\n                    );\n                },\n            });\n        },\n        onError: (error) => {\n            toast.show({\n                placement: 'top',\n                render: ({ id }) => {\n                    return (\n                        <Toast nativeID={id} action=\"error\" variant=\"solid\">\n                            <VStack space=\"xs\">\n                                <ToastTitle>Error</ToastTitle>\n                                <ToastDescription>{error.message}</ToastDescription>\n                            </VStack>\n                        </Toast>\n                    );\n                },\n            });\n        },\n    });\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            return () => {\n                // Do something when the screen is unfocused\n                // Useful for cleanup functions\n            };\n        }, []),\n    );\n\n    useEffect(() => {\n        if (navigation)\n            navigation.setOptions({\n                headerTintColor: '#1d1c1d',\n                headerRight: (props: any) => (\n                    <Button\n                        className=\"mr-2\"\n                        onPress={() =>\n                            navigation.navigate(NavigationRoutes.InitializeOrganizationChannel, {\n                                orgName: orgName,\n                            })\n                        }\n                        variant={'link'}\n                    >\n                        <ButtonText className=\"text-black\">SKIP</ButtonText>\n                    </Button>\n                ),\n            });\n    }, [navigation]);\n\n    const shareLink = React.useCallback(async () => {\n        try {\n            // Use the organization sharable link if available\n            const shareMessage = orgLinkData?.getOrganizationSharableLink || 'CDMBSE | Messenger App';\n\n            const result = await Share.share({\n                message: shareMessage,\n            });\n            if (result.action === Share.sharedAction) {\n                if (result.activityType) {\n                    // shared with activity type of result.activityType\n                } else {\n                    // shared\n                }\n            } else if (result.action === Share.dismissedAction) {\n                // dismissed\n            }\n        } catch (error: any) {\n            Alert.alert(error.message);\n            // alert(error.message);\n        }\n    }, [orgLinkData]);\n\n    return (\n        <SafeAreaView style={{ flex: 1 }}>\n            <Box className=\"border-t-blue-600 border-t w-[50%]\" />\n            <Box className=\"flex-1 bg-white\">\n                <VStack space={'lg'} className=\"py-10 px-4\">\n                    <Heading className=\"px-4 items-center text-center\">Who else is on the {orgName} team?</Heading>\n                    <Text className=\"text-center text-[15]\">Invite your teammates to Workspace.</Text>\n                    <Button\n                        size={'md'}\n                        variant={'solid'}\n                        onPress={async () => await shareLink()}\n                        className=\"my-1 bg-green-800 active:bg-green-600 hover:bg-green-600\"\n                        isDisabled={orgLinkLoading}\n                    >\n                        <Ionicons color={'white'} name=\"share-outline\" size={20} />\n                        <ButtonText className=\"ml-2 font-bold text-white\">Share a Link</ButtonText>\n                    </Button>\n                    <Button\n                        size=\"md\"\n                        variant=\"outline\"\n                        className=\"my-1 bg-white border-gray-400 active:bg-gray-200 hover:bg-gray-200\"\n                    >\n                        <AntDesign color={'black'} name=\"adduser\" size={20} />\n                        <ButtonText className=\"ml-2 font-bold text-black\">Add from Contacts</ButtonText>\n                    </Button>\n                    <Button\n                        size=\"md\"\n                        className=\"my-1 bg-white border-gray-400 active:bg-gray-200 hover:bg-gray-200\"\n                        variant=\"outline\"\n                        onPress={() =>\n                            navigation.navigate(NavigationRoutes.AddPeopleByEmail, {\n                                orgName: orgName,\n                                sendInvitation: (email: string) => {\n                                    sendInvitation({\n                                        variables: {\n                                            request: {\n                                                orgName,\n                                                emails: [email],\n                                            },\n                                        },\n                                    });\n                                },\n                            })\n                        }\n                    >\n                        <MaterialCommunityIcons color={'black'} name=\"email-outline\" size={20} />\n                        <ButtonText className=\"ml-2 font-bold text-black\">Add by Email</ButtonText>\n                    </Button>\n                </VStack>\n            </Box>\n        </SafeAreaView>\n    );\n};\n\nexport default InviteOrganizationMembers;\n"],"names":["React"],"mappings":"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"}

package/lib/screens/Peoples/AddByEmail.js

@@ -1,4 +1,4 @@
-import React__default,{useState,useEffect}from'react';import {Button,ButtonText,Box,SafeAreaView,VStack,ButtonIcon,CheckIcon,Heading,HStack,Text,Input,InputField}from'@admin-layout/gluestack-ui-mobile';import {TouchableOpacity,Dimensions}from'react-native';import {Ionicons,AntDesign}from'@expo/vector-icons';import {useIsFocused}from'@react-navigation/native';import {useSendOrganizationInvitationMutation}from'common/lib/generated/generated.js';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../hooks/useDrawerLayout.js';import'../../hooks/useExpoNotificationProvider.js';import {userSelector}from'@adminide-stack/user-auth0-client';import {useSelector}from'react-redux';Dimensions.get("window").width;
+import React__default,{useState,useEffect}from'react';import {Button,ButtonText,Box,VStack,ButtonIcon,CheckIcon,Heading,HStack,Text,Input,InputField}from'@admin-layout/gluestack-ui-mobile';import {TouchableOpacity,SafeAreaView,Platform,Dimensions}from'react-native';import {NavigationRoutes}from'../../constants/routes.js';import {Ionicons,AntDesign}from'@expo/vector-icons';import {useIsFocused}from'@react-navigation/native';import {useSendOrganizationInvitationMutation}from'../../queries/slackuiQueries.js';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../hooks/useDrawerLayout.js';import'../../hooks/useExpoNotificationProvider.js';import'../../hooks/useOptimizedChannelsQueries.js';import {userSelector}from'@adminide-stack/user-auth0-client';import {useSelector}from'react-redux';import colors from'tailwindcss/colors';Dimensions.get("window").width;
 Dimensions.get("window").height;
 Dimensions.get("screen").height;
 const AddPeopleByEmail = ({
@@ -44,7 +44,7 @@ const AddPeopleByEmail = ({
       headerLeft: (props) => /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: {
         paddingHorizontal: 10
       }, onPress: () => navigation == null ? void 0 : navigation.goBack() }, /* @__PURE__ */ React__default.createElement(Ionicons, { color: "black", name: "chevron-back", size: 20 })),
-      headerRight: (props) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, emailSent ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null) : /* @__PURE__ */ React__default.createElement(Button, { mr: "$2", disabled: email && emailReg.test(email) === true ? false : true, variant: "link", onPress: () => {
+      headerRight: (props) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, emailSent ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null) : /* @__PURE__ */ React__default.createElement(Button, { className: "mr-2", disabled: email && emailReg.test(email) === true ? false : true, variant: "link", onPress: () => {
         var _a;
         return sendOrganizationInvitationMutation({
           variables: {
@@ -56,11 +56,29 @@ const AddPeopleByEmail = ({
             }
           }
         });
-      } }, /* @__PURE__ */ React__default.createElement(ButtonText, { color: email && emailReg.test(email) === true ? "$black" : "$trueGray400" }, "SEND")))
+      } }, /* @__PURE__ */ React__default.createElement(ButtonText, { className: `${email && emailReg.test(email) === true ? "text-black" : "text-gray-400"}` }, "SEND")))
     });
   }, [isFocused, navigation, email, orgName, user, emailSent]);
-  return /* @__PURE__ */ React__default.createElement(Box, { flex: 1, bg: "$white" }, emailSent ? /* @__PURE__ */ React__default.createElement(SafeAreaView, { flex: 1 }, /* @__PURE__ */ React__default.createElement(VStack, { space: "lg", py: "$5", flex: 1, justifyContent: "space-between" }, /* @__PURE__ */ React__default.createElement(Box, { alignItems: "center", justifyContent: "center", borderRadius: "$full" }, /* @__PURE__ */ React__default.createElement(Button, { borderRadius: "$full", bg: "$green100", size: "lg" }, /* @__PURE__ */ React__default.createElement(ButtonIcon, { color: "#14532d", as: CheckIcon }))), /* @__PURE__ */ React__default.createElement(Heading, { textAlign: "center" }, "Invitation sent"), /* @__PURE__ */ React__default.createElement(HStack, { flex: 1, space: "sm", px: "$4", pr: "$10" }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(AntDesign, { color: "black", name: "adduser", size: 30 })), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { color: "$black", fontWeight: "$bold" }, email), /* @__PURE__ */ React__default.createElement(Text, null, "Invited as a member of ", orgName, ".They'll be able to receive and reply to messages by email untill they join."))), /* @__PURE__ */ React__default.createElement(Box, { px: "$5" }, /* @__PURE__ */ React__default.createElement(Button, { bg: "$green900", "$pressed-bg": "$green600", "$active-bg": "$green600", rounded: "$lg", onPress: () => {
+  return /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1 bg-white" }, emailSent ? /* @__PURE__ */ React__default.createElement(SafeAreaView, { style: {
+    flex: 1
+  } }, /* @__PURE__ */ React__default.createElement(VStack, { space: "lg", className: "py-5 flex-1 justify-between" }, /* @__PURE__ */ React__default.createElement(Box, { className: "text-center justify-center rounded-full" }, /* @__PURE__ */ React__default.createElement(Button, { className: "rounded-full bg-green-100", size: "lg" }, /* @__PURE__ */ React__default.createElement(ButtonIcon, { color: "#14532d", as: CheckIcon }))), /* @__PURE__ */ React__default.createElement(Heading, { className: "text-center" }, "Invitation sent"), /* @__PURE__ */ React__default.createElement(HStack, { className: "flex-1 px-4 pr-10", space: "sm" }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(AntDesign, { color: "black", name: "adduser", size: 30 })), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { color: colors.black, className: "font-bold" }, email), /* @__PURE__ */ React__default.createElement(Text, null, "Invited as a member of ", orgName, ".They'll be able to receive and reply to messages by email untill they join."))), /* @__PURE__ */ React__default.createElement(Box, { className: "px-5" }, /* @__PURE__ */ React__default.createElement(Button, { onPress: () => {
     setEmail("");
-    navigation.goBack();
-  } }, /* @__PURE__ */ React__default.createElement(ButtonText, { fontWeight: "600", fontSize: 15 }, "Done"))))) : /* @__PURE__ */ React__default.createElement(Input, { variant: "underlined", borderWidth: "$1", size: "xl", borderColor: "$coolGray300" }, /* @__PURE__ */ React__default.createElement(InputField, { px: "$3", type: "text", size: "xl", textTransform: "none", autoCapitalize: "none", autoCorrect: false, placeholderTextColor: "#404040", fontSize: 14, value: email, placeholder: "name@example.com", onChangeText: (v) => setEmail(v), textContentType: "emailAddress", keyboardType: "email-address" })));
+    if (Platform.OS === "macos") {
+      navigation.navigate("MainStack", {
+        screen: NavigationRoutes.Home,
+        params: {
+          orgName
+        }
+      });
+    } else if (navigation.canGoBack()) {
+      navigation.goBack();
+    } else {
+      navigation.navigate("MainStack", {
+        screen: NavigationRoutes.Home,
+        params: {
+          orgName
+        }
+      });
+    }
+  }, className: "bg-green-900 rounded-lg active:bg-green-600 hover:bg-green-600" }, /* @__PURE__ */ React__default.createElement(ButtonText, { className: "font-bold text-[15]" }, "Done"))))) : /* @__PURE__ */ React__default.createElement(Input, { variant: "underlined", className: "  rounded-lg", size: "xl" }, /* @__PURE__ */ React__default.createElement(InputField, { type: "text", size: "xl", autoCapitalize: "none", autoCorrect: false, placeholderTextColor: "#404040", value: email, placeholder: "name@example.com", onChange: (event) => setEmail(event.nativeEvent.text), textContentType: "emailAddress", keyboardType: "email-address", className: "px-3 text-[14] transform-none" })));
 };export{AddPeopleByEmail as default};//# sourceMappingURL=AddByEmail.js.map

package/lib/screens/Peoples/AddByEmail.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddByEmail.js","sources":["../../../src/screens/Peoples/AddByEmail.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect } from 'react';\nimport {\n    Input,\n    InputField,\n    View,\n    Text,\n    VStack,\n    Box,\n    FormControl,\n    Button,\n    ButtonText,\n    ButtonIcon,\n    SafeAreaView,\n    Icon,\n    Divider,\n    FlatList,\n    HStack,\n    Avatar,\n    Image,\n    Checkbox,\n    ChevronLeftIcon,\n    Heading,\n    CheckIcon,\n} from '@admin-layout/gluestack-ui-mobile';\nimport { StyleSheet, TouchableOpacity, Linking, Platform, Dimensions } from 'react-native';\nimport Colors from '../../constants/Colors';\nimport { NavigationRoutes } from '../../constants/routes';\nimport { AntDesign, Ionicons } from '@expo/vector-icons';\nimport VirtualizedScrollView from '../../components/VirtualizedScrollView';\nimport { useIsFocused } from '@react-navigation/native';\nimport { useSendOrganizationInvitationMutation } from 'common/lib/generated/generated.js';\nimport { useDrawerLayout } from '../../hooks';\nimport { userSelector } from '@adminide-stack/user-auth0-client';\nimport { useSelector } from 'react-redux';\nconst windowWidth = Dimensions.get('window').width;\nconst windowHeight = Dimensions.get('window').height;\nconst screenHeight = Dimensions.get('screen').height;\n\nconst AddPeopleByEmail = ({ navigation, route }: any) => {\n    const isFocused = useIsFocused();\n    const { orgName } = useDrawerLayout();\n    const user = useSelector(userSelector);\n    const [contacts, setContacts] = useState([]);\n    const [email, setEmail] = useState('');\n    // const emailReg = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w\\w+)+$/;\n    const emailReg = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n    const [emailSent, setEmailSent] = useState(false);\n    const [sendOrganizationInvitationMutation, { data, loading, error }] = useSendOrganizationInvitationMutation({\n        onCompleted: (res) => {\n            console.log('org invitation res', JSON.stringify(res));\n            if (res?.sendOrganizationInvitation) setEmailSent(true);\n        },\n        onError: (e) => {\n            console.log('e', JSON.stringify(e));\n            setEmailSent(false);\n        },\n    });\n\n    useEffect(() => {\n        return () => {\n            setEmailSent(false);\n            setEmail('');\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isFocused) {\n        }\n\n        navigation.setOptions({\n            headerShown: true,\n            headerTitleAlign: 'left',\n            headerTitleStyle: {},\n            title: emailSent ? '' : 'Add by Email',\n            headerLeft: (props: any) => (\n                <TouchableOpacity style={{ paddingHorizontal: 10 }} onPress={() => navigation?.goBack()}>\n                    <Ionicons color=\"black\" name=\"chevron-back\" size={20} />\n                </TouchableOpacity>\n            ),\n            headerRight: (props: any) => (\n                <>\n                    {emailSent ? (\n                        <></>\n                    ) : (\n                        <Button\n                            mr={'$2'}\n                            disabled={email && emailReg.test(email) === true ? false : true}\n                            variant={'link'}\n                            onPress={() =>\n                                sendOrganizationInvitationMutation({\n                                    variables: {\n                                        request: {\n                                            emails: [email],\n                                            orgName: orgName,\n                                            invitedBy: user?.profile?.name,\n                                            sentInvitee: true,\n                                        },\n                                    },\n                                })\n                            }\n                        >\n                            <ButtonText color={email && emailReg.test(email) === true ? '$black' : '$trueGray400'}>\n                                SEND\n                            </ButtonText>\n                        </Button>\n                    )}\n                </>\n            ),\n        });\n    }, [isFocused, navigation, email, orgName, user, emailSent]);\n\n    return (\n        <Box flex={1} bg={'$white'}>\n            {emailSent ? (\n                <SafeAreaView flex={1}>\n                    <VStack space={'lg'} py={'$5'} flex={1} justifyContent={'space-between'}>\n                        <Box alignItems={'center'} justifyContent={'center'} borderRadius=\"$full\">\n                            {/* <CheckIcon size={10} mt=\"0.5\" color=\"emerald.500\"  /> */}\n                            <Button borderRadius=\"$full\" bg={'$green100'} size={'lg'}>\n                                {/* <AntDesign  name=\"check\" size={25} /> */}\n                                <ButtonIcon color={'#14532d'} as={CheckIcon} />\n                            </Button>\n                        </Box>\n                        <Heading textAlign={'center'}>Invitation sent</Heading>\n                        <HStack flex={1} space={'sm'} px={'$4'} pr={'$10'}>\n                            <Box>\n                                <AntDesign color=\"black\" name=\"adduser\" size={30} />\n                            </Box>\n                            <Box>\n                                <Text color={'$black'} fontWeight={'$bold'}>\n                                    {email}\n                                </Text>\n                                <Text>\n                                    Invited as a member of {orgName}.They'll be able to receive and reply to messages by\n                                    email untill they join.\n                                </Text>\n                            </Box>\n                        </HStack>\n                        <Box px={'$5'}>\n                            <Button\n                                bg={'$green900'}\n                                $pressed-bg=\"$green600\"\n                                $active-bg={'$green600'}\n                                rounded={'$lg'}\n                                onPress={() => {\n                                    setEmail('');\n                                    navigation.goBack();\n                                }}\n                            >\n                                <ButtonText fontWeight=\"600\" fontSize={15}>\n                                    Done\n                                </ButtonText>\n                            </Button>\n                        </Box>\n                    </VStack>\n                </SafeAreaView>\n            ) : (\n                <Input variant=\"underlined\" borderWidth={'$1'} size={'xl'} borderColor={'$coolGray300'}>\n                    <InputField\n                        px={'$3'}\n                        type=\"text\"\n                        size=\"xl\"\n                        textTransform={'none'}\n                        autoCapitalize={'none'}\n                        autoCorrect={false}\n                        placeholderTextColor={'#404040'}\n                        fontSize={14}\n                        value={email}\n                        placeholder=\"name@example.com\"\n                        onChangeText={(v) => setEmail(v)}\n                        textContentType=\"emailAddress\"\n                        keyboardType=\"email-address\"\n                    />\n                </Input>\n                // <Input\n                //     textTransform={'none'}\n                //     borderWidth={1}\n                //     borderColor={'coolGray.300'}\n                //     _focus={{ borderColor: 'coolGray.300' }}\n                //     py={4}\n                //     px={3}\n                //     _input={{ placeholderTextColor: '#404040', fontSize: 14 }}\n                //     variant=\"underlined\"\n                //     placeholder=\"name@example.com\"\n                //     value={email}\n                //     onChangeText={(v) => setEmail(v)}\n                //     textContentType=\"emailAddress\"\n                //     keyboardType=\"email-address\"\n                //     autoCapitalize=\"none\"\n                //     autoCorrect={false}\n                // />\n            )}\n            {/* <View flex={1}>\n                <VirtualizedScrollView>\n                    <VStack space=\"5\" pt={2}></VStack>\n                </VirtualizedScrollView>\n            </View> */}\n        </Box>\n    );\n};\n\nexport default AddPeopleByEmail;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AddByEmail.js","sources":["../../../src/screens/Peoples/AddByEmail.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect } from 'react';\nimport {\n    Input,\n    InputField,\n    View,\n    Text,\n    VStack,\n    Box,\n    FormControl,\n    Button,\n    ButtonText,\n    ButtonIcon,\n    Icon,\n    Divider,\n    FlatList,\n    HStack,\n    Avatar,\n    Image,\n    Checkbox,\n    ChevronLeftIcon,\n    Heading,\n    CheckIcon,\n} from '@admin-layout/gluestack-ui-mobile';\nimport { StyleSheet, TouchableOpacity, Linking, Platform, Dimensions, SafeAreaView } from 'react-native';\nimport Colors from '../../constants/Colors';\nimport { NavigationRoutes } from '../../constants/routes';\nimport { AntDesign, Ionicons } from '@expo/vector-icons';\nimport VirtualizedScrollView from '../../components/VirtualizedScrollView';\nimport { useIsFocused } from '@react-navigation/native';\nimport { useSendOrganizationInvitationMutation } from '../../queries/slackuiQueries';\nimport { useDrawerLayout } from '../../hooks';\nimport { userSelector } from '@adminide-stack/user-auth0-client';\nimport { useSelector } from 'react-redux';\nimport colors from 'tailwindcss/colors';\nconst windowWidth = Dimensions.get('window').width;\nconst windowHeight = Dimensions.get('window').height;\nconst screenHeight = Dimensions.get('screen').height;\n\nconst AddPeopleByEmail = ({ navigation, route }: any) => {\n    const isFocused = useIsFocused();\n    const { orgName } = useDrawerLayout();\n    const user = useSelector(userSelector);\n    const [contacts, setContacts] = useState([]);\n    const [email, setEmail] = useState('');\n    // const emailReg = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w\\w+)+$/;\n    const emailReg = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n    const [emailSent, setEmailSent] = useState(false);\n    const [sendOrganizationInvitationMutation, { data, loading, error }] = useSendOrganizationInvitationMutation({\n        onCompleted: (res) => {\n            console.log('org invitation res', JSON.stringify(res));\n            if (res?.sendOrganizationInvitation) setEmailSent(true);\n        },\n        onError: (e) => {\n            console.log('e', JSON.stringify(e));\n            setEmailSent(false);\n        },\n    });\n\n    useEffect(() => {\n        return () => {\n            setEmailSent(false);\n            setEmail('');\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isFocused) {\n        }\n\n        navigation.setOptions({\n            headerShown: true,\n            headerTitleAlign: 'left',\n            headerTitleStyle: {},\n            title: emailSent ? '' : 'Add by Email',\n            headerLeft: (props: any) => (\n                <TouchableOpacity style={{ paddingHorizontal: 10 }} onPress={() => navigation?.goBack()}>\n                    <Ionicons color=\"black\" name=\"chevron-back\" size={20} />\n                </TouchableOpacity>\n            ),\n            headerRight: (props: any) => (\n                <>\n                    {emailSent ? (\n                        <></>\n                    ) : (\n                        <Button\n                            className=\"mr-2\"\n                            disabled={email && emailReg.test(email) === true ? false : true}\n                            variant={'link'}\n                            onPress={() =>\n                                sendOrganizationInvitationMutation({\n                                    variables: {\n                                        request: {\n                                            emails: [email],\n                                            orgName: orgName,\n                                            invitedBy: user?.profile?.name,\n                                            sentInvitee: true,\n                                        },\n                                    },\n                                })\n                            }\n                        >\n                            <ButtonText\n                                className={`${email && emailReg.test(email) === true ? 'text-black' : 'text-gray-400'}`}\n                            >\n                                SEND\n                            </ButtonText>\n                        </Button>\n                    )}\n                </>\n            ),\n        });\n    }, [isFocused, navigation, email, orgName, user, emailSent]);\n\n    return (\n        <Box className=\"flex-1 bg-white\">\n            {emailSent ? (\n                <SafeAreaView style={{ flex: 1 }}>\n                    <VStack space={'lg'} className=\"py-5 flex-1 justify-between\">\n                        <Box className=\"text-center justify-center rounded-full\">\n                            {/* <CheckIcon size={10} mt=\"0.5\" color=\"emerald.500\"  /> */}\n                            <Button className=\"rounded-full bg-green-100\" size={'lg'}>\n                                {/* <AntDesign  name=\"check\" size={25} /> */}\n                                <ButtonIcon color={'#14532d'} as={CheckIcon} />\n                            </Button>\n                        </Box>\n                        <Heading className=\"text-center\">Invitation sent</Heading>\n                        <HStack className=\"flex-1 px-4 pr-10\" space={'sm'}>\n                            <Box>\n                                <AntDesign color=\"black\" name=\"adduser\" size={30} />\n                            </Box>\n                            <Box>\n                                <Text color={colors.black} className=\"font-bold\">\n                                    {email}\n                                </Text>\n                                <Text>\n                                    Invited as a member of {orgName}.They'll be able to receive and reply to messages by\n                                    email untill they join.\n                                </Text>\n                            </Box>\n                        </HStack>\n                        <Box className=\"px-5\">\n                            <Button\n                                onPress={() => {\n                                    setEmail('');\n                                    // navigation.goBack();\n                                    if (Platform.OS === 'macos') {\n                                        navigation.navigate('MainStack', {\n                                            screen: NavigationRoutes.Home,\n                                            params: { orgName },\n                                        });\n                                    } else if (navigation.canGoBack()) {\n                                        navigation.goBack();\n                                    } else {\n                                        navigation.navigate('MainStack', {\n                                            screen: NavigationRoutes.Home,\n                                            params: { orgName },\n                                        });\n                                    }\n                                }}\n                                className=\"bg-green-900 rounded-lg active:bg-green-600 hover:bg-green-600\"\n                            >\n                                <ButtonText className=\"font-bold text-[15]\">Done</ButtonText>\n                            </Button>\n                        </Box>\n                    </VStack>\n                </SafeAreaView>\n            ) : (\n                <Input variant=\"underlined\" className=\"  rounded-lg\" size={'xl'}>\n                    <InputField\n                        type=\"text\"\n                        size=\"xl\"\n                        autoCapitalize={'none'}\n                        autoCorrect={false}\n                        placeholderTextColor={'#404040'}\n                        value={email}\n                        placeholder=\"name@example.com\"\n                        onChange={(event) => setEmail(event.nativeEvent.text)}\n                        textContentType=\"emailAddress\"\n                        keyboardType=\"email-address\"\n                        className=\"px-3 text-[14] transform-none\"\n                    />\n                </Input>\n                // <Input\n                //     textTransform={'none'}\n                //     borderWidth={1}\n                //     borderColor={'coolGray.300'}\n                //     _focus={{ borderColor: 'coolGray.300' }}\n                //     py={4}\n                //     px={3}\n                //     _input={{ placeholderTextColor: '#404040', fontSize: 14 }}\n                //     variant=\"underlined\"\n                //     placeholder=\"name@example.com\"\n                //     value={email}\n                //     onChangeText={(v) => setEmail(v)}\n                //     textContentType=\"emailAddress\"\n                //     keyboardType=\"email-address\"\n                //     autoCapitalize=\"none\"\n                //     autoCorrect={false}\n                // />\n            )}\n            {/* <View flex={1}>\n                <VirtualizedScrollView>\n                    <VStack space=\"5\" pt={2}></VStack>\n                </VirtualizedScrollView>\n            </View> */}\n        </Box>\n    );\n};\n\nexport default AddPeopleByEmail;\n"],"names":["React"],"mappings":"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"}

package/lib/screens/Peoples/AddFromContacts.js

@@ -1,124 +1,209 @@
-import React__default,{useState,useEffect}from'react';import {Button,ButtonText,View,Input,InputField,VStack,FlatList,Box,Text,HStack,Image,Avatar,AvatarFallbackText,Checkbox,CheckboxIndicator,CheckboxIcon,CheckIcon}from'@admin-layout/gluestack-ui-mobile';import {TouchableOpacity,Platform,Linking}from'react-native';import {useGetOrganizationSharableLinkQuery}from'common/lib/generated/generated.js';import {NavigationRoutes}from'../../constants/routes.js';import {Ionicons}from'@expo/vector-icons';import VirtualizedScrollView from'../../components/VirtualizedScrollView/VirtualizedScrollView.js';import {useIsFocused}from'@react-navigation/native';import*as Contacts from'expo-contacts';import {config}from'../../config/env-config.js';const AddFromContacts = ({
+import React__default,{useState,useEffect}from'react';import {Button,ButtonText,Box,Input,InputSlot,InputField,Spinner,Text,FlatList,HStack,Avatar,AvatarImage,AvatarFallbackText,Checkbox,CheckboxIndicator,CheckboxIcon,CheckIcon}from'@admin-layout/gluestack-ui-mobile';import {TouchableOpacity,Platform,Linking,StyleSheet}from'react-native';import Colors from'../../constants/Colors.js';import {useOrganizationSharableLinkQuery,useSendOrganizationInvitationMutation}from'../../queries/slackuiQueries.js';import {Ionicons,Feather}from'@expo/vector-icons';import {useIsFocused}from'@react-navigation/native';import*as Contacts from'expo-contacts';import {config}from'../../config/env-config.js';import {SafeAreaView}from'react-native-safe-area-context';import {useSelector}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import'../../constants/device.js';import'../../constants/globalStyles.js';import'../../constants/Layout.js';import {NavigationRoutes}from'../../constants/routes.js';const AddFromContacts = ({
   navigation,
   route
 }) => {
+  var _a;
   const isFocused = useIsFocused();
   const [contacts, setContacts] = useState([]);
+  const [filteredContacts, setFilteredContacts] = useState([]);
   const [selectedContacts, setSelectedContacts] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(true);
+  const orgName = ((_a = route == null ? void 0 : route.params) == null ? void 0 : _a.orgName) || "";
   const {
     data: organizationSharableLink
-  } = useGetOrganizationSharableLinkQuery();
+  } = useOrganizationSharableLinkQuery(orgName);
+  const [sendOrganizationInvitation] = useSendOrganizationInvitationMutation();
+  const user = useSelector(userSelector);
   useEffect(() => {
-  }, [selectedContacts]);
+    if (searchQuery.trim() === "") {
+      setFilteredContacts(contacts);
+    } else {
+      const filtered = contacts.filter((contact) => {
+        var _a2, _b, _c;
+        const fullName = `${contact.firstName || ""} ${contact.lastName || ""}`.toLowerCase();
+        const phoneNumber = ((_c = (_b = (_a2 = contact.phoneNumbers) == null ? void 0 : _a2[0]) == null ? void 0 : _b.number) == null ? void 0 : _c.toLowerCase()) || "";
+        const query = searchQuery.toLowerCase();
+        return fullName.includes(query) || phoneNumber.includes(query);
+      });
+      setFilteredContacts(filtered);
+    }
+  }, [searchQuery, contacts]);
   useEffect(() => {
     (async () => {
-      const {
-        status
-      } = await Contacts.requestPermissionsAsync();
-      if (status === "granted") {
+      try {
+        setLoading(true);
         const {
-          data
-        } = await Contacts.getContactsAsync({
-          fields: [Contacts.Fields.FirstName, Contacts.Fields.LastName, Contacts.Fields.PhoneNumbers, Contacts.Fields.Image]
-        });
-        if (data.length > 0) {
-          const contacts2 = data;
-          setContacts(contacts2);
+          status
+        } = await Contacts.requestPermissionsAsync();
+        if (status === "granted") {
+          const {
+            data
+          } = await Contacts.getContactsAsync({
+            fields: [Contacts.Fields.FirstName, Contacts.Fields.LastName, Contacts.Fields.PhoneNumbers, Contacts.Fields.Image, Contacts.Fields.ImageAvailable]
+          });
+          if (data.length > 0) {
+            const sortedContacts = data.sort((a, b) => {
+              const nameA = `${a.firstName || ""} ${a.lastName || ""}`.trim().toLowerCase();
+              const nameB = `${b.firstName || ""} ${b.lastName || ""}`.trim().toLowerCase();
+              return nameA.localeCompare(nameB);
+            });
+            const validContacts = sortedContacts.filter((contact) => contact.phoneNumbers && contact.phoneNumbers.length > 0);
+            console.log(`Total contacts with phone numbers: ${validContacts.length}`);
+            const contactsWithImages = validContacts.filter((contact) => contact.imageAvailable && contact.image);
+            console.log(`Contacts with images: ${contactsWithImages.length}`);
+            if (contactsWithImages.length > 0) {
+              console.log("Sample image data:", contactsWithImages[0].image);
+            }
+            setContacts(validContacts);
+            setFilteredContacts(validContacts);
+          }
         }
+      } catch (error) {
+        console.error("Error fetching contacts:", error);
+      } finally {
+        setLoading(false);
       }
     })();
   }, []);
   useEffect(() => {
-    navigation.setOptions({
-      headerShown: true,
-      headerTitleAlign: "left",
-      headerTitleStyle: {},
-      headerLeft: (props) => /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: {
-        paddingHorizontal: 10
-      }, onPress: () => {
-        var _a;
-        return navigation.navigate(NavigationRoutes.Home, {
-          orgName: (_a = route == null ? void 0 : route.params) == null ? void 0 : _a.orgName
-        });
-      } }, /* @__PURE__ */ React__default.createElement(Ionicons, { color: "black", name: "chevron-back", size: 20 })),
-      headerRight: (props) => /* @__PURE__ */ React__default.createElement(Button, { mr: "$2", onPress: () => sendInvitation(), disabled: selectedContacts.length > 0 ? false : true, variant: "link" }, /* @__PURE__ */ React__default.createElement(ButtonText, { color: selectedContacts.length > 0 ? "$black" : "$trueGray500" }, "Send"))
-    });
+    if (isFocused) {
+      navigation.setOptions({
+        headerShown: true,
+        headerTitleAlign: "left",
+        title: "Add from Contacts",
+        headerTitleStyle: {
+          fontWeight: "600"
+        },
+        headerLeft: (props) => /* @__PURE__ */ React__default.createElement(
+          TouchableOpacity,
+          {
+            style: {
+              paddingHorizontal: 10
+            },
+            onPress: () => {
+              if (Platform.OS === "macos") {
+                navigation.navigate("MainStack", {
+                  screen: NavigationRoutes.Home,
+                  params: {
+                    orgName
+                  }
+                });
+              } else if (navigation.canGoBack()) {
+                navigation.goBack();
+              } else {
+                navigation.navigate("MainStack", {
+                  screen: NavigationRoutes.Home,
+                  params: {
+                    orgName
+                  }
+                });
+              }
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(Ionicons, { color: Colors.slackBlack, name: "chevron-back", size: 20 })
+        ),
+        headerRight: (props) => /* @__PURE__ */ React__default.createElement(Button, { className: "mr-2", onPress: () => sendInvitation(), disabled: selectedContacts.length === 0, variant: "link" }, /* @__PURE__ */ React__default.createElement(ButtonText, { className: `${selectedContacts.length > 0 ? "text-black font-bold" : "text-gray-500"}` }, "Send"))
+      });
+    }
   }, [isFocused, navigation, selectedContacts]);
-  const setSelectedContactsData = (item) => {
-    let obj = {
+  const toggleContact = (item) => {
+    if (!item.phoneNumbers || item.phoneNumbers.length === 0)
+      return;
+    const contact = {
       id: item.id,
-      name: item.firstName + " " + item.lastName,
+      name: `${item.firstName || ""} ${item.lastName || ""}`.trim(),
       mobile: item.phoneNumbers[0]
     };
-    const resultArr = selectedContacts.filter((arrObj) => arrObj.id !== obj.id);
-    if (resultArr.length === selectedContacts.length)
-      resultArr.push(obj);
-    setSelectedContacts(resultArr);
+    setSelectedContacts((prev) => {
+      const isSelected = prev.some((c) => c.id === contact.id);
+      if (isSelected) {
+        return prev.filter((c) => c.id !== contact.id);
+      } else {
+        return [...prev, contact];
+      }
+    });
+  };
+  const getInitials = (firstName, lastName) => {
+    const first = firstName ? firstName.charAt(0).toUpperCase() : "";
+    const last = lastName ? lastName.charAt(0).toUpperCase() : "";
+    return (first + last).substring(0, 2);
   };
   const renderContactList = ({
     item
   }) => {
-    var _a, _b, _c, _d, _e;
-    const title = (_b = (_a = item == null ? void 0 : item.firstName) != null ? _a : " " + (item == null ? void 0 : item.lastName)) != null ? _b : "";
-    const matches = (_c = title == null ? void 0 : title.match(/\b(\w)/g)) != null ? _c : "";
-    const acronym = (_e = (_d = matches == null ? void 0 : matches.join("")) == null ? void 0 : _d.substring(0, 2)) != null ? _e : "";
-    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { key: item.id, style: {
-      marginTop: 5
-    }, onPress: () => setSelectedContactsData(item) }, /* @__PURE__ */ React__default.createElement(Box, { pl: "$4", pr: "$5", py: "$2" }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(HStack, { alignItems: "center" }, item.imageAvailable ? /* @__PURE__ */ React__default.createElement(Image, { mx: "$2", px: "$2", py: "$2", size: "sm", source: {
+    var _a2, _b;
+    const isSelected = selectedContacts.some((c) => c.id === item.id);
+    const hasPhoneNumber = item.phoneNumbers && item.phoneNumbers.length > 0;
+    const initials = getInitials(item.firstName, item.lastName);
+    if (!hasPhoneNumber)
+      return null;
+    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { key: item.id, onPress: () => toggleContact(item), style: styles.contactItem, disabled: !hasPhoneNumber, activeOpacity: 0.7 }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "justify-between items-center w-full" }, /* @__PURE__ */ React__default.createElement(HStack, { space: "md", className: "items-center space-x-3" }, item.imageAvailable && item.image && item.image.uri ? /* @__PURE__ */ React__default.createElement(Avatar, { size: "md", className: "bg-gray-400" }, /* @__PURE__ */ React__default.createElement(AvatarImage, { source: {
       uri: item.image.uri
-    }, alt: item.firstName }) : /* @__PURE__ */ React__default.createElement(Button, { mx: "$2", px: "$2", py: "$2", size: "sm", bg: "$coolGray500" }, /* @__PURE__ */ React__default.createElement(Avatar, { bg: "transparent", size: "sm" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, { color: "$white", fontWeight: "600" }, acronym))), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { color: "$coolGray800", fontWeight: "$bold" }, item.firstName, " ", item.lastName), /* @__PURE__ */ React__default.createElement(Text, null, item.phoneNumbers[0].number))), /* @__PURE__ */ React__default.createElement(Checkbox, { onChange: () => setSelectedContactsData(item), value: item.id, isChecked: selectedContacts.filter((i) => i.id === item.id).length > 0 ? true : false, accessibilityLabel: item.firstName, "aria-label": item.firstName }, /* @__PURE__ */ React__default.createElement(CheckboxIndicator, null, /* @__PURE__ */ React__default.createElement(CheckboxIcon, { as: CheckIcon }))))));
+    }, alt: `${item.firstName || ""} ${item.lastName || ""}`.trim(), onError: (e) => console.log("Avatar image failed to load", e.nativeEvent.error), style: styles.avatarImage }), /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, initials)) : /* @__PURE__ */ React__default.createElement(Avatar, { size: "md", className: "bg-blue-500" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, { style: styles.avatarText }, initials)), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-800 font-semibold text-base" }, item.firstName || "", " ", item.lastName || ""), /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-500 text-sm" }, ((_b = (_a2 = item.phoneNumbers) == null ? void 0 : _a2[0]) == null ? void 0 : _b.number) || "No number"))), /* @__PURE__ */ React__default.createElement(Checkbox, { value: item.id, isChecked: isSelected, accessibilityLabel: `Select ${item.firstName}`, "aria-label": `Select ${item.firstName}` }, /* @__PURE__ */ React__default.createElement(CheckboxIndicator, { className: isSelected ? "bg-blue-500 border-blue-500" : "" }, /* @__PURE__ */ React__default.createElement(CheckboxIcon, { as: CheckIcon })))));
   };
   const sendInvitation = () => {
-    var _a;
+    var _a2;
+    if (selectedContacts.length === 0)
+      return;
+    const mobileNumbers = selectedContacts.map((i) => i.mobile.number);
+    sendOrganizationInvitation({
+      variables: {
+        request: {
+          orgName,
+          emails: mobileNumbers.map((num) => num.replace(/\s/g, "")),
+          invitedBy: ((_a2 = user == null ? void 0 : user.profile) == null ? void 0 : _a2.name) || "",
+          sentInvitee: true
+        }
+      },
+      onCompleted: (data) => {
+        console.log("Organization invitation sent successfully:", data);
+        sendSMSInvitations();
+      },
+      onError: (error) => {
+        console.error("Error sending invitations:", error);
+        sendSMSInvitations();
+      }
+    });
+  };
+  const sendSMSInvitations = () => {
+    var _a2;
     const mobileNumbers = selectedContacts.map((i) => i.mobile.number);
     let numbers = "";
     mobileNumbers.forEach((phoneNumber) => {
       numbers += `${phoneNumber.replace(/\s/g, "")},`;
     });
     numbers = numbers.slice(0, -1);
-    Platform.OS === "ios" ? "&" : "?";
-    const message = `Join me on ${config.APP_NAME} - it's faster, simpler way to work.Singup here from any device. ${(_a = organizationSharableLink == null ? void 0 : organizationSharableLink.getOrganizationSharableLink) != null ? _a : ""}`;
+    const message = `Join me on ${config.APP_NAME} - it's a faster, simpler way to work. Sign up here from any device: ${(_a2 = organizationSharableLink == null ? void 0 : organizationSharableLink.getOrganizationSharableLink) != null ? _a2 : ""}`;
     const url = Platform.OS === "android" ? `sms:${numbers}?body=${encodeURIComponent(message)}` : `sms:/open?addresses=${numbers}&body=${encodeURIComponent(message)}`;
     Linking.openURL(url);
   };
-  return /* @__PURE__ */ React__default.createElement(View, { flex: 1, bg: "$white" }, /* @__PURE__ */ React__default.createElement(Input, { pl: "$4", variant: "underlined" }, /* @__PURE__ */ React__default.createElement(
-    InputField,
-    {
-      px: "$3",
-      bg: "$coolGray100",
-      alignItems: "center",
-      type: "text",
-      size: "xl",
-      placeholderTextColor: "#404040",
-      fontSize: 14,
-      color: "$black",
-      placeholder: "Search",
-      onChange: ({
-        nativeEvent: {
-          eventCount,
-          target,
-          text
-        }
-      }) => {
-      },
-      autoCapitalize: "none",
-      autoCorrect: false
-    }
-  )), /* @__PURE__ */ React__default.createElement(View, { flex: 1 }, /* @__PURE__ */ React__default.createElement(VirtualizedScrollView, null, /* @__PURE__ */ React__default.createElement(VStack, { space: "md", pt: "$2" }, /* @__PURE__ */ React__default.createElement(
-    FlatList,
-    {
-      px: "$2",
-      contentContainerStyle: {
-        flex: 1
-      },
-      data: contacts && contacts.length > 0 ? contacts : [],
-      renderItem: renderContactList,
-      ListEmptyComponent: () => {
-        return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: {
-          marginTop: 5
-        } }, /* @__PURE__ */ React__default.createElement(Box, { bg: "#fff", py: "$2" }, /* @__PURE__ */ React__default.createElement(VStack, { space: "md" }, /* @__PURE__ */ React__default.createElement(Box, { px: "$4", py: "$5" }, /* @__PURE__ */ React__default.createElement(Text, null, "No contact found")))));
-      },
-      key: "add-from-contacts-search-list"
-    }
-  )))));
-};export{AddFromContacts as default};//# sourceMappingURL=AddFromContacts.js.map
+  return /* @__PURE__ */ React__default.createElement(SafeAreaView, { style: styles.container }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1 bg-white" }, /* @__PURE__ */ React__default.createElement(Box, { className: "px-4 py-2 bg-white" }, /* @__PURE__ */ React__default.createElement(Input, { size: "md", className: "bg-gray-100 rounded-lg" }, /* @__PURE__ */ React__default.createElement(InputSlot, null, /* @__PURE__ */ React__default.createElement(Feather, { name: "search", size: 16, color: "#9ca3af", style: {
+    marginLeft: 8
+  } })), /* @__PURE__ */ React__default.createElement(InputField, { placeholder: "Search contacts", placeholderTextColor: "#9ca3af", onChange: (event) => setSearchQuery(event.nativeEvent.text), value: searchQuery, autoCapitalize: "none", autoCorrect: false, className: "text-black" }), searchQuery ? /* @__PURE__ */ React__default.createElement(InputSlot, null, /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => setSearchQuery(""), style: {
+    marginRight: 8
+  } }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "close-circle", size: 16, color: "#9ca3af" }))) : null)), loading ? /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1 justify-center items-center" }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "large", color: Colors.blue }), /* @__PURE__ */ React__default.createElement(Text, { className: "mt-4 text-gray-500" }, "Loading contacts...")) : /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1" }, selectedContacts.length > 0 && /* @__PURE__ */ React__default.createElement(Box, { className: "px-4 py-2 bg-gray-50 border-b border-gray-200" }, /* @__PURE__ */ React__default.createElement(Text, { className: "text-sm text-gray-500" }, selectedContacts.length, " ", selectedContacts.length === 1 ? "contact" : "contacts", " ", "selected")), /* @__PURE__ */ React__default.createElement(FlatList, { data: filteredContacts, renderItem: renderContactList, keyExtractor: (item) => item.id, contentContainerStyle: styles.listContainer, ListEmptyComponent: () => /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1 justify-center items-center py-8" }, /* @__PURE__ */ React__default.createElement(Feather, { name: "users", size: 48, color: "#d1d5db" }), /* @__PURE__ */ React__default.createElement(Text, { className: "text-center text-gray-500 mt-4" }, searchQuery ? "No matching contacts found" : "No contacts found")) }))));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "white"
+  },
+  listContainer: {
+    flexGrow: 1
+  },
+  contactItem: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f3f4f6"
+  },
+  avatarText: {
+    color: "white",
+    fontWeight: "600"
+  },
+  avatarImage: {
+    width: "100%",
+    height: "100%"
+  }
+});export{AddFromContacts as default};//# sourceMappingURL=AddFromContacts.js.map