ordering-ui-react-native 0.14.58 → 0.14.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.58",
+  "version": "0.14.61",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/PreviousOrders/index.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
+import moment from 'moment'
 import { useLanguage, useUtils } from 'ordering-components/native';
 import { OButton, OIcon, OText } from '../shared';
-import { Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder } from './styles';
+import {
+  Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder, Timestatus
+} from './styles';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
 
 export const PreviousOrders = (props: any) => {
@@ -18,6 +21,7 @@ export const PreviousOrders = (props: any) => {
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
+  const [currentTime, setCurrentTime] = useState()
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -39,17 +43,15 @@ export const PreviousOrders = (props: any) => {
       height: 75,
     },
     logo: {
-      width: 78,
-      height: 78,
-      borderRadius: 25,
-      shadowColor: 'rgba(0.0, 0.0, 0.0, 0.5)',
+      borderRadius: 10,
+      shadowColor: "#000",
       shadowOffset: {
         width: 0,
-        height: 1.5,
+        height: 1,
       },
-      shadowOpacity: 0.21,
-      shadowRadius: 5,
-      elevation: 7,
+      shadowOpacity: 0.20,
+      shadowRadius: 1.41,
+      elevation: 2,
       justifyContent: 'center',
       alignItems: 'center',
       marginLeft: 3,
@@ -67,11 +69,10 @@ export const PreviousOrders = (props: any) => {
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
-      fontSize: 15,
-      color: theme.colors.unselectText,
+      fontSize: 12,
     },
     orderType: {
-      fontSize: 15,
+      fontSize: 12,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -79,6 +80,32 @@ export const PreviousOrders = (props: any) => {
     },
   });
 
+  const getDelayTime = (order: any) => {
+    // targetMin = delivery_datetime  + eta_time - now()
+    const _delivery = order?.delivery_datetime_utc
+    const _eta = order?.eta_time
+    const tagetedMin = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'minutes')
+    let day = Math.floor(tagetedMin / 1440)
+    const restMinOfTargetedMin = tagetedMin - 1440 * day
+    let restHours: any = Math.floor(restMinOfTargetedMin / 60)
+    let restMins: any = restMinOfTargetedMin - 60 * restHours
+
+    if (order?.time_status === 'in_time' || order?.time_status === 'at_risk') day = Math.abs(day)
+    if (restHours < 10) restHours = ('0' + restHours)
+    if (restMins < 10) restMins = ('0' + restMins)
+    const finalTaget = day + 'day  ' + restHours + ':' + restMins
+    return finalTaget
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const date:any = Date.now()
+      setCurrentTime(date)
+    }, 60000)
+
+    return () => clearInterval(interval)
+  }, [])
+
   let hash: any = {};
 
   return (
@@ -103,6 +130,7 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
+                    <Timestatus style={{backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }}/>
                     {
                       order.business?.logo && (
                         <Logo style={styles.logo}>
@@ -135,16 +163,20 @@ export const PreviousOrders = (props: any) => {
                           />
                         </NotificationIcon>
                       )}
-                      <OText
-                        style={styles.date}
-                        numberOfLines={1}
-                        adjustsFontSizeToFit
-                        size={20}>
-                        {(order?.order_group_id && order?.order_group && isLogisticOrder ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}` : (t('INVOICE_ORDER_NO', 'Order No.') + order.id)) + ' · '}
-                        {order?.delivery_datetime_utc
-                          ? parseDate(order?.delivery_datetime_utc)
-                          : parseDate(order?.delivery_datetime, { utc: false })}
-                      </OText>
+                      <View style={{flexDirection: 'row'}}>
+                        <OText
+                          style={styles.date}
+                          color={theme.colors.unselectText}
+                          numberOfLines={1}
+                          adjustsFontSizeToFit
+                        >
+                          {(order?.order_group_id && order?.order_group && isLogisticOrder ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}` : (t('NO', 'Order No.') + order.id)) + ' · '}
+                          {order?.delivery_datetime_utc
+                            ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
+                            : parseDate(order?.delivery_datetime, { utc: false })}{' · '}
+                        </OText>
+                        <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' } >{getDelayTime(order)}</OText>
+                      </View>
                       {!isLogisticOrder && (
                         <MyOrderOptions>
                           <OText

package/themes/business/src/components/PreviousOrders/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const Card = styled.View`
   flex: 1;
@@ -35,4 +35,16 @@ export const AcceptOrRejectOrder = styled.View`
   justify-content: space-between;
   flex: 1;
   margin: 10px;
+`
+export const Timestatus = styled.View`
+  position: relative;;
+  width: 4px;
+  height: 65px;
+  border-radius: 20px;
+  top: 5px;
+  margin-right: 5px; 
+  ${(props: any) => props.theme?.rtl && css`
+    left: unset;
+    right: -5px;
+ `}
 `

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon: ImageSourcePropType;
+  icon?: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx

@@ -15,6 +15,8 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -27,7 +29,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -45,7 +47,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if(isCardCliked){
+    if (isCardCliked) {
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -57,8 +59,8 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
       <Container>
         <NavBar
           title={t('ORDER_TYPE_X_ID', 'Order type')}
-          {...(goBack && { onActionLeft: goBack } )}
-          btnStyle={{paddingLeft: 0}}
+          {...(goBack && { onActionLeft: goBack })}
+          btnStyle={{ paddingLeft: 0 }}
         />
 
         <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
@@ -83,13 +85,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN','Eat In')}
+            title={t('EAT_IN', 'Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            icon={theme.images.general.pushPin}
+            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if(_eatIn?.value !== orderState?.options?.type){
+              if (_eatIn?.value !== orderState?.options?.type) {
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -106,15 +108,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT','Take out')}
+            title={t('TAKE_OUT', 'Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            icon={theme.images.general.shoppingCart}
+            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if(_takeOut?.value !== orderState?.options?.type){
+              if (_takeOut?.value !== orderState?.options?.type) {
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

package/themes/kiosk/src/components/ProductForm/index.tsx

@@ -246,8 +246,9 @@ export const ProductOptionsUI = (props: any) => {
               {...navBarProps}
               titleColor={theme.colors.white}
               btnStyle={{
-                width: 66,
-                height: 66,
+                width: 55,
+                height: 55,
+                overflow: 'scroll',
                 backgroundColor: 'black',
                 borderRadius: 100,
                 color: 'white',

package/themes/kiosk/src/components/UpsellingProducts/index.tsx

@@ -125,7 +125,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                           {product.name}
                         </OText>
 
-                        {product?.price && (
+                        {!!product?.price && (
                           <OText>
                             <OText
                               color={theme.colors.primary}
@@ -200,7 +200,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                                   {product.name}
                                 </OText>
 
-                                {product?.price && (
+                                {!!product?.price && (
                                   <OText>
                                     <OText
                                       color={theme.colors.primary}

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

@@ -127,7 +127,7 @@ const CheckoutUI = (props: any) => {
 	const [openChangeStore, setOpenChangeStore] = useState(false)
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 
-  const isWalletEnabled = configs?.wallet_enabled?.value === '1'
+  const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -569,7 +569,7 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 
-								{!paymethodSelected && cart?.status !== 2 && cart?.valid && (
+								{(!paymethodSelected && cart?.balance > 0) && cart?.status !== 2 && cart?.valid && (
 									<OText
 										color={theme.colors.error}
 										size={12}
@@ -605,8 +605,8 @@ const CheckoutUI = (props: any) => {
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
 					handleClick={() => handlePlaceOrder()}
-					isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal < cart?.minimum}
-					disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal < cart?.minimum}
+					isSecondaryBtn={loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum}
+					disabled={loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum}
 					btnText={cart?.subtotal >= cart?.minimum
 						? (
 							placing

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

@@ -350,7 +350,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 						</OrderTimeWrapper>
 					)}
 				</View>
+				<Spinner visible={momentState.isLoading === 1} />
 			</Container>
+			<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, backgroundColor: 'white', width: '100%' }}>
+				<OButton onClick={handleChangeMoment} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }} textStyle={{ color: 'white', fontSize: 14 }} showNextIcon />
+			</View>
 		</>
 	);
 };

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

@@ -7,7 +7,8 @@ import {
   PaymentOptionWallet as PaymentOptionWalletController,
   useLanguage,
   useUtils,
-  useOrder
+  useOrder,
+  useConfig
 } from 'ordering-components/native'
 
 import {
@@ -27,11 +28,15 @@ const PaymentOptionWalletUI = (props: any) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
   const [{ carts }] = useOrder()
   const [{ parsePrice }] = useUtils()
 
   const cart = carts?.[`businessId:${businessId}`] ?? {}
 
+  const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
+  const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
+
   const styles = StyleSheet.create({
     checkBoxStyle: {
       width: 25,
@@ -48,9 +53,11 @@ const PaymentOptionWalletUI = (props: any) => {
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+      isActive: isWalletCashEnabled
     },
     credit_point: {
       name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+      isActive: isWalletPointsEnabled
     }
   }
 
@@ -85,7 +92,7 @@ const PaymentOptionWalletUI = (props: any) => {
         walletsState.result?.length > 0 &&
       (
         <>
-          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && (
+          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
             <Container
               key={wallet.id}
               isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}

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

@@ -159,12 +159,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
           </TopActions>
         </TopBar>
         <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
-          {productsList.length > 0 &&
-            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-              <UpsellingLayout />
-            </View>
-          }
           <View style={{ paddingHorizontal: 40 }}>
             <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
             <OrderSummary
@@ -173,6 +167,12 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
               onNavigationRedirect={onNavigationRedirect}
             />
           </View>
+		  {productsList.length > 0 &&
+            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+              <UpsellingLayout />
+            </View>
+          }
         </ScrollView>
         <View
           style={{

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

@@ -99,7 +99,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
-  const isWalletEnabled = configs?.wallet_enabled?.value === '1'
+  const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)

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

@@ -35,19 +35,25 @@ const WalletsUI = (props: any) => {
   const theme = useTheme()
   const [{ parsePrice, parseDate }] = useUtils()
   const [{ configs }] = useConfig()
+  const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
+  const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
 
-  const [tabSelected, setTabSelected] = useState('cash')
+  const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
+
+  const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
   const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
 
   const walletName: any = {
     cash: {
       name: t('CASH_WALLET', 'Cash Wallet'),
-      value: 0
+      value: 0,
+      isActive: isWalletCashEnabled
     },
     credit_point: {
       name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
-      value: 1
+      value: 1,
+      isActive: isWalletPointsEnabled
     }
   }
 
@@ -61,7 +67,7 @@ const WalletsUI = (props: any) => {
   }
 
   useEffect(() => {
-    if (configs?.wallet_enabled?.value === '0') {
+    if (!isWalletEnabled) {
       navigation.navigate('BottomTab', {
         screen: 'Profile'
       })
@@ -85,7 +91,7 @@ const WalletsUI = (props: any) => {
       (
         <>
           <OTabs>
-            {walletList.wallets?.map((wallet: any) =>(
+            {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
               <Pressable
                 key={wallet.id}
                 onPress={() => handleChangeTab(wallet)}