ordering-ui-react-native 0.12.12 → 0.12.16

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

@@ -230,139 +230,139 @@ export const ProductOptionsUI = (props: any) => {
 
   return (
     <>
-      <Animated.View style={[styles.header, { height: headerHeight }]}>
-        <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-          <NavBar
-            {...navBarProps}
-            titleColor={theme.colors.white}
-            {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
-            btnStyle={{
-              width: 55,
-              height: 55,
-              backgroundColor: 'black',
-              borderRadius: 100,
-              opacity: 0.8,
-              left: 20,
-            }}
-            imgLeftStyle={{ width: 27, height: 27 }}
-          />
-        </Animated.View>
-        <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
-          <NavBar
-            {...navBarProps}
-            {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
-            btnStyle={{
-              width: 55,
-              height: 55,
-              backgroundColor: 'transparent',
-              borderRadius: 100,
-              left: 20,
-            }}
-            imgLeftStyle={{ width: 27, height: 27 }}
-          />
-        </Animated.View>
-
-        <Animated.View style={{
-          backgroundColor: 'white',
-          width: orientationState?.dimensions?.width,
-          opacity: collapsedBarContainerOpacity,
-        }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              padding: 20,
-              paddingTop: 0,
-              paddingBottom: 10
-            }}
-          >
-            <OImage
-              source={{uri: product?.images}}
-              width={70}
-              height={70}
-              resizeMode="cover"
-              borderRadius={6}
+      <ScrollView
+        style={styles.mainContainer}
+        contentContainerStyle={styles.scrollContainer}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY }} }],
+          {useNativeDriver: false})
+        }
+        scrollEventThrottle={16}
+      >
+        <Animated.View style={[styles.header, { height: headerHeight }]}>
+          <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
+            <NavBar
+              {...navBarProps}
+              titleColor={theme.colors.white}
+              {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
+              btnStyle={{
+                width: 55,
+                height: 55,
+                backgroundColor: 'black',
+                borderRadius: 100,
+                opacity: 0.8,
+                left: 20,
+              }}
+              imgLeftStyle={{ width: 27, height: 27 }}
+            />
+          </Animated.View>
+          <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
+            <NavBar
+              {...navBarProps}
+              {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
+              btnStyle={{
+                width: 55,
+                height: 55,
+                backgroundColor: 'transparent',
+                borderRadius: 100,
+                left: 20,
+              }}
+              imgLeftStyle={{ width: 27, height: 27 }}
             />
-            <OText
-              size={orientationState?.dimensions?.width * 0.025}
-              weight="bold"
-              mLeft={20}
-              numberOfLines={2}
+          </Animated.View>
+
+          <Animated.View style={{
+            backgroundColor: 'white',
+            width: orientationState?.dimensions?.width,
+            opacity: collapsedBarContainerOpacity,
+          }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                padding: 20,
+                paddingTop: 0,
+                paddingBottom: 10
+              }}
             >
-              {product?.name}
-            </OText>
-          </View>
-          <View
-            style={{
-              position: 'absolute',
-              bottom: -2,
-              height: 1,
-              backgroundColor: 'white',
-              width: orientationState?.dimensions?.width,
-              ...styles.shadow,
-            }}
-          />
-        </Animated.View>
+              <OImage
+                source={{uri: product?.images}}
+                width={70}
+                height={70}
+                resizeMode="cover"
+                borderRadius={6}
+              />
+              <OText
+                size={orientationState?.dimensions?.width * 0.025}
+                weight="bold"
+                mLeft={20}
+                numberOfLines={2}
+              >
+                {product?.name}
+              </OText>
+            </View>
+            <View
+              style={{
+                position: 'absolute',
+                bottom: -2,
+                height: 1,
+                backgroundColor: 'white',
+                width: orientationState?.dimensions?.width,
+                ...styles.shadow,
+              }}
+            />
+          </Animated.View>
 
-        <Animated.View style={{
-          opacity: heroContainerOpacity,
-          position: 'absolute',
-          zIndex: -100,
-          transform: [{translateY: heroTranslateY }],
-        }}>
-          <View
-            style={{
-              width: orientationState?.dimensions?.width,
-              height: HEADER_EXPANDED_HEIGHT,
-              position: 'absolute',
-              zIndex: 1,
-              backgroundColor: 'rgba(24, 28, 50, 0.4)',
-            }}
-          >
-            <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
+          <Animated.View style={{
+            opacity: heroContainerOpacity,
+            position: 'absolute',
+            zIndex: -100,
+            transform: [{translateY: heroTranslateY }],
+          }}>
+            <View
+              style={{
+                width: orientationState?.dimensions?.width,
+                height: HEADER_EXPANDED_HEIGHT,
+                position: 'absolute',
+                zIndex: 1,
+                backgroundColor: 'rgba(24, 28, 50, 0.4)',
+              }}
+            >
+              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
 
-          </View>
+            </View>
 
-          <Animated.View
-            style={{
-              transform: [{translateY: heroTranslateY }],
-              width: orientationState?.dimensions?.width * 0.75,
-              height: HEADER_EXPANDED_HEIGHT / 2,
-              position: 'relative',
-              top: HEADER_EXPANDED_HEIGHT / 3,
-              zIndex: 100,
-              padding: 20,
-            }}
-          >
-            <OText
-              color={theme.colors.white}
-              size={orientationState?.dimensions?.width * 0.048}
-              weight="bold"
-              mBottom={10}
-              numberOfLines={2}
+            <Animated.View
+              style={{
+                transform: [{translateY: heroTranslateY }],
+                width: orientationState?.dimensions?.width * 0.75,
+                height: HEADER_EXPANDED_HEIGHT / 2,
+                position: 'relative',
+                top: HEADER_EXPANDED_HEIGHT / 3,
+                zIndex: 100,
+                padding: 20,
+              }}
             >
-              {product?.name || productCart?.name}
-            </OText>
+              <OText
+                color={theme.colors.white}
+                size={orientationState?.dimensions?.width * 0.048}
+                weight="bold"
+                mBottom={10}
+                numberOfLines={2}
+              >
+                {product?.name || productCart?.name}
+              </OText>
 
-            <OText
-              color={theme.colors.white}
-              numberOfLines={4}
-            >
-              {product?.description || productCart?.description}
-            </OText>
+              <OText
+                color={theme.colors.white}
+                numberOfLines={4}
+              >
+                {product?.description || productCart?.description}
+              </OText>
+            </Animated.View>
           </Animated.View>
         </Animated.View>
-      </Animated.View>
 
-      <ScrollView
-        style={styles.mainContainer}
-        contentContainerStyle={styles.scrollContainer}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY }} }],
-          {useNativeDriver: false})
-        }
-        scrollEventThrottle={16}
-      >
         {!isFromCheckout && (
           <Spinner visible={loading} />
         )}

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

@@ -40,6 +40,7 @@ import { BusinessFeaturedController } from '../BusinessFeaturedController';
 import { HighestRatedBusinesses } from '../HighestRatedBusinesses';
 import { getTypesText } from '../../utils';
 import { OrderProgress } from '../OrderProgress';
+import { useIsFocused } from '@react-navigation/native';
 
 const PIXELS_TO_SCROLL = 1000;
 
@@ -56,7 +57,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	} = props;
 
 	const theme = useTheme();
-
+	const isFocused = useIsFocused();
 
 	const styles = StyleSheet.create({
 		container: {
@@ -226,11 +227,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
-			<OrderProgressWrapper>
-				<OrderProgress
-					{...props}
-				/>
-			</OrderProgressWrapper>
+			{isFocused && (
+				<OrderProgressWrapper>
+					<OrderProgress
+						{...props}
+					/>
+				</OrderProgressWrapper>
+			)}
 			{featuredBusiness && featuredBusiness.length > 0 && (
 				<FeaturedWrapper>
 					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   OrderList,
   useLanguage,
@@ -10,7 +10,7 @@ import moment from 'moment';
 import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { View, StyleSheet, TouchableOpacity } from 'react-native'
-import { Placeholder, Fade } from "rn-placeholder";
+import { Placeholder, Fade, PlaceholderLine } from "rn-placeholder";
 import FastImage from 'react-native-fast-image'
 import {
   ProgressContentWrapper,
@@ -29,8 +29,8 @@ const OrderProgressUI = (props: any) => {
 	const theme = useTheme();
 
 	const [, t] = useLanguage()
-	const { loading, error, orders: values } = orderList
   const [{ optimizeImage, parseDate, parseTime }] = useUtils()
+  const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
 
   const styles = StyleSheet.create({
@@ -103,13 +103,14 @@ const OrderProgressUI = (props: any) => {
 		return objectStatus && objectStatus
 	}
 
-  const convertDiffToHours = (time: any, order: any) => {
+  const convertDiffToHours = (order: any) => {
+    const time = order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_time
     const deliveryTime = order?.delivery_datetime_utc
-      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
-      : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD hh:mm A' })
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm' })
+      : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD HH:mm' })
     const [hour, minute] = time.split(':')
     const result = time ? (parseInt(hour, 10) * 60) + parseInt(minute, 10) : 0
-    const returnedDate = moment(new Date(deliveryTime)).add(result, 'minutes').format('hh:mm A')
+    const returnedDate = moment(deliveryTime).add(result, 'minutes').format('hh:mm A')
     return returnedDate
   }
 
@@ -117,17 +118,30 @@ const OrderProgressUI = (props: any) => {
     navigation && navigation.navigate(index)
   }
 
+  useEffect(() => {
+    if (orderList?.orders.length > 0) {
+      const sortedOrders = orderList.orders.sort((a: any, b:any) => a.id > b.id ? -1 : 1)
+      setLastOrder(sortedOrders[0])
+    }
+  }, [orderList?.orders])
+
 	return (
 		<>
-      {orderList?.loading && <Placeholder height={150} Animation={Fade} />}
-      {!orderList?.loading && orderList?.orders?.length > 0 && orderList?.orders.map((order: any) => (
-        <View style={styles.main} key={order.id}>
+      {orderList?.loading && (
+        <Placeholder Animation={Fade} height={130}>
+          <PlaceholderLine height={50} style={{ borderRadius: 8, marginBottom: 10 }} />
+          <PlaceholderLine height={15} style={{ marginBottom: 10 }} />
+          <PlaceholderLine height={30} style={{ borderRadius: 8, marginBottom: 10 }} />
+        </Placeholder>
+      )}
+      {!orderList?.loading && orderList?.orders?.length > 0 && lastOrder && (
+        <View style={styles.main}>
           <OrderInfoWrapper style={{ flex: 1 }}>
             <View style={styles.logoWrapper}>
               <FastImage
                 style={{ width: 50, height: 50 }}
                 source={{
-                    uri: optimizeImage(order?.business?.logo, 'h_50,c_limit'),
+                    uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
                     priority: FastImage.priority.normal,
                 }}
                 resizeMode={FastImage.resizeMode.cover}
@@ -161,24 +175,24 @@ const OrderProgressUI = (props: any) => {
           </OrderInfoWrapper>
           <View style={{ flex: 1 }}>
             <ProgressContentWrapper>
-              <ProgressBar style={{ width: getOrderStatus(order.status)?.percentage ? `${getOrderStatus(order.status)?.percentage}%` : '0%' }} />
+              <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
             </ProgressContentWrapper>
             <ProgressTextWrapper>
-              <OText size={12}>{getOrderStatus(order.status)?.value}</OText>
+              <OText size={12}>{getOrderStatus(lastOrder.status)?.value}</OText>
               <TimeWrapper>
                 <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
                 <OText size={11}>
-                  {order?.delivery_datetime_utc
-                    ? parseTime(order?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
-                    : parseTime(order?.delivery_datetime, { utc: false })}
+                  {lastOrder?.delivery_datetime_utc
+                    ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                    : parseTime(lastOrder?.delivery_datetime, { utc: false })}
                     &nbsp;-&nbsp;
-                  {convertDiffToHours(order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_time, order)}
+                  {convertDiffToHours(lastOrder)}
                 </OText>
               </TimeWrapper>
             </ProgressTextWrapper>
           </View>
         </View>
-      ))}
+      )}
       {!orderList?.loading && orderList?.orders?.length === 0 && (
         <NotFoundSource
           image={imageFails}