ordering-ui-react-native 0.12.14 → 0.12.18

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { TouchableOpacity, View, StyleSheet } from 'react-native'
 import { LanguageSelector as LanguageSelectorController, useLanguage } from 'ordering-components/native'
 import CountryPicker, { Flag } from 'react-native-country-picker-modal'
@@ -9,6 +9,7 @@ import { LanguageSelectorParams } from '../../types'
 import { OText } from '../shared'
 import MatarialIcon from "react-native-vector-icons/MaterialIcons"
 import { useTheme } from 'styled-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
   const {
     languagesState,
@@ -18,7 +19,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
 	const theme = useTheme()
   const [{loading}] = useLanguage()
-
+  const [isLoading, setIsLoading] = useState(true)
   const styles = StyleSheet.create({
     closeIcon: {
       width: 48, marginLeft: 32
@@ -27,6 +28,15 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
       marginLeft: 40
     }
   })
+  useEffect(() => {
+    if (!isLoading) return
+    const loadingLanguage = setTimeout(() =>{
+      setIsLoading(false)
+    }, 1000);
+    return () => {
+      clearTimeout(loadingLanguage);
+    }
+  }, [])
 
   const _languages = languagesState?.languages?.map((language: any) => {
     return {
@@ -48,63 +58,73 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 	const currentLanguageData = _languages?.find((item:any) => item.value == currentLanguage);
 
 	return (
-    <Container>
-      {languagesState?.languages && (
-				<CountryPicker
-					countryCode={currentLanguageData?.countryCode}
-					visible={isCountryModalVisible}
-					onClose={() => setCountryModalVisible(false)}
-					withCountryNameButton
-					countryCodes={countryCodes}
-					closeButtonStyle={styles.closeIcon}
-					renderFlagButton={() => (
-						<TouchableOpacity
-							onPress={() => setCountryModalVisible(true)}
-							disabled={loading}
-						>
-							<LanguageItem>
-									<Flag
-										withEmoji
-										flagSize={24}
-										countryCode={currentLanguageData?.countryCode}
-									/>
-								<OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
-								<MatarialIcon name='keyboard-arrow-down' size={24}/>
-							</LanguageItem>
-						</TouchableOpacity>
+		<>
+		{ isLoading ? 
+		(<Container>
+			<Placeholder  style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
+				<PlaceholderLine height={15}/>
+			</Placeholder>
+		</Container>
+		):(
+			<Container>
+			{languagesState?.languages && (
+						<CountryPicker
+							countryCode={currentLanguageData?.countryCode}
+							visible={isCountryModalVisible}
+							onClose={() => setCountryModalVisible(false)}
+							withCountryNameButton
+							countryCodes={countryCodes}
+							closeButtonStyle={styles.closeIcon}
+							renderFlagButton={() => (
+								<TouchableOpacity
+									onPress={() => setCountryModalVisible(true)}
+									disabled={loading}
+								>
+									<LanguageItem>
+											<Flag
+												withEmoji
+												flagSize={24}
+												countryCode={currentLanguageData?.countryCode}
+											/>
+										<OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
+										<MatarialIcon name='keyboard-arrow-down' size={24}/>
+									</LanguageItem>
+								</TouchableOpacity>
+							)}
+							flatListProps={{
+								/* @ts-ignore */
+								keyExtractor: (item) => item.value,
+								data: _languages || [],
+								renderItem: ({item} : any) => (
+									<TouchableOpacity
+										onPress={() => {
+											/* @ts-ignore */
+											handleChangeLanguage(item.value);
+											setCountryModalVisible(false);
+										}}
+										disabled={loading}
+									>
+										<LanguageItem>
+											<View style={styles.flagsContainer} />
+											<Flag
+												withEmoji
+												flagSize={24}
+												/* @ts-ignore */
+												countryCode={item.countryCode}
+											/>
+											<OText>{
+												/* @ts-ignore */
+												item.label
+											}</OText>
+										</LanguageItem>
+									</TouchableOpacity>
+								)
+							}}
+						/>
 					)}
-					flatListProps={{
-						/* @ts-ignore */
-						keyExtractor: (item) => item.value,
-						data: _languages || [],
-						renderItem: ({item} : any) => (
-							<TouchableOpacity
-								onPress={() => {
-									/* @ts-ignore */
-									handleChangeLanguage(item.value);
-									setCountryModalVisible(false);
-								}}
-								disabled={loading}
-							>
-								<LanguageItem>
-									<View style={styles.flagsContainer} />
-									<Flag
-										withEmoji
-										flagSize={24}
-										/* @ts-ignore */
-										countryCode={item.countryCode}
-									/>
-									<OText>{
-										/* @ts-ignore */
-										item.label
-									}</OText>
-								</LanguageItem>
-							</TouchableOpacity>
-						)
-					}}
-				/>
-			)}
-    </Container>
+			</Container>
+		)}
+	</>
   )
 }
 

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

@@ -33,7 +33,7 @@ import OptionSwitch, { Opt } from '../../components/shared/OOptionToggle';
 import { verifyDecimals } from '../../../../../src/utils'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import { useTheme } from 'styled-components/native'
-import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
+import { _retrieveStoreData, _setStoreData } from '../../../../../src/providers/StoreUtil';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import EvilIcons from 'react-native-vector-icons/EvilIcons'
 const _EMAIL = 'email';
@@ -218,6 +218,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
     getCustomerName()
     const redirectHome = setTimeout(() =>{
+      _setStoreData('customer_name', {customerName: ''});
       navigation.reset({
         routes: [{ name: 'Intro' }],
       });
@@ -344,6 +345,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       <OButton
         text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
         onClick={() => {
+          _setStoreData('customer_name', {customerName: ''});
           navigation.reset({
             routes: [{ name: 'Intro' }],
           });

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

@@ -55,7 +55,8 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeCommentState,
     productObject,
     onClose,
-    isFromCheckout
+    isFromCheckout,
+    isDrawer
   } = props;
 
   const theme = useTheme();
@@ -230,145 +231,146 @@ 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 }]}>
+          {!isDrawer && (<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} />
         )}
         {!loading && !error && product && (
-          <View style={{ paddingTop: 20, paddingBottom: 80 }}> 
-            <WrapContent>
+          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}> 
+            <WrapContent isDrawer={isDrawer}>
               <ProductDescription>
                 {(
                   (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
@@ -500,7 +502,7 @@ export const ProductOptionsUI = (props: any) => {
               </TouchableOpacity>
             </View>
           )}
-          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '80%' }}>
+          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%':'80%' }}>
             {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
               <OButton
                 onClick={() => handleSaveProduct()}

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

@@ -27,7 +27,7 @@ export const ProductHeader = styled.ImageBackground`
 `
 
 export const WrapContent = styled.View`
-  padding: 0 20px;
+  padding: ${(props: any) => props.isDrawer ? '0 5px' : '0 20px'};
   position: relative;
   bottom: 20px;
   background-color: white;

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}