ordering-ui-react-native 0.16.71 → 0.16.72-release

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

@@ -18,6 +18,7 @@ import {
 } from "rn-placeholder";
 
 import { View, ScrollView } from 'react-native'
+import { getOrderStatus } from '../../utils'
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const {
@@ -47,6 +48,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businessesSearchList,
 		hideOrders,
 		BusinessControllerSkeletons,
+		businesses,
+		businessPaginationProps,
+		handleUpdateProducts,
+		handleUpdateBusinesses
 	} = props
 
 	const theme = useTheme();
@@ -56,46 +61,45 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const [, { showToast }] = useToast()
 	const { loading, error, orders: values } = orderList
 	const [businessLoading, setBusinessLoading] = useState(true)
+	const [orders, setOrders] = useState([])
 
 	const imageFails = activeOrders
 		? theme.images.general.emptyActiveOrders
 		: theme.images.general.emptyPastOrders
 
-	const orders = customArray || values || []
+	const _orders = customArray || values || []
+	const uniqueOrders: any = []
 
-	const getOrderStatus = (s: string) => {
-		const status = parseInt(s)
-		const orderStatus = [
-			{ key: 0, value: t('PENDING', 'Pending') },
-			{ key: 1, value: t('COMPLETED', 'Completed') },
-			{ key: 2, value: t('REJECTED', 'Rejected') },
-			{ key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
-			{ key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
-			{ key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
-			{ key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
-			{ key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
-			{ key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
-			{ key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
-			{ key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
-			{ key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
-			{ key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
-			{ key: 13, value: t('PREORDER', 'PreOrder') },
-			{ key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
-			{ key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
-			{ key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
-			{ key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
-			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
-			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
-			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
-			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
-		]
-
-		const objectStatus = orderStatus.find((o) => o.key === status)
-
-		return objectStatus && objectStatus
-	}
+	useEffect(() => {
+		if (loading || error) return
+		const ordersReduced = _orders.map((order: any) => order?.cart_group_id
+      ? _orders
+        .filter((_order: any) => _order?.cart_group_id === order?.cart_group_id)
+        .map((_o: any, _: any, _ordersList: any) => {
+          const obj = {
+            ..._o,
+            id: _ordersList.map(o => o.id),
+            review: _o.review,
+            user_review: _o.user_review,
+            total: _ordersList.reduce((acc: any, o: any) => acc + o.summary.total, 0),
+            business: _ordersList.map((o: any) => o.business),
+            business_id: _ordersList.map((o: any) => o.business_id),
+            products: _ordersList.map((o: any) => o.products)
+          }
+          return obj
+        }).find((o: any) => o)
+      : order)
+		const orders = ordersReduced?.filter((order: any) => {
+			if (!order?.cart_group_id) return true
+			const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
+			if (!isDuplicate) {
+				uniqueOrders.push(order?.cart_group_id)
+				return true
+			}
+			return false
+		})
+		setOrders(orders)
+	}, [_orders?.length])
 
 	const onProductClick = (product: any) => {
 		if (product?.product_id && product?.category_id && product?.businessId &&
@@ -141,7 +145,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-			loadOrders(false, false, false, true)
+			if (!businessesSearchList) {
+				loadOrders(false, false, false, true)
+			}
 		}, [navigation])
 	)
 
@@ -155,14 +161,14 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	useEffect(() => {
 		if (loading) return
 
-		const updateOrders = orders.filter((order: any) => orderStatus.includes(order.status))
+		const updateOrders = _orders.filter((order: any) => orderStatus.includes(order.status))
 
 		if (activeOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
 		} else if (!preOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
 		}
-	}, [orders, activeOrders, preOrders])
+	}, [_orders, activeOrders, preOrders])
 
 	useEffect(() => {
 		if (refreshOrders) {
@@ -189,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 &&
@@ -210,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}
@@ -254,38 +262,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 					)}
 				</>
 			)}
-			{loading && !hideOrders && (
-				<>
-					{!activeOrders ? (
-						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>
-							<View style={{ width: '100%', flexDirection: 'row' }}>
-								<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 35 }} />
-								<Placeholder>
-									<PlaceholderLine width={30} style={{ marginTop: 5 }} />
-									<PlaceholderLine width={50} />
-									<PlaceholderLine width={70} />
-								</Placeholder>
-							</View>
-						</Placeholder>
-					) : (
-						<View style={{ marginTop: 30 }}>
-							{[...Array(5)].map((item, i) => (
-								<Placeholder key={i} Animation={Fade}>
-									<View style={{ width: '100%', flexDirection: 'row' }}>
-										<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
-										<Placeholder>
-											<PlaceholderLine width={30} style={{ marginTop: 5 }} />
-											<PlaceholderLine width={50} />
-											<PlaceholderLine width={20} />
-										</Placeholder>
-									</View>
-								</Placeholder>
-							))}
-						</View>
-					)}
-				</>
-			)}
-			{!loading && !error && orders.length > 0 && !hideOrders && (
+			{!error && orders.length > 0 && !hideOrders && (
 				preOrders ? (
 					<ActiveOrders
 						orders={orders.filter((order: any) => orderStatus.includes(order.status))}
@@ -317,9 +294,41 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						onNavigationRedirect={onNavigationRedirect}
 						handleReorder={handleReorder}
 						handleUpdateOrderList={handleUpdateOrderList}
+						loading={loading}
 					/>
 				)
 			)}
+			{loading && !hideOrders && (
+				<>
+					{!activeOrders ? (
+						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>
+							<View style={{ width: '100%', flexDirection: 'row' }}>
+								<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 35 }} />
+								<Placeholder>
+									<PlaceholderLine width={30} style={{ marginTop: 5 }} />
+									<PlaceholderLine width={50} />
+									<PlaceholderLine width={70} />
+								</Placeholder>
+							</View>
+						</Placeholder>
+					) : (
+						<View style={{ marginTop: 30 }}>
+							{[...Array(5)].map((item, i) => (
+								<Placeholder key={i} Animation={Fade}>
+									<View style={{ width: '100%', flexDirection: 'row' }}>
+										<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
+										<Placeholder>
+											<PlaceholderLine width={30} style={{ marginTop: 5 }} />
+											<PlaceholderLine width={50} />
+											<PlaceholderLine width={20} />
+										</Placeholder>
+									</View>
+								</Placeholder>
+							))}
+						</View>
+					)}
+				</>
+			)}
 		</>
 	)
 }

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

@@ -39,7 +39,7 @@ export const OSItem = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 0px;
+  padding: 10px 0px;
 `;
 
 export const OSItemContent = styled.TouchableOpacity`

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

@@ -45,7 +45,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
 
   const walletName: any = {
     cash: {
@@ -87,65 +87,65 @@ const PaymentOptionWalletUI = (props: any) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-        (
-          <>
-            {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-              <Container
-                key={wallet.id}
-                isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
-                onPress={() => handleOnChange(idx, wallet)}
-                disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-              >
-                <SectionLeft>
-                  {checkedState[idx] ? (
-                    <MaterialCommunityIcons
-                      name="checkbox-marked"
-                      size={25}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="checkbox-blank-outline"
-                      size={25}
-                      color={theme.colors.disabled}
-                    />
-                  )}
-                  <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
-                    <View>
-                      <OText
-                        style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ? {
-                          color: theme.colors.disabled
-                        } : {}}
-                      >
-                        {walletName[wallet.type]?.name}
-                      </OText>
-                    </View>
+      (
+        <>
+          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+            <Container
+              key={wallet.id}
+              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+              onPress={() => handleOnChange(idx, wallet)}
+              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+            >
+              <SectionLeft>
+                {checkedState[idx] ? (
+                  <MaterialCommunityIcons
+                    name="checkbox-marked"
+                    size={25}
+                    color={theme.colors.primary}
+                  />
+                ) : (
+                  <MaterialCommunityIcons
+                    name="checkbox-blank-outline"
+                    size={25}
+                    color={theme.colors.disabled}
+                  />
+                )}
+                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
+                  <View>
+                    <OText
+                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
+                        color: theme.colors.disabled
+                      } : {}}
+                    >
+                      {walletName[wallet.type]?.name}
+                    </OText>
                   </View>
-                </SectionLeft>
-
-                <View style={{ maxWidth: '35%', alignItems: 'flex-end' }}>
-                  {wallet.type === 'cash' && (
-                    <OText>
-                      {parsePrice(wallet?.balance, { isTruncable: true })}
+              </View>
+              </SectionLeft>
+
+              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
+                {wallet.type === 'cash' && (
+                  <OText>
+                    {parsePrice(wallet?.balance)}
+                  </OText>
+                )}
+                {wallet.type === 'credit_point' && (
+                  <OText>
+                    <OText color={theme.colors.primary} weight='bold'>
+                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
                     </OText>
-                  )}
-                  {wallet.type === 'credit_point' && (
                     <OText>
-                      <OText color={theme.colors.primary} weight='bold'>
-                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
-                      </OText>
-                      <OText>
-                        {wallet?.balance > 0
-                          ? creditBalance(wallet)
-                          : null}
-                      </OText>
+                      {wallet?.balance > 0
+                        ? creditBalance(wallet)
+                        : null}
                     </OText>
-                  )}
-                </View>
-              </Container>
-            ))}
-          </>
-        )}
+                  </OText>
+                )}
+              </View>
+            </Container>
+          ))}
+        </>
+      )}
 
       {walletsState?.loading && (
         <View>

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

@@ -160,7 +160,6 @@ const PaymentOptionsUI = (props: any) => {
 					<TouchableOpacity
 						onPress={() => handlePaymentMethodClick(item)}
 					>
-						{console.log(item?.gateway)}
 						<PMItem
 							key={item.id}
 							isDisabled={isDisabled}
@@ -187,7 +186,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [32]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>

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

@@ -124,7 +124,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 				flagButtonStyle={flagStyle}
 				countryPickerButtonStyle={{ ...style.countryBtn, ...boxStyle ? boxStyle : {} }}
 				placeholder={t('PHONE_NUMBER', 'Phone Number')}
-				textInputProps={{ autoCompleteType: 'tel', ref: forwardRef, ...textInputProps }}
+				textInputProps={{ keyboardType: 'number-pad', autoCompleteType: 'tel', textContentType: 'telephoneNumber', dataDetectorTypes: 'phoneNumber', ref: forwardRef, ...textInputProps }}
 				containerStyle={{ width: '100%' }}
 				renderDropdownImage={noDropIcon ? <View /> : <OIcon src={theme.images.general.arrow_down} width={13} color={'#B1BCCC'}></OIcon>}
 			/>

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

@@ -23,13 +23,14 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
     isInputMode,
     setSpotNumber,
     setVehicle,
-    handleChangeSpot
+    handleChangeSpot,
+    setPlaceSpotNumber
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
   const [orderState] = useOrder()
-	const [, { showToast }] = useToast();
+  const [, { showToast }] = useToast();
 
   const [placeGroupSelected, setPlaceGroupSelected] = useState<any>(null)
   const vehicleInputAllowed = [4, 5]
@@ -98,6 +99,14 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
 
   const onChangeSpot = () => {
     if (orderState.loading) return
+    if (!Number.isInteger(Number(spotNumber))) {
+      showToast(ToastType.Error, t('VALIDATION_ERROR_INTEGER', 'The _attribute_ must be an integer.').replace('_attribute_', placeholderText))
+      return
+    }
+    if (Number(spotNumber) < 0) {
+      showToast(ToastType.Error, t('VALIDATION_MUST_BIGGER_ZERO', '_attribute_ must be bigger than zero').replace('_attribute_', placeholderText))
+      return
+    }
     const isVehicle = Object.values(vehicle).every(e => e)
     const bodyToSend: any = {}
     spotNumber && (bodyToSend.spot_number = spotNumber)
@@ -126,11 +135,16 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
 
   useEffect(() => {
     if (spotState?.error?.length > 0) {
-      const errorText = manageErrorsToShow(spotState?.errors)
-			showToast(ToastType.Error, errorText)
+      const errorText = manageErrorsToShow(spotState?.error)
+      showToast(ToastType.Error, errorText)
     }
   }, [spotState?.error])
 
+  const onChangePlaceSpot = (value: string) => {
+    setSpotNumber(value)
+    setPlaceSpotNumber(value)
+  }
+
   return (
     <PlaceSpotContainer>
       {isInputMode ? (
@@ -211,13 +225,13 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
           <OInput
             value={spotNumber?.toString() ?? ''}
             placeholder={placeholderText}
-            keyboardType='number-pad'
-            onChange={(value: string) => setSpotNumber(value)}
+            type='number-pad'
+            onChange={(value: string) => onChangePlaceSpot(value)}
             style={{
               borderColor: theme.colors.border,
               borderRadius: 7.6
             }}
-						inputStyle={{ fontSize: 12, color: theme.colors.textNormal }}
+            inputStyle={{ fontSize: 12, color: theme.colors.textNormal }}
           />
           <View style={{ alignItems: 'flex-start' }}>
             <OButton
@@ -270,7 +284,7 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
                     onSelect={(place: any) => handlerChangePlace(place)}
                     placeholder={t('SELECT_YOUR_SPOT', 'Select your spot')}
                     options={getPlaces()}
-                    defaultValue={placesState?.places?.find((place : any) => place?.id === cart?.place_id)}
+                    defaultValue={placesState?.places?.find((place: any) => place?.id === cart?.place_id)}
                     isModal
                   />
                 </View>

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

@@ -19,7 +19,8 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 		handleReorder,
 		reorderLoading,
 		orderID,
-		handleUpdateOrderList
+		handleUpdateOrderList,
+		loading
 	} = props;
 
 	const theme = useTheme();
@@ -42,7 +43,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 					handleUpdateOrderList={handleUpdateOrderList}
 				/>
 			))}
-			{pagination.totalPages && pagination.currentPage < pagination.totalPages && (
+			{!loading && pagination.totalPages && pagination.currentPage < pagination.totalPages && (
 				<WrappButton>
 					<OButton
 						onClick={loadMoreOrders}