ordering-ui-react-native 0.16.16 → 0.16.17-release

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
 	OrderTypeControl,
 	useLanguage,
@@ -6,28 +6,32 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { Platform, View } from 'react-native'
-import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, Wrapper } from './styles'
+import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, OTab, OTabs, TabBtn, Wrapper } from './styles'
 import { OrderTypeSelectParams } from '../../types'
 import { OIcon, OText } from '../shared'
 import NavBar from '../NavBar';
 import { ORDER_TYPES } from '../../config/constants';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const {
 		navigation,
 		handleChangeOrderType,
+		handleChangeType,
 		typeSelected,
 		defaultValue,
 		configTypes,
 		orderTypes,
-		setOrderTypeValue
+		setOrderTypeValue,
+		isChewLayout,
+		chewOrderTypes
 	} = props
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	
+
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
@@ -42,43 +46,87 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		if (!orderState.loading) {
 			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
-			goToBack();
+			if (!isChewLayout) {
+				goToBack();
+			}
 		}
 	}
 
+	useEffect(() => {
+		handleChangeType && handleChangeType(typeSelected)
+	}, [typeSelected])
+
 	return (
 		<Wrapper>
-			<NavBar
-				onActionLeft={() => goToBack()}
-				btnStyle={{ paddingLeft: 0 }}
-				paddingTop={0}
-				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
-				titleAlign={'center'}
-				titleStyle={{ fontSize: 14 }}
-			/>
-			{
-			items.length > 0 && (
-				<ListWrapper>
-				{
-					items && items.map((item: any, idx: number) => 
-						<OrderTypeWrapper activeOpacity={0.8} key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
-							<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4}}>
-								<MaskCont>
-									<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
-									<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
-									<View style={{flexDirection: 'row', alignItems: 'center'}}>
-										<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
-										<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{transform: [{ rotate: '180deg' }], marginStart: 4}} />
-									</View>
-								</MaskCont>
-							</BgImage>
-						</OrderTypeWrapper>
-					)
-				}
-				</ListWrapper>
-				)
-			}
+			{isChewLayout ? (
+				<View>
+					<OTabs
+						horizontal
+						showsHorizontalScrollIndicator={false}
+					>
+						{chewOrderTypes?.map((type: any) => (
+							<TabBtn
+								key={type.value}
+								onPress={() => handleChangeOrderTypeCallback(type.value)}
+							>
+								<OTab
+									style={{
+										borderBottomColor:
+											type.value === typeSelected
+												? theme.colors.textNormal
+												: theme.colors.border,
+									}}>
+									<OText
+										size={14}
+										color={
+											type.value === typeSelected
+												? theme.colors.textNormal
+												: theme.colors.disabled
+										}
+										weight={type.value === typeSelected ? 'bold' : 'normal'}>
+										{type.name}
+									</OText>
+								</OTab>
+							</TabBtn>
+						))}
+					</OTabs>
+				</View>
+			) : (
+				<>
+					<NavBar
+						onActionLeft={() => goToBack()}
+						btnStyle={{ paddingLeft: 0 }}
+						paddingTop={0}
+						style={{ paddingBottom: 0 }}
+						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
+						titleAlign={'center'}
+						titleStyle={{ fontSize: 14 }}
+					/>
+					{
+						items.length > 0 && (
+							<ListWrapper>
+								{
+									items && items.map((item: any, idx: number) =>
+										<OrderTypeWrapper activeOpacity={0.8} key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
+											<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{ opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4 }}>
+												<MaskCont>
+													<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
+													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
+													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
+														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
+													</View>
+												</MaskCont>
+											</BgImage>
+										</OrderTypeWrapper>
+									)
+								}
+							</ListWrapper>
+						)
+					}
+				</>
+			)}
+
 		</Wrapper>
 	)
 }

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

@@ -24,4 +24,22 @@ export const MaskCont = styled.View`
   padding: 16px 39px;
   background-color: #0000004D;
   height: 100%;
-`;
+`;
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  width: 100%;
+  margin-bottom: -1px;
+  justify-content: space-between;
+`;
+
+export const OTab = styled.View`
+  padding-bottom: 10px;
+  border-bottom-width: 1px;
+  padding-horizontal: 10px;
+`;
+
+export const TabBtn = styled.TouchableOpacity`
+  min-height: 30px;
+  height: 30px;
+`;

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { BusinessList as BusinessListController, useOrder } from 'ordering-components/native'
+import React from 'react'
+import { useOrder } from 'ordering-components/native'
 import { BusinessController } from '../../BusinessController'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -7,32 +7,100 @@ import { ListWrapper } from './styles'
 import {
   View,
   StyleSheet,
-  ScrollView
+  ScrollView,
+  Dimensions
 } from 'react-native';
 import { PreviousBusinessOrderedParams } from '../../../types';
 
-export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams) => {
+const BusinessControllerList = ({ businesses, onBusinessClick, navigation, orderState, handleCustomUpdate, style }: any) => {
+  return (
+    <>
+      {businesses?.result?.map((business: any, i: number) => (
+        <BusinessController
+          key={`${business.id}_` + i}
+          business={business}
+          isBusinessOpen={business.open}
+          handleCustomClick={() => onBusinessClick(business)}
+          orderType={orderState?.options?.type}
+          navigation={navigation}
+          businessHeader={business?.header}
+          businessFeatured={business?.featured}
+          businessLogo={business?.logo}
+          businessReviews={business?.reviews}
+          businessDeliveryPrice={business?.delivery_price}
+          businessDeliveryTime={business?.delivery_time}
+          businessPickupTime={business?.pickup_time}
+          businessDistance={business?.distance}
+          handleCustomUpdate={handleCustomUpdate}
+          style={style}
+        />
+      ))}
+    </>
+  )
+}
+
+const BusinessSkeletons = () => {
+  return (
+    <>
+      {[...Array(4).keys()].map((item, 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>
+      ))}
+    </>
+  )
+}
+
+export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
   const {
     navigation,
-    businessesList,
-    setBusinessLoading,
-    businessId,
+    businesses,
     onNavigationRedirect,
     isBusinessesSearchList,
-    businessLoading
+    handleUpdateBusinesses,
   } = props
 
   const [orderState] = useOrder()
+  const windowWidth = Dimensions.get('window').width;
   const onBusinessClick = (business: any) => {
-    onNavigationRedirect('Business', { store: business.slug })
+    onNavigationRedirect('Business', { store: business.slug, logo: business.logo, header: business.header })
   }
-  useEffect(() => {
-    if (businessesList?.loading && businessesList?.businesses?.length === 0) {
-      setBusinessLoading(true)
-    } else {
-      setBusinessLoading(false)
-    }
-  }, [businessesList?.loading])
 
   const styles = StyleSheet.create({
     container: {
@@ -40,95 +108,33 @@ export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams)
     },
   });
 
-  const BusinessControllerList = ({ style }: any) => {
-    return (
-      <>
-        {businessesList.businesses?.filter((business: any) => businessId?.includes(business?.id))?.map((business: any, i: number) => (
-          <BusinessController
-            key={`${business.id}_` + i}
-            business={business}
-            isBusinessOpen={business.open}
-            handleCustomClick={() => onBusinessClick(business)}
-            orderType={orderState?.options?.type}
-            navigation={navigation}
-            businessHeader={business?.header}
-            businessFeatured={business?.featured}
-            businessLogo={business?.logo}
-            businessReviews={business?.reviews}
-            businessDeliveryPrice={business?.delivery_price}
-            businessDeliveryTime={business?.delivery_time}
-            businessPickupTime={business?.pickup_time}
-            businessDistance={business?.distance}
-            style={style}
-          />
-        ))}
-      </>
-    )
-  }
-
-  const BusinessSkeletons = () => {
-    return (
-      <>
-        {[...Array(4).keys()].map((item, 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>
-        ))}
-      </>
-    )
-  }
-
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
         <>
-          {!businessLoading && (
+          {!businesses?.loading && (
             <BusinessControllerList
-              style={{ width: 320, marginRight: 20 }}
+              style={{ width: windowWidth - 120, marginRight: 20 }}
+              onBusinessClick={onBusinessClick}
+              orderState={orderState}
+              navigation={navigation}
+              businesses={businesses}
+              handleCustomUpdate={handleUpdateBusinesses}
             />
           )}
         </>
       ) : (
         <ListWrapper>
-          <BusinessControllerList />
-          {businessesList.loading && (
+          {businesses?.loading ? (
             <BusinessSkeletons />
+          ) : (
+            <BusinessControllerList
+              onBusinessClick={onBusinessClick}
+              orderState={orderState}
+              navigation={navigation}
+              businesses={businesses}
+              handleCustomUpdate={handleUpdateBusinesses}
+            />
           )}
         </ListWrapper>
       )}
@@ -136,15 +142,3 @@ export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams)
     </ScrollView>
   )
 }
-
-export const PreviousBusinessOrdered = (props) => {
-  const previousBusinessOrderedController = {
-    ...props,
-    UIComponent: PreviousBusinessOrderedUI,
-    paginationSettings: { initialPage: 1, pageSize: 50, controlType: 'infinity' }
-  }
-
-  return (
-    <BusinessListController {...previousBusinessOrderedController} />
-  )
-}

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ScrollView, StyleSheet } from 'react-native'
+import { ScrollView, StyleSheet, Dimensions } from 'react-native'
 import {
   ListWrapper
 } from './styles'
@@ -7,13 +7,16 @@ import {
 import { SingleProductCard } from '../../SingleProductCard'
 import { PreviousProductsOrderedParams } from '../../../types'
 
-export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) => {
+export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) => {
   const {
     products,
     onProductClick,
+    handleUpdateProducts,
     isBusinessesSearchList
   } = props
 
+  const windowWidth = Dimensions.get('window').width;
+
   const styles = StyleSheet.create({
     container: {
       marginBottom: 0,
@@ -24,15 +27,17 @@ export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) =
     return (
       <>
         {products?.map((product: any) => (
-          <SingleProductCard
-            key={product?.id}
-            isSoldOut={(product.inventoried && !product.quantity)}
-            product={product}
-            businessId={product?.business?.id}
-            onProductClick={onProductClick}
-            style={style}
-            productAddedToCartLength={0}
-          />
+            <SingleProductCard
+              key={product?.id}
+              isProductId
+              isSoldOut={(product.inventoried && !product.quantity)}
+              product={product}
+              businessId={product?.business?.id}
+              onProductClick={onProductClick}
+              style={style}
+              productAddedToCartLength={0}
+              handleUpdateProducts={handleUpdateProducts}
+            />
         ))}
       </>
     )
@@ -40,7 +45,7 @@ export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) =
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
-        <ProductList style={{ width: 320, marginRight: 20 }} />
+        <ProductList style={{ width: windowWidth - 80, marginRight: 20 }} />
       ) : (
         <ListWrapper isBusinessesSearchList={isBusinessesSearchList}>
           <ProductList />

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

@@ -47,6 +47,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businessesSearchList,
 		hideOrders,
 		BusinessControllerSkeletons,
+		businesses,
+		businessPaginationProps,
+		handleUpdateProducts,
+		handleUpdateBusinesses
 	} = props
 
 	const theme = useTheme();
@@ -98,11 +102,18 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}
 
 	const onProductClick = (product: any) => {
-		if (product?.product_id && product?.category_id && product?.businessId) {
+		if (product?.product_id && product?.category_id && product?.businessId &&
+			product?.business.slug && product?.business.header && product?.business.logo) {
 			onNavigationRedirect('ProductDetails', {
-				productId: product?.product_id,
-				categoryId: product?.category_id,
+				isRedirect: 'business',
 				businessId: product?.businessId,
+				categoryId: product?.category_id,
+				productId: product?.product_id,
+				business: {
+					store: product?.business.slug,
+					header: product?.business.header,
+					logo: product?.business.logo,
+				}
 			})
 		} else {
 			showToast(ToastType.Error, t('ERROR_FAILED_REDIRECT_IDS', 'Failed to redirect product for ids'))
@@ -134,7 +145,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-			loadOrders(false, false, false, true)
+			if (!businessesSearchList) {
+				loadOrders(false, false, false, true)
+			}
 		}, [navigation])
 	)
 
@@ -182,15 +195,18 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			)}
 			{(ordersLength?.activeOrdersLength > 0 || ordersLength?.previousOrdersLength > 0) && (
 				<>
-					<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
-						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-							{titleContent || (activeOrders
-								? t('ACTIVE', 'Active')
-								: preOrders
-									? t('PREORDERS', 'Preorders')
-									: t('PAST', 'Past'))}
-						</OText>
-					</OptionTitle>
+					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
+						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
+							<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+								{titleContent || (activeOrders
+									? t('ACTIVE', 'Active')
+									: preOrders
+										? t('PREORDERS', 'Preorders')
+										: t('PAST', 'Past'))}
+							</OText>
+						</OptionTitle>
+					)}
+
 					{!(ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) &&
 						!loading &&
 						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
@@ -203,34 +219,33 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						)}
 				</>
 			)}
-			{isBusiness && !!businessesSearchList && businessLoading && (
+			{isBusiness && !!businessesSearchList && businesses?.loading &&  (
 				<ScrollView horizontal>
-					<BusinessControllerSkeletons />
+					<BusinessControllerSkeletons paginationProps={businessPaginationProps} />
 				</ScrollView>
 			)}
-			{isBusiness && businessOrderIds?.length > 0 && (
+			{isBusiness && (
 				<PreviousBusinessOrdered
-					businessId={businessOrderIds}
-					businessLoading={businessLoading}
-					setBusinessLoading={setBusinessLoading}
 					onNavigationRedirect={onNavigationRedirect}
-					isLoadingOrders={loading}
 					isBusinessesSearchList={!!businessesSearchList}
+					businesses={businesses}
+					handleUpdateBusinesses={handleUpdateBusinesses}
 				/>
 			)}
 
-			{isProducts && (
+			{isProducts && !loading && (
 				<PreviousProductsOrdered
 					products={products}
 					onProductClick={onProductClick}
+					handleUpdateProducts={handleUpdateProducts}
 					isBusinessesSearchList={!!businessesSearchList}
 				/>
 			)}
 			{(loading && isProducts) && (
 				<>
-					{[...Array(4).keys()].map(
+					{[...Array(!!businessesSearchList ? 1 : 4).keys()].map(
 						(item, i) => (
-							<Placeholder key={i} style={{ padding: 5, paddingLeft: 40 }} Animation={Fade}>
+							<Placeholder key={i} style={{ padding: 5, paddingLeft: !!businessesSearchList ? 0 : 40, marginBottom: !!businessesSearchList ? 38 : 0 }} Animation={Fade}>
 								<View style={{ flexDirection: 'row' }}>
 									<PlaceholderLine
 										width={24}