steve
/
grocery-app
mirror of https://github.com/ninjas-code-official/food-delivery-singlevendor
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Error and Warning remove

This commit is contained in:
Ninjas Code - 4 2023-03-13 16:03:39 +05:00
parent ee0bd79b8f
commit 885c967cdb
14 changed files with 1380 additions and 1022 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Customer App/app.json
View File

@ -2,6 +2,7 @@
"expo": { "expo": {
"name": "Enatega", "name": "Enatega",
"version": "1.0.16", "version": "1.0.16",
"scheme": "enategasinglevendor",
"description": "Enatega is a starter kit food ordering app built in React Native using Expo for IOS and Android. It's made keeping good aesthetics in mind as well keeping the best coding practices in mind. Its fully customisable to easily help you in your next food delivery project. https://market.nativebase.io/view/react-native-food-delivery-backend-app", "description": "Enatega is a starter kit food ordering app built in React Native using Expo for IOS and Android. It's made keeping good aesthetics in mind as well keeping the best coding practices in mind. Its fully customisable to easily help you in your next food delivery project. https://market.nativebase.io/view/react-native-food-delivery-backend-app",
"slug": "enategasinglevendor", "slug": "enategasinglevendor",
"privacy": "public", "privacy": "public",

1089
Customer App/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
Customer App/package.json
View File

@ -24,6 +24,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@amplitude/analytics-react-native": "^1.1.1",
"@apollo/react-hooks": "^3.1.3", "@apollo/react-hooks": "^3.1.3",
"@expo/vector-icons": "^13.0.0", "@expo/vector-icons": "^13.0.0",
"@ptomasroos/react-native-multi-slider": "^2.2.2", "@ptomasroos/react-native-multi-slider": "^2.2.2",
@ -51,6 +52,7 @@
"expo-apple-authentication": "~5.0.1", "expo-apple-authentication": "~5.0.1",
"expo-application": "~5.0.1", "expo-application": "~5.0.1",
"expo-asset": "~8.7.0", "expo-asset": "~8.7.0",
"expo-auth-session": "~3.8.0",
"expo-camera": "~13.1.0", "expo-camera": "~13.1.0",
"expo-constants": "~14.0.2", "expo-constants": "~14.0.2",
"expo-contacts": "~11.0.1", "expo-contacts": "~11.0.1",
@ -63,6 +65,7 @@
"expo-localization": "~14.0.0", "expo-localization": "~14.0.0",
"expo-location": "~15.0.1", "expo-location": "~15.0.1",
"expo-notifications": "~0.17.0", "expo-notifications": "~0.17.0",
"expo-random": "~13.0.0",
"expo-sensors": "~12.0.1", "expo-sensors": "~12.0.1",
"expo-splash-screen": "~0.17.5", "expo-splash-screen": "~0.17.5",
"expo-tracking-transparency": "~3.0.1", "expo-tracking-transparency": "~3.0.1",
@ -78,7 +81,7 @@
"react-native-button": "^3.0.1", "react-native-button": "^3.0.1",
"react-native-flash-message": "^0.4.0", "react-native-flash-message": "^0.4.0",
"react-native-flatlist-slider": "^1.0.5", "react-native-flatlist-slider": "^1.0.5",
"react-native-gesture-handler": "~2.8.0", "react-native-gesture-handler": "~~2.1.0",
"react-native-gifted-chat": "^1.1.1", "react-native-gifted-chat": "^1.1.1",
"react-native-i18n": "1.0.0", "react-native-i18n": "1.0.0",
"react-native-maps": "1.3.2", "react-native-maps": "1.3.2",

96
Customer App/src/components/Menu/StatusCard/StatusCard.js
View File

@ -1,67 +1,67 @@
import { useNavigation, useTheme } from '@react-navigation/native' import { useNavigation, useTheme } from "@react-navigation/native";
import React, { useContext } from 'react' import React, { useContext } from "react";
import { FlatList, TouchableOpacity, View } from 'react-native' import { FlatList, TouchableOpacity, View } from "react-native";
import ConfigurationContext from '../../../context/Configuration' import ConfigurationContext from "../../../context/Configuration";
import UserContext from '../../../context/User' import UserContext from "../../../context/User";
import { alignment } from '../../../utils/alignment' import { alignment } from "../../../utils/alignment";
import { NAVIGATION_SCREEN } from '../../../utils/constant' import { NAVIGATION_SCREEN } from "../../../utils/constant";
import Spinner from '../../Spinner/Spinner' import Spinner from "../../Spinner/Spinner";
import TextDefault from '../../Text/TextDefault/TextDefault' import TextDefault from "../../Text/TextDefault/TextDefault";
import TextError from '../../Text/TextError/TextError' import TextError from "../../Text/TextError/TextError";
import useStyle from './styles' import useStyle from "./styles";
export const orderStatuses = [ export const orderStatuses = [
{ {
key: 'PENDING', key: "PENDING",
status: 1, status: 1,
statusText: 'Your order is still pending.' statusText: "Your order is still pending.",
}, },
{ {
key: 'ACCEPTED', key: "ACCEPTED",
status: 2, status: 2,
statusText: 'Restaurant is preparing Food.' statusText: "Restaurant is preparing Food.",
}, },
{ {
key: 'PICKED', key: "PICKED",
status: 3, status: 3,
statusText: 'Rider is on the way.' statusText: "Rider is on the way.",
}, },
{ {
key: 'DELIVERED', key: "DELIVERED",
status: 4, status: 4,
statusText: 'Order is delivered.' statusText: "Order is delivered.",
}, },
{ {
key: 'COMPLETED', key: "COMPLETED",
status: 5, status: 5,
statusText: 'Order is completed.' statusText: "Order is completed.",
} },
] ];
const orderStatusActive = ['PENDING', 'PICKED', 'ACCEPTED'] const orderStatusActive = ["PENDING", "PICKED", "ACCEPTED"];
const StatusCard = () => { const StatusCard = () => {
const { colors } = useTheme() const { colors } = useTheme();
const styles = useStyle() const styles = useStyle();
const navigation = useNavigation() const navigation = useNavigation();
const { const {
loadingOrders, loadingOrders,
errorOrders, errorOrders,
orders, orders,
networkStatusOrders, networkStatusOrders,
fetchOrders fetchOrders,
} = useContext(UserContext) } = useContext(UserContext);
const configuration = useContext(ConfigurationContext) const configuration = useContext(ConfigurationContext);
const checkStatus = status => { const checkStatus = (status) => {
const obj = orderStatuses.filter(x => { const obj = orderStatuses.filter((x) => {
return x.key === status return x.key === status;
}) });
return obj[0] return obj[0];
} };
if (loadingOrders) return <Spinner /> if (loadingOrders) return <Spinner />;
if (errorOrders) return <TextError>{errorOrders.message}</TextError> if (errorOrders) return <TextError>{errorOrders.message}</TextError>;
return ( return (
<FlatList <FlatList
@ -71,8 +71,9 @@ const StatusCard = () => {
horizontal={true} horizontal={true}
refreshing={networkStatusOrders === 4} refreshing={networkStatusOrders === 4}
onRefresh={() => networkStatusOrders === 7 && fetchOrders()} onRefresh={() => networkStatusOrders === 7 && fetchOrders()}
data={orders.filter(o => orderStatusActive.includes(o.order_status))} data={orders.filter((o) => orderStatusActive.includes(o.order_status))}
keyExtractor={item => item._id} //keyExtractor={(item) => item._id}
keyExtractor={(item, index) => String(index)}
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
<TouchableOpacity <TouchableOpacity
activeOpacity={0.8} activeOpacity={0.8}
@ -80,9 +81,10 @@ const StatusCard = () => {
onPress={() => onPress={() =>
navigation.navigate(NAVIGATION_SCREEN.OrderDetail, { navigation.navigate(NAVIGATION_SCREEN.OrderDetail, {
_id: item._id, _id: item._id,
currency_symbol: configuration.currency_symbol currency_symbol: configuration.currency_symbol,
}) })
}> }
>
<View key={index} style={styles.statusContainer}> <View key={index} style={styles.statusContainer}>
<View style={styles.textContainer}> <View style={styles.textContainer}>
<TextDefault H5 medium textColor={styles.lightText.color}> <TextDefault H5 medium textColor={styles.lightText.color}>
@ -95,8 +97,8 @@ const StatusCard = () => {
Status Status
</TextDefault> </TextDefault>
<TextDefault textColor={'#00b9c6'} H5 medium> <TextDefault textColor={"#00b9c6"} H5 medium>
{item.order_status}{' '} {item.order_status}{" "}
<TextDefault numberOfLines={2} medium> <TextDefault numberOfLines={2} medium>
{/* {checkStatus(item.order_status).status}.{' '} */}( {/* {checkStatus(item.order_status).status}.{' '} */}(
{checkStatus(item.order_status).statusText}) {checkStatus(item.order_status).statusText})
@ -107,7 +109,7 @@ const StatusCard = () => {
</TouchableOpacity> </TouchableOpacity>
)} )}
/> />
) );
} };
export default StatusCard export default StatusCard;

113
Customer App/src/screens/Addresses/Addresses.js
View File

@ -1,59 +1,59 @@
import { useMutation } from '@apollo/react-hooks' import { useMutation } from "@apollo/react-hooks";
import { useNavigation, useTheme } from '@react-navigation/native' import { useNavigation, useTheme } from "@react-navigation/native";
import gql from 'graphql-tag' import gql from "graphql-tag";
import React, { useContext, useLayoutEffect } from 'react' import React, { useContext, useLayoutEffect } from "react";
import { FlatList, TouchableOpacity, View } from 'react-native' import { FlatList, TouchableOpacity, View } from "react-native";
import i18n from '../../../i18n' import i18n from "../../../i18n";
import { deleteAddress } from '../../apollo/server' import { deleteAddress } from "../../apollo/server";
import EmptyAddress from '../../assets/images/SVG/imageComponents/EmptyAddress' import EmptyAddress from "../../assets/images/SVG/imageComponents/EmptyAddress";
import { import {
CustomIcon, CustomIcon,
RightButton, RightButton,
TextDefault, TextDefault,
WrapperView WrapperView,
} from '../../components' } from "../../components";
import UserContext from '../../context/User' import UserContext from "../../context/User";
import { COLORS } from '../../Theme' import { COLORS } from "../../Theme";
import { alignment } from '../../utils/alignment' import { alignment } from "../../utils/alignment";
import { ICONS_NAME, NAVIGATION_SCREEN } from '../../utils/constant' import { ICONS_NAME, NAVIGATION_SCREEN } from "../../utils/constant";
import { scale } from '../../utils/scaling' import { scale } from "../../utils/scaling";
import useStyle from './styles' import useStyle from "./styles";
const DELETE_ADDRESS = gql` const DELETE_ADDRESS = gql`
${deleteAddress} ${deleteAddress}
` `;
function Addresses() { function Addresses() {
const styles = useStyle() const styles = useStyle();
const { colors } = useTheme() const { colors } = useTheme();
const navigation = useNavigation() const navigation = useNavigation();
const { profile } = useContext(UserContext) const { profile } = useContext(UserContext);
const [mutate, { loading: loadingMutation }] = useMutation(DELETE_ADDRESS) const [mutate, { loading: loadingMutation }] = useMutation(DELETE_ADDRESS);
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
title: i18n.t('myAddresses'), title: i18n.t("myAddresses"),
headerRight: () => ( headerRight: () => (
<RightButton <RightButton
icon={ICONS_NAME.Plus} icon={ICONS_NAME.Plus}
iconSize={scale(18)} iconSize={scale(18)}
onPress={() => navigation.navigate(NAVIGATION_SCREEN.NewAddress)} onPress={() => navigation.navigate(NAVIGATION_SCREEN.NewAddress)}
/> />
) ),
}) });
}, [navigation]) }, [navigation]);
const addressIcons = { const addressIcons = {
Home: ICONS_NAME.Home, Home: ICONS_NAME.Home,
Work: ICONS_NAME.Cart, Work: ICONS_NAME.Cart,
Other: ICONS_NAME.Location Other: ICONS_NAME.Location,
} };
const colorIcons = { const colorIcons = {
Other: COLORS.primary, Other: COLORS.primary,
Home: COLORS.redishPink, Home: COLORS.redishPink,
Work: COLORS.primaryLightBlue Work: COLORS.primaryLightBlue,
} };
const emptyView = React.memo(() => { const emptyView = React.memo(() => {
return ( return (
@ -66,28 +66,30 @@ function Addresses() {
textColor={colors.fontMainColor} textColor={colors.fontMainColor}
bold bold
H5 H5
style={alignment.Msmall}> style={alignment.Msmall}
>
No Addresses found. No Addresses found.
</TextDefault> </TextDefault>
<View> <View>
<TextDefault textColor={colors.fontSecondColor}> <TextDefault textColor={colors.fontSecondColor}>
You haven&#39;t saved any address yet. You haven&#39;t saved any address yet.
{'\n'} {"\n"}
Click Add New Address to get started Click Add New Address to get started
</TextDefault> </TextDefault>
</View> </View>
<TouchableOpacity <TouchableOpacity
activeOpacity={0.8} activeOpacity={0.8}
style={styles.adressBtn} style={styles.adressBtn}
onPress={() => navigation.navigate(NAVIGATION_SCREEN.NewAddress)}> onPress={() => navigation.navigate(NAVIGATION_SCREEN.NewAddress)}
>
<TextDefault textColor={colors.white} H5 bold> <TextDefault textColor={colors.white} H5 bold>
Add New Address Add New Address
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
) );
}) });
return ( return (
<WrapperView> <WrapperView>
<View style={styles.containerInfo}> <View style={styles.containerInfo}>
@ -101,7 +103,8 @@ function Addresses() {
: { flexGrow: 1 } : { flexGrow: 1 }
} }
ListEmptyComponent={emptyView} ListEmptyComponent={emptyView}
keyExtractor={item => item._id} // keyExtractor={(item) => item._id}
keyExtractor={(item, index) => String(index)}
ItemSeparatorComponent={() => <View style={styles.line} />} ItemSeparatorComponent={() => <View style={styles.line} />}
ListHeaderComponent={() => <View style={alignment.MTmedium} />} ListHeaderComponent={() => <View style={alignment.MTmedium} />}
renderItem={({ item: address }) => ( renderItem={({ item: address }) => (
@ -110,16 +113,18 @@ function Addresses() {
style={styles.width100} style={styles.width100}
onPress={() => { onPress={() => {
navigation.navigate(NAVIGATION_SCREEN.EditAddress, { navigation.navigate(NAVIGATION_SCREEN.EditAddress, {
...address ...address,
}) });
}}> }}
>
<View style={[styles.titleAddress, styles.width100]}> <View style={[styles.titleAddress, styles.width100]}>
<View <View
style={{ style={{
alignItems: 'center', alignItems: "center",
flexDirection: 'row', flexDirection: "row",
flex: 1 flex: 1,
}}> }}
>
<CustomIcon <CustomIcon
name={addressIcons[address.label]} name={addressIcons[address.label]}
size={scale(20)} size={scale(20)}
@ -128,7 +133,8 @@ function Addresses() {
<TextDefault <TextDefault
bold bold
H5 H5
style={[alignment.MTxSmall, alignment.MLsmall]}> style={[alignment.MTxSmall, alignment.MLsmall]}
>
{address.label} {address.label}
</TextDefault> </TextDefault>
</View> </View>
@ -139,9 +145,10 @@ function Addresses() {
style={[styles.iconButton, alignment.MRsmall]} style={[styles.iconButton, alignment.MRsmall]}
onPress={() => { onPress={() => {
navigation.navigate(NAVIGATION_SCREEN.EditAddress, { navigation.navigate(NAVIGATION_SCREEN.EditAddress, {
...address ...address,
}) });
}}> }}
>
<CustomIcon <CustomIcon
name={ICONS_NAME.Pencil} name={ICONS_NAME.Pencil}
size={scale(20)} size={scale(20)}
@ -154,8 +161,9 @@ function Addresses() {
disabled={loadingMutation} disabled={loadingMutation}
style={styles.iconButton} style={styles.iconButton}
onPress={() => { onPress={() => {
mutate({ variables: { id: address._id } }) mutate({ variables: { id: address._id } });
}}> }}
>
<CustomIcon <CustomIcon
name={ICONS_NAME.Trash} name={ICONS_NAME.Trash}
size={scale(20)} size={scale(20)}
@ -175,11 +183,12 @@ function Addresses() {
/> />
<TextDefault <TextDefault
textColor={colors.fontSecondColor} textColor={colors.fontSecondColor}
style={alignment.MBsmall}> style={alignment.MBsmall}
>
All rights are reserved by Enatega All rights are reserved by Enatega
</TextDefault> </TextDefault>
</View> </View>
</WrapperView> </WrapperView>
) );
} }
export default React.memo(Addresses) export default React.memo(Addresses);

88
Customer App/src/screens/CartAddress/CartAddress.js
View File

@ -1,56 +1,56 @@
import { useMutation } from '@apollo/react-hooks' import { useMutation } from "@apollo/react-hooks";
import { useNavigation, useTheme } from '@react-navigation/native' import { useNavigation, useTheme } from "@react-navigation/native";
import gql from 'graphql-tag' import gql from "graphql-tag";
import React, { useContext, useLayoutEffect } from 'react' import React, { useContext, useLayoutEffect } from "react";
import { FlatList, TouchableOpacity, View } from 'react-native' import { FlatList, TouchableOpacity, View } from "react-native";
import i18n from '../../../i18n' import i18n from "../../../i18n";
import { selectAddress } from '../../apollo/server' import { selectAddress } from "../../apollo/server";
import { import {
CustomIcon, CustomIcon,
RightButton, RightButton,
TextDefault, TextDefault,
WrapperView WrapperView,
} from '../../components' } from "../../components";
import RadioButton from '../../components/FdRadioBtn/RadioBtn' import RadioButton from "../../components/FdRadioBtn/RadioBtn";
import UserContext from '../../context/User' import UserContext from "../../context/User";
import { alignment } from '../../utils/alignment' import { alignment } from "../../utils/alignment";
import { ICONS_NAME, NAVIGATION_SCREEN } from '../../utils/constant' import { ICONS_NAME, NAVIGATION_SCREEN } from "../../utils/constant";
import { scale } from '../../utils/scaling' import { scale } from "../../utils/scaling";
import useStyle from './styles' import useStyle from "./styles";
const SELECT_ADDRESS = gql` const SELECT_ADDRESS = gql`
${selectAddress} ${selectAddress}
` `;
function CartAddresses() { function CartAddresses() {
const { colors } = useTheme() const { colors } = useTheme();
const styles = useStyle() const styles = useStyle();
const navigation = useNavigation() const navigation = useNavigation();
const { profile } = useContext(UserContext) const { profile } = useContext(UserContext);
const [mutate] = useMutation(SELECT_ADDRESS, { onError }) const [mutate] = useMutation(SELECT_ADDRESS, { onError });
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
title: i18n.t('myAddresses'), title: i18n.t("myAddresses"),
headerRight: () => ( headerRight: () => (
<RightButton <RightButton
icon={ICONS_NAME.Plus} icon={ICONS_NAME.Plus}
iconSize={scale(18)} iconSize={scale(18)}
onPress={() => navigation.navigate(NAVIGATION_SCREEN.NewAddress)} onPress={() => navigation.navigate(NAVIGATION_SCREEN.NewAddress)}
/> />
) ),
}) });
}, [navigation]) }, [navigation]);
function onError(error) { function onError(error) {
console.log(error) console.log(error);
} }
const onSelectAddress = address => { const onSelectAddress = (address) => {
mutate({ variables: { id: address._id } }) mutate({ variables: { id: address._id } });
navigation.goBack() navigation.goBack();
} };
return ( return (
<WrapperView> <WrapperView>
@ -59,7 +59,7 @@ function CartAddresses() {
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={styles.flex} style={styles.flex}
data={profile.addresses} data={profile.addresses}
keyExtractor={item => item._id} keyExtractor={(item, index) => String(index)}
contentContainerStyle={styles.contentContainer} contentContainerStyle={styles.contentContainer}
ItemSeparatorComponent={() => <View style={styles.line} />} ItemSeparatorComponent={() => <View style={styles.line} />}
ListHeaderComponent={() => <View style={{ ...alignment.MTmedium }} />} ListHeaderComponent={() => <View style={{ ...alignment.MTmedium }} />}
@ -69,8 +69,9 @@ function CartAddresses() {
activeOpacity={0.7} activeOpacity={0.7}
style={styles.width100} style={styles.width100}
onPress={() => { onPress={() => {
onSelectAddress(address) onSelectAddress(address);
}}> }}
>
<View style={styles.width100}> <View style={styles.width100}>
<View style={[styles.titleAddress, styles.width100]}> <View style={[styles.titleAddress, styles.width100]}>
<View style={[styles.homeIcon]}> <View style={[styles.homeIcon]}>
@ -78,14 +79,14 @@ function CartAddresses() {
size={10} size={10}
outerColor={colors.radioOuterColor} outerColor={colors.radioOuterColor}
innerColor={colors.radioColor} innerColor={colors.radioColor}
animation={'bounceIn'} animation={"bounceIn"}
isSelected={address.selected} isSelected={address.selected}
onPress={() => { onPress={() => {
onSelectAddress(address) onSelectAddress(address);
}} }}
/> />
</View> </View>
<TextDefault style={{ width: '70%' }} H5 bold> <TextDefault style={{ width: "70%" }} H5 bold>
{address.label} {address.label}
</TextDefault> </TextDefault>
<TouchableOpacity <TouchableOpacity
@ -93,9 +94,10 @@ function CartAddresses() {
style={styles.editButton} style={styles.editButton}
onPress={() => onPress={() =>
navigation.navigate(NAVIGATION_SCREEN.EditAddress, { navigation.navigate(NAVIGATION_SCREEN.EditAddress, {
...address ...address,
}) })
}> }
>
<CustomIcon <CustomIcon
name={ICONS_NAME.Pencil} name={ICONS_NAME.Pencil}
size={scale(20)} size={scale(20)}
@ -108,13 +110,15 @@ function CartAddresses() {
<TextDefault <TextDefault
line={4} line={4}
textColor={colors.fontSecondColor} textColor={colors.fontSecondColor}
bold> bold
>
{address.delivery_address} {address.delivery_address}
</TextDefault> </TextDefault>
<TextDefault <TextDefault
line={3} line={3}
textColor={colors.fontSecondColor} textColor={colors.fontSecondColor}
bold> bold
>
{address.details} {address.details}
</TextDefault> </TextDefault>
</View> </View>
@ -125,7 +129,7 @@ function CartAddresses() {
/> />
</View> </View>
</WrapperView> </WrapperView>
) );
} }
export default CartAddresses export default CartAddresses;

138
Customer App/src/screens/Chat/Chat.js
View File

@ -1,90 +1,90 @@
import { Feather, FontAwesome } from '@expo/vector-icons' import { Feather, FontAwesome } from "@expo/vector-icons";
import { useNavigation, useTheme } from '@react-navigation/native' import { useNavigation, useTheme } from "@react-navigation/native";
import React, { useCallback, useEffect, useState } from 'react' import React, { useCallback, useEffect, useState } from "react";
import { Keyboard, View } from 'react-native' import { Keyboard, View } from "react-native";
import { import {
Bubble, Bubble,
GiftedChat, GiftedChat,
InputToolbar, InputToolbar,
Send Send,
} from 'react-native-gifted-chat' } from "react-native-gifted-chat";
import { TextDefault, WrapperView } from '../../components' import { TextDefault, WrapperView } from "../../components";
import { alignment } from '../../utils/alignment' import { alignment } from "../../utils/alignment";
import { scale } from '../../utils/scaling' import { scale } from "../../utils/scaling";
import useStyle from './styles' import useStyle from "./styles";
const UserInfo = { const UserInfo = {
_id: 1, _id: 1,
name: 'Jason', name: "Jason",
active: true active: true,
} };
function Chat() { function Chat() {
const styles = useStyle() const styles = useStyle();
const { colors } = useTheme() const { colors } = useTheme();
const navigation = useNavigation() const navigation = useNavigation();
const [messages, setMessages] = useState([]) const [messages, setMessages] = useState([]);
const [isTyping, setIsTyping] = useState(false) const [isTyping, setIsTyping] = useState(false);
useEffect(() => { useEffect(() => {
Keyboard.addListener('keyboardDidShow', _keyboardDidShow) Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener('keyboardDidHide', _keyboardDidHide) Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
// cleanup function // cleanup function
return () => { return () => {
Keyboard.removeListener('keyboardDidShow', _keyboardDidShow) Keyboard.remove("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener('keyboardDidHide', _keyboardDidHide) Keyboard.remove("keyboardDidHide", _keyboardDidHide);
} };
}, []) }, []);
const _keyboardDidShow = () => setIsTyping(true) const _keyboardDidShow = () => setIsTyping(true);
const _keyboardDidHide = () => setIsTyping(false) const _keyboardDidHide = () => setIsTyping(false);
useEffect(() => { useEffect(() => {
navigation.setOptions({ navigation.setOptions({
title: 'Chat' title: "Chat",
}) });
setMessages([ setMessages([
{ {
_id: 1, _id: 1,
text: 'How can I help you?', text: "How can I help you?",
sent: true, sent: true,
received: true, received: true,
createdAt: new Date(), createdAt: new Date(),
user: { user: {
_id: 2, _id: 2,
name: 'React Native', name: "React Native",
avatar: 'https://placeimg.com/140/140/any' avatar: "https://placeimg.com/140/140/any",
} },
} },
]) ]);
}, [navigation]) }, [navigation]);
const onSend = useCallback((messages = []) => { const onSend = useCallback((messages = []) => {
setMessages(previousMessages => setMessages((previousMessages) =>
GiftedChat.append(previousMessages, messages) GiftedChat.append(previousMessages, messages)
) );
}, []) }, []);
const renderBubble = props => { const renderBubble = (props) => {
return ( return (
<Bubble <Bubble
{...props} {...props}
textStyle={{ textStyle={{
right: { right: {
color: colors.fontMainColor color: colors.fontMainColor,
}, },
left: { left: {
color: colors.fontMainColor color: colors.fontMainColor,
} },
}} }}
bottomContainerStyle={{ bottomContainerStyle={{
right: { right: {
...alignment.PTxSmall ...alignment.PTxSmall,
}, },
left: { left: {
...alignment.PTxSmall ...alignment.PTxSmall,
} },
}} }}
wrapperStyle={{ wrapperStyle={{
right: { right: {
@ -99,11 +99,11 @@ function Chat() {
shadowColor: colors.shadowColor, shadowColor: colors.shadowColor,
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 1 height: 1,
}, },
shadowOpacity: 0.2, shadowOpacity: 0.2,
shadowRadius: 2, shadowRadius: 2,
elevation: 3 elevation: 3,
}, },
left: { left: {
minWidth: 150, minWidth: 150,
@ -117,36 +117,36 @@ function Chat() {
shadowColor: colors.shadowColor, shadowColor: colors.shadowColor,
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 1 height: 1,
}, },
shadowOpacity: 0.2, shadowOpacity: 0.2,
shadowRadius: 2, shadowRadius: 2,
elevation: 3 elevation: 3,
} },
}} }}
/> />
) );
} };
const renderSend = props => ( const renderSend = (props) => (
<Send {...props} containerStyle={styles.sendBtn}> <Send {...props} containerStyle={styles.sendBtn}>
<View style={styles.rightBtn}> <View style={styles.rightBtn}>
<Feather <Feather
name={'send'} name={"send"}
color={colors.buttonText} color={colors.buttonText}
size={scale(17)} size={scale(17)}
style={{ style={{
transform: [ transform: [
{ rotateZ: '45deg' }, { rotateZ: "45deg" },
{ translateY: 2 }, { translateY: 2 },
{ translateX: -1 } { translateX: -1 },
] ],
}} }}
/> />
</View> </View>
</Send> </Send>
) );
const customtInputToolbar = props => { const customtInputToolbar = (props) => {
return ( return (
<InputToolbar <InputToolbar
{...props} {...props}
@ -154,8 +154,8 @@ function Chat() {
renderSend={renderSend} renderSend={renderSend}
render render
/> />
) );
} };
return ( return (
<WrapperView> <WrapperView>
@ -166,7 +166,7 @@ function Chat() {
color={UserInfo.active ? colors.active : colors.fontSecondColor} color={UserInfo.active ? colors.active : colors.fontSecondColor}
/> />
<TextDefault medium H5 style={alignment.PLsmall}> <TextDefault medium H5 style={alignment.PLsmall}>
{UserInfo.active ? UserInfo.name : 'Offline'} {UserInfo.active ? UserInfo.name : "Offline"}
</TextDefault> </TextDefault>
</View> </View>
<GiftedChat <GiftedChat
@ -175,7 +175,7 @@ function Chat() {
user={UserInfo} user={UserInfo}
isTyping={isTyping} isTyping={isTyping}
messages={messages} messages={messages}
onSend={messages => onSend(messages)} onSend={(messages) => onSend(messages)}
renderAvatar={() => null} renderAvatar={() => null}
renderBubble={renderBubble} renderBubble={renderBubble}
renderInputToolbar={customtInputToolbar} renderInputToolbar={customtInputToolbar}
@ -192,20 +192,20 @@ function Chat() {
// } // }
timeTextStyle={{ timeTextStyle={{
left: { left: {
width: '100%', width: "100%",
color: colors.fontMainColor, color: colors.fontMainColor,
fontSize: 11, fontSize: 11,
textAlign: 'right' textAlign: "right",
}, },
right: { right: {
color: colors.fontMainColor, color: colors.fontMainColor,
fontSize: 11 fontSize: 11,
} },
}} }}
/> />
</View> </View>
</WrapperView> </WrapperView>
) );
} }
export default Chat export default Chat;

284
Customer App/src/screens/CreateAccount/CreateAccount.js
View File

@ -1,17 +1,18 @@
import { useMutation } from '@apollo/react-hooks' import { useMutation } from "@apollo/react-hooks";
import { FontAwesome } from '@expo/vector-icons' import { FontAwesome } from "@expo/vector-icons";
import { useNavigation, useTheme } from '@react-navigation/native' import { useNavigation, useTheme } from "@react-navigation/native";
import * as AppAuth from 'expo-app-auth' import * as AppAuth from "expo-app-auth";
import * as AppleAuthentication from 'expo-apple-authentication' import * as AppleAuthentication from "expo-apple-authentication";
import Constants from 'expo-constants' import Constants from "expo-constants";
import * as Facebook from 'expo-facebook' import * as Facebook from "expo-facebook";
import * as Google from 'expo-google-app-auth' //import * as Google from 'expo-google-app-auth'
import * as Notifications from 'expo-notifications' import * as Google from "expo-auth-session/providers/google";
import gql from 'graphql-tag' import * as Notifications from "expo-notifications";
import React, { useContext, useEffect, useState } from 'react' import gql from "graphql-tag";
import { Platform, TouchableOpacity, View } from 'react-native' import React, { useContext, useEffect, useState } from "react";
import getEnvVars from '../../../environment' import { Platform, TouchableOpacity, View } from "react-native";
import { login } from '../../apollo/server' import getEnvVars from "../../../environment";
import { login } from "../../apollo/server";
import { import {
EnategaImage, EnategaImage,
FdEmailBtn, FdEmailBtn,
@ -21,93 +22,97 @@ import {
RegistrationHeader, RegistrationHeader,
Spinner, Spinner,
TextDefault, TextDefault,
WrapperView WrapperView,
} from '../../components' } from "../../components";
import UserContext from '../../context/User' import UserContext from "../../context/User";
import { alignment } from '../../utils/alignment' import { alignment } from "../../utils/alignment";
import Analytics from '../../utils/analytics' import Analytics from "../../utils/analytics";
import { NAVIGATION_SCREEN } from '../../utils/constant' import { NAVIGATION_SCREEN } from "../../utils/constant";
import { scale } from '../../utils/scaling' import { scale } from "../../utils/scaling";
import useStyle from './styles' import useStyle from "./styles";
const { IOS_CLIENT_ID_GOOGLE, ANDROID_CLIENT_ID_GOOGLE, FACEBOOK_APP_ID } = const {
getEnvVars() IOS_CLIENT_ID_GOOGLE,
ANDROID_CLIENT_ID_GOOGLE,
FACEBOOK_APP_ID,
Expo_CLIENT_ID_GOOGLE,
} = getEnvVars();
const LOGIN = gql` const LOGIN = gql`
${login} ${login}
` `;
const Logo = require('../../../assets/logo.png') const Logo = require("../../../assets/logo.png");
const CreateAccount = () => { const CreateAccount = () => {
const styles = useStyle() const styles = useStyle();
const { colors } = useTheme() const { colors } = useTheme();
const navigation = useNavigation() const navigation = useNavigation();
const [enableApple, setEnableApple] = useState(false) const [enableApple, setEnableApple] = useState(false);
const [loginButton, loginButtonSetter] = useState(null) const [loginButton, loginButtonSetter] = useState(null);
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false);
const { setTokenAsync } = useContext(UserContext) const { setTokenAsync } = useContext(UserContext);
useEffect(() => { useEffect(() => {
checkIfSupportsAppleAuthentication() checkIfSupportsAppleAuthentication();
}, []) }, []);
const [mutate] = useMutation(LOGIN, { onCompleted, onError }) const [mutate] = useMutation(LOGIN, { onCompleted, onError });
async function checkIfSupportsAppleAuthentication() { async function checkIfSupportsAppleAuthentication() {
setEnableApple(await AppleAuthentication.isAvailableAsync()) setEnableApple(await AppleAuthentication.isAvailableAsync());
} }
async function onCompleted(data) { async function onCompleted(data) {
try { try {
const trackingOpts = { const trackingOpts = {
id: data.login.userId, id: data.login.userId,
usernameOrEmail: data.login.email usernameOrEmail: data.login.email,
} };
Analytics.identify(data.login.userId, trackingOpts) Analytics.identify(data.login.userId, trackingOpts);
Analytics.track(Analytics.events.USER_CREATED_ACCOUNT, trackingOpts) Analytics.track(Analytics.events.USER_CREATED_ACCOUNT, trackingOpts);
setTokenAsync(data.login.token) setTokenAsync(data.login.token);
navigation.navigate(NAVIGATION_SCREEN.Menu) navigation.navigate(NAVIGATION_SCREEN.Menu);
} catch (e) { } catch (e) {
console.log(e) console.log(e);
} finally { } finally {
setLoading(false) setLoading(false);
} }
} }
function onError(error) { function onError(error) {
try { try {
console.log(JSON.stringify(error)) console.log(JSON.stringify(error));
FlashMessage({ FlashMessage({
message: error.graphQLErrors[0].message message: error.graphQLErrors[0].message,
}) });
loginButtonSetter(null) loginButtonSetter(null);
} catch (e) { } catch (e) {
console.log(e) console.log(e);
} finally { } finally {
setLoading(false) setLoading(false);
} }
} }
async function mutateLogin(user) { async function mutateLogin(user) {
setLoading(true) setLoading(true);
let notificationToken = null let notificationToken = null;
if (Constants.isDevice) { if (Constants.isDevice) {
const { status: existingStatus } = const { status: existingStatus } =
await Notifications.getPermissionsAsync() await Notifications.getPermissionsAsync();
if (existingStatus === 'granted') { if (existingStatus === "granted") {
notificationToken = (await Notifications.getExpoPushTokenAsync()).data notificationToken = (await Notifications.getExpoPushTokenAsync()).data;
} }
} }
mutate({ variables: { ...user, notificationToken } }) mutate({ variables: { ...user, notificationToken } });
} }
function renderAppleAction() { function renderAppleAction() {
if (loading && loginButton === 'Apple') { if (loading && loginButton === "Apple") {
return ( return (
<View style={styles.buttonBackground}> <View style={styles.buttonBackground}>
<Spinner backColor="rgba(0,0,0,0.1)" spinnerColor={colors.tagColor} /> <Spinner backColor="rgba(0,0,0,0.1)" spinnerColor={colors.tagColor} />
</View> </View>
) );
} }
return ( return (
<TouchableOpacity <TouchableOpacity
@ -117,36 +122,37 @@ const CreateAccount = () => {
const credential = await AppleAuthentication.signInAsync({ const credential = await AppleAuthentication.signInAsync({
requestedScopes: [ requestedScopes: [
AppleAuthentication.AppleAuthenticationScope.FULL_NAME, AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
AppleAuthentication.AppleAuthenticationScope.EMAIL AppleAuthentication.AppleAuthenticationScope.EMAIL,
] ],
}) });
if (credential) { if (credential) {
const user = { const user = {
appleId: credential.user, appleId: credential.user,
phone: '', phone: "",
email: credential.email, email: credential.email,
password: '', password: "",
name: name:
credential.fullName.givenName + credential.fullName.givenName +
' ' + " " +
credential.fullName.familyName, credential.fullName.familyName,
picture: '', picture: "",
type: 'apple' type: "apple",
};
mutateLogin(user);
} }
mutateLogin(user) loginButtonSetter("Apple");
}
loginButtonSetter('Apple')
// signed in // signed in
} catch (e) { } catch (e) {
if (e.code === 'ERR_CANCELLED') { if (e.code === "ERR_CANCELLED") {
// handle that the user canceled the sign-in flow // handle that the user canceled the sign-in flow
loginButtonSetter(null) loginButtonSetter(null);
} else { } else {
// handle other errors // handle other errors
loginButtonSetter(null) loginButtonSetter(null);
} }
} }
}}> }}
>
<FontAwesome <FontAwesome
style={styles.marginLeft5} style={styles.marginLeft5}
name="apple" name="apple"
@ -157,116 +163,127 @@ const CreateAccount = () => {
Signup with Apple Signup with Apple
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
) );
} }
async function _facebookSignup() { async function _facebookSignup() {
try { try {
await Facebook.initializeAsync({ appId: FACEBOOK_APP_ID }) await Facebook.initializeAsync({ appId: FACEBOOK_APP_ID });
} catch (err) { } catch (err) {
console.log('err', err) console.log("err", err);
} }
try { try {
const { type, token } = await Facebook.logInWithReadPermissionsAsync({ const { type, token } = await Facebook.logInWithReadPermissionsAsync({
permissions: ['public_profile', 'email'] permissions: ["public_profile", "email"],
}) });
if (type === 'success') { if (type === "success") {
// Get the user's name using Facebook's Graph API // Get the user's name using Facebook's Graph API
const response = await fetch( const response = await fetch(
`https://graph.facebook.com/me?access_token=${token}&fields=email,name` `https://graph.facebook.com/me?access_token=${token}&fields=email,name`
) );
const user = await response.json() const user = await response.json();
return user return user;
} }
} catch (err) { } catch (err) {
console.log('error', err) console.log("error", err);
} }
} }
async function _googleSignup() {
try { const [googleRequest, googleResponse, googlePromptAsync] =
const { type, user } = await Google.logInAsync({ Google.useAuthRequest({
expoClientId: Expo_CLIENT_ID_GOOGLE,
iosClientId: IOS_CLIENT_ID_GOOGLE, iosClientId: IOS_CLIENT_ID_GOOGLE,
iosStandaloneAppClientId: IOS_CLIENT_ID_GOOGLE, iosStandaloneAppClientId: IOS_CLIENT_ID_GOOGLE,
androidClientId: ANDROID_CLIENT_ID_GOOGLE, androidClientId: ANDROID_CLIENT_ID_GOOGLE,
androidStandaloneAppClientId: ANDROID_CLIENT_ID_GOOGLE, androidStandaloneAppClientId: ANDROID_CLIENT_ID_GOOGLE,
redirectUrl: `${AppAuth.OAuthRedirect}:/oauth2redirect/google`, //redirectUrl: `${AuthSession.OAuthRedirect}:/oauth2redirect/google`,
scopes: ['profile', 'email'] scopes: ["profile", "email"],
}) ...{ useProxy: true },
if (type === 'success') { });
/* `accessToken` is now valid and can be used to get data from the Google API with HTTP requests */
return user const googleSignUp = () => {
} if (googleResponse?.type === "success") {
} catch (err) { const { authentication } = googleResponse;
console.log('err', err) console.log(authentication.accessToken);
(async () => {
const userInfoResponse = await fetch(
"https://www.googleapis.com/oauth2/v1/userinfo?alt=json",
{
headers: { Authorization: `Bearer ${authentication.accessToken}` },
} }
);
const googleUser = await userInfoResponse.json();
const user = {
phone: "",
email: googleUser.email,
password: "",
name: googleUser.name,
picture: googleUser.picture,
type: "google",
};
mutateLogin(user);
})();
} }
};
useEffect(() => {
googleSignUp();
}, [googleResponse]);
function renderFacebookAction() { function renderFacebookAction() {
return ( return (
<FdFacebookBtn <FdFacebookBtn
loadingIcon={loading && loginButton === 'Facebook'} loadingIcon={loading && loginButton === "Facebook"}
onPressIn={() => { onPressIn={() => {
loginButtonSetter('Facebook') loginButtonSetter("Facebook");
}} }}
onPress={async () => { onPress={async () => {
const facebookUser = await _facebookSignup() const facebookUser = await _facebookSignup();
if (facebookUser) { if (facebookUser) {
const user = { const user = {
facebookId: facebookUser.id, facebookId: facebookUser.id,
phone: '', phone: "",
email: facebookUser.email, email: facebookUser.email,
password: '', password: "",
name: facebookUser.name, name: facebookUser.name,
picture: '', picture: "",
type: 'facebook' type: "facebook",
} };
mutateLogin(user) mutateLogin(user);
} }
}} }}
/> />
) );
} }
function renderGoogleAction() { function renderGoogleAction() {
return ( return (
<FdGoogleBtn <FdGoogleBtn
loadingIcon={loading && loginButton === 'Google'} loadingIcon={loading && loginButton === "Google"}
onPressIn={() => { onPressIn={() => {
loginButtonSetter('Google') loginButtonSetter("Google");
}}
onPress={async() => {
const googleUser = await _googleSignup()
if (googleUser) {
const user = {
phone: '',
email: googleUser.email,
password: '',
name: googleUser.name,
picture: googleUser.photoUrl,
type: 'google'
}
mutateLogin(user)
}
}} }}
disabled={!googleRequest}
onPress={() => googlePromptAsync()}
/> />
) );
} }
function renderEmailAction() { function renderEmailAction() {
return ( return (
<FdEmailBtn <FdEmailBtn
loadingIcon={loading && loginButton === 'Email'} loadingIcon={loading && loginButton === "Email"}
onPress={() => { onPress={() => {
loginButtonSetter('Email') loginButtonSetter("Email");
navigation.navigate(NAVIGATION_SCREEN.Register) navigation.navigate(NAVIGATION_SCREEN.Register);
}} }}
/> />
) );
} }
return ( return (
<WrapperView> <WrapperView>
<View style={[styles.mainContainer, styles.flex]}> <View style={[styles.mainContainer, styles.flex]}>
<RegistrationHeader title={'Get Started'} /> <RegistrationHeader title={"Get Started"} />
<View style={styles.subContainer}> <View style={styles.subContainer}>
<View style={[styles.flex, styles.upperContainer]}> <View style={[styles.flex, styles.upperContainer]}>
<EnategaImage <EnategaImage
@ -276,7 +293,7 @@ const CreateAccount = () => {
/> />
</View> </View>
<View style={styles.width100}> <View style={styles.width100}>
{Platform.OS === 'ios' && renderFacebookAction()} {Platform.OS === "ios" && renderFacebookAction()}
<View style={alignment.MTmedium}>{renderGoogleAction()}</View> <View style={alignment.MTmedium}>{renderGoogleAction()}</View>
{enableApple && ( {enableApple && (
<View style={alignment.MTmedium}>{renderAppleAction()}</View> <View style={alignment.MTmedium}>{renderAppleAction()}</View>
@ -286,7 +303,8 @@ const CreateAccount = () => {
<TouchableOpacity <TouchableOpacity
activeOpacity={0.7} activeOpacity={0.7}
style={styles.alreadyBtn} style={styles.alreadyBtn}
onPress={() => navigation.navigate(NAVIGATION_SCREEN.Login)}> onPress={() => navigation.navigate(NAVIGATION_SCREEN.Login)}
>
<TextDefault style={[alignment.MLsmall]} bold> <TextDefault style={[alignment.MLsmall]} bold>
Already a member? Log in Already a member? Log in
</TextDefault> </TextDefault>
@ -295,6 +313,6 @@ const CreateAccount = () => {
</View> </View>
</View> </View>
</WrapperView> </WrapperView>
) );
} };
export default CreateAccount export default CreateAccount;

66
Customer App/src/screens/Menu/Menu.js
View File

@ -1,51 +1,51 @@
import { useQuery } from '@apollo/react-hooks' import { useQuery } from "@apollo/react-hooks";
import { useNavigation } from '@react-navigation/native' import { useNavigation } from "@react-navigation/native";
import gql from 'graphql-tag' import gql from "graphql-tag";
import React, { useContext, useLayoutEffect } from 'react' import React, { useContext, useLayoutEffect } from "react";
import { FlatList, View } from 'react-native' import { FlatList, View } from "react-native";
import { categories } from '../../apollo/server' import { categories } from "../../apollo/server";
import EmptyFood from '../../assets/images/SVG/imageComponents/EmptyFood' import EmptyFood from "../../assets/images/SVG/imageComponents/EmptyFood";
import { import {
MenuCard, MenuCard,
Spinner, Spinner,
StatusCard, StatusCard,
TextDefault, TextDefault,
TextError, TextError,
WrapperView WrapperView,
} from '../../components' } from "../../components";
import UserContext from '../../context/User' import UserContext from "../../context/User";
import { alignment } from '../../utils/alignment' import { alignment } from "../../utils/alignment";
import { NAVIGATION_SCREEN } from '../../utils/constant' import { NAVIGATION_SCREEN } from "../../utils/constant";
import { scale } from '../../utils/scaling' import { scale } from "../../utils/scaling";
import useStyle from './styles' import useStyle from "./styles";
// constants // constants
const CATEGORIES = gql` const CATEGORIES = gql`
${categories} ${categories}
` `;
function Menu() { function Menu() {
const styles = useStyle() const styles = useStyle();
const navigation = useNavigation() const navigation = useNavigation();
const { isLoggedIn, profile } = useContext(UserContext) const { isLoggedIn, profile } = useContext(UserContext);
const { data, refetch, networkStatus, loading, error } = useQuery(CATEGORIES) const { data, refetch, networkStatus, loading, error } = useQuery(CATEGORIES);
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
title: 'Home' title: "Home",
}) });
}, []) }, []);
function emptyView() { function emptyView() {
if (loading) { if (loading) {
return <Spinner /> return <Spinner />;
} else if (error) { } else if (error) {
return ( return (
<TextError <TextError
text={error ? error.message : 'No Foods'} text={error ? error.message : "No Foods"}
backColor="transparent" backColor="transparent"
/> />
) );
} else { } else {
return ( return (
<View style={styles.emptyContainer}> <View style={styles.emptyContainer}>
@ -54,7 +54,7 @@ function Menu() {
No item found No item found
</TextDefault> </TextDefault>
</View> </View>
) );
} }
} }
@ -65,7 +65,7 @@ function Menu() {
style={styles.flex} style={styles.flex}
contentContainerStyle={styles.contentContainer} contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
keyExtractor={item => item._id} keyExtractor={(item, index) => String(index)}
ListEmptyComponent={emptyView()} ListEmptyComponent={emptyView()}
data={loading ? [] : error ? [] : data.categories} data={loading ? [] : error ? [] : data.categories}
refreshing={networkStatus === 4} refreshing={networkStatus === 4}
@ -80,28 +80,28 @@ function Menu() {
Featured Featured
</TextDefault> </TextDefault>
</> </>
) );
} }
return null return null;
}} }}
renderItem={({ item }) => ( renderItem={({ item }) => (
<View key={item._id} style={styles.cardViewContainer}> <View key={item._id} style={styles.cardViewContainer}>
<MenuCard <MenuCard
onPress={() => onPress={() =>
navigation.navigate(NAVIGATION_SCREEN.MenuItems, { navigation.navigate(NAVIGATION_SCREEN.MenuItems, {
...item ...item,
}) })
} }
title={item.title} title={item.title}
description={item.description} description={item.description}
image={item.img_menu || ''} image={item.img_menu || ""}
/> />
</View> </View>
)} )}
/> />
</View> </View>
</WrapperView> </WrapperView>
) );
} }
export default React.memo(Menu) export default React.memo(Menu);

2
Customer App/src/screens/MenuItems/MenuItems.js
View File

@ -247,7 +247,7 @@ function MenuItems() {
contentContainerStyle={styles.contentContaienr} contentContainerStyle={styles.contentContaienr}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
ListHeaderComponent={renderListHeader()} ListHeaderComponent={renderListHeader()}
keyExtractor={(item) => item._id} keyExtractor={(item, index) => String(index)}
ListEmptyComponent={emptyView} ListEmptyComponent={emptyView}
data={loading ? [] : error ? [] : sortData(data.foodByCategory)} data={loading ? [] : error ? [] : sortData(data.foodByCategory)}
refreshing={networkStatus === 4} refreshing={networkStatus === 4}

123
Customer App/src/screens/MyOrders/MyOrders.js
View File

@ -1,10 +1,10 @@
import { useApolloClient } from '@apollo/react-hooks' import { useApolloClient } from "@apollo/react-hooks";
import { useNavigation, useTheme } from '@react-navigation/native' import { useNavigation, useTheme } from "@react-navigation/native";
import React, { useContext, useLayoutEffect } from 'react' import React, { useContext, useLayoutEffect } from "react";
import { FlatList, TouchableOpacity, View } from 'react-native' import { FlatList, TouchableOpacity, View } from "react-native";
import uuid from 'uuid' import uuid from "uuid";
import i18n from '../../../i18n' import i18n from "../../../i18n";
import EmptyOrder from '../../assets/images/SVG/imageComponents/EmptyOrder' import EmptyOrder from "../../assets/images/SVG/imageComponents/EmptyOrder";
import { import {
ActiveOrders, ActiveOrders,
CustomIcon, CustomIcon,
@ -12,24 +12,24 @@ import {
Spinner, Spinner,
TextDefault, TextDefault,
TextError, TextError,
WrapperView WrapperView,
} from '../../components' } from "../../components";
import ConfigurationContext from '../../context/Configuration' import ConfigurationContext from "../../context/Configuration";
import UserContext from '../../context/User' import UserContext from "../../context/User";
import { alignment } from '../../utils/alignment' import { alignment } from "../../utils/alignment";
import { ICONS_NAME, NAVIGATION_SCREEN } from '../../utils/constant' import { ICONS_NAME, NAVIGATION_SCREEN } from "../../utils/constant";
import { scale } from '../../utils/scaling' import { scale } from "../../utils/scaling";
import useStyle from './style' import useStyle from "./style";
const orderStatusActive = ['PENDING', 'PICKED', 'ACCEPTED'] const orderStatusActive = ["PENDING", "PICKED", "ACCEPTED"];
const orderStatusInactive = ['DELIVERED', 'COMPLETED'] const orderStatusInactive = ["DELIVERED", "COMPLETED"];
function MyOrders() { function MyOrders() {
const styles = useStyle() const styles = useStyle();
const { colors } = useTheme() const { colors } = useTheme();
const client = useApolloClient() const client = useApolloClient();
const navigation = useNavigation() const navigation = useNavigation();
const configuration = useContext(ConfigurationContext) const configuration = useContext(ConfigurationContext);
const { const {
orders, orders,
loadingOrders, loadingOrders,
@ -37,47 +37,47 @@ function MyOrders() {
fetchOrders, fetchOrders,
fetchMoreOrdersFunc, fetchMoreOrdersFunc,
networkStatusOrders, networkStatusOrders,
updateCart updateCart,
} = useContext(UserContext) } = useContext(UserContext);
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerTitle: i18n.t('titleOrders'), headerTitle: i18n.t("titleOrders"),
headerRight: null headerRight: null,
}) });
}, [navigation]) }, [navigation]);
// add items to cart and navigate to cart screen // add items to cart and navigate to cart screen
async function onReOrder({ order }) { async function onReOrder({ order }) {
const data = { const data = {
cartItems: order.items.map(item => { cartItems: order.items.map((item) => {
return { return {
...item.food, ...item.food,
key: uuid.v4(), key: uuid.v4(),
__typename: 'CartItem', __typename: "CartItem",
variation: { variation: {
__typename: 'ItemVariation', __typename: "ItemVariation",
_id: item.variation._id _id: item.variation._id,
}, },
quantity: item.quantity, quantity: item.quantity,
addons: item.addons.map(addon => ({ addons: item.addons.map((addon) => ({
...addon, ...addon,
__typename: 'ItemAddon', __typename: "ItemAddon",
options: addon.options.map(({ _id }) => ({ options: addon.options.map(({ _id }) => ({
_id, _id,
__typename: 'ItemOption' __typename: "ItemOption",
})) })),
})) })),
} };
}) }),
} };
await updateCart(data.cartItems) await updateCart(data.cartItems);
navigation.navigate(NAVIGATION_SCREEN.Cart) navigation.navigate(NAVIGATION_SCREEN.Cart);
} }
function emptyView() { function emptyView() {
if (loadingOrders) return <Spinner visible={loadingOrders} /> if (loadingOrders) return <Spinner visible={loadingOrders} />;
if (errorOrders) return <TextError text={errorOrders.message} /> if (errorOrders) return <TextError text={errorOrders.message} />;
else { else {
return ( return (
<View style={styles.subContainerImage}> <View style={styles.subContainerImage}>
@ -92,13 +92,14 @@ function MyOrders() {
<TouchableOpacity <TouchableOpacity
activeOpacity={0.7} activeOpacity={0.7}
style={styles.emptyButton} style={styles.emptyButton}
onPress={() => navigation.navigate(NAVIGATION_SCREEN.Menu)}> onPress={() => navigation.navigate(NAVIGATION_SCREEN.Menu)}
>
<TextDefault textColor={colors.buttonText} bold H5 center> <TextDefault textColor={colors.buttonText} bold H5 center>
Start Shopping Start Shopping
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) );
} }
} }
@ -108,7 +109,7 @@ function MyOrders() {
data={ data={
loadingOrders || errorOrders loadingOrders || errorOrders
? [] ? []
: orders.filter(o => orderStatusInactive.includes(o.order_status)) : orders.filter((o) => orderStatusInactive.includes(o.order_status))
} }
style={styles.container} style={styles.container}
contentContainerStyle={styles.contentContainer} contentContainerStyle={styles.contentContainer}
@ -116,17 +117,18 @@ function MyOrders() {
ListHeaderComponent={ ListHeaderComponent={
<ActiveOrders <ActiveOrders
navigation={navigation} navigation={navigation}
activeOrders={orders.filter(o => activeOrders={orders.filter((o) =>
orderStatusActive.includes(o.order_status) orderStatusActive.includes(o.order_status)
)} )}
pastOrders={orders.filter(o => pastOrders={orders.filter((o) =>
orderStatusInactive.includes(o.order_status) orderStatusInactive.includes(o.order_status)
)} )}
loading={loadingOrders} loading={loadingOrders}
error={errorOrders} error={errorOrders}
/> />
} }
keyExtractor={item => item._id} //keyExtractor={(item) => item._id}
keyExtractor={(item, index) => String(index)}
refreshing={networkStatusOrders === 4} refreshing={networkStatusOrders === 4}
onRefresh={() => networkStatusOrders === 7 && fetchOrders()} onRefresh={() => networkStatusOrders === 7 && fetchOrders()}
renderItem={({ item }) => ( renderItem={({ item }) => (
@ -135,9 +137,10 @@ function MyOrders() {
onPress={() => onPress={() =>
navigation.navigate(NAVIGATION_SCREEN.OrderDetail, { navigation.navigate(NAVIGATION_SCREEN.OrderDetail, {
_id: item._id, _id: item._id,
currency_symbol: configuration.currency_symbol currency_symbol: configuration.currency_symbol,
}) })
}> }
>
<View style={styles.subContainer}> <View style={styles.subContainer}>
<View style={styles.imgContainer}> <View style={styles.imgContainer}>
<EnategaImage <EnategaImage
@ -148,7 +151,7 @@ function MyOrders() {
</View> </View>
<View style={styles.infoContainer}> <View style={styles.infoContainer}>
<TextDefault H5 bold style={alignment.MBxSmall}> <TextDefault H5 bold style={alignment.MBxSmall}>
{'ID: '} {"ID: "}
{item.order_id} {item.order_id}
</TextDefault> </TextDefault>
<TextDefault line={3} textColor={colors.tagColor} H5 medium> <TextDefault line={3} textColor={colors.tagColor} H5 medium>
@ -163,9 +166,10 @@ function MyOrders() {
<TouchableOpacity <TouchableOpacity
activeOpacity={0.8} activeOpacity={0.8}
onPress={() => onReOrder({ order: item, client })} onPress={() => onReOrder({ order: item, client })}
style={styles.subContainerRight}> style={styles.subContainerRight}
>
<View> <View>
<View style={{ alignSelf: 'center' }}> <View style={{ alignSelf: "center" }}>
<CustomIcon <CustomIcon
name={ICONS_NAME.Refresh} name={ICONS_NAME.Refresh}
size={scale(28)} size={scale(28)}
@ -176,8 +180,9 @@ function MyOrders() {
textColor={colors.text} textColor={colors.text}
style={alignment.MTxSmall} style={alignment.MTxSmall}
bold bold
center> center
{'Re-Order'} >
{"Re-Order"}
</TextDefault> </TextDefault>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@ -187,7 +192,7 @@ function MyOrders() {
onEndReached={fetchMoreOrdersFunc} onEndReached={fetchMoreOrdersFunc}
/> />
</WrapperView> </WrapperView>
) );
} }
export default MyOrders export default MyOrders;

282
Customer App/src/screens/Settings/Settings.js
View File

@ -1,207 +1,207 @@
import { useMutation } from '@apollo/react-hooks' import { useMutation } from "@apollo/react-hooks";
import AsyncStorage from '@react-native-async-storage/async-storage' import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation, useTheme } from '@react-navigation/native' import { useNavigation, useTheme } from "@react-navigation/native";
import Constants from 'expo-constants' import Constants from "expo-constants";
import * as Device from 'expo-device' import * as Device from "expo-device";
import * as Localization from 'expo-localization' import * as Localization from "expo-localization";
import * as Notifications from 'expo-notifications' import * as Notifications from "expo-notifications";
import * as Updates from 'expo-updates' import * as Updates from "expo-updates";
import gql from 'graphql-tag' import gql from "graphql-tag";
import React, { useContext, useEffect, useRef, useState } from 'react' import React, { useContext, useEffect, useRef, useState } from "react";
import { import {
AppState, AppState,
Linking, Linking,
Platform, Platform,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
View View,
} from 'react-native' } from "react-native";
import { Modalize } from 'react-native-modalize' import { Modalize } from "react-native-modalize";
import i18n from '../../../i18n' import i18n from "../../../i18n";
import { import {
profile, profile,
pushToken, pushToken,
updateNotificationStatus updateNotificationStatus,
} from '../../apollo/server' } from "../../apollo/server";
import { import {
CustomIcon, CustomIcon,
FlashMessage, FlashMessage,
Spinner, Spinner,
TextDefault, TextDefault,
WrapperView WrapperView,
} from '../../components' } from "../../components";
import SwitchBtn from '../../components/FdSwitch/SwitchBtn' import SwitchBtn from "../../components/FdSwitch/SwitchBtn";
import UserContext from '../../context/User' import UserContext from "../../context/User";
import { alignment } from '../../utils/alignment' import { alignment } from "../../utils/alignment";
import { ICONS_NAME } from '../../utils/constant' import { ICONS_NAME } from "../../utils/constant";
import { scale } from '../../utils/scaling' import { scale } from "../../utils/scaling";
import SettingModal from './components/SettingModal' import SettingModal from "./components/SettingModal";
import useStyle from './styles' import useStyle from "./styles";
const languageTypes = [ const languageTypes = [
{ value: 'English', code: 'en', index: 0 }, { value: "English", code: "en", index: 0 },
{ value: 'français', code: 'fr', index: 1 }, { value: "français", code: "fr", index: 1 },
{ value: 'ភាសាខ្មែរ', code: 'km', index: 2 }, { value: "ភាសាខ្មែរ", code: "km", index: 2 },
{ value: '中文', code: 'zh', index: 3 }, { value: "中文", code: "zh", index: 3 },
{ value: 'Deutsche', code: 'de', index: 4 } { value: "Deutsche", code: "de", index: 4 },
] ];
const PUSH_TOKEN = gql` const PUSH_TOKEN = gql`
${pushToken} ${pushToken}
` `;
const UPDATE_NOTIFICATION_TOKEN = gql` const UPDATE_NOTIFICATION_TOKEN = gql`
${updateNotificationStatus} ${updateNotificationStatus}
` `;
const PROFILE = gql` const PROFILE = gql`
${profile} ${profile}
` `;
function Settings() { function Settings() {
const styles = useStyle() const styles = useStyle();
const { colors } = useTheme() const { colors } = useTheme();
const navigation = useNavigation() const navigation = useNavigation();
const { profile } = useContext(UserContext) const { profile } = useContext(UserContext);
const [languageName, languageNameSetter] = useState('English') const [languageName, languageNameSetter] = useState("English");
const [offerNotification, offerNotificationSetter] = useState( const [offerNotification, offerNotificationSetter] = useState(
profile.is_offer_notification profile.is_offer_notification
) );
const [orderNotification, orderNotificationSetter] = useState( const [orderNotification, orderNotificationSetter] = useState(
profile.is_order_notification profile.is_order_notification
) );
const [activeRadio, activeRadioSetter] = useState(languageTypes[0].index) const [activeRadio, activeRadioSetter] = useState(languageTypes[0].index);
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const [appState, setAppState] = useState(AppState.currentState) const [appState, setAppState] = useState(AppState.currentState);
const [uploadToken] = useMutation(PUSH_TOKEN) const [uploadToken] = useMutation(PUSH_TOKEN);
const [mutate, { loading }] = useMutation(UPDATE_NOTIFICATION_TOKEN, { const [mutate, { loading }] = useMutation(UPDATE_NOTIFICATION_TOKEN, {
onCompleted, onCompleted,
onError, onError,
refetchQueries: [{ query: PROFILE }] refetchQueries: [{ query: PROFILE }],
}) });
const modalizeRef = useRef(null) const modalizeRef = useRef(null);
useEffect(() => { useEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerTitle: i18n.t('titleSettings'), headerTitle: i18n.t("titleSettings"),
headerRight: null headerRight: null,
}) });
selectLanguage() selectLanguage();
checkPermission() checkPermission();
}, [navigation]) }, [navigation]);
const _handleAppStateChange = async nextAppState => { const _handleAppStateChange = async (nextAppState) => {
if (nextAppState === 'active') { if (nextAppState === "active") {
let token = null let token = null;
const permission = await getPermission() const permission = await getPermission();
if (permission === 'granted') { if (permission === "granted") {
if (!profile.notificationToken) { if (!profile.notificationToken) {
token = (await Notifications.getExpoPushTokenAsync()).data token = (await Notifications.getExpoPushTokenAsync()).data;
uploadToken({ variables: { token } }) uploadToken({ variables: { token } });
} }
offerNotificationSetter(profile.is_offer_notification) offerNotificationSetter(profile.is_offer_notification);
orderNotificationSetter(profile.is_order_notification) orderNotificationSetter(profile.is_order_notification);
} else { } else {
offerNotificationSetter(false) offerNotificationSetter(false);
orderNotificationSetter(false) orderNotificationSetter(false);
} }
} }
setAppState(nextAppState) setAppState(nextAppState);
} };
useEffect(() => { useEffect(() => {
AppState.addEventListener('change', _handleAppStateChange) AppState.addEventListener("change", _handleAppStateChange);
return () => { return () => {
AppState.removeEventListener('change', _handleAppStateChange) AppState.remove("change", _handleAppStateChange);
} };
}, []) }, []);
async function checkPermission() { async function checkPermission() {
const permission = await getPermission() const permission = await getPermission();
if (permission !== 'granted') { if (permission !== "granted") {
offerNotificationSetter(false) offerNotificationSetter(false);
orderNotificationSetter(false) orderNotificationSetter(false);
} else { } else {
offerNotificationSetter(profile.is_offer_notification) offerNotificationSetter(profile.is_offer_notification);
orderNotificationSetter(profile.is_order_notification) orderNotificationSetter(profile.is_order_notification);
} }
} }
async function getPermission() { async function getPermission() {
const { status } = await Notifications.getPermissionsAsync() const { status } = await Notifications.getPermissionsAsync();
return status return status;
} }
async function selectLanguage() { async function selectLanguage() {
const lang = await AsyncStorage.getItem('enatega-language') const lang = await AsyncStorage.getItem("enatega-language");
if (lang) { if (lang) {
const defLang = languageTypes.findIndex(el => el.code === lang) const defLang = languageTypes.findIndex((el) => el.code === lang);
const langName = languageTypes[defLang].value const langName = languageTypes[defLang].value;
activeRadioSetter(defLang) activeRadioSetter(defLang);
languageNameSetter(langName) languageNameSetter(langName);
} }
} }
const onSelectedLanguage = async active => { const onSelectedLanguage = async (active) => {
const languageInd = active const languageInd = active;
if (Platform.OS === 'android') { if (Platform.OS === "android") {
const localization = await Localization.getLocalizationAsync() const localization = await Localization.getLocalizationAsync();
localization.locale = languageTypes[languageInd].code localization.locale = languageTypes[languageInd].code;
await AsyncStorage.setItem( await AsyncStorage.setItem(
'enatega-language', "enatega-language",
languageTypes[languageInd].code languageTypes[languageInd].code
) );
Updates.reloadAsync() Updates.reloadAsync();
}
} }
};
const onClose = () => { const onClose = () => {
modalizeRef.current.close() modalizeRef.current.close();
} };
function onCompleted() { function onCompleted() {
FlashMessage({ FlashMessage({
message: 'Notification Status Updated' message: "Notification Status Updated",
}) });
} }
function onError(error) { function onError(error) {
try { try {
FlashMessage({ FlashMessage({
message: error.networkError.result.errors[0].message message: error.networkError.result.errors[0].message,
}) });
} catch (err) {} } catch (err) {}
} }
async function updateNotificationStatus(notificationCheck) { async function updateNotificationStatus(notificationCheck) {
let orderNotify, offerNotify let orderNotify, offerNotify;
if (!Device.isDevice) { if (!Device.isDevice) {
FlashMessage({ FlashMessage({
message: 'Notification do not work on simulator' message: "Notification do not work on simulator",
}) });
return return;
} }
const permission = await getPermission() const permission = await getPermission();
if (!profile.notificationToken || permission !== 'granted') { if (!profile.notificationToken || permission !== "granted") {
Linking.openSettings() Linking.openSettings();
} }
if (notificationCheck === 'offer') { if (notificationCheck === "offer") {
offerNotificationSetter(!offerNotification) offerNotificationSetter(!offerNotification);
orderNotify = orderNotification orderNotify = orderNotification;
offerNotify = !offerNotification offerNotify = !offerNotification;
} }
if (notificationCheck === 'order') { if (notificationCheck === "order") {
orderNotificationSetter(!orderNotification) orderNotificationSetter(!orderNotification);
orderNotify = !orderNotification orderNotify = !orderNotification;
offerNotify = offerNotification offerNotify = offerNotification;
} }
mutate({ mutate({
variables: { variables: {
offerNotification: offerNotify, offerNotification: offerNotify,
orderNotification: orderNotify orderNotification: orderNotify,
} },
}) });
} }
return ( return (
@ -213,7 +213,7 @@ function Settings() {
)} )}
<View style={[styles.flex, styles.mainContainer]}> <View style={[styles.flex, styles.mainContainer]}>
<View style={alignment.Plarge}> <View style={alignment.Plarge}>
{Platform.OS === 'android' && ( {Platform.OS === "android" && (
<View style={[styles.languageContainer, styles.shadow]}> <View style={[styles.languageContainer, styles.shadow]}>
<View style={styles.changeLanguage}> <View style={styles.changeLanguage}>
<View style={styles.headingLanguage}> <View style={styles.headingLanguage}>
@ -221,7 +221,8 @@ function Settings() {
numberOfLines={1} numberOfLines={1}
textColor={colors.fontSecondColor} textColor={colors.fontSecondColor}
medium medium
H5> H5
>
Language Language
</TextDefault> </TextDefault>
<TextDefault medium H5> <TextDefault medium H5>
@ -230,8 +231,9 @@ function Settings() {
</View> </View>
<TouchableOpacity <TouchableOpacity
activeOpacity={0.5} activeOpacity={0.5}
onPress={() => modalizeRef.current.open('top')} onPress={() => modalizeRef.current.open("top")}
style={styles.button}> style={styles.button}
>
<CustomIcon <CustomIcon
name={ICONS_NAME.Pencil} name={ICONS_NAME.Pencil}
size={scale(22)} size={scale(22)}
@ -244,20 +246,22 @@ function Settings() {
<TouchableOpacity <TouchableOpacity
activeOpacity={0.7} activeOpacity={0.7}
onPress={() => { onPress={() => {
updateNotificationStatus('offer') updateNotificationStatus("offer");
}} }}
style={[styles.notificationContainer, styles.shadow]}> style={[styles.notificationContainer, styles.shadow]}
>
<View style={styles.notificationChekboxContainer}> <View style={styles.notificationChekboxContainer}>
<TextDefault <TextDefault
numberOfLines={1} numberOfLines={1}
textColor={colors.statusSecondColor}> textColor={colors.statusSecondColor}
{' '} >
Receive Special Offers{' '} {" "}
Receive Special Offers{" "}
</TextDefault> </TextDefault>
<SwitchBtn <SwitchBtn
isEnabled={offerNotification} isEnabled={offerNotification}
onPress={() => { onPress={() => {
updateNotificationStatus('offer') updateNotificationStatus("offer");
}} }}
/> />
</View> </View>
@ -265,20 +269,22 @@ function Settings() {
<TouchableOpacity <TouchableOpacity
activeOpacity={0.7} activeOpacity={0.7}
onPress={() => { onPress={() => {
updateNotificationStatus('order') updateNotificationStatus("order");
}} }}
style={[styles.notificationContainer, styles.shadow]}> style={[styles.notificationContainer, styles.shadow]}
>
<View style={styles.notificationChekboxContainer}> <View style={styles.notificationChekboxContainer}>
<TextDefault <TextDefault
numberOfLines={1} numberOfLines={1}
textColor={colors.statusSecondColor}> textColor={colors.statusSecondColor}
{' '} >
Get updates on your order status!{' '} {" "}
Get updates on your order status!{" "}
</TextDefault> </TextDefault>
<SwitchBtn <SwitchBtn
isEnabled={orderNotification} isEnabled={orderNotification}
onPress={() => { onPress={() => {
updateNotificationStatus('order') updateNotificationStatus("order");
}} }}
/> />
</View> </View>
@ -293,7 +299,8 @@ function Settings() {
<TextDefault <TextDefault
textColor={colors.fontSecondColor} textColor={colors.fontSecondColor}
style={alignment.MBsmall} style={alignment.MBsmall}
center> center
>
All rights are reserved by Enatega All rights are reserved by Enatega
</TextDefault> </TextDefault>
@ -304,10 +311,11 @@ function Settings() {
handlePosition="inside" handlePosition="inside"
avoidKeyboardLikeIOS={Platform.select({ avoidKeyboardLikeIOS={Platform.select({
ios: true, ios: true,
android: false android: false,
})} })}
keyboardAvoidingOffset={2} keyboardAvoidingOffset={2}
keyboardAvoidingBehavior="height"> keyboardAvoidingBehavior="height"
>
<SettingModal <SettingModal
onClose={onClose} onClose={onClose}
onSelectedLanguage={onSelectedLanguage} onSelectedLanguage={onSelectedLanguage}
@ -315,6 +323,6 @@ function Settings() {
/> />
</Modalize> </Modalize>
</WrapperView> </WrapperView>
) );
} }
export default Settings export default Settings;

60
Customer App/src/utils/analytics.js
View File

@ -1,15 +1,16 @@
import * as Amplitude from 'expo-analytics-amplitude' //import * as Amplitude from 'expo-analytics-amplitude'
import { normalizeTrackingOptions } from './analyticsUtils' import * as Amplitude from "@amplitude/analytics-react-native";
import getEnvVars from '../../environment' import { normalizeTrackingOptions } from "./analyticsUtils";
import { getTrackingPermissions } from './useAppTrackingTransparency' import getEnvVars from "../../environment";
const { AMPLITUDE_API_KEY } = getEnvVars() import { getTrackingPermissions } from "./useAppTrackingTransparency";
const { AMPLITUDE_API_KEY } = getEnvVars();
let isInitialized = false let isInitialized = false;
export const events = { export const events = {
USER_LOGGED_IN: 'USER_LOGGED_IN', USER_LOGGED_IN: "USER_LOGGED_IN",
USER_LOGGED_OUT: 'USER_LOGGED_OUT', USER_LOGGED_OUT: "USER_LOGGED_OUT",
USER_CREATED_ACCOUNT: 'USER_CREATED_ACCOUNT', USER_CREATED_ACCOUNT: "USER_CREATED_ACCOUNT",
// USER_RESET_PASSWORD: 'USER_RESET_PASSWORD', // USER_RESET_PASSWORD: 'USER_RESET_PASSWORD',
// USER_LINKED_SOCIAL: 'USER_LINKED_SOCIAL', // USER_LINKED_SOCIAL: 'USER_LINKED_SOCIAL',
// USER_UPDATED_EMAIL: 'USER_UPDATED_EMAIL', // USER_UPDATED_EMAIL: 'USER_UPDATED_EMAIL',
@ -20,40 +21,41 @@ export const events = {
// USER_REMOVED_PROJECT: 'USER_REMOVED_PROJECT', // USER_REMOVED_PROJECT: 'USER_REMOVED_PROJECT',
// USER_OPENED_CREATION: 'USER_OPENED_CREATION', // USER_OPENED_CREATION: 'USER_OPENED_CREATION',
// USER_UPDATED_SETTINGS: 'USER_UPDATED_SETTINGS', // USER_UPDATED_SETTINGS: 'USER_UPDATED_SETTINGS',
USER_PLACED_ORDER: 'USER_PLACED_ORDER' USER_PLACED_ORDER: "USER_PLACED_ORDER",
} };
export async function initialize() { export async function initialize() {
const trackingStatus = await getTrackingPermissions() const trackingStatus = await getTrackingPermissions();
if (isInitialized || !AMPLITUDE_API_KEY || trackingStatus !== 'granted') { if (isInitialized || !AMPLITUDE_API_KEY || trackingStatus !== "granted") {
return return;
} }
await Amplitude.initializeAsync(AMPLITUDE_API_KEY) Amplitude.init(AMPLITUDE_API_KEY);
isInitialized = true isInitialized = true;
} }
export async function identify(id, options) { export async function identify(id, options) {
initialize() initialize();
const properties = normalizeTrackingOptions(options) const properties = normalizeTrackingOptions(options);
if (id) {
await Amplitude.setUserIdAsync(id)
if (properties) { if (properties) {
await Amplitude.setUserPropertiesAsync(properties) Amplitude.Identify(properties);
} //await Amplitude.setUserPropertiesAsync(properties)
} else { } else {
await Amplitude.clearUserPropertiesAsync() //await Amplitude.clearUserPropertiesAsync()
const identifyObj = new Amplitude.Identify();
identifyObj.remove(properties);
Amplitude.Identify(identifyObj);
} }
} }
export async function track(event, options) { export async function track(event, options) {
initialize() initialize();
const properties = normalizeTrackingOptions(options) const properties = normalizeTrackingOptions(options);
if (properties) { if (properties) {
await Amplitude.logEventWithPropertiesAsync(event, properties) Amplitude.track(event, properties);
} else { } else {
await Amplitude.logEventAsync(event) Amplitude.track(event);
} }
} }
@ -61,5 +63,5 @@ export default {
events, events,
initialize, initialize,
identify, identify,
track track,
} };

39
Customer App/src/utils/androidBackButton.js
View File

@ -1,34 +1,35 @@
// packages // packages
import { BackHandler, Alert } from 'react-native' import { BackHandler, Alert } from "react-native";
/** /**
* Attaches an event listener that handles the android-only hardware * Attaches an event listener that handles the android-only hardware
* back button * back button
* @param {Function} callback The function to call on click * @param {Function} callback The function to call on click
*/ */
const handleAndroidBackButton = callback => { const handleAndroidBackButton = (callback) => {
BackHandler.addEventListener('hardwareBackPress', () => { BackHandler.addEventListener("hardwareBackPress", () => {
callback() callback();
return true return true;
}) });
} };
/** /**
* Removes the event listener in order not to add a new one * Removes the event listener in order not to add a new one
* every time the view component re-mounts * every time the view component re-mounts
*/ */
const removeAndroidBackButtonHandler = () => { const removeAndroidBackButtonHandler = () => {
BackHandler.removeEventListener('hardwareBackPress') // BackHandler.removeEventListener('hardwareBackPress')
} BackHandler.remove("hardwareBackPress");
};
const exitAlert = () => { const exitAlert = () => {
Alert.alert('Confirm exit', 'Do you want to quit the app?', [ Alert.alert("Confirm exit", "Do you want to quit the app?", [
{ text: 'CANCEL', style: 'cancel' }, { text: "CANCEL", style: "cancel" },
{ {
text: 'OK', text: "OK",
onPress: () => { onPress: () => {
BackHandler.exitApp() BackHandler.exitApp();
} },
} },
]) ]);
return true return true;
} };
export { handleAndroidBackButton, removeAndroidBackButtonHandler, exitAlert } export { handleAndroidBackButton, removeAndroidBackButtonHandler, exitAlert };