ordering-ui-react-native 0.16.68 → 0.16.69-release

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

@@ -19,54 +19,57 @@ export const OrderItAgain = (props: OrderItAgainParams) => {
     categoryState,
     currentCart,
     handleUpdateProducts,
-    navigation
+    navigation,
+    searchValue
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
   const { width } = Dimensions.get('window');
-
+  const productsFilterd = productList?.length > 0 && productList.filter((product : any) => !searchValue || product?.name?.toLowerCase()?.includes(searchValue?.toLowerCase()))?.sort((a: any, b:any) => moment(b?.last_ordered_date).valueOf() - moment(a?.last_ordered_date).valueOf())
   return (
-    <Container>
-      <OText
-        size={16}
-        lineHeight={24}
-        color={theme.colors.textNormal}
-        style={{
-          fontWeight: '600',
-          marginBottom: 6
-        }}
-      >
-        {t('ORDER_IT_AGAIN', 'Order it again')}
-      </OText>
-      <OText
-        size={12}
-        lineHeight={18}
-        color={theme.colors.disabled}
-      >
-        {t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.')}
-      </OText>
-      <ScrollView
-        horizontal
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-      >
-        {productList?.length > 0 && productList?.sort((a: any, b:any) => moment(b?.last_ordered_date).valueOf() - moment(a?.last_ordered_date).valueOf()).map((product: any, i: number) => (
-          <ProductWrapper key={'prod_' + product.id + `_${i}`} style={{ width: width - 120, }}>
-            <SingleProductCard
-              isSoldOut={product.inventoried && !product.quantity}
-              product={product}
-              businessId={businessId}
-              categoryState={categoryState}
-              onProductClick={() => onProductClick(product)}
-              productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-              handleUpdateProducts={handleUpdateProducts}
-              navigation={navigation}
-              isPreviously
-            />
-          </ProductWrapper>
-        ))}
-      </ScrollView>
-    </Container>
+    productsFilterd?.length > 0 ? (
+      <Container>
+        <OText
+          size={16}
+          lineHeight={24}
+          color={theme.colors.textNormal}
+          style={{
+            fontWeight: '600',
+            marginBottom: 6
+          }}
+        >
+          {t('ORDER_IT_AGAIN', 'Order it again')}
+        </OText>
+        <OText
+          size={12}
+          lineHeight={18}
+          color={theme.colors.disabled}
+        >
+          {t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.')}
+        </OText>
+        <ScrollView
+          horizontal
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+        >
+          {productsFilterd.map((product: any, i: number) => (
+            <ProductWrapper key={'prod_' + product.id + `_${i}`} style={{ width: width - 120, }}>
+              <SingleProductCard
+                isSoldOut={product.inventoried && !product.quantity}
+                product={product}
+                businessId={businessId}
+                categoryState={categoryState}
+                onProductClick={() => onProductClick(product)}
+                productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                handleUpdateProducts={handleUpdateProducts}
+                navigation={navigation}
+                isPreviously
+              />
+            </ProductWrapper>
+          ))}
+        </ScrollView>
+      </Container>
+    ) : null
   )
 }

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

@@ -17,7 +17,8 @@ import {
   ProgressBar,
   TimeWrapper,
   ProgressTextWrapper,
-  OrderInfoWrapper
+  OrderInfoWrapper,
+  OrderProgressWrapper
 } from './styles'
 const OrderProgressUI = (props: any) => {
   const {
@@ -33,6 +34,7 @@ const OrderProgressUI = (props: any) => {
   const [{ optimizeImage, parseDate, parseTime }] = useUtils()
   const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
+  const [initialLoaded, setInitialLoaded] = useState(false)
 
   const styles = StyleSheet.create({
     main: {
@@ -46,9 +48,9 @@ const OrderProgressUI = (props: any) => {
         height: 1
       },
       shadowColor: '#000',
-      shadowOpacity: 0.1,
-      shadowRadius: 1,
-      elevation: 2
+      shadowOpacity: 0.2,
+      shadowRadius: 2,
+      elevation: 3
     },
     logoWrapper: {
       overflow: 'hidden',
@@ -135,73 +137,82 @@ const OrderProgressUI = (props: any) => {
     }
   }, [isFocused])
 
+  useEffect(() => {
+    if (orderList.loading || initialLoaded) return
+    setInitialLoaded(true)
+  }, [orderList.loading, initialLoaded])
+
   return (
     <>
-      {orderList?.loading && (
-        <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
-          <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
-          <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
-          <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
-        </Placeholder>
+      {(orderList?.loading && !initialLoaded) && (
+        <OrderProgressWrapper>
+          <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
+            <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
+            <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
+            <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
+          </Placeholder>
+        </OrderProgressWrapper>
       )}
-      {!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(lastOrder?.business?.logo, 'h_50,c_limit'),
-                  priority: FastImage.priority.normal,
-                }}
-                resizeMode={FastImage.resizeMode.cover}
-              />
-            </View>
-            <View style={{
-              paddingHorizontal: 10,
-              flex: 1
-            }}
-            >
-              <OText
-                size={13}
-                style={{
-                  fontWeight: 'bold',
-                  marginBottom: 3
-                }}
-              >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
-              <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
-              <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
-                <View style={styles.navigationButton}>
-                  <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
-                  <IconAntDesign
-                    name='arrowright'
-                    color={theme.colors.primary}
-                    size={13}
-                    style={{ marginHorizontal: 5 }}
-                  />
-                </View>
-              </TouchableOpacity>
+      {(!orderList?.loading || initialLoaded) && orderList?.orders?.length > 0 && lastOrder && (
+        <OrderProgressWrapper>
+          <View style={styles.main}>
+            <OrderInfoWrapper style={{ flex: 1 }}>
+              <View style={styles.logoWrapper}>
+                <FastImage
+                  style={{ width: 50, height: 50 }}
+                  source={{
+                    uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
+                    priority: FastImage.priority.normal,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                />
+              </View>
+              <View style={{
+                paddingHorizontal: 10,
+                flex: 1
+              }}
+              >
+                <OText
+                  size={13}
+                  style={{
+                    fontWeight: 'bold',
+                    marginBottom: 3
+                  }}
+                >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
+                <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
+                <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
+                  <View style={styles.navigationButton}>
+                    <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
+                    <IconAntDesign
+                      name='arrowright'
+                      color={theme.colors.primary}
+                      size={13}
+                      style={{ marginHorizontal: 5 }}
+                    />
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </OrderInfoWrapper>
+            <View style={{ flex: 1 }}>
+              <ProgressContentWrapper>
+                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
+              </ProgressContentWrapper>
+              <ProgressTextWrapper>
+                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <TimeWrapper>
+                  <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
+                  <OText size={11}>
+                    {lastOrder?.delivery_datetime_utc
+                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                      : parseTime(lastOrder?.delivery_datetime, { utc: false })}
+                    &nbsp;-&nbsp;
+                    {convertDiffToHours(lastOrder)}
+                  </OText>
+                </TimeWrapper>
+              </ProgressTextWrapper>
             </View>
-          </OrderInfoWrapper>
-          <View style={{ flex: 1 }}>
-            <ProgressContentWrapper>
-              <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
-            </ProgressContentWrapper>
-            <ProgressTextWrapper>
-              <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
-              <TimeWrapper>
-                <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
-                <OText size={11}>
-                  {lastOrder?.delivery_datetime_utc
-                    ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
-                    : parseTime(lastOrder?.delivery_datetime, { utc: false })}
-                  &nbsp;-&nbsp;
-                  {convertDiffToHours(lastOrder)}
-                </OText>
-              </TimeWrapper>
-            </ProgressTextWrapper>
           </View>
-        </View>
+        </OrderProgressWrapper>
       )}
       {/* {!orderList?.loading && orderList?.orders?.length === 0 && (
         <NotFoundSource

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

@@ -29,3 +29,8 @@ export const OrderInfoWrapper = styled.View`
   align-items: center;
   margin-bottom: 15px;
 `
+export const OrderProgressWrapper = styled.View`
+  margin-top: 37px;
+  margin-bottom: 20px;
+	padding-horizontal: 40px;
+`

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 {
@@ -39,8 +38,7 @@ const OrderSummaryUI = (props: any) => {
     commentState,
     handleChangeComment,
     onNavigationRedirect,
-    handleRemoveOfferClick,
-    placeSpotTypes
+    handleRemoveOfferClick
   } = props;
 
   const theme = useTheme()
@@ -51,7 +49,6 @@ 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 handleDeleteClick = (product: any) => {
@@ -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 && 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,
@@ -11,11 +11,13 @@ 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,
@@ -44,12 +46,16 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		if (!orderState.loading) {
 			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
-			if(!isChewLayout){
+			if (!isChewLayout) {
 				goToBack();
 			}
 		}
 	}
 
+	useEffect(() => {
+		handleChangeType && handleChangeType(typeSelected)
+	}, [typeSelected])
+
 	return (
 		<Wrapper>
 			{isChewLayout ? (
@@ -58,7 +64,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						horizontal
 						showsHorizontalScrollIndicator={false}
 					>
-						{chewOrderTypes?.map((type : any) => (
+						{chewOrderTypes?.map((type: any) => (
 							<TabBtn
 								key={type.value}
 								onPress={() => handleChangeOrderTypeCallback(type.value)}
@@ -89,12 +95,13 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 				<>
 					<NavBar
 						onActionLeft={() => goToBack()}
-						btnStyle={{ paddingLeft: 0 }}
-						paddingTop={0}
+						btnStyle={{ paddingLeft: 0, width: 50 }}
+						paddingTop={Platform.OS === 'ios' ? 10 : 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 && (
@@ -108,7 +115,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 													<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 }} />
+														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
 													</View>
 												</MaskCont>
 											</BgImage>