Search feature in the restaurant interface

src/components/BasicSafeAreaView.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function BasicSafeAreaView({ children }) {
+  return (
+    <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
+      {children}
+    </SafeAreaView>
+  );
+}

src/i18n/locales/de.json

@@ -273,6 +273,8 @@
     "RESTAURANT_PRINTER_CONNECT_ERROR_TITLE": "Verbindung mit dem Gerät fehlgeschlagen",
     "RESTAURANT_SOUND_ALERT_CONFIRM": "OK, mach ich",
     "RESTAURANT_PRINTER_DISCONNECTED_BODY": "Das Gerät {{name}} ist nicht mehr verbunden",
+    "RESTAURANT_SEARCH_ORDERS": "Bestellung finden...",
+    "RESTAURANT_SEARCH_ORDERS_INPUT_PLACEHOLDER": "Bestellnummer...",
     "NOTIFICATION_TASKS_CHANGED_DESC": "Deine Aufgaben vom {{date}} wurden aktualisiert",
     "NOTIFICATION_TASKS_CHANGED_TITLE": "Aufgabe geändert",
     "ADD_TO_CART": "In den Warenkorb legen",

src/i18n/locales/en.json

@@ -344,6 +344,8 @@
     "RESTAURANT_ORDER_CONNECT_PRINTER": "Connect a printer",
     "RESTAURANT_ORDER_PRINTING": "Printing order",
     "RESTAURANT_ORDER_FAILED_TO_PRINT": "Failed to print",
+    "RESTAURANT_SEARCH_ORDERS": "Find order...",
+    "RESTAURANT_SEARCH_ORDERS_INPUT_PLACEHOLDER": "Order number...",
     "SWIPE_TO_ACCEPT_REFUSE": "Slide to the right to accept, to the left to refuse",
     "ADD_COUPON": "Add a voucher code",
     "VOUCHER_CODE": "Voucher code",

src/i18n/locales/es.json

@@ -179,6 +179,8 @@
         "RESTAURANT_SETTINGS_MENU_ACTIVATE": "Activar el menú {{- name}}",
         "RESTAURANT_ALERT_RUSH_MODE_ON": "El modo rush esta activado",
         "RESTAURANT_ALERT_CLOSED": "El restaurante esta cerrado",
+        "RESTAURANT_SEARCH_ORDERS": "Buscar pedido...",
+        "RESTAURANT_SEARCH_ORDERS_INPUT_PLACEHOLDER": "Número de pedido...",
         "CHECKOUT_PRODUCT_OPTIONS_TITLE": "Elección de opciones",
         "CHECKOUT_LOGIN_TITLE": "Autenticación",
         "CHECKOUT_LOGIN_DISCLAIMER": "Por favor inicie sesión para continuar",

src/i18n/locales/fr.json

@@ -163,6 +163,8 @@
     "RESTAURANT_ORDER_REFUSE_REASON_ORDER_CONTINUE_RECEIVING": "Vous continuerez à recevoir de nouvelles commandes",
     "RESTAURANT_ORDER_REFUSE_REASON_ORDER_STOP_RECEIVING": "Vous ne recevrez plus de nouvelles commandes",
     "RESTAURANT_ORDER_PRINT": "Imprimer",
+    "RESTAURANT_SEARCH_ORDERS": "Trouver commande...",
+    "RESTAURANT_SEARCH_ORDERS_INPUT_PLACEHOLDER": "Numéro de commande...",
     "RESTAURANT_PRODUCTS": "Produits",
     "RESTAURANT_CLOSE_ALERT_TITLE": "Fermer jusqu'à demain",
     "RESTAURANT_OPENING_HOURS": "Horaires d'ouverture",

src/navigation/index.js

@@ -70,6 +70,7 @@ import RestaurantOrderDelay from './restaurant/OrderDelay';
 import RestaurantOrderRefuse from './restaurant/OrderRefuse';
 import RestaurantPrinter from './restaurant/Printer';
 import RestaurantProducts from './restaurant/Products';
+import RestaurantSearch from './restaurant/Search';
 import RestaurantSettings from './restaurant/Settings';
 
 import Delivery from './delivery/Delivery';
@@ -84,6 +85,7 @@ export default {
   RestaurantOrderDelay,
   RestaurantOrderCancel,
   RestaurantDate,
+  RestaurantSearch,
   RestaurantSettings,
   RestaurantProducts,
   RestaurantOpeningHours,

src/navigation/navigators/RestaurantNavigator.js

@@ -97,5 +97,12 @@ export default () => (
         title: i18n.t('RESTAURANT_LOOPEAT_UPDATE_FORMATS'),
       }}
     />
+    <RootStack.Screen
+      name="RestaurantSearch"
+      component={screens.RestaurantSearch}
+      options={{
+        title: i18n.t('RESTAURANT_SEARCH_ORDERS'),
+      }}
+    />
   </RootStack.Navigator>
 );

src/navigation/restaurant/Dashboard.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Alert, NativeModules } from 'react-native';
-import { Center, VStack } from 'native-base';
+import { Center } from 'native-base';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
@@ -32,6 +32,7 @@ import {
 import PushNotification from '../../notifications';
 import OrdersToPrintQueue from './components/OrdersToPrintQueue';
 import { connect as connectCentrifugo } from '../../redux/middlewares/CentrifugoMiddleware/actions';
+import BasicSafeAreaView from '../../components/BasicSafeAreaView'
 
 const RNSound = NativeModules.RNSound;
 
@@ -160,7 +161,7 @@ export default function DashboardPage({ navigation, route }) {
   }
 
   return (
-    <VStack flex={1}>
+    <BasicSafeAreaView>
       {restaurant.state === 'rush' && (
         <DangerAlert
           text={t('RESTAURANT_ALERT_RUSH_MODE_ON')}
@@ -187,6 +188,6 @@ export default function DashboardPage({ navigation, route }) {
       <OrderList
         onItemClick={order => navigate('RestaurantOrder', { order })}
       />
-    </VStack>
+    </BasicSafeAreaView>
   );
 }

src/navigation/restaurant/OpeningHours.js

@@ -68,7 +68,7 @@ class OpeningHoursScreen extends Component {
   }
 
   renderSpecialOpeningHours() {
-    const { specialOpeningHoursSpecification, httpClient } = this.props;
+    const { specialOpeningHoursSpecification } = this.props;
 
     return (
       <Box>
@@ -81,9 +81,7 @@ class OpeningHoursScreen extends Component {
           keyExtractor={(item, index) => `sohs-${index}`}
           renderItem={({ item, index }) => (
             <Pressable
-              onPress={() =>
-                this.props.deleteOpeningHoursSpecification(httpClient, item)
-              }>
+              onPress={() => this.props.deleteOpeningHoursSpecification(item)}>
               <HStack p="3" justifyContent="space-between" alignItems="center">
                 <Text>
                   {this.props.t('RESTAURANT_OPENING_HOURS_VALID_FROM_THROUGH', {
@@ -129,10 +127,8 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    deleteOpeningHoursSpecification: (httpClient, openingHoursSpecification) =>
-      dispatch(
-        deleteOpeningHoursSpecification(httpClient, openingHoursSpecification),
-      ),
+    deleteOpeningHoursSpecification: openingHoursSpecification =>
+      dispatch(deleteOpeningHoursSpecification(openingHoursSpecification)),
   };
 }
 

src/navigation/restaurant/Order.js

@@ -18,10 +18,11 @@ import {
 import { isMultiVendor } from '../../utils/order';
 import {
   selectIsPrinterConnected,
-  selectPrinter,
   selectIsPrinting,
+  selectPrinter,
 } from '../../redux/Restaurant/selectors';
 import { DatadogLogger } from '../../Datadog';
+import BasicSafeAreaView from '../../components/BasicSafeAreaView'
 
 const OrderNotes = ({ order }) => {
   if (order.notes) {
@@ -49,7 +50,7 @@ class OrderScreen extends Component {
     const canEdit = !isMultiVendor(order);
 
     return (
-      <Box flex={1}>
+      <BasicSafeAreaView>
         <View style={{ flex: 1 }}>
           <OrderHeading
             order={order}
@@ -60,15 +61,14 @@ class OrderScreen extends Component {
               })
             }
             printOrder={() => {
-              const order = this.props.order;
               DatadogLogger.info('printing ticket', {
                 trigger: 'manual',
                 orderId: order.id,
-                restaurantId: order.restaurant.id
+                restaurantId: order.restaurant.id,
               });
               this.props.printOrder(order);
             }}
-            disablePrintButton={ this.props.isPrinting }
+            disablePrintButton={this.props.isPrinting}
           />
           <OrderNotes order={order} />
           <OrderItems order={order} />
@@ -117,7 +117,7 @@ class OrderScreen extends Component {
               onPressFulfill={() => this.fulfillOrder(order)}
             />
           )}
-      </Box>
+      </BasicSafeAreaView>
     );
   }
 }

src/navigation/restaurant/Search.js

@@ -0,0 +1,72 @@
+import React, { useMemo, useRef, useState } from 'react'
+import _ from 'lodash'
+import { FormControl, IconButton, Input } from 'native-base'
+import { FlatList } from 'react-native'
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
+import { useSelector } from 'react-redux'
+import { selectOrders } from '../../redux/Restaurant/selectors'
+import OrderListItem from './components/OrderListItem'
+import { useNavigation } from '@react-navigation/native'
+import { useTranslation } from 'react-i18next'
+import BasicSafeAreaView from '../../components/BasicSafeAreaView'
+
+export default function Search() {
+  const orders = useSelector(selectOrders)
+
+  const navigation = useNavigation()
+  const { t } = useTranslation()
+
+  const textInput = useRef(null)
+
+  const [ query, setQuery ] = useState(null)
+
+  const filteredOrders = useMemo(() => {
+    if (!query) {
+      return []
+    }
+
+    return orders.filter(order => {
+      return order.number.toLowerCase().includes(query.toLowerCase())
+    })
+  }, [ orders, query ])
+
+  return (
+    <BasicSafeAreaView>
+      <FormControl>
+        <Input
+          size="md"
+          m={ 4 }
+          p={ 2 }
+          ref={ textInput }
+          keyboardType="web-search"
+          blurOnSubmit={ true }
+          autoCorrect={ false }
+          InputRightElement={
+            <IconButton
+              _icon={ { as: FontAwesome5, name: 'times' } }
+              onPress={ () => {
+                setQuery(null)
+                textInput.current.clear()
+                textInput.current.blur()
+              } }
+            />
+          }
+          onChangeText={ _.debounce(setQuery, 350) }
+          placeholder={ t('RESTAURANT_SEARCH_ORDERS_INPUT_PLACEHOLDER') }
+        />
+      </FormControl>
+      <FlatList
+        data={ filteredOrders }
+        keyExtractor={ (item, index) => item['@id'] }
+        renderItem={ ({ item }) => (
+          <OrderListItem
+            order={ item }
+            onItemClick={ order =>
+              navigation.navigate('RestaurantOrder', { order })
+            }
+          />
+        ) }
+      />
+    </BasicSafeAreaView>
+  )
+}

src/navigation/restaurant/Settings.js

@@ -9,12 +9,13 @@ import {
 } from 'native-base';
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
-import { View } from 'react-native';
+import { Alert, View } from 'react-native';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { connect } from 'react-redux';
 
 import ItemSeparator from '../../components/ItemSeparator';
-import { changeStatus } from '../../redux/Restaurant/actions';
+import { changeStatus, closeRestaurant } from '../../redux/Restaurant/actions';
+import { selectSpecialOpeningHoursSpecificationForToday } from '../../redux/Restaurant/selectors';
 
 class SettingsScreen extends Component {
   constructor(props) {
@@ -62,6 +63,31 @@ class SettingsScreen extends Component {
         label: this.props.t('RESTAURANT_SETTINGS_MANAGE_PRODUCT_OPTIONS'),
         onPress: () => navigate('RestaurantProductOptions'),
       },
+      ...(!this.props.specialOpeningHoursSpecificationForToday
+        ? [
+            {
+              icon: 'power-off',
+              label: this.props.t('RESTAURANT_CLOSE_ALERT_TITLE'),
+              onPress: () => {
+                Alert.alert(
+                  this.props.t('RESTAURANT_CLOSE_ALERT_TITLE'),
+                  this.props.t('RESTAURANT_CLOSE_ALERT_MESSAGE'),
+                  [
+                    {
+                      text: this.props.t('RESTAURANT_CLOSE_ALERT_CONFIRM'),
+                      onPress: () =>
+                        this.props.closeRestaurant(this.props.restaurant),
+                    },
+                    {
+                      text: this.props.t('CANCEL'),
+                      style: 'cancel',
+                    },
+                  ],
+                );
+              },
+            },
+          ]
+        : []),
       {
         icon: 'calendar',
         label: this.props.t('RESTAURANT_SETTINGS_OPENING_HOURS'),
@@ -133,13 +159,16 @@ function mapStateToProps(state) {
     httpClient: state.app.httpClient,
     restaurant: state.restaurant.restaurant,
     restaurants: state.restaurant.myRestaurants,
+    specialOpeningHoursSpecificationForToday:
+      selectSpecialOpeningHoursSpecificationForToday(state),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     changeStatus: (restaurant, state) =>
       dispatch(changeStatus(restaurant, state)),
+    closeRestaurant: restaurant => dispatch(closeRestaurant(restaurant)),
   };
 }