ordering-ui-react-native 0.8.3 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.8.3",
+  "version": "0.8.7",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -60,6 +60,7 @@
     "react-native-app-intro-slider": "^4.0.4",
     "react-native-awesome-alerts": "^1.4.2",
     "react-native-awesome-loading": "^1.0.15",
+    "react-native-background-timer": "^2.4.1",
     "react-native-bootsplash": "^3.2.3",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",

package/src/components/OrdersOption/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
-import { useFocusEffect } from '@react-navigation/native'
 import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
@@ -62,7 +61,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       }
       setReorderLoading(false)
 
-    } catch (err) {
+    } catch (err: any) {
       showToast(ToastType.Error, t('ERROR', err.message))
       setReorderLoading(false)
     }
@@ -100,16 +99,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     return objectStatus && objectStatus
   }
 
-  useFocusEffect(
-    React.useCallback(() => {
-      loadOrders && loadOrders()
-      setIsLoadingFirstRender(false)
-      return () => {
-        setIsLoadingFirstRender(true)
-      }
-    }, [navigation])
-  )
-
   useEffect(() => {
     setOrdersLength && setOrdersLength({
       ...ordersLength,

package/src/navigators/HomeNavigator.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { AppState } from 'react-native'
 import { createStackNavigator } from "@react-navigation/stack";
-import { useSession, useOrder } from 'ordering-components/native';
+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';
@@ -22,7 +24,30 @@ const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
   const [orderState] = useOrder();
-  const [{ auth }] = useSession();
+  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>

package/src/pages/Checkout.tsx

@@ -47,7 +47,7 @@ export const CheckoutPage = (props: any) => {
             ? { publishableKey: publicKey, stripeAccountId: stripeAccountId}
             : { publishableKey: publicKey };
           initStripe(stripeParams);
-        } catch (error) {
+        } catch (error: any) {
           showToast(ToastType.Error, error?.toString() || error.message)
         }
 
@@ -71,11 +71,11 @@ export const CheckoutPage = (props: any) => {
               props.navigation.navigate('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
               return
             }
-          } catch (error) {
+          } catch (error: any) {
             showToast(ToastType.Error, error?.toString() || error.message)
           }
           return
-        } catch (error) {
+        } catch (error: any) {
           const e = error?.message?.toLowerCase() === 'failed'
             ? t('FAILED_PAYMENT', 'The payment has failed')
             : error?.toString() || error.message

package/src/types/react-native-background-timer/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-background-timer'

package/themes/business/index.tsx

@@ -13,6 +13,7 @@ import { MessagesOption } from './src/components/MessagesOption';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderMessage } from './src/components/OrderMessage';
 import { OrderDetails } from './src/components/OrderDetails';
+import { OrderDetailsDelivery } from './src/components/OrderDetailsDelivery';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderSummary } from './src/components/OrderSummary';
 import { PhoneInputNumber } from './src/components/PhoneInputNumber';
@@ -25,6 +26,7 @@ import { StoresList } from './src/components/StoresList';
 import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { VerifyPhone } from './src/components/VerifyPhone';
+import { DriverMap } from './src/components/DriverMap';
 
 //OComponents
 import {
@@ -41,6 +43,7 @@ import {
 //layouts
 import { Container } from './src/layouts/Container';
 import { SafeAreaContainer } from './src/layouts/SafeAreaContainer';
+import { SafeAreaContainerLayout } from './src/layouts/SafeAreaContainer';
 
 export {
   //Components
@@ -50,17 +53,20 @@ export {
   FloatingButton,
   ForgotPasswordForm,
   GoogleMap,
+  DriverMap,
   Home,
   LanguageSelector,
   LoginForm,
   LogoutButton,
   MessagesOption,
+  OrderDetailsDelivery,
   OrderMessage,
   NotFoundSource,
   OrderDetails,
   OrdersOption,
   OrderSummary,
   PhoneInputNumber,
+  SafeAreaContainerLayout,
   PreviousMessages,
   PreviousOrders,
   ProductItemAccordion,

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -6,7 +6,6 @@ import {
   View,
   KeyboardAvoidingView,
 } from 'react-native';
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { useLanguage } from 'ordering-components/native';
 import { Content, Timer, TimeField, Header, Action, Comments } from './styles';
@@ -172,255 +171,183 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
 
   return (
     <>
-      {loading && (
-        <View
-          style={{
-            paddingHorizontal: 20,
-            flex: 1,
-            backgroundColor: theme.colors.backgroundLight,
-            justifyContent: 'space-between',
-          }}>
-          {action === 'accept' ? (
-            <>
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine width={70} />
-              </Placeholder>
-
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine
-                  style={{
-                    width: 245,
-                    height: 245,
-                    borderRadius: 123,
-                    alignSelf: 'center',
-                  }}
-                />
-              </Placeholder>
-
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine
-                  width={90}
-                  style={{ borderRadius: 7.8, alignSelf: 'center', height: 40 }}
-                />
-              </Placeholder>
-            </>
-          ) : (
-            <>
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine width={90} />
-                <PlaceholderLine width={60} />
-              </Placeholder>
-
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine
-                  width={100}
-                  style={{ borderRadius: 7.8, height: 40 }}
-                />
-                <PlaceholderLine width={40} />
-                <PlaceholderLine width={50} />
-                <PlaceholderLine width={50} />
-                <PlaceholderLine
-                  width={100}
-                  style={{ borderRadius: 7.8, height: 140 }}
-                />
-              </Placeholder>
-
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine
-                  width={90}
-                  style={{ borderRadius: 7.8, alignSelf: 'center', height: 40 }}
-                />
-              </Placeholder>
-            </>
-          )}
-        </View>
-      )}
-
-      {!loading && (
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          style={{ flex: 1, marginTop: top }}>
-          <Content ref={scrollViewRef}>
-            <Header>
-              <OIconButton
-                icon={theme.images.general.arrow_left}
-                borderColor={theme.colors.clear}
-                iconStyle={{ width: 20, height: 20 }}
-                style={{
-                  maxWidth: 40,
-                  height: 35,
-                  justifyContent: 'flex-end',
-                  marginBottom: 30,
-                }}
-                onClick={() => handleArrowBack()}
-              />
-
-              <OText size={20} color={theme.colors.textGray} weight="600">
-                {action === 'accept'
-                  ? `${t(titleAccept?.key, titleAccept?.text)}:`
-                  : t(titleReject?.key, titleReject?.text)}
-              </OText>
-
-              {action === 'reject' && (
-                <>
-                  {!notShowCustomerPhone && (
-                    <>
-                      <OText
-                        size={15}
-                        color={theme.colors.textGray}
-                        style={{ marginTop: 10 }}>
-                        {t(
-                          'CALL_YOUR_CUSTOMER_TO_RESOLVE_THE_ISSUE_AS_POLITELY_AS_POSSIBLE',
-                          'Call your customer to resolve the issue as politely as possible',
-                        )}
-                      </OText>
-
-                      {numberToShow ? (
-                        <OButton
-                          bgColor="transparent"
-                          borderColor={theme.colors.primary}
-                          textStyle={{
-                            color: theme.colors.primary,
-                            fontSize: 20,
-                          }}
-                          style={{
-                            borderRadius: 10,
-                            marginVertical: 20,
-                          }}
-                          imgLeftStyle={{
-                            resizeMode: 'contain',
-                            left: 20,
-                            position: 'absolute',
-                          }}
-                          imgLeftSrc={theme.images.general.cellphone}
-                          text={numberToShow}
-                          onClick={() =>
-                            Linking.openURL(`tel:${customerCellphone}`)
-                          }
-                        />
-                      ) : (
-                        <OButton
-                          bgColor="transparent"
-                          borderColor={theme.colors.primary}
-                          textStyle={{
-                            color: theme.colors.primary,
-                            fontSize: 15,
-                          }}
-                          style={{
-                            borderRadius: 10,
-                            marginVertical: 20,
-                          }}
-                          imgLeftStyle={{
-                            resizeMode: 'contain',
-                            left: 20,
-                            position: 'absolute',
-                          }}
-                          isDisabled={true}
-                          imgLeftSrc={theme.images.general.cellphone}
-                          text={t('NOT_NUMBER', "There's not phonenumber.")}
-                          onClick={() =>
-                            Linking.openURL(`tel:${customerCellphone}`)
-                          }
-                        />
-                      )}
-                    </>
-                  )}
-
-                  <OText
-                    size={15}
-                    color={theme.colors.textGray}
-                    style={{ marginBottom: 10 }}>
-                    {t(
-                      'MARK_THE_ORDER_AS_REJECTED',
-                      'Mark the order as rejected',
-                    )}
-                  </OText>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={{ flex: 1, marginTop: top }}>
+        <Content ref={scrollViewRef}>
+          <Header>
+            <OIconButton
+              icon={theme.images.general.arrow_left}
+              borderColor={theme.colors.clear}
+              iconStyle={{ width: 20, height: 20 }}
+              style={{
+                maxWidth: 40,
+                height: 35,
+                justifyContent: 'flex-end',
+                marginBottom: 30,
+              }}
+              onClick={() => handleArrowBack()}
+            />
 
-                  <OText>
-                    <OText style={{ fontWeight: '600' }}>
-                      {t('NOTE', 'Note')}
-                      {': '}
-                    </OText>
+            <OText size={20} color={theme.colors.textGray} weight="600">
+              {action === 'accept'
+                ? `${t(titleAccept?.key, titleAccept?.text)}:`
+                : t(titleReject?.key, titleReject?.text)}
+            </OText>
 
-                    <OText size={15} color={theme.colors.textGray}>
+            {action === 'reject' && (
+              <>
+                {!notShowCustomerPhone && (
+                  <>
+                    <OText
+                      size={15}
+                      color={theme.colors.textGray}
+                      style={{ marginTop: 10 }}>
                       {t(
-                        'YOUR_CUSTOMER_WILL_RECEIVE_A_NOTIFICATION_ABOUT_THIS_ACTIONS',
-                        'Your customer will receive a notification about this actions',
+                        'CALL_YOUR_CUSTOMER_TO_RESOLVE_THE_ISSUE_AS_POLITELY_AS_POSSIBLE',
+                        'Call your customer to resolve the issue as politely as possible',
                       )}
                     </OText>
+
+                    {numberToShow ? (
+                      <OButton
+                        bgColor="transparent"
+                        borderColor={theme.colors.primary}
+                        textStyle={{
+                          color: theme.colors.primary,
+                          fontSize: 20,
+                        }}
+                        style={{
+                          borderRadius: 10,
+                          marginVertical: 20,
+                        }}
+                        imgLeftStyle={{
+                          resizeMode: 'contain',
+                          left: 20,
+                          position: 'absolute',
+                        }}
+                        imgLeftSrc={theme.images.general.cellphone}
+                        text={numberToShow}
+                        onClick={() =>
+                          Linking.openURL(`tel:${customerCellphone}`)
+                        }
+                      />
+                    ) : (
+                      <OButton
+                        bgColor="transparent"
+                        borderColor={theme.colors.primary}
+                        textStyle={{
+                          color: theme.colors.primary,
+                          fontSize: 15,
+                        }}
+                        style={{
+                          borderRadius: 10,
+                          marginVertical: 20,
+                        }}
+                        imgLeftStyle={{
+                          resizeMode: 'contain',
+                          left: 20,
+                          position: 'absolute',
+                        }}
+                        isDisabled={true}
+                        imgLeftSrc={theme.images.general.cellphone}
+                        text={t('NOT_NUMBER', "There's not phonenumber.")}
+                        onClick={() =>
+                          Linking.openURL(`tel:${customerCellphone}`)
+                        }
+                      />
+                    )}
+                  </>
+                )}
+
+                <OText
+                  size={15}
+                  color={theme.colors.textGray}
+                  style={{ marginBottom: 10 }}>
+                  {t(
+                    'MARK_THE_ORDER_AS_REJECTED',
+                    'Mark the order as rejected',
+                  )}
+                </OText>
+
+                <OText>
+                  <OText style={{ fontWeight: '600' }}>
+                    {t('NOTE', 'Note')}
+                    {': '}
                   </OText>
-                </>
-              )}
-            </Header>
-
-            {action === 'accept' && (
-              <View style={{ height: 400, justifyContent: 'center' }}>
-                <Timer onPress={() => openTimerIOnput()}>
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
-                    {hour}
-                  </OText>
-                  {hour.length > 0 && <OText size={55}>:</OText>}
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
-                    {min}
+
+                  <OText size={15} color={theme.colors.textGray}>
+                    {t(
+                      'YOUR_CUSTOMER_WILL_RECEIVE_A_NOTIFICATION_ABOUT_THIS_ACTIONS',
+                      'Your customer will receive a notification about this actions',
+                    )}
                   </OText>
-                </Timer>
-              </View>
+                </OText>
+              </>
             )}
+          </Header>
+
+          {action === 'accept' && (
+            <View style={{ height: 400, justifyContent: 'center' }}>
+              <Timer onPress={() => openTimerIOnput()}>
+                <OText weight="600" style={{ textAlign: 'center' }} size={55}>
+                  {hour}
+                </OText>
+                {hour.length > 0 && <OText size={55}>:</OText>}
+                <OText weight="600" style={{ textAlign: 'center' }} size={55}>
+                  {min}
+                </OText>
+              </Timer>
+            </View>
+          )}
 
-            <TimeField
-              ref={timerRef}
-              keyboardType="numeric"
-              value={time}
-              placeholder={'00:00'}
-              onChangeText={handleTime}
-              onPressOut={() => handleFixTime()}
-              editable={true}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={theme.colors.textGray}
-              color={theme.colors.textGray}
-              onEndEditing={handleFixTime}
-            />
+          <TimeField
+            ref={timerRef}
+            keyboardType="numeric"
+            value={time}
+            placeholder={'00:00'}
+            onChangeText={handleTime}
+            onPressOut={() => handleFixTime()}
+            editable={true}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={theme.colors.textGray}
+            color={theme.colors.textGray}
+            onEndEditing={handleFixTime}
+          />
+
+          {action === 'reject' && (
+            <Comments ref={viewRef}>
+              <OTextarea
+                onFocus={handleFocus}
+                placeholder={t(
+                  'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',
+                  'Please type your comments in here',
+                )}
+                value={comments}
+                onChange={setComments}
+              />
+              <View style={{ height: 20 }} />
+            </Comments>
+          )}
+        </Content>
 
-            {action === 'reject' && (
-              <Comments ref={viewRef}>
-                <OTextarea
-                  onFocus={handleFocus}
-                  placeholder={t(
-                    'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',
-                    'Please type your comments in here',
-                  )}
-                  value={comments}
-                  onChange={setComments}
-                />
-                <View style={{ height: 20 }} />
-              </Comments>
-            )}
-          </Content>
-
-          <Action
-            style={{
-              marginBottom: isKeyboardShow
-                ? Platform.OS === 'ios'
-                  ? 0
-                  : 10
-                : 0,
-            }}>
-            <FloatingButton
-              firstButtonClick={() => {
-                handleAcceptOrReject();
-              }}
-              btnText={
-                action === 'accept'
-                  ? t('ACCEPT', 'Accept')
-                  : t('REJECT', 'Reject')
-              }
-              color={
-                action === 'accept' ? theme.colors.green : theme.colors.red
-              }
-            />
-          </Action>
-        </KeyboardAvoidingView>
-      )}
+        <Action
+          style={{
+            marginBottom: isKeyboardShow ? (Platform.OS === 'ios' ? 0 : 10) : 0,
+          }}>
+          <FloatingButton
+            firstButtonClick={() => {
+              handleAcceptOrReject();
+            }}
+            btnText={
+              action === 'accept'
+                ? t('ACCEPT', 'Accept')
+                : t('REJECT', 'Reject')
+            }
+            color={action === 'accept' ? theme.colors.green : theme.colors.red}
+          />
+        </Action>
+      </KeyboardAvoidingView>
     </>
   );
 };