ordering-ui-react-native 0.16.35 → 0.16.36-release

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>
+    </>
+  )
 }