ordering-ui-react-native 0.21.27 → 0.21.29

package/src/navigators/BottomNavigator.tsx

@@ -1,117 +0,0 @@
-import React from 'react'
-import { View, Platform, PlatformIOSStatic } from 'react-native'
-import { useOrder } from 'ordering-components/native'
-import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import styled from 'styled-components/native'
-
-import { OText } from '../components/shared'
-import BusinessList from '../pages/BusinessesListing'
-import MyOrders from '../pages/MyOrders'
-import CartList from '../pages/CartList'
-import Profile from '../pages/Profile'
-import { useTheme } from 'styled-components/native'
-
-const CartsLenght = styled.View`
-  width: 25px;
-  height: 25px;
-  background-color: ${(props: any) => props.theme.colors.primary};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  right: 0;
-`
-
-const Tab = createMaterialBottomTabNavigator();
-
-const BottomNavigator = () => {
-  const theme = useTheme()
-  const [{ carts }] = useOrder()
-  const cartsList = (carts && Object.values(carts).filter((cart: any) => cart.products.length > 0)) || []
-  const isIos = Platform.OS === 'ios'
-  const platformIOS = Platform as PlatformIOSStatic
-  const androidStyles = isIos
-    ? platformIOS.isPad
-      ? { paddingBottom: 30 }
-      : {}
-    : {height: 40, position: 'relative', bottom: 15}
-  return (
-    <Tab.Navigator
-      initialRouteName="BusinessList"
-      activeColor={theme.colors.primary}
-      barStyle={{ backgroundColor: theme.colors.white, ...androidStyles }}
-      labeled={false}
-      inactiveColor={theme.colors.disabled}
-    >
-      <Tab.Screen
-        name="BusinessList"
-        component={BusinessList}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0  }}>
-                <MaterialCommunityIcon name='home' size={46} color={color} />
-              </View>
-            )
-        }}
-      />
-      <Tab.Screen
-        name="MyOrders"
-        component={MyOrders}
-        options={
-          {
-            tabBarIcon:
-              ({ color }: any) => (
-                <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0 }}>
-                  <MaterialIcon name='format-list-bulleted' size={46} color={color} />
-                </View>
-              ),
-          }}
-      />
-      <Tab.Screen
-        name="Cart"
-        component={CartList}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{
-                  width: 50,
-                  height: 50,
-                  justifyContent: !isIos ? 'flex-start' : 'space-evenly',
-                  position: 'relative',
-                  bottom: !isIos ? 10 : 0
-                }}
-              >
-                <MaterialIcon name='shopping-basket' size={46} color={color} />
-                {cartsList.length > 0 && (
-                  <CartsLenght style={{ borderRadius: 100 / 2 }}>
-                    <OText
-                      color={theme.colors.white}
-                    >
-                      {cartsList.length}
-                    </OText>
-                  </CartsLenght>
-                )}
-              </View>
-            )
-        }}
-      />
-      <Tab.Screen
-        name="Profile"
-        component={Profile}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0  }}>
-                <MaterialIcon name='person' size={46} color={color} />
-              </View>
-            )
-        }}
-      />
-    </Tab.Navigator>
-  );
-}
-
-export default BottomNavigator

package/src/navigators/CheckoutNavigator.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { createStackNavigator } from "@react-navigation/stack";
-
-import AddressList from '../pages/AddressList'
-import AddressForm from '../pages/AddressForm'
-import CartList from '../pages/CartList'
-import CheckoutPage from '../pages/Checkout';
-import BusinessProductsList from '../pages/BusinessProductsList';
-import MultiCheckout from '../pages/MultiCheckout';
-
-const Stack = createStackNavigator();
-
-const CheckoutNavigator = (props: any) => {
-  const {
-    navigation,
-    route
-  } = props;
-
-  const cartUuid = route?.params?.cartUuid
-
-  const checkoutProps = {
-    navigation,
-    route,
-    cartUuid: route?.params?.cartUuid
-  }
-
-  return (
-    <Stack.Navigator>
-      {!cartUuid && (
-        <Stack.Screen
-          name="Cart"
-          component={CartList}
-          options={{ headerShown: false }}
-        />
-      )}
-      <Stack.Screen
-        name="CheckoutPage"
-        children={() => <CheckoutPage {...checkoutProps} />}
-        options={{ headerShown: false }}
-        />
-      <Stack.Screen
-        name="Business"
-        component={BusinessProductsList}
-        options={{ headerShown: false }}
-      />
-      <Stack.Screen
-        name="AddressList"
-        component={AddressList}
-        options={{ headerShown: false }}
-        initialParams={{isFromCheckout: true}}
-      />
-      <Stack.Screen
-        name="AddressForm"
-        component={AddressForm}
-        options={{ headerShown: false }}
-      />
-      <Stack.Screen
-        name="MultiCheckout"
-        children={() => <MultiCheckout {...checkoutProps} />}
-        options={{ headerShown: false }}
-      />
-    </Stack.Navigator>
-  );
-}
-
-export default CheckoutNavigator;

package/src/navigators/HomeNavigator.tsx

@@ -1,202 +0,0 @@
-import * as React from 'react';
-import { AppState } from 'react-native'
-import { createStackNavigator } from "@react-navigation/stack";
-import { useSession, useOrder, useWebsocket } from 'ordering-components/native';
-import BottomNavigator from '../navigators/BottomNavigator';
-import RootNavigator from '../navigators/RootNavigator';
-import CheckoutNavigator from '../navigators/CheckoutNavigator';
-import BackgroundTimer from 'react-native-background-timer';
-
-import AddressList from '../pages/AddressList';
-import AddressForm from '../pages/AddressForm';
-import OrderDetails from '../pages/OrderDetails';
-import BusinessProductsList from '../pages/BusinessProductsList';
-import ReviewOrder from '../pages/ReviewOrder'
-import ReviewProducts from '../pages/ReviewProducts';
-import ReviewDriver from '../pages/ReviewDriver'
-import MomentOption from '../pages/MomentOption'
-import Account from '../pages/Account'
-import Help from '../pages/Help'
-import HelpOrder from '../pages/HelpOrder'
-import HelpGuide from '../pages/HelpGuide'
-import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
-import Sessions from '../pages/Sessions';
-import Splash from '../pages/Splash';
-import ProductDetails from '../pages/ProductDetails';
-import MultiOrdersDetails from '../pages/MultiOrdersDetails';
-const Stack = createStackNavigator();
-
-const HomeNavigator = (e : any) => {
-  const [orderState] = useOrder();
-  const [{ auth, user }] = useSession();
-  const socket = useWebsocket();
-
-  const appState = React.useRef(AppState.currentState);
-  let interval: any
-
-  const _handleAppStateChange = (nextAppState: any) => {
-    if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
-      BackgroundTimer.clearInterval(interval)
-    }else{
-      interval = BackgroundTimer.setInterval(()=>{
-        const ordersRoom = user?.level === 0 ? 'orders' : `orders_${user?.id}`
-        socket.join(ordersRoom)
-      }, 5000)
-      appState.current = nextAppState;
-    }
-  }
-
-  React.useEffect (() => {
-    AppState.addEventListener('change', _handleAppStateChange);
-    return () => {
-      AppState.removeEventListener('change', _handleAppStateChange);
-    };
-  },[])
-
-  return (
-    <Stack.Navigator>
-      {!orderState.loading || (orderState?.options?.user_id && orderState.loading) || orderState?.options?.address?.location ? (
-        <>
-          {auth ? (
-            <>
-              {Object.keys(orderState?.carts).length === 0 && !orderState?.options?.address?.location && !orderState.loading ? (
-                <>
-                  <Stack.Screen
-                    name="AddressListInitial"
-                    component={AddressList}
-                    options={{ headerShown: false }}
-                    initialParams={{ afterSignup: true }}
-                  />
-                  <Stack.Screen
-                    name="AddressFormInitial"
-                    component={AddressForm}
-                    options={{ headerShown: false }}
-                    initialParams={{ afterSignup: true }}
-                  />
-                </>
-              ) : (
-                <>
-                  {!!Object.keys(e?.route?.params?.productLogin || {})?.length && (
-                    <Stack.Screen
-                      name="BusinessAfterLogin"
-                      component={BusinessProductsList}
-                      options={{headerShown: false}}
-                      initialParams={{productLogin: e?.route?.params?.productLogin}}
-                    />
-                  )}
-                  <Stack.Screen
-                    name='BottomTab'
-                    component={BottomNavigator}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="CheckoutNavigator"
-                    component={CheckoutNavigator}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="OrderDetails"
-                    component={OrderDetails}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="Business"
-                    component={BusinessProductsList}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="ProductDetails"
-                    component={ProductDetails}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="ReviewOrder"
-                    component={ReviewOrder}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="ReviewProducts"
-                    component={ReviewProducts}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="ReviewDriver"
-                    component={ReviewDriver}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name='MomentOption'
-                    component={MomentOption}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="AddressList"
-                    component={AddressList}
-                    options={{ headerShown: false }}
-                    initialParams={{ afterSignup: false }}
-                  />
-                  <Stack.Screen
-                    name="AddressForm"
-                    component={AddressForm}
-                    options={{ headerShown: false }}
-                    initialParams={{ afterSignup: false }}
-                  />
-                  <Stack.Screen
-                    name="Account"
-                    component={Account}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="Help"
-                    component={Help}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="HelpOrder"
-                    component={HelpOrder}
-                    options={{ headerShown: false }}
-                  />
-                   <Stack.Screen
-                    name="HelpGuide"
-                    component={HelpGuide}
-                    options={{ headerShown: false }}
-                  />
-                   <Stack.Screen
-                    name="HelpAccountAndPayment"
-                    component={HelpAccountAndPayment}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="Sessions"
-                    component={Sessions}
-                    options={{ headerShown: false }}
-                  />
-                  <Stack.Screen
-                    name="MultiOrdersDetails"
-                    component={MultiOrdersDetails}
-                    options={{ headerShown: false }}
-                  />
-                </>
-              )}
-            </>
-          )
-            : (
-              <Stack.Screen
-                name='root'
-                component={RootNavigator}
-                options={{ headerShown: false }}
-              />
-            )}
-        </>
-      ) : (
-        <Stack.Screen
-          name="Splash"
-          component={Splash}
-          options={{ headerShown: false }}
-        />
-      )}
-    </Stack.Navigator>
-  );
-}
-
-export default HomeNavigator;

package/src/navigators/NavigationRef.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-export const navigationRef: any = React.createRef();
-
-export const navigate = (name: string, params: any) => {
-  navigationRef.current?.navigate(name, params);
-}

package/src/navigators/RootNavigator.tsx

@@ -1,269 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Platform } from 'react-native'
-import { createStackNavigator } from '@react-navigation/stack';
-import { useOrder, useSession, useConfig } from 'ordering-components/native';
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
-import OneSignal from 'react-native-onesignal';
-import NetInfo from '@react-native-community/netinfo'
-
-dayjs.extend(isSameOrAfter)
-dayjs.extend(utc)
-
-import Login from '../pages/Login';
-import Signup from '../pages/Signup';
-import Forgot from '../pages/ForgotPassword';
-import Home from '../pages/Home';
-import IntroductoryTutorial from '../pages/IntroductoryTutorial';
-import AddressForm from '../pages/AddressForm';
-import MomentOption from '../pages/MomentOption';
-import Splash from '../pages/Splash';
-import BusinessList from '../pages/BusinessesListing';
-import BusinessProductsList from '../pages/BusinessProductsList';
-import NotFound from '../pages/NotFound'
-import HomeNavigator from './HomeNavigator';
-import settings from '../config.json';
-import NetworkError from '../pages/NetworkError';
-
-import * as RootNavigation from '../navigators/NavigationRef';
-import { _retrieveStoreData, _setStoreData } from '../providers/StoreUtil';
-
-const Stack = createStackNavigator();
-const RootNavigator = () => {
-  const [orderId, setOrderId] = useState(null)
-  const [{ auth, loading: sessionLoading }] = useSession();
-  const [orderStatus, { changeMoment }] = useOrder();
-  const [{ configs, loading: configsLoading }] = useConfig();
-  const [loaded, setLoaded] = useState(false);
-  const [productLogin, setProductLogin] = useState({})
-  const [oneSignalState, setOneSignalState] = useState<any>({
-    notification_app: settings.notification_app
-  });
-  const [ isTutorial, setTutorial] = useState(true)
-  const [isPushLoading, setIsPushLoading] = useState({ loading: true })
-  const [connectionState, setConnectionState] = useState<{
-    connection_status: boolean;
-  } | null>(null);
-
-  const validDate = (date : any) => {
-    if (!date) return
-    const _date = dayjs(date, 'YYYY-MM-DD HH:mm').isSameOrAfter(dayjs(), 'day')
-      ? dayjs(date).format('YYYY-MM-DD HH:mm')
-      : dayjs().format('YYYY-MM-DD HH:mm')
-    return _date
-  };
-
-  const oneSignalSetup = async () => {
-    setIsPushLoading({ loading: true });
-    OneSignal.setLogLevel(6, 0);
-
-    OneSignal.setAppId(configs?.onesignal_orderingapp_id?.value);
-
-    if (Platform.OS === 'ios') {
-      OneSignal.promptForPushNotificationsWithUserResponse((response : any) => {
-        console.log('Prompt response:', response);
-      });
-    }
-
-    OneSignal.setNotificationOpenedHandler(({ notification }: any) => {
-      if(notification?.additionalData?.order_uuid) {
-        setOrderId(notification?.additionalData?.order_uuid)
-      }
-    });
-
-    OneSignal.addSubscriptionObserver((event: any) => {
-      setOneSignalState({ ...oneSignalState, notification_token: event?.to?.userId });
-    });
-
-    const deviceState: any = await OneSignal.getDeviceState();
-
-    if (!deviceState?.isSubscribed) {
-      OneSignal.addTrigger("prompt_ios", "true");
-    }
-
-    OneSignal.disablePush(false);
-
-    const data = {
-      ...oneSignalState,
-      notification_token: deviceState?.userId,
-      notification_app: settings.notification_app
-    }
-    setOneSignalState(data);
-    setIsPushLoading({ loading: false });
-  };
-  useEffect(() => {
-    if (!loaded && !orderStatus.loading && !isPushLoading.loading) {
-      setLoaded(true)
-    }
-  }, [orderStatus, isPushLoading])
-
-  useEffect(() => {
-    if (orderId && loaded && auth) {
-      RootNavigation.navigate('OrderDetails', {
-        orderId: orderId,
-        isFromRoot: true
-      });
-
-      setOrderId(null)
-    }
-  }, [loaded, orderId])
-
-  useEffect(() => {
-    const setTutorialLocal = async () => {
-      const data = await _retrieveStoreData('isTutorial');
-      if(data === false){
-        setTutorial(false)
-      }
-    }
-    setTutorialLocal();
-  }, [isTutorial])
-
-  useEffect(() => {
-    if (!sessionLoading && !isPushLoading.loading && !auth) {
-      setLoaded(!auth)
-    }
-  }, [sessionLoading, isPushLoading])
-
-  useEffect(() => {
-    const _currentDate = dayjs.utc(validDate(orderStatus.options?.moment)).local()
-    if (!_currentDate) {
-      return
-    }
-    const selected = dayjs(_currentDate, 'YYYY-MM-DD HH:mm')
-    const now = dayjs()
-    const secondsDiff = selected.diff(now, 'seconds')
-    const checkTime = setTimeout(() => {
-      changeMoment(null)
-    }, secondsDiff * 1000)
-
-    return () => {
-      clearTimeout(checkTime)
-    }
-  }, [orderStatus.options?.moment])
-
-  useEffect(() => {
-    if (configsLoading) return
-    if (configs?.onesignal_orderingapp_id?.value) {
-      oneSignalSetup();
-    }
-    if (!!!configs?.onesignal_orderingapp_id?.value) {
-      setIsPushLoading({ loading: false });
-    }
-  }, [configsLoading]);
-
-  let netInfoSuscription : any = null
-  useEffect(() => {
-    netInfoSuscription = NetInfo.addEventListener(handleConnectivityChange);
-
-    return () => {
-      netInfoSuscription && netInfoSuscription()
-    }
-  }, []);
-
-  const handleConnectivityChange = (state : any) => {
-    setConnectionState({ connection_status: state.isConnected });
-  };
-
-  return (
-    <Stack.Navigator>
-      {
-        !loaded && (
-          <Stack.Screen
-            name="Splash"
-            component={Splash}
-            options={{ headerShown: false }}
-          />
-        )
-      }
-      {
-        loaded && connectionState?.connection_status && (
-          <>
-            {!auth ? (
-              <>
-                { isTutorial ? (
-                  <Stack.Screen
-                    name="IntroductoryTutorial"
-                    component={IntroductoryTutorial}
-                    options={{ headerShown: false }}
-                    initialParams={{ setTutorial }}
-                  />):(
-                  <Stack.Screen
-                    name="Home"
-                    component={Home}
-                    options={{ headerShown: false }}
-                  />)}
-                <Stack.Screen
-                  name="Login"
-                  component={Login}
-                  options={{ headerShown: false }}
-                  listeners={{
-                    state: (e: any) => {
-                      setProductLogin(e.data.state.routes.find((object: any) => object?.params?.product)?.params?.product)
-                    }
-                  }}
-                  initialParams={{ notification_state: oneSignalState }}
-                />
-                <Stack.Screen
-                  name="Signup"
-                  component={Signup}
-                  options={{ headerShown: false }}
-                  initialParams={{ notification_state: oneSignalState }}
-                />
-                <Stack.Screen
-                  name="Forgot"
-                  component={Forgot}
-                  options={{ headerShown: false }}
-                />
-                <Stack.Screen
-                  name="AddressForm"
-                  component={AddressForm}
-                  options={{ headerShown: false }}
-                />
-                <Stack.Screen
-                  name='BusinessList'
-                  component={BusinessList}
-                  options={{ headerShown: false }}
-                />
-                <Stack.Screen
-                  name='Business'
-                  component={BusinessProductsList}
-                  options={{ headerShown: false }}
-                  initialParams={{ setProductLogin }}
-                />
-                <Stack.Screen
-                  name='MomentOption'
-                  component={MomentOption}
-                  options={{ headerShown: false }}
-                />
-              </>
-            ) : (
-              <>
-                <Stack.Screen
-                  name='MyAccount'
-                  component={HomeNavigator}
-                  options={{ headerShown: false }}
-                  initialParams={{ productLogin }}
-                />
-              </>
-            )}
-          </>
-        )
-      }
-      {connectionState?.connection_status === false ? (
-        <Stack.Screen
-          name='NetworkError'
-          component={NetworkError}
-          options={{ headerShown: false }}
-        />
-      ) : (
-        <Stack.Screen
-          name='NotFound'
-          component={NotFound}
-          options={{ headerShown: false }}
-        />
-      )}
-    </Stack.Navigator>
-  );
-};
-export default RootNavigator;

package/src/pages/Account.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import styled from 'styled-components/native';
-import { Platform } from 'react-native';
-import { Container } from '../layouts/Container'
-import { Account as AccountController } from '../components/Account'
-
-const KeyboardView = styled.KeyboardAvoidingView`
-  flex-grow: 1;
-`;
-interface Props {
-  navigation: any;
-  route: any;
-}
-
-const Account = (props: Props) => {
-  const accountProps = {
-    ...props,
-    useSessionUser: true,
-    useValidationFields: true
-  }
-
-  return (
-    <KeyboardView
-      enabled
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <Container>
-        <AccountController {...accountProps} />
-      </Container>
-    </KeyboardView>
-  )
-}
-
-export default Account