ordering-ui-react-native 0.12.8 → 0.12.12

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Pressable, StyleSheet, View, Keyboard } from 'react-native';
+import { Pressable, StyleSheet, View, Keyboard, ScrollView } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
@@ -29,6 +29,7 @@ import {
 	OrSeparator,
 	LineSeparator,
 	SkeletonWrapper,
+  TabsContainer,
 } from './styles';
 
 import NavBar from '../NavBar';
@@ -76,6 +77,7 @@ const LoginFormUI = (props: LoginParams) => {
 	});
 
 	const theme = useTheme();
+  const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -95,6 +97,45 @@ const LoginFormUI = (props: LoginParams) => {
 			flexGrow: 1,
 			marginBottom: 7,
 		},
+    btnTab: {
+      flex: 1,
+      minWidth: 88,
+      alignItems: 'flex-start',
+      borderBottomWidth: 1,
+    },
+    btnTabText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontSize: 14,
+      marginBottom: 10,
+      paddingLeft: 8,
+      paddingRight: 8,
+    },
+    btn: {
+      borderRadius: 7.6,
+      height: 44,
+    },
+    btnText: {
+      color: theme.colors.inputTextColor,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+    btnFlag: {
+      width: 79,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      marginRight: 9,
+      borderColor: theme.colors.inputSignup,
+    },
+    textForgot: {
+      color: theme.colors.arrowColor,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 16,
+    },
 	});
 
 	const inputRef = useRef<any>({});
@@ -102,6 +143,14 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleChangeTab = (val: string) => {
 		props.handleChangeTab(val);
 		setPasswordSee(false);
+
+    if (loginTab === 'email') {
+      scrollRefTab.current?.scrollToEnd({ animated: true });
+    }
+
+    if (loginTab === 'cellphone') {
+      scrollRefTab.current?.scrollTo({ animated: true });
+    }
 	};
 
 	const onSubmit = (values: any) => {
@@ -222,56 +271,64 @@ const LoginFormUI = (props: LoginParams) => {
 				isVertical={true}
 			/>
 			<FormSide>
-				{useLoginByEmail && useLoginByCellphone && (
-					<LoginWith>
-						<OTabs>
-							{useLoginByEmail && (
-								<Pressable onPress={() => handleChangeTab('email')}>
-									<OTab
-										style={{
-											borderBottomColor:
-												loginTab === 'email'
-													? theme.colors.textNormal
-													: theme.colors.border,
-										}}>
-										<OText
-											size={14}
-											color={
-												loginTab === 'email'
-													? theme.colors.textNormal
-													: theme.colors.disabled
-											}
-											weight={loginTab === 'email' ? 'bold' : 'normal'}>
-											{t('BY_EMAIL', 'by Email')}
-										</OText>
-									</OTab>
-								</Pressable>
-							)}
-							{useLoginByCellphone && (
-								<Pressable onPress={() => handleChangeTab('cellphone')}>
-									<OTab
-										style={{
-											borderBottomColor:
-												loginTab === 'cellphone'
-													? theme.colors.textNormal
-													: theme.colors.border,
-										}}>
-										<OText
-											size={14}
-											color={
-												loginTab === 'cellphone'
-													? theme.colors.textNormal
-													: theme.colors.disabled
-											}
-											weight={loginTab === 'cellphone' ? 'bold' : 'normal'}>
-											{t('BY_PHONE', 'by Phone')}
-										</OText>
-									</OTab>
-								</Pressable>
-							)}
-						</OTabs>
-					</LoginWith>
-				)}
+        {(useLoginByEmail || useLoginByCellphone) && (
+          <LoginWith>
+            <ScrollView
+              ref={scrollRefTab}
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+              style={{
+                borderBottomColor: theme.colors.border,
+                borderBottomWidth: 2
+              }}
+            >
+              <TabsContainer>
+                {useLoginByEmail && (
+                  <Pressable
+                    style={{
+                      ...loginStyle.btnTab,
+                      borderBottomWidth: loginTab === 'email' ? 2 : 0,
+                      borderBottomColor: theme.colors.textNormal,
+                    }}
+                    onPress={() => handleChangeTab('email')}>
+                    <OText
+                      style={loginStyle.btnTabText}
+                      color={
+                        loginTab === 'email'
+                          ? theme.colors.textNormal
+                          : theme.colors.border
+                      }
+                      weight={loginTab === 'email' ? '600' : 'normal'}>
+                      {t('BY_EMAIL', 'by Email')}
+                    </OText>
+                  </Pressable>
+                )}
+
+                {useLoginByCellphone && (
+                  <Pressable
+                    style={{
+                      ...loginStyle.btnTab,
+                      borderBottomWidth: loginTab === 'cellphone' ? 2 : 0,
+                      borderBottomColor: theme.colors.textNormal
+                    }}
+                    onPress={() => handleChangeTab('cellphone')}>
+                    <OText
+                      style={loginStyle.btnTabText}
+                      color={
+                        loginTab === 'cellphone'
+                          ? theme.colors.textNormal
+                          : theme.colors.border
+                      }
+                      weight={loginTab === 'cellphone' ? '600' : 'normal'}>
+                      {t('BY_PHONE', 'by Phone')}
+                    </OText>
+                  </Pressable>
+                )}
+              </TabsContainer>
+            </ScrollView>
+          </LoginWith>
+        )}
 
 				{(useLoginByCellphone || useLoginByEmail) && (
 					<FormInput>
@@ -418,48 +475,49 @@ const LoginFormUI = (props: LoginParams) => {
 						</>
 					)}
 
-				<View
-					style={{
-						flexDirection: 'row',
-						width: '100%',
-						justifyContent: 'space-between',
-						alignItems: 'center',
-						marginVertical: 30
-					}}>
-					<View style={loginStyle.line} />
-					<OText
-						size={14}
-						mBottom={10}
-						style={{ paddingHorizontal: 19 }}
-						color={theme.colors.disabled}>
-						{t('OR', 'or')}
-					</OText>
-					<View style={loginStyle.line} />
-				</View>
-
 				{configs && Object.keys(configs).length > 0 ? (
 					(configs?.facebook_login?.value === 'true' ||
 						configs?.facebook_login?.value === '1') &&
 					configs?.facebook_id?.value && (
-						<ButtonsWrapper>
-							<SocialButtons>
-								<FacebookLogin
-									handleErrors={(err: any) => showToast(ToastType.Error, err)}
-									handleLoading={(val: boolean) => setIsFBLoading(val)}
-									handleSuccessFacebookLogin={handleSuccessFacebook}
-								/>
-								<GoogleLogin
-									handleErrors={(err: any) => showToast(ToastType.Error, err)}
-									handleLoading={(val: boolean) => setIsFBLoading(val)}
-									handleSuccessFacebookLogin={handleSuccessFacebook}
-								/>
-								<AppleLogin
-									handleErrors={(err: any) => showToast(ToastType.Error, err)}
-									handleLoading={(val: boolean) => setIsFBLoading(val)}
-									handleSuccessFacebookLogin={handleSuccessFacebook}
-								/>
-							</SocialButtons>
-						</ButtonsWrapper>
+            <>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginVertical: 30
+                }}>
+                <View style={loginStyle.line} />
+                <OText
+                  size={14}
+                  mBottom={10}
+                  style={{ paddingHorizontal: 19 }}
+                  color={theme.colors.disabled}>
+                  {t('OR', 'or')}
+                </OText>
+                <View style={loginStyle.line} />
+              </View>
+              <ButtonsWrapper>
+                <SocialButtons>
+                  <FacebookLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                  <GoogleLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                  <AppleLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                </SocialButtons>
+              </ButtonsWrapper>
+            </>
 					)
 				) : (
 					<SkeletonWrapper>

package/themes/single-business/src/components/LoginForm/styles.tsx

@@ -4,34 +4,17 @@ export const Container = styled.View`
   padding-bottom: 40px;
 `
 
-export const FormSide = styled.View`
+export const LoginWith = styled.View`
   display: flex;
   width: 100%;
-  flex-direction: column;
-  align-items: center;
-  margin: auto;
+  /* border-bottom-width: 2px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border}; */
 `;
 
-export const OTabs = styled.View`
+export const TabsContainer = styled.View`
+  width: auto;
+  display: flex;
   flex-direction: row;
-  width: 100%;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-bottom: -1px;
-`;
-
-export const OTab = styled.View`
-  padding-bottom: 10px;
-  border-bottom-width: 1px;
-  margin-end: 14px;
-`;
-
-export const LoginWith = styled.View`
-  font-size: 14px;
-  width: 100%;
-  align-items: flex-start;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.border}
 `;
 
 export const FormInput = styled.View`
@@ -52,11 +35,6 @@ export const ButtonsWrapper = styled.View`
   `}
 `
 
-export const SocialButtons = styled.View`
-  width: 100%;
-  margin: 0px auto 20px;
-`
-
 export const OrSeparator = styled.View`
   width: 90%;
   display: flex;
@@ -66,6 +44,33 @@ export const OrSeparator = styled.View`
   margin-bottom: 20px;
 `
 
+export const FormSide = styled.View`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+`;
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: -1px;
+`;
+
+export const OTab = styled.View`
+  padding-bottom: 5px;
+  border-bottom-width: 1px;
+  margin-end: 14px;
+`;
+
+export const SocialButtons = styled.View`
+  width: 100%;
+  margin: 0px auto 20px;
+`
+
 export const LineSeparator = styled.View`
   width: 40%;
   height: 1px;

package/themes/single-business/src/components/OrderDetails/index.tsx

@@ -53,6 +53,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 		messagesReadList,
 		isFromCheckout,
 		driverLocation,
+    onNavigationRedirect
 	} = props;
 
 	const theme = useTheme();
@@ -92,6 +93,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
 	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
 	const [openModalForDriver, setOpenModalForDriver] = useState(false);
+  const [isReviewed, setIsReviewed] = useState(false)
 	const [unreadAlert, setUnreadAlert] = useState({
 		business: false,
 		driver: false,
@@ -394,18 +396,36 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 										? parseDate(order?.delivery_datetime_utc)
 										: parseDate(order?.delivery_datetime, { utc: false })}
 								</OText>
-								<TouchableOpacity
-									activeOpacity={0.7}
-									style={{ marginTop: 6 }}
-									onPress={() => { }}>
-									<OText
-										size={10}
-										lineHeight={15}
-										color={theme.colors.textSecondary}
-										style={{ textDecorationLine: 'underline' }}>
-										{t('REVIEW_ORDER', 'Review order')}
-									</OText>
-								</TouchableOpacity>
+                {(
+                  parseInt(order?.status, 10) === 1 ||
+                  parseInt(order?.status, 10) === 11 ||
+                  parseInt(order?.status, 10) === 15
+                ) && !order.review && !isReviewed && (
+                  <TouchableOpacity
+                    activeOpacity={0.7}
+                    style={{ marginTop: 6 }}
+                    onPress={() => onNavigationRedirect('ReviewOrder', {
+                      order: {
+                        id: order?.id,
+                        business_id: order?.business_id,
+                        logo: order.business?.logo,
+                        driver: order?.driver,
+                        products: order?.products,
+                        review: order?.review,
+                        user_review: order?.user_review
+                      },
+                      setIsReviewed
+                    })}
+                  >
+                    <OText
+                      size={10}
+                      lineHeight={15}
+                      color={theme.colors.textSecondary}
+                      style={{ textDecorationLine: 'underline' }}>
+                      {t('REVIEW_ORDER', 'Review order')}
+                    </OText>
+                  </TouchableOpacity>
+                )}
 
 								<StaturBar>
 									<LinearGradient

package/themes/single-business/src/components/OrdersOption/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
-import { useFocusEffect } from '@react-navigation/native'
 import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
@@ -32,7 +31,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     ordersLength,
     setOrdersLength,
 		businessId,
-		preOrders
+		preOrders,
+    sortOrders
   } = props
 
   const theme = useTheme()
@@ -45,7 +45,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     ? theme.images.general.emptyActiveOrders
     : theme.images.general.emptyPastOrders
 
-  const orders = customArray || values || []
+  let [orders, setOrders] = useState(values)
 
   const [reorderLoading, setReorderLoading] = useState(false)
   const [isLoadingFirstRender, setIsLoadingFirstRender] = useState(false)
@@ -99,44 +99,44 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     return objectStatus && objectStatus
   }
 
-  useFocusEffect(
-    React.useCallback(() => {
-      loadOrders && loadOrders()
-      setIsLoadingFirstRender(false)
-      return () => {
-        setIsLoadingFirstRender(true)
-      }
-    }, [navigation])
-  )
-
   useEffect(() => {
     setOrdersLength && setOrdersLength({
       ...ordersLength,
-      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
+      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: values.length
     })
-  }, [orders.length])
+  }, [values.length])
 
+  useEffect(() => {
+    setOrders(
+      sortOrders(
+        values.filter((order: any) => orderStatus.includes(order.status))
+      )
+    )
+  }, [values])
 
   return (
     <>
       <OptionTitle>
-        {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
-          <OText size={16} color={theme.colors.textPrimary} mBottom={10} style={activeOrders ? { paddingHorizontal: 0 } : {}}>
+        {orders.length > 0 && !isLoadingFirstRender && (
+          <OText
+            size={16}
+            color={theme.colors.textPrimary}
+            mBottom={10}
+            style={activeOrders ? { paddingHorizontal: 0 } : {}}
+          >
             {titleContent || (
-							preOrders ? t('UPCOMING', 'UPCOMING') 
+							preOrders ? t('UPCOMING', 'Upcoming')
 							: activeOrders ? t('ACTIVE', 'Active')
               : t('PAST', 'Past'))}
           </OText>
         )}
       </OptionTitle>
-      {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={imageFails}
-          conditioned
-        />
-      )}
-      {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
+      {!loading &&
+        orders.length === 0 &&
+        !isLoadingFirstRender &&
+        ordersLength.previousOrdersLength === 0 &&
+        ordersLength.activeOrdersLength === 0 &&
+      (
         <NotFoundSource
           content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
           image={imageFails}
@@ -191,31 +191,31 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             setScreen={setScreen}
             screen={screen}
           />
-					) : (
+				) : (
 					<>
-					{preOrders ? 
-						<ActiveOrders
-							orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
-							pagination={pagination}
-							loadMoreOrders={loadMoreOrders}
-							reorderLoading={reorderLoading}
-							customArray={customArray}
-							getOrderStatus={getOrderStatus}
-							onNavigationRedirect={onNavigationRedirect}
-							setScreen={setScreen}
-							screen={screen}
-							isPreorders
-						/>
-					: <PreviousOrders
-							reorderLoading={reorderLoading}
-							orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
-							pagination={pagination}
-							loadMoreOrders={loadMoreOrders}
-							getOrderStatus={getOrderStatus}
-							onNavigationRedirect={onNavigationRedirect}
-							handleReorder={handleReorder}
-						/>
-					}
+            {preOrders ?
+              <ActiveOrders
+                orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
+                pagination={pagination}
+                loadMoreOrders={loadMoreOrders}
+                reorderLoading={reorderLoading}
+                customArray={customArray}
+                getOrderStatus={getOrderStatus}
+                onNavigationRedirect={onNavigationRedirect}
+                setScreen={setScreen}
+                screen={screen}
+                isPreorders
+              />
+            : <PreviousOrders
+                reorderLoading={reorderLoading}
+                orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
+                pagination={pagination}
+                loadMoreOrders={loadMoreOrders}
+                getOrderStatus={getOrderStatus}
+                onNavigationRedirect={onNavigationRedirect}
+                handleReorder={handleReorder}
+              />
+            }
 					</>
         )
       )}

package/themes/single-business/src/components/OrdersOption/styles.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components/native'
 
 export const OptionTitle = styled.View`
-	margin-top: 24px;
+	margin-top: 10px;
 `