ordering-ui-react-native 0.15.33 → 0.15.34-release

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

@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
 import { LastOrders } from '../LastOrders'
+import { Container } from '../../layouts/Container'
 
 import {
   HelpSubItem,
@@ -15,13 +17,28 @@ export const Help = (props: HelpParams) => {
     navigation
   } = props
   const [, t] = useLanguage()
+  const [refreshing] = useState(false);
+  const [refresh, setRefresh] = useState(false)
 
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
+
+  const handleOnRefresh = () => {
+    setRefresh(true)
+  }
+
   return (
-    <>
+    <Container
+      noPadding
+      refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+    >
       <NavBar
         title={t('HELP', 'Help')}
         titleAlign={'center'}
@@ -48,8 +65,8 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders {...props} onRedirect={onRedirect} />
+        <LastOrders {...props} onRedirect={onRedirect} refresh={refresh} setRefresh={setRefresh} />
       </LastOrdersContainer>
-    </>
+    </Container>
   )
 }

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

@@ -20,7 +20,10 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     onBusinessClick,
     navigation,
     isLoading,
-    getBusinesses
+    getBusinesses,
+    favoriteIds,
+    setFavoriteIds,
+    handleUpdateBusinessList
   } = props;
 
   const [, t] = useLanguage()
@@ -33,6 +36,17 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     getBusinesses(true)
   }, [isLoading])
 
+  useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...favoriteIds]
+    businessesList.businesses.forEach(business => {
+      if (business?.favorite) {
+        ids.push(business.id)
+      }
+    })
+    setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
   return (
     <>
 
@@ -123,6 +137,9 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
                           handleCustomClick={onBusinessClick}
                           orderType={orderState?.options?.type}
                           navigation={navigation}
+                          favoriteIds={favoriteIds}
+                          setFavoriteIds={setFavoriteIds}
+                          handleUpdateBusinessList={handleUpdateBusinessList}
                         />
                       </View>
                     )

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

@@ -36,7 +36,7 @@ export const Home = (props: any) => {
 					{t('WELCOME', 'Welcome!')}
 				</OText>
 				<OText color={theme.colors.white} size={14} style={{ marginBottom: 46 }}>
-					{t('LETS_START_ORDER', "Let's start to order now")}
+					{t('SUBTITLE_HOME', "Let's start to order now")}
 				</OText>
 				<OButton
 					text={t('LOGIN_NOW', 'Login now')}

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

@@ -18,11 +18,15 @@ import {
   OrderContainer,
   OrderInfo
 } from './styles'
+import { useEffect } from 'react'
 
 const LastOrdersUI = (props: LastOrdersParams) => {
   const {
     orderList,
-    onRedirect
+    onRedirect,
+    loadOrders,
+    refresh,
+    setRefresh
   } = props
   const { loading, error, orders } = orderList
 
@@ -46,6 +50,13 @@ const LastOrdersUI = (props: LastOrdersParams) => {
     onRedirect && onRedirect('OrderDetails', { orderId: uuid })
   }
 
+  useEffect(() => {
+		if(refresh){
+			loadOrders(false, false, false, true)
+			setRefresh && setRefresh(false)
+		}
+	}, [refresh])
+
   return (
     <>
       {loading ? (

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

@@ -0,0 +1,90 @@
+import React, { useEffect } 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 { useTheme } from 'styled-components/native';
+import { otpParams } from '../../../types'
+
+export const Otp = (props: otpParams) => {
+    const {
+        willVerifyOtpState,
+        setWillVerifyOtpState,
+        onSubmit,
+        handleLoginOtp,
+        setAlertState
+    } = props
+
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+        600, willVerifyOtpState)
+
+
+    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])
+
+    const loginStyle = StyleSheet.create({
+        underlineStyleBase: {
+            width: 45,
+            height: 60,
+            borderWidth: 1,
+            fontSize: 16
+        },
+        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>
+        </>
+    )
+}

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components/native';
+
+export const OTPContainer = styled.View`
+  padding: 20px;
+  align-items: center;
+  flex: 1 
+`