ordering-ui-react-native 0.18.2 → 0.18.3-release

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

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { RefreshControl, ScrollView, View } from 'react-native'
 import { OText } from '../shared'
-import { useLanguage, useSession } from 'ordering-components/native'
+import { useLanguage, useSession, useUtils } from 'ordering-components/native'
 import { DayContainer } from './styles'
 import { useTheme } from 'styled-components/native'
 export const DriverSchedule = (props: any) => {
@@ -9,7 +9,9 @@ export const DriverSchedule = (props: any) => {
     const [, t] = useLanguage()
     const theme = useTheme()
     const [, { refreshUserInfo }] = useSession()
+    const [{ parseDate }] = useUtils()
     const [refreshing] = useState(false);
+    const [driverSchedule, setDriverSchedule] = useState([]);
 
     const daysOfWeek = [
         t('SUNDAY_ABBREVIATION', 'Sun'),
@@ -21,11 +23,43 @@ export const DriverSchedule = (props: any) => {
         t('SATURDAY_ABBREVIATION', 'Sat')
     ]
 
+    const getNextDate = (day) => {
+        const now = new Date()
+        now.setDate(now.getDate() + (day + (7 - now.getDay())) % 7)
+        return now
+      }
+
     const scheduleFormatted = ({ hour, minute }: any) => {
         const checkTime = (val: number) => val < 10 ? `0${val}` : val
         return `${checkTime(hour)}:${checkTime(minute)}`
     }
 
+    useEffect(() => {
+        if (schedule) {
+            setDriverSchedule(schedule)
+        } else {
+            const _schedule: any = []
+            for (let i = 0; i < 7; i++) {
+                _schedule.push({
+                enabled: true,
+                lapses: [
+                  {
+                    open: {
+                      hour: 0,
+                      minute: 0
+                    },
+                    close: {
+                      hour: 23,
+                      minute: 59
+                    }
+                  }
+                ]
+              })
+            }
+            setDriverSchedule(_schedule)
+        }
+    }, [schedule])
+
     return (
         <ScrollView
             refreshControl={<RefreshControl
@@ -37,22 +71,25 @@ export const DriverSchedule = (props: any) => {
                 {t('SCHEDULE', 'Schedule')}
             </OText>
             <View style={{ padding: 30 }}>
-                {schedule.map((item: any, i: number) => (
+                {driverSchedule.map((item: any, i: number) => (
                     <DayContainer key={daysOfWeek[i]}>
-                        <OText style={{ width: '20%' }} size={22} weight={700}>{daysOfWeek[i]}</OText>
-                        <View style={{ width: '80%', alignItems: 'center' }}>
+                        <View style={{ flex: 1 }}>
+                            <OText size={22} weight={700}>{daysOfWeek[i]}</OText>
+                            <OText size={14}>{parseDate(getNextDate(i), { outputFormat: 'YYYY-MM-DD' })}</OText>
+                        </View>
+                        <View style={{ flex: 1 }}>
                             <>
                                 {item?.enabled ? (
-                                    <View>
+                                    <View style={{ width: '100%' }}>
                                         {item?.lapses.map((lapse: any, i: number) => (
                                             <View key={`${daysOfWeek[i]}_${i}`} style={{ marginTop: 3, marginBottom: 20, flexDirection: 'row', justifyContent: 'space-between' }}>
-                                                <OText size={18} style={{ width: '30%' }}>
+                                                <OText size={18} style={{ flex: 1 }}>
                                                     {scheduleFormatted(lapse.open)}
                                                 </OText>
                                                 <OText size={18} style={{ width: 15 }}>
                                                     -
                                                 </OText>
-                                                <OText size={18} style={{ width: '30%' }}>
+                                                <OText size={18} style={{ flex: 1, textAlign: 'right' }}>
                                                     {scheduleFormatted(lapse.close)}
                                                 </OText>
                                             </View>

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

@@ -25,6 +25,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
     secondButton,
     widthButton,
     isPadding,
+    isHideRejectButtons
   } = props;
 
   const theme = useTheme();
@@ -61,39 +62,41 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
           width: '100%',
           justifyContent: 'space-between',
         }}>
-        <Button
-          secondButton={secondButton}
-          style={[
-            {
-              borderWidth: colorTxt1 ? 1 : 0,
-              borderColor: colorTxt1 ? colorTxt1 : null,
-            },
-            secondButton
-              ? { backgroundColor: firstColorCustom || styles.primaryBtn }
-              : color
-              ? { backgroundColor: color }
-              : styles.primaryBtn,
-            ,
-            { width: widthButton },
-          ]}
-          onPress={firstButtonClick}
-          disabled={disabled}>
-          <OText color={theme.colors.white} size={16} mLeft={20}>
-            {btnLeftValueShow ? btnLeftValue : ''}
-          </OText>
+        {!isHideRejectButtons && (
+          <Button
+            secondButton={secondButton}
+            style={[
+              {
+                borderWidth: colorTxt1 ? 1 : 0,
+                borderColor: colorTxt1 ? colorTxt1 : null,
+              },
+              secondButton
+                ? { backgroundColor: firstColorCustom || styles.primaryBtn }
+                : color
+                ? { backgroundColor: color }
+                : styles.primaryBtn,
+              ,
+              { width: widthButton },
+            ]}
+            onPress={firstButtonClick}
+            disabled={disabled}>
+            <OText color={theme.colors.white} size={16} mLeft={20}>
+              {btnLeftValueShow ? btnLeftValue : ''}
+            </OText>
 
-          <OText
-            style={styles.btnTextStyle}
-            color={colorTxt1 ? colorTxt1 : theme.colors.white}
-            numberOfLines={2}
-            adjustsFontSizeToFit>
-            {btnText}
-          </OText>
+            <OText
+              style={styles.btnTextStyle}
+              color={colorTxt1 ? colorTxt1 : theme.colors.white}
+              numberOfLines={2}
+              adjustsFontSizeToFit>
+              {btnText}
+            </OText>
 
-          <OText color={theme.colors.white} size={16} mRight={20}>
-            {btnRightValueShow ? btnRightValue : ''}
-          </OText>
-        </Button>
+            <OText color={theme.colors.white} size={16} mRight={20}>
+              {btnRightValueShow ? btnRightValue : ''}
+            </OText>
+          </Button>
+        )}
 
         {secondButton && (
           <Button

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

@@ -80,9 +80,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
         ? {
-            latitude: driverLocation?.lat,
-            longitude: driverLocation?.lng,
-          }
+          latitude: driverLocation?.lat,
+          longitude: driverLocation?.lng,
+        }
         : { latitude: location.lat, longitude: location.lng };
     });
 
@@ -107,7 +107,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           }
           let data = null;
           const details = {
-            geometry: { location: { lat: pos.latitude, lng: pos.longitude } },
+            geometry: { location: { lat: pos?.latitude, lng: pos?.longitude } },
           };
           if (isSetInputs) {
             data = {
@@ -165,8 +165,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     const lat1 = pointA.lat;
     const lon1 = pointA.lng;
 
-    const lat2 = pointB.latitude;
-    const lon2 = pointB.longitude;
+    const lat2 = pointB?.latitude;
+    const lon2 = pointB?.longitude;
 
     const R = 6371e3;
     const φ1 = lat1 * (Math.PI / 180);
@@ -201,11 +201,11 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION_TO')
         ? [t(errKey, mapErrors[errKey])]
         : [
-            `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
-              'METTERS',
-              'meters',
-            )}`,
-          ],
+          `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
+            'METTERS',
+            'meters',
+          )}`,
+        ],
       key: errKey,
     });
   };
@@ -237,9 +237,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     MARKERS = locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
         ? {
-            latitude: driverLocation?.lat,
-            longitude: driverLocation?.lng,
-          }
+          latitude: driverLocation?.lat,
+          longitude: driverLocation?.lng,
+        }
         : { latitude: location.lat, longitude: location.lng };
     })
     fitAllMarkers();
@@ -284,7 +284,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           onRegionChangeComplete={
             !readOnly
               ? coordinates => handleChangeRegion(coordinates)
-              : () => {}
+              : () => { }
           }
           zoomTapEnabled
           zoomEnabled
@@ -302,12 +302,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                     i: number,
                   ) => (
                     <React.Fragment key={i}>
-                      <Marker 
-                        coordinate={location} 
-                        onPress={() => { 
+                      <Marker
+                        coordinate={location}
+                        onPress={() => {
                           mapRef.current?.animateCamera({
-                          center: { latitude: location.latitude, longitude:location.longitude },
-                        })}}
+                            center: { latitude: location?.latitude, longitude: location?.longitude },
+                          })
+                        }}
                       >
                         <Icon
                           name="map-marker"
@@ -328,46 +329,46 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                         <Callout
                           onPress={() => {
                             showLocation({
-                                      latitude: location.latitude,
-                                      longitude: location.longitude,
-                                      sourceLatitude: userLocation.latitude,
-                                      sourceLongitude: userLocation.longitude,
-                                      naverCallerName: 'com.businessapp',
-                                      dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
-                                      dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
-                                      cancelText: t('CANCEL', 'Cancel'),
+                              latitude: location?.latitude,
+                              longitude: location?.longitude,
+                              sourceLatitude: userLocation?.latitude,
+                              sourceLongitude: userLocation.longitude,
+                              naverCallerName: 'com.businessapp',
+                              dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
+                              dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+                              cancelText: t('CANCEL', 'Cancel'),
                             })
                           }}
                         >
-                          <View style={{flex: 1,width: 250, paddingRight: 10, paddingLeft: 10, justifyContent:'space-between' }}>
-                              <View style={{flex: 1, marginBottom: 20}}>
-                                <OText size={16} weight={'bold'} style={{paddingTop: 10, marginBottom: 10}}>{locations[i]?.title}</OText>
-                                { locations[i]?.address && (
-                                  <>
-                                    <OText size={16} >{locations[i]?.address.addressName}</OText>
-                                    <OText size={16} >{locations[i]?.address.zipcode}</OText>
-                                  </>
-                                )}
-                              </View>
-                              <OButton
-                                text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
-                                imgRightSrc={null}
-                                textStyle={{
-                                  color: theme.colors.white,
-                                  fontFamily: 'Poppins',
-                                  fontStyle: 'normal',
-                                  fontWeight: 'normal',
-                                  fontSize: 16
-                                }}
-                                style={{
-                                  alignContent:'center',
-                                  borderRadius: 10,
-                                  height: 35,
-                                  bottom:10
-                                }}
-                                bgColor={theme.colors.primary}
-                                borderColor={theme.colors.primary}
-                              />   
+                          <View style={{ flex: 1, width: 250, paddingRight: 10, paddingLeft: 10, justifyContent: 'space-between' }}>
+                            <View style={{ flex: 1, marginBottom: 20 }}>
+                              <OText size={16} weight={'bold'} style={{ paddingTop: 10, marginBottom: 10 }}>{locations[i]?.title}</OText>
+                              {locations[i]?.address && (
+                                <>
+                                  <OText size={16} >{locations[i]?.address.addressName}</OText>
+                                  <OText size={16} >{locations[i]?.address.zipcode}</OText>
+                                </>
+                              )}
+                            </View>
+                            <OButton
+                              text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
+                              imgRightSrc={null}
+                              textStyle={{
+                                color: theme.colors.white,
+                                fontFamily: 'Poppins',
+                                fontStyle: 'normal',
+                                fontWeight: 'normal',
+                                fontSize: 16
+                              }}
+                              style={{
+                                alignContent: 'center',
+                                borderRadius: 10,
+                                height: 35,
+                                bottom: 10
+                              }}
+                              bgColor={theme.colors.primary}
+                              borderColor={theme.colors.primary}
+                            />
                           </View>
                         </Callout>
                       </Marker>

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

@@ -209,11 +209,11 @@ const LoginFormUI = (props: LoginParams) => {
     props.handleChangeTab(val);
 
     if (loginTab === 'email') {
-      scrollRefTab.current?.scrollToEnd({ animated: true });
+      scrollRefTab?.current?.scrollToEnd && scrollRefTab.current?.scrollToEnd({ animated: true });
     }
 
     if (loginTab === 'cellphone') {
-      scrollRefTab.current?.scrollTo({ animated: true });
+      scrollRefTab?.current?.scrollTo && scrollRefTab.current?.scrollTo({ animated: true });
     }
   };
 
@@ -476,6 +476,8 @@ const LoginFormUI = (props: LoginParams) => {
       borderRadius: 7.6,
       borderColor: theme.colors.inputSignup,
       backgroundColor: theme.colors.transparent,
+      minHeight: 50,
+      maxHeight : 50
     },
     btn: {
       borderRadius: 7.6,
@@ -941,3 +943,4 @@ export const LoginForm = (props: any) => {
 
   return <LoginFormController {...loginProps} />;
 };
+

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

@@ -42,7 +42,7 @@ const MapViewComponent = (props: MapViewParams) => {
     followUserLocation
   } = useLocation();
 
-  const location = { lat: userLocation.latitude, lng: userLocation.longitude }
+  const location = { lat: userLocation?.latitude, lng: userLocation?.longitude }
   const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
   const closeAlert = () => {
     setAlertState({
@@ -57,8 +57,8 @@ const MapViewComponent = (props: MapViewParams) => {
         [
           { latitude: location.latitude, longitude: location.longitude },
           {
-            latitude: userLocation.latitude,
-            longitude: userLocation.longitude,
+            latitude: userLocation?.latitude,
+            longitude: userLocation?.longitude,
           },
         ],
         {
@@ -132,6 +132,10 @@ const MapViewComponent = (props: MapViewParams) => {
 
   const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
     const markerRef = useRef<any>()
+
+    let coordinateLat = (customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat) ?? initialPosition?.latitude
+    let coordinateLng = (customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng) ?? initialPosition?.longitude
+
     useEffect(() => {
       if (
         markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
@@ -145,8 +149,8 @@ const MapViewComponent = (props: MapViewParams) => {
       <Marker
         key={customer ? marker?.customer?.id : marker?.business?.id}
         coordinate={{
-          latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
-          longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+          latitude: coordinateLat,
+          longitude: coordinateLng
         }}
         onPress={() =>
           setLocationSelected({
@@ -213,10 +217,10 @@ const MapViewComponent = (props: MapViewParams) => {
   }
 
   useEffect(() => {
-    if (userLocation.latitude !== 0 && userLocation.longitude !== 0) {
+    if (userLocation?.latitude !== 0 && userLocation?.longitude !== 0) {
       const location = {
-        lat: userLocation.latitude,
-        lng: userLocation.longitude
+        lat: userLocation?.latitude,
+        lng: userLocation?.longitude
       }
       setDriverLocation({ location })
     }
@@ -231,8 +235,8 @@ const MapViewComponent = (props: MapViewParams) => {
               ref={mapRef}
               provider={PROVIDER_GOOGLE}
               initialRegion={{
-                latitude: initialPosition.latitude,
-                longitude: initialPosition.longitude,
+                latitude: initialPosition?.latitude,
+                longitude: initialPosition?.longitude,
                 latitudeDelta: haveOrders ? 0.01 : 0.1,
                 longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
               }}

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

@@ -2,20 +2,18 @@ import React, { useState, useEffect } from 'react';
 import {
   View,
   Pressable,
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-  RefreshControl,
+  StyleSheet
 } from 'react-native';
 import { Contacts, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { OText, OButton } from '../shared';
+import { OText } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { PreviousMessages } from '../PreviousMessages';
 import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
 import { MessagesOptionParams } from '../../types';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import { WebsocketStatus } from '../WebsocketStatus'
+
 const MessagesOptionUI = (props: MessagesOptionParams) => {
   const {
     orders,
@@ -65,12 +63,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     ),
   );
 
-  const [orientation, setOrientation] = useState(
-    Dimensions.get('window').width < Dimensions.get('window').height
-      ? 'Portrait'
-      : 'Landscape',
-  );
-
   const getTagFilter = (key: number) => {
     return tags.find(value => value.key === key)?.text;
   };
@@ -114,14 +106,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     );
   }, [orders]);
 
-  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
-    if (width < height) {
-      setOrientation('Portrait');
-    } else {
-      setOrientation('Landscape');
-    }
-  });
-
   const styles = StyleSheet.create({
     header: {
       marginBottom: 25,
@@ -180,7 +164,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
       <View style={styles.header}>
         <OText style={styles.title}>{t('MESSAGES', 'Messages')}</OText>
       </View>
-
+      <WebsocketStatus />
       <FiltersTab>
         <TabsContainer width={dimensions.width - 42}>
           {tabs.map((tab: any) => (
@@ -242,35 +226,28 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
             !error
               ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
               : error[0]?.message ||
-                error[0] ||
-                t('NETWORK_ERROR', 'Network Error')
+              error[0] ||
+              t('NETWORK_ERROR', 'Network Error')
           }
           image={theme.images.general.notFound}
           conditioned={false}
         />
       )}
-
-      <ScrollView 
-        showsVerticalScrollIndicator={false}
-        style={{ flex: 1 }}
-        refreshControl={<RefreshControl
-          refreshing={refreshing}
-          onRefresh={() => getOrders?.()}
-      />}
-      >
-        {!reload &&
-          !error &&
-          values.length > 0 &&
-          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
-            <PreviousMessages
-              orders={values}
-              setOrders={setOrders}
-              messages={messages}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          )}
-
-        {/* {!reload &&
+      <PreviousMessages
+        orders={values}
+        messages={messages}
+        onNavigationRedirect={onNavigationRedirect}
+        getOrders={getOrders}
+        pagination={pagination}
+        loading={loading}
+        reload={reload}
+        tabs={tabs}
+        tabsFilter={tabsFilter}
+        setOrders={setOrders}
+        loadMore={loadMore}
+        error={error}
+      />
+      {/* {!reload &&
         !error &&
         orders.length > 0 &&
         JSON.stringify(tabsFilter) === JSON.stringify(tabs[1].tags) && (
@@ -283,55 +260,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
             onNavigationRedirect={onNavigationRedirect}
           />
         )} */}
-
-        {(loading || reload) && (
-          <>
-            <View>
-              {[...Array(5)].map((item, i) => (
-                <Placeholder key={i} Animation={Fade}>
-                  <View
-                    style={{
-                      width: '100%',
-                      flexDirection: 'row',
-                      marginBottom: 10,
-                    }}>
-                    <PlaceholderLine
-                      width={orientation === 'Portrait' ? 22 : 11}
-                      height={74}
-                      style={{
-                        marginRight: 20,
-                        marginBottom: 20,
-                        borderRadius: 7.6,
-                      }}
-                    />
-                    <Placeholder>
-                      <PlaceholderLine width={30} style={{ marginTop: 5 }} />
-                      <PlaceholderLine width={50} />
-                      <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
-                </Placeholder>
-              ))}
-            </View>
-          </>
-        )}
-
-        {pagination?.totalPages &&
-          !loading &&
-          !reload &&
-          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
-          pagination?.currentPage < pagination?.totalPages && (
-            <OButton
-              onClick={() => loadMore && loadMore()}
-              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-              imgRightSrc={null}
-              textStyle={styles.loadButtonText}
-              style={styles.loadButton}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-            />
-          )}
-      </ScrollView>
     </>
   );
 };