ordering-ui-react-native 0.16.27 → 0.16.28-release

package/themes/original/src/components/GPSButton/index.tsx

@@ -1,17 +1,16 @@
 import React, { useEffect, useState } from 'react'
-import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
-import Geolocation from '@react-native-community/geolocation'
 import Geocoder from 'react-native-geocoding'
-import { GpsButtonStyle } from './styles'
-import { View } from 'react-native'
-import { OText } from '../shared'
 import { ActivityIndicator } from 'react-native-paper'
+import Geolocation from '@react-native-community/geolocation'
+import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
+
+import { OText } from '../shared'
+import { GpsButtonStyle } from './styles'
 
 export const GPSButton = (props: any) => {
   const {
     handleGPS,
 		apiKey,
-    googleReady,
     IconButton,
     IconLoadingButton
   } = props
@@ -56,25 +55,27 @@ export const GPSButton = (props: any) => {
     })
   }
 
-	const getCurrentPosition = async () => {
+  const getCurrentPosition = async () => {
     let trackingStatus = await getTrackingStatus()
-		if (trackingStatus === 'not-determined') {
-			trackingStatus = await requestTrackingPermission()
-		}
-		if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
-      setLoading(true);
+    if (trackingStatus === 'not-determined') {
+      trackingStatus = await requestTrackingPermission()
+    }
+    if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+      setLoading(true)
       Geolocation.getCurrentPosition((pos) => {
-        geoCodePosition(pos.coords);
+        geoCodePosition(pos.coords)
       }, (err) => {
         setLoading(false);
-        console.log(err);
-      });
+        console.log(`ERROR(${err.code}): ${err.message}`)
+      }, {
+        enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+      })
     }
-	}
+  }
 
-	useEffect(() => {
-		Geocoder.init(apiKey);
-	}, [])
+  useEffect(() => {
+    Geocoder.init(apiKey);
+  }, [])
 
   return (
     <GpsButtonStyle

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

@@ -32,6 +32,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     latitudeDelta: 0.0010,
     longitudeDelta: 0.0010 * ASPECT_RATIO
   })
+  const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
 
@@ -41,12 +42,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
-  const MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
-    return {
-      latitude: location.lat,
-      longitude: location.lng
-    }
-  })
+
   const geocodePosition = (pos: { latitude: number, longitude: number }) => {
     Geocoder.from({
       latitude: pos.latitude,
@@ -93,7 +89,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       return
     }
 
-    if (distance <= maxLimitLocation) {
+    const _maxLimitLocation = typeof maxLimitLocation === 'string' ? parseInt(maxLimitLocation, 10) : maxLimitLocation
+
+    if (distance <= _maxLimitLocation) {
       setMarkerPosition(curPos)
       setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
     } else {
@@ -147,7 +145,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   const fitAllMarkers = () => {
-    mapRef.current.fitToCoordinates(MARKERS, {
+    mapRef.current.fitToCoordinates(MARKERS?.map(location => ({ latitude: location.lat, longitude: location.lng })), {
       edgePadding: { top: 80, right: 80, bottom: 80, left: 80 },
       animated: true,
     });
@@ -157,6 +155,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     Geocoder.init(googleMapsApiKey)
   }, [])
 
+  useEffect(() => {
+    mapRef.current.animateToRegion({
+      ...region,
+      latitude: location?.lat,
+      longitude: location?.lng,
+    })
+  }, [location])
 
   useEffect(() => {
     if (saveLocation) {
@@ -170,6 +175,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         fitAllMarkers()
       }
     }, 1000)
+    if (locations) {
+      SETMARKERS(locations)
+    }
     return () => clearInterval(interval)
   }, [locations])
 
@@ -189,16 +197,16 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       >
         {locations ? (
           <>
-            {MARKERS && MARKERS.map((location: { latitude: number, longitude: number }, i: number) => (
+            {MARKERS && MARKERS.map((location: { lat: number, lng: number }, i: number) => (
               <React.Fragment key={i}>
                 {
                   <Marker
                     zIndex={i}
-                    coordinate={location}
-                    title={locations[i]?.title}
+                    coordinate={{ latitude: location.lat ?? 0, longitude: location.lng ?? 0 }}
+                    title={MARKERS[i]?.title}
                   >
                     <View>
-                      <OIcon url={locations[i].icon} width={50} height={50} />
+                      <OIcon url={MARKERS[i].icon} width={50} height={50} />
                     </View>
                   </Marker>
                 }

package/themes/original/src/components/HelpAccountAndPayment/index.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
+import { Platform } from 'react-native'
 import { useLanguage } from 'ordering-components/native'
 import { HelpAccountAndPaymentParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
-  Content
+  Content,
+  HeaderWrapper
 } from './styles'
 
 export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
@@ -37,13 +40,25 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
 
   return (
     <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-      />
-      <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
+      <HeaderWrapper>
+        <OButton
+          imgRightSrc={null}
+          style={styles.btnBackArrow}
+          onClick={() => goToBack()}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26
+          }}
+        />
+        <OText
+          size={24}
+          weight={Platform.OS === 'ios' ? '600' : 'bold'}
+          color={theme.colors.textNormal}
+        >
+          {t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
+        </OText>
+      </HeaderWrapper>
       <Content>
         <OText mBottom={20}>
           -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
@@ -65,4 +80,4 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
       </Content>
     </>
   )
-}
+}

package/themes/original/src/components/HelpAccountAndPayment/styles.tsx

@@ -4,3 +4,7 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
+export const HeaderWrapper = styled.View`
+  padding: 10px 20px 20px 0;
+  flex-direction: row;
+`

package/themes/original/src/components/HelpGuide/index.tsx

@@ -3,10 +3,12 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import NavBar from '../NavBar'
 import {
   Content
 } from './styles'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -36,13 +38,12 @@ export const HelpGuide = (props: HelpGuideParams) => {
 
   return (
     <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
+      <NavBar
+        title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
         <OText mBottom={15}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
@@ -64,4 +65,4 @@ export const HelpGuide = (props: HelpGuideParams) => {
       </Content>
     </>
   )
-}
+}

package/themes/original/src/components/HelpOrder/index.tsx

@@ -3,8 +3,10 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpOrderParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 import { WebView } from 'react-native-webview'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import NavBar from '../NavBar'
 
 import {
   Content
@@ -41,13 +43,12 @@ export const HelpOrder = (props: HelpOrderParams) => {
 
   return (
     <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
+      <NavBar
+        title={t('HELP_WITH_ORDER', 'Help with an order')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <Content>
         <OText mBottom={20}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque. Sed tempus et, cursus ultricies nisl nisl, in eros.
@@ -76,4 +77,4 @@ export const HelpOrder = (props: HelpOrderParams) => {
       </Content>
     </>
   )
-}
+}

package/themes/original/src/components/LanguageSelector/index.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
+import React, { useState } from 'react'
+import { LanguageSelector as LanguageSelectorController, useOrder, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
-import { Platform, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import RNPickerSelect from 'react-native-picker-select'
 import { Container, DummyContainer } from './styles'
@@ -9,9 +9,17 @@ import { LanguageSelectorParams } from '../../types'
 import { OIcon } from '../shared'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
+	const {
+		languagesState,
+		currentLanguage,
+		handleChangeLanguage,
+		iconColor,
+		pickerStyle
+	} = props
 
 	const [orderState] = useOrder()
-
+	const [state] = useLanguage()
+	const [languagePressed, setLanguagePressed] = useState(currentLanguage)
 	const theme = useTheme();
 
 	const _pickerStyle = StyleSheet.create({
@@ -41,14 +49,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 			color: theme.colors.secundaryContrast
 		}
 	})
-
-	const {
-		languagesState,
-		currentLanguage,
-		handleChangeLanguage,
-		iconColor,
-		pickerStyle
-	} = props
+	
+	const changeLanguage = (lang : string) => {
+		setLanguagePressed(lang)
+		handleChangeLanguage(lang)
+	}
 
 	const _languages = languagesState?.languages?.map((language: any) => {
 		return {
@@ -67,14 +72,14 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 				<>
 					{iconColor && <OIcon src={theme.images.general.language} color={iconColor} style={{ marginEnd: 14 }} width={16} />}
 					<RNPickerSelect
-						onValueChange={handleChangeLanguage}
+						onValueChange={changeLanguage}
 						items={_languages || []}
 						value={currentLanguage}
 						style={pickerStyle ? pickerStyle : _pickerStyle}
 						useNativeAndroidPickerStyle={false}
 						placeholder={{}}
 						Icon={() => <View style={pickerStyle ? pickerStyle.icon : _pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.white} style={{ width: '100%' }} /></View>}
-						disabled={orderState.loading}
+						disabled={orderState.loading || state.loading || state?.language?.code !== languagePressed}
 					/>
 				</>
 			) : <DummyContainer />}

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -1,90 +1,113 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { formatSeconds } from '../../../utils'
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
 import { OText, OButton } from '../../shared';
-import OTPInputView from '@twotalltotems/react-native-otp-input'
+import OtpInputs from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
 
 export const Otp = (props: otpParams) => {
-    const {
-        willVerifyOtpState,
-        setWillVerifyOtpState,
-        onSubmit,
-        handleLoginOtp,
-        setAlertState
-    } = props
+  const {
+    willVerifyOtpState,
+    setWillVerifyOtpState,
+    onSubmit,
+    handleLoginOtp,
+    setAlertState,
+    pinCount
+  } = props
 
-    const theme = useTheme();
-    const [, t] = useLanguage();
-    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
-        600, willVerifyOtpState)
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+    600, willVerifyOtpState)
 
+  const [code, setCode] = useState('')
 
-    const handleOnSubmit = () => {
-        setAlertState({
-            open: true,
-            title: t('CODE_SENT', 'The code has been sent'),
-        })
-        resetOtpLeftTime()
-        onSubmit()
+
+  const handleOnSubmit = () => {
+    setAlertState({
+      open: true,
+      title: t('CODE_SENT', 'The code has been sent'),
+    })
+    resetOtpLeftTime()
+    onSubmit()
+  }
+
+  useEffect(() => {
+    if (otpLeftTime === 0) {
+      setAlertState({
+        open: true,
+        title: t('TIME_IS_UP', 'Time is up'),
+        content: t('PLEASE_RESEND_CODE', 'Please resend code again')
+      })
     }
+  }, [otpLeftTime])
 
-    useEffect(() => {
-        if (otpLeftTime === 0) {
-            setAlertState({
-                open: true,
-                title: t('TIME_IS_UP', 'Time is up'),
-                content: t('PLEASE_RESEND_CODE', 'Please resend code again')
-            })
-        }
-    }, [otpLeftTime])
+  useEffect(() => {
+    if (code?.length === (pinCount || 6)) {
+      handleLoginOtp(code)
+    }
+  }, [code])
 
-    const loginStyle = StyleSheet.create({
-        underlineStyleBase: {
-            width: 45,
-            height: 60,
-            borderWidth: 1,
-            fontSize: 16
-        },
-        underlineStyleHighLighted: {
-            borderColor: theme.colors.primary,
-            color: theme.colors.primary,
-            fontSize: 16
-        },
-    });
+  const loginStyle = StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginVertical: 30
+    },
+    focusStyles: {
+      borderColor: theme.colors.primary,
+      borderWidth: 1,
+      borderRadius: 8
+    },
+    underlineStyleBase: {
+      width: 45,
+      height: 50,
+      borderWidth: 1,
+      fontSize: 16,
+      borderRadius: 8,
+      borderColor: theme.colors.lightGray,
+      textAlign: 'center'
+    },
+    underlineStyleHighLighted: {
+      borderColor: theme.colors.primary,
+      color: theme.colors.primary,
+      fontSize: 16
+    },
+  });
 
-    return (
-        <>
-            <OTPContainer>
-                <OText size={24}>
-                    {formatSeconds(otpLeftTime)}
-                </OText>
-                <OTPInputView
-                    style={{ width: '100%', height: 150 }}
-                    pinCount={6}
-                    codeInputFieldStyle={loginStyle.underlineStyleBase}
-                    codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
-                    onCodeFilled={(code: string) => handleLoginOtp(code)}
-                    selectionColor={theme.colors.primary}
-                />
-                <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
-                    <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
-                        {t('RESEND_CODE', 'Resend code')}
-                    </OText>
-                </TouchableOpacity>
-                <OButton
-                    onClick={() => setWillVerifyOtpState(false)}
-                    bgColor={theme.colors.white}
-                    borderColor={theme.colors.primary}
-                    textStyle={{ color: theme.colors.primary }}
-                    style={{ borderRadius: 8, width: '100%' }}
-                    text={t('CANCEL', 'Cancel')}
-                />
-            </OTPContainer>
-        </>
-    )
+  return (
+    <>
+      <OTPContainer>
+        <OText size={24}>
+          {formatSeconds(otpLeftTime)}
+        </OText>
+        <OtpInputs
+          autofillFromClipboard
+          numberOfInputs={pinCount || 6}
+          style={loginStyle.container}
+          inputStyles={loginStyle.underlineStyleBase}
+          focusStyles={loginStyle.focusStyles}
+          handleChange={setCode}
+        />
+        <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
+          <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
+            {t('RESEND_CODE', 'Resend code')}
+          </OText>
+        </TouchableOpacity>
+        <OButton
+          onClick={() => setWillVerifyOtpState(false)}
+          bgColor={theme.colors.white}
+          borderColor={theme.colors.primary}
+          textStyle={{ color: theme.colors.primary }}
+          style={{ borderRadius: 8, width: '100%' }}
+          text={t('CANCEL', 'Cancel')}
+        />
+      </OTPContainer>
+    </>
+  )
 }