ordering-ui-react-native 0.17.88 → 0.17.89-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/Otp/index.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, Alert } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
@@ -16,11 +16,13 @@ export const Otp = (props: otpParams) => {
         onSubmit,
         handleLoginOtp,
         setAlertState,
-        pinCount
+        pinCount,
+        formState
     } = props
 
     const theme = useTheme();
     const [, t] = useLanguage();
+    const [code, setCode] = useState('')
     const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
         600, willVerifyOtpState)
 
@@ -44,6 +46,30 @@ export const Otp = (props: otpParams) => {
         }
     }, [otpLeftTime])
 
+    useEffect(() => {
+        if (!formState?.loading && formState?.result?.error) {
+            Alert.alert(
+                t('ERROR', 'Error'),
+                typeof formState.result?.result === 'string'
+                  ? formState.result?.result
+                  : formState.result?.result[0],
+                [
+                    {
+                        text: t('ACCEPT', 'Accept'),
+                        onPress: () => {},
+                        style: 'cancel'
+                    },
+                ],
+                { cancelable: false }
+            )
+
+            if (code.length === (pinCount || 6)) {
+                setCode('')
+            }
+
+        }
+    }, [formState])
+
     const loginStyle = StyleSheet.create({
         underlineStyleBase: {
             width: 45,
@@ -72,6 +98,8 @@ export const Otp = (props: otpParams) => {
                     onCodeFilled={(code: string) => handleLoginOtp(code)}
                     selectionColor={theme.colors.primary}
                     editable
+                    code={code}
+                    onCodeChanged={(code: string) => setCode(code)}
                 />
                 <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
                     <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>

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 });
     }
   };
 
@@ -280,7 +280,6 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const handleLoginOtp = (code: string) => {
 		handleButtonLoginClick({ code })
-		setWillVerifyOtpState(false)
 	}
 
 	const closeAlert = () => {
@@ -329,27 +328,17 @@ const LoginFormUI = (props: LoginParams) => {
         showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
         return
       }
-      formState?.result?.result &&
-        showToast(
-          ToastType.Error,
-          loginTab === 'email' && typeof formState.result?.result === 'string'
-            ? getTraduction(formState.result?.result)
-            : loginTab === 'email' &&
-              typeof formState.result?.result !== 'string'
-              ? getTraduction(formState.result?.result[0])
-              : loginTab === 'cellphone' &&
-                typeof formState.result?.result === 'string'
-                ? getTraduction(formState.result?.result).replace(
-                  t('USER', 'user').toLowerCase(),
-                  t('PHONE_NUMER', 'Phone number'),
-                )
-                : getTraduction(formState.result?.result[0]).replace(
-                  t('USER', 'user').toLowerCase(),
-                  t('PHONE_NUMER', 'Phone number'),
-                ),
-        );
+      formState.result?.result && showToast(
+        ToastType.Error,
+        typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
+      )
       setSubmitted(false)
     }
+    if (!formState?.loading && !formState?.result?.error) {
+      setWillVerifyOtpState(false)
+    }
   }, [formState]);
 
   useEffect(() => {
@@ -487,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,
@@ -929,6 +920,7 @@ const LoginFormUI = (props: LoginParams) => {
 					handleLoginOtp={handleLoginOtp}
 					onSubmit={handleLogin}
 					setAlertState={setAlertState}
+          formState={formState}
 				/>
 			</OModal>
 			<Alert
@@ -951,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,
               }}