ordering-ui-react-native 0.16.53 → 0.16.54-release

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

@@ -26,7 +26,6 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
 import { OAlert } from '../../../../../src/components/shared'
-import { PlaceSpot } from '../PlaceSpot'
 
 const OrderSummaryUI = (props: any) => {
   const {
@@ -50,9 +49,7 @@ const OrderSummaryUI = (props: any) => {
   const [validationFields] = useValidationFields();
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
-  const [openPlaceModal, setOpenPlaceModal] = useState(false)
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
-  const placeSpotTypes = [3, 4]
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
@@ -295,33 +292,15 @@ const OrderSummaryUI = (props: any) => {
               {cart?.total >= 1 && (
                 <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
                   <OSTable style={{ marginTop: 15 }}>
-                    <OText size={14} style={{ fontWeight: 'bold' }}>
+                    <OText size={14} style={{ fontWeight: 'bold' }} color={theme.colors.textNormal}>
                       {t('TOTAL', 'Total')}
                     </OText>
-                    <OText size={14} style={{ fontWeight: 'bold' }} >
+                    <OText size={14} style={{ fontWeight: 'bold' }} color={theme.colors.textNormal}>
                       {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                     </OText>
                   </OSTable>
                 </View>
               )}
-              {placeSpotTypes.includes(orderState?.options?.type) && (
-                <OSTable style={{ marginTop: 15 }}>
-                  <OText size={14} lineHeight={21} weight={'600'}>
-                    {t('SPOT', 'Spot')}: {cart?.place?.name || t('NO_SELECTED', 'No selected')}
-                  </OText>
-                  <TouchableOpacity onPress={() => setOpenPlaceModal(true)}>
-                    <OText
-                      size={14}
-                      lineHeight={21}
-                      weight={'600'}
-                      color={theme.colors.primary}
-                      style={{ textDecorationLine: 'underline' }}
-                    >
-                      {t('EDIT', 'Edit')}
-                    </OText>
-                  </TouchableOpacity>
-                </OSTable>
-              )}
               {cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
@@ -370,18 +349,6 @@ const OrderSummaryUI = (props: any) => {
               products={cart?.products}
             />
           </OModal>
-          <OModal
-            open={openPlaceModal}
-            title={t('CHOOSE_YOUR_SPOT', 'Choose your spot')}
-            onClose={() => setOpenPlaceModal(false)}
-            entireModal
-          >
-            <PlaceSpot
-              cart={cart}
-              isOpenPlaceSpot={openPlaceModal}
-              setOpenPlaceModal={setOpenPlaceModal}
-            />
-          </OModal>
           <OAlert
             open={confirm.open}
             title={confirm.title}

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,88 @@ 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, width: 50 }}
+						paddingTop={0}
+						style={{ paddingBottom: 0 }}
+						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
+						titleAlign={'center'}
+						titleStyle={{ fontSize: 14 }}
+						noMargin
+					/>
+					{
+						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';
 
@@ -12,43 +12,12 @@ import {
 } from 'react-native';
 import { PreviousBusinessOrderedParams } from '../../../types';
 
-export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams) => {
-  const {
-    navigation,
-    businessesList,
-    setBusinessLoading,
-    businessId,
-    onNavigationRedirect,
-    isBusinessesSearchList,
-    businessLoading
-  } = props
-
-  const [orderState] = useOrder()
-  const windowWidth = Dimensions.get('window').width;
-
-  const onBusinessClick = (business: any) => {
-    onNavigationRedirect('Business', { store: business.slug })
-  }
-  useEffect(() => {
-    if (businessesList?.loading && businessesList?.businesses?.length === 0) {
-      setBusinessLoading(true)
-    } else {
-      setBusinessLoading(false)
-    }
-  }, [businessesList?.loading])
-
-  const styles = StyleSheet.create({
-    container: {
-      marginBottom: 0,
-    },
-  });
-
-  const BusinessControllerList = ({ style }: any) => {
-    return (
-      <>
-        {businessesList.businesses?.filter((business: any) => businessId?.includes(business?.id))?.map((business: any, i: number) => (
+const BusinessControllerList = ({ businesses, onBusinessClick, navigation, orderState, handleCustomUpdate, style }: any) => {
+  return (
+    <>
+      {businesses?.result?.map((business: any, i: number) => (
+        <View style={style} key={`${business.id}_` + i}>
           <BusinessController
-            key={`${business.id}_` + i}
             business={business}
             isBusinessOpen={business.open}
             handleCustomClick={() => onBusinessClick(business)}
@@ -62,76 +31,115 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
             businessDeliveryTime={business?.delivery_time}
             businessPickupTime={business?.pickup_time}
             businessDistance={business?.distance}
-            style={style}
+            handleCustomUpdate={handleCustomUpdate}
           />
-        ))}
-      </>
-    )
-  }
+        </View>
+      ))}
+    </>
+  )
+}
 
-  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>
+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={20}
-                  width={30}
+                  height={25}
+                  width={40}
                   style={{ marginBottom: 10 }}
                 />
                 <PlaceholderLine
-                  height={20}
-                  width={80}
+                  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>
-          </Placeholder>
-        ))}
-      </>
-    )
+          </View>
+        </Placeholder>
+      ))}
+    </>
+  )
+}
+
+export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
+  const {
+    navigation,
+    businesses,
+    onNavigationRedirect,
+    isBusinessesSearchList,
+    handleUpdateBusinesses,
+  } = props
+
+  const [orderState] = useOrder()
+  const windowWidth = Dimensions.get('window').width;
+  const onBusinessClick = (business: any) => {
+    onNavigationRedirect('Business', { store: business.slug, logo: business.logo, header: business.header })
   }
 
+  const styles = StyleSheet.create({
+    container: {
+      marginBottom: 0,
+    },
+  });
+
   return (
-    <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
+    <ScrollView
+      horizontal={isBusinessesSearchList}
+      style={styles.container}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+    >
       {isBusinessesSearchList ? (
         <>
-          {!businessLoading && (
+          {!businesses?.loading && (
             <BusinessControllerList
-              style={{ width: windowWidth - 80, 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>
       )}
@@ -139,15 +147,3 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
     </ScrollView>
   )
 }
-
-export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
-  const previousBusinessOrderedController = {
-    ...props,
-    UIComponent: PreviousBusinessOrderedUI,
-    paginationSettings: { initialPage: 1, pageSize: 50, controlType: 'infinity' }
-  }
-
-  return (
-    <BusinessListController {...previousBusinessOrderedController} />
-  )
-}

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

@@ -11,6 +11,7 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
   const {
     products,
     onProductClick,
+    handleUpdateProducts,
     isBusinessesSearchList
   } = props
 
@@ -28,12 +29,14 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
         {products?.map((product: any) => (
             <SingleProductCard
               key={product?.id}
+              isProductId
               isSoldOut={(product.inventoried && !product.quantity)}
               product={product}
               businessId={product?.business?.id}
               onProductClick={onProductClick}
               style={style}
               productAddedToCartLength={0}
+              handleUpdateProducts={handleUpdateProducts}
             />
         ))}
       </>