ordering-ui-react-native 0.16.20 → 0.16.23

package/package.json

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

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -247,17 +247,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   let isToFollow = false;
   let isBusinessMarker = false;
 
-  if (order?.status === 7 || order?.status === 8) {
+  if (order?.status === 7 || order?.status === 8 || order?.status === 18) {
     const markerBusiness = 'Business';
     isBusinessMarker = true;
     locationMarker = locations.find(
       (location: any) => location.type === markerBusiness,
     );
 
-    if (order?.status === 8) {
+    if (order?.status === 8 || order?.status === 18) {
       isToFollow = true;
     }
-  } else if (order?.status === 3 || order?.status === 9) {
+  } else if (order?.status === 3 || order?.status === 9 || order?.status === 19 || order?.status === 23) {
     const markerCustomer = 'Customer';
     isToFollow = true;
     isBusinessMarker = false;

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { PanResponder, TouchableOpacity, View } from 'react-native';
+import { PanResponder, Platform, TouchableOpacity, View } from 'react-native';
 import {
   useLanguage,
   useOrder,
@@ -120,6 +120,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
+          {Platform.OS === 'android' && (<View style={{ paddingTop: 20 }} />)}
           <NavBar
             title={t('MENU_V21', 'Menu')}
             onActionLeft={goToBack}

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

@@ -56,9 +56,10 @@ const CartItem = (props: CartItemProps) => {
     return product
   }
   const isProductIngredients = productInfo()?.ingredients.length > 0 || productInfo()?.options.length > 0 || product?.comment
-  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
+  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: any }) => {
     const pos = position ? `(${position})` : ''
-    return `${quantity} x ${name} ${pos} +${price}`
+    const str = `${quantity} x ${name} ${pos}`
+    return price ? `${str} ${price}` : str
   }
 
   return (
@@ -184,7 +185,7 @@ const CartItem = (props: CartItemProps) => {
                             quantity: suboption.quantity,
                             name: suboption.name,
                             position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
+                            price: suboption.price > 0 && `+${parsePrice(suboption.price)}`
                           })}
                         </OText>
                       </ProductSubOption>

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

@@ -141,6 +141,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
           }}
         >
           <Container nopadding nestedScrollEnabled>
+            {Platform.OS === 'android' && (<View style={{ paddingTop: 20 }} />)}
             <NavBar
               title={categories[curIndexCateg].name}
               onActionLeft={goToBack}

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

@@ -53,5 +53,6 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.21,
     shadowRadius: 5,
+    elevation: 16
   }
 })

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

@@ -19,12 +19,12 @@ export const WrapperFloatBtn = styled.View`
   top: 10%;
   right: ${(props: any) => props.outside ? 11 : 58}%;
   z-index: 20002;
-  elevation: 11;
+  elevation: 17;
 `;
 
 export const IconControl = styled.TouchableOpacity`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px;
   border-radius: 8px;
-  elevation: 11;
+  elevation: 17;
 `;

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

@@ -46,7 +46,9 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     filters,
     businessTypes,
     setFilters,
-    brandList
+    brandList,
+    handleUpdateBusinessList,
+    handleUpdateProducts
   } = props
   
   const screenHeight = Dimensions.get('window').height;
@@ -264,6 +266,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
             business={business}
             isBusinessOpen={business.open}
             handleCustomClick={() => onBusinessClick(business)}
+            handleUpdateBusinessList={handleUpdateBusinessList}
             orderType={orderState?.options?.type}
             style={{ width: 320, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
           />
@@ -384,6 +387,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
                   businessId={business?.id}
                   onProductClick={() => { }}
                   productAddedToCartLength={0}
+                  handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
                   style={{ width: 320, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
                 />
               )))}

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

@@ -171,9 +171,9 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = () => {
+	const handlePlaceOrder = (confirmPayment) => {
 		if (!userErrors.length) {
-			handlerClickPlaceOrder && handlerClickPlaceOrder()
+			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
 		let stringError = ''

package/themes/original/src/components/Favorite/styles.tsx

@@ -18,4 +18,5 @@ export const Tab = styled.TouchableOpacity`
 export const Container = styled.View`
   padding-horizontal: 40px;
   padding-bottom: 20px;
+  padding-top: 30px;
 `

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

@@ -14,6 +14,7 @@ import { Container, WrappButton } from './styles'
 import { OButton } from '../shared';
 import { BusinessController } from '../BusinessController';
 import { SingleProductCard } from '../SingleProductCard';
+import moment from 'moment';
 
 
 const FavoriteListUI = (props: FavoriteParams) => {
@@ -103,55 +104,91 @@ const FavoriteListUI = (props: FavoriteParams) => {
     });
   }
 
+  const BusinessSkeleton = () => {
+    return (
+      <Placeholder
+        Animation={Fade}
+        style={{ marginBottom: 20 }}>
+        <View style={{ width: '100%' }}>
+          <PlaceholderLine
+            height={200}
+            style={{ marginBottom: 20, borderRadius: 25 }}
+          />
+          <View style={{ paddingHorizontal: 10 }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}>
+              <PlaceholderLine
+                height={25}
+                width={40}
+                style={{ marginBottom: 10 }}
+              />
+              <PlaceholderLine
+                height={25}
+                width={20}
+                style={{ marginBottom: 10 }}
+              />
+            </View>
+            <PlaceholderLine
+              height={20}
+              width={30}
+              style={{ marginBottom: 10 }}
+            />
+            <PlaceholderLine
+              height={20}
+              width={80}
+              style={{ marginBottom: 10 }}
+            />
+          </View>
+        </View>
+      </Placeholder>
+    )
+  }
+
+  const ProductSkeleton = () => {
+    return (
+      <Placeholder style={{ padding: 5 }} Animation={Fade}>
+        <View style={{ flexDirection: 'row' }}>
+          <PlaceholderLine
+            width={24}
+            height={70}
+            style={{ marginRight: 10, marginBottom: 10 }}
+          />
+          <Placeholder style={{ paddingVertical: 10 }}>
+            <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+            <PlaceholderLine width={20} />
+          </Placeholder>
+        </View>
+      </Placeholder>
+    )
+  }
+
+  const OrderSkeleton = () => {
+    return (
+      <Placeholder style={{ padding: 5 }} Animation={Fade}>
+        <View style={{ flexDirection: 'row' }}>
+          <PlaceholderLine
+            width={24}
+            height={70}
+            style={{ marginRight: 10, marginBottom: 10 }}
+          />
+          <Placeholder style={{ paddingVertical: 10 }}>
+            <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+            <PlaceholderLine width={20} />
+          </Placeholder>
+        </View>
+      </Placeholder>
+    )
+  }
+
 	return (
 		<Container>
       {isBusiness && (
         <>
-          {favoriteList?.loading && (
-            [...Array(5).keys()].map(i => (
-              <Placeholder
-                Animation={Fade}
-                key={i}
-                style={{ marginBottom: 20 }}>
-                <View style={{ width: '100%' }}>
-                  <PlaceholderLine
-                    height={200}
-                    style={{ marginBottom: 20, borderRadius: 25 }}
-                  />
-                  <View style={{ paddingHorizontal: 10 }}>
-                    <View
-                      style={{
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                      }}>
-                      <PlaceholderLine
-                        height={25}
-                        width={40}
-                        style={{ marginBottom: 10 }}
-                      />
-                      <PlaceholderLine
-                        height={25}
-                        width={20}
-                        style={{ marginBottom: 10 }}
-                      />
-                    </View>
-                    <PlaceholderLine
-                      height={20}
-                      width={30}
-                      style={{ marginBottom: 10 }}
-                    />
-                    <PlaceholderLine
-                      height={20}
-                      width={80}
-                      style={{ marginBottom: 10 }}
-                    />
-                  </View>
-                </View>
-              </Placeholder>
-            ))
-          )}
-          {!favoriteList?.loading && favoriteList?.favorites?.length > 0 && (
-            favoriteList.favorites.map((business: any, i:number) => (
+          {favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((business: any, i:number) => (
               <BusinessController
                 key={`${business.id}_` + i}
                 business={business}
@@ -171,41 +208,35 @@ const FavoriteListUI = (props: FavoriteParams) => {
               />
             ))
           )}
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <BusinessSkeleton key={i} />
+            ))
+          )}
         </>
       )}
 
       {isOrder && (
         <>
-          {favoriteList?.loading && (
-            [...Array(5).keys()].map(i => (
-              <Placeholder key={i} style={{ padding: 5 }} Animation={Fade}>
-                <View style={{ flexDirection: 'row' }}>
-                  <PlaceholderLine
-                    width={24}
-                    height={70}
-                    style={{ marginRight: 10, marginBottom: 10 }}
-                  />
-                  <Placeholder style={{ paddingVertical: 10 }}>
-                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-                    <PlaceholderLine width={20} />
-                  </Placeholder>
-                </View>
-              </Placeholder>
+          {favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites?.sort((a: any, b:any) => moment(a?.delivery_datetime_utc).valueOf() - moment(b?.delivery_datetime_utc).valueOf())
+              .map((order: any, i: number) => (
+                <SingleOrderCard
+                  key={`${order?.id}_${i}`}
+                  order={order}
+                  getOrderStatus={getOrderStatus}
+                  onNavigationRedirect={onNavigationRedirect}
+                  pastOrders={pastOrders.includes(order?.status)}
+                  handleUpdateOrderList={handleUpdateFavoriteList}
+                  handleUpdateFavoriteList={handleUpdateFavoriteList}
+                  handleReorder={handleReorder}
+                  reorderLoading={reorderState?.loading}
+                />
             ))
           )}
-          {!favoriteList?.loading && favoriteList?.favorites?.length > 0 && (
-            favoriteList.favorites.map((order: any, i: number) => (
-              <SingleOrderCard
-                key={`${order?.id}_${i}`}
-                order={order}
-                getOrderStatus={getOrderStatus}
-                onNavigationRedirect={onNavigationRedirect}
-                pastOrders={pastOrders.includes(order?.status)}
-                handleUpdateOrderList={handleUpdateFavoriteList}
-                handleUpdateFavoriteList={handleUpdateFavoriteList}
-                handleReorder={handleReorder}
-                reorderLoading={reorderState?.loading}
-              />
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <OrderSkeleton key={i} />
             ))
           )}
         </>
@@ -213,25 +244,8 @@ const FavoriteListUI = (props: FavoriteParams) => {
 
       {isProduct && (
         <>
-          {favoriteList?.loading && (
-            [...Array(5).keys()].map(i => (
-              <Placeholder key={i} style={{ padding: 5 }} Animation={Fade}>
-                <View style={{ flexDirection: 'row' }}>
-                  <PlaceholderLine
-                    width={24}
-                    height={70}
-                    style={{ marginRight: 10, marginBottom: 10 }}
-                  />
-                  <Placeholder style={{ paddingVertical: 10 }}>
-                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-                    <PlaceholderLine width={20} />
-                  </Placeholder>
-                </View>
-              </Placeholder>
-            ))
-          )}
-          {!favoriteList?.loading && favoriteList?.favorites?.length > 0 && (
-            favoriteList.favorites.map((product: any, i: number) => (
+          {favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((product: any, i: number) => (
               <SingleProductCard
                 key={`${product?.id}_${i}`}
                 isSoldOut={product.inventoried && !product.quantity}
@@ -241,6 +255,11 @@ const FavoriteListUI = (props: FavoriteParams) => {
               />
             ))
           )}
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <ProductSkeleton key={i} />
+            ))
+          )}
         </>
       )}
 

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

@@ -417,14 +417,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   ];
   const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l: string) => l.replace(/[^-.0-9]/g, ''))
   const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
-      ...location,
-      lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
-      lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
-    } : location)
+    ...location,
+    lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+    lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+  } : location)
 
   useEffect(() => {
     if (driverLocation) {
-      locations[0] = driverLocation;
+      parsedLocations[0] = {
+        ...locations[0],
+        ...driverLocation
+      }
     }
   }, [driverLocation]);
 
@@ -698,7 +701,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <Map>
                       <GoogleMap
                         location={typeof order?.driver?.location?.location === 'string'
-                        ? {
+                          ? {
                             lat: parseFloat(driverLocationString[0]),
                             lng: parseFloat(driverLocationString[1]),
                           } : driverLocation ?? order?.driver?.location
@@ -1029,7 +1032,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           )}
                         </View>
                         <OText>
-                          -{parsePrice(event.amount, {isTruncable: true})}
+                          -{parsePrice(event.amount, { isTruncable: true })}
                         </OText>
                       </View>
                     ))}

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

@@ -9,7 +9,7 @@ import {
 import {
 	PaymentOptions as PaymentOptionsController,
 	useLanguage,
-  ToastType,
+	ToastType,
 	useToast,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -30,6 +30,7 @@ import {
 	PMCardItemContent
 } from './styles'
 import { getIconCard, flatArray } from '../../utils';
+import { useApplePay } from '@stripe/stripe-react-native';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 const methodsPay = ['google_pay', 'apple_pay']
@@ -62,7 +63,8 @@ const PaymentOptionsUI = (props: any) => {
 	} = props
 
 	const theme = useTheme();
-  const [, { showToast }] = useToast();
+	const [, { showToast }] = useToast();
+	const { confirmApplePayPayment } = useApplePay()
 
 	const getPayIcon = (method: string) => {
 		switch (method) {
@@ -98,18 +100,18 @@ const PaymentOptionsUI = (props: any) => {
 	// ]
 
 	const handlePaymentMethodClick = (paymethod: any) => {
-    if (cart?.balance > 0) {
-      const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
-      if (webViewPaymentGateway.includes(paymethod?.gateway)) {
-        handlePaymentMethodClickCustom(paymethod)
-      }
-      handlePaymethodClick(paymethod, isPopupMethod)
-      return
-    }
-    showToast(
+		if (cart?.balance > 0) {
+			const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+			if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+				handlePaymentMethodClickCustom(paymethod)
+			}
+			handlePaymethodClick(paymethod, isPopupMethod)
+			return
+		}
+		showToast(
 			ToastType.Error,
 			t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method'))
-		;
+			;
 	}
 
 	useEffect(() => {
@@ -134,7 +136,7 @@ const PaymentOptionsUI = (props: any) => {
 
 	useEffect(() => {
 		if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-		  handlePlaceOrder()
+			handlePlaceOrder(confirmApplePayPayment)
 		}
 	}, [paymethodData, paymethodSelected])
 

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

@@ -15,22 +15,14 @@ import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
 
-function SingleProductCardPropsAreEqual(prevProps : any, nextProps : any) {
-	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) && 
-	prevProps.isSoldOut === nextProps.isSoldOut && 
-	prevProps.productAddedToCartLength === nextProps.productAddedToCartLength &&
-	prevProps.categoryState === nextProps.categoryState
-}
-
-const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
+const SinguleProductCardUI = (props: SingleProductCardParams) => {
 	const {
 		product,
 		isSoldOut,
 		onProductClick,
 		productAddedToCartLength,
 		style,
-		handleFavoriteProduct,
-		handleUpdateProducts
+		handleFavoriteProduct
 	} = props;
 
 	const theme = useTheme();
@@ -212,7 +204,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			)}
 		</CardContainer>
 	);
-}, SingleProductCardPropsAreEqual);
+};
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const singleProductCardProps = {

package/themes/original/src/types/index.tsx

@@ -605,6 +605,8 @@ export interface BusinessSearchParams {
 	setFilters: (filters: any) => void,
 	lazySearch?: boolean,
 	brandList?: any;
+	handleUpdateProducts: any,
+	handleUpdateBusinessList?: any;
 }
 
 export interface NoNetworkParams {