ordering-ui-react-native 0.15.7 → 0.15.8-release

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

@@ -35,6 +35,8 @@ const ORDER_STATUS: any = {
 	19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+	22: 'ORDER_LOOKING_FOR_DRIVER',
+  	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in']
@@ -95,28 +97,18 @@ const MessagesUI = (props: MessagesParams) => {
 	}
 
 	const handleImagePicker = () => {
-		launchImageLibrary({ mediaType: 'photo', maxHeight: 300, maxWidth: 300, includeBase64: true }, (response: any) => {
-			if (response.didCancel) {
-				console.log('User cancelled image picker');
-			} else if (response.errorMessage) {
-				console.log('ImagePicker Error: ', response.errorMessage);
+		launchImageLibrary({ mediaType: 'photo', maxHeight: 2048, maxWidth: 2048, includeBase64: true }, (response: any) => {
+			if (response?.didCancel) {
+				showToast(ToastType.Error, t('IMAGE_CANCELLED', 'User cancelled image picker'));
+			} else if (response?.errorMessage) {
 				showToast(ToastType.Error, response.errorMessage);
 			} else {
-				if (Platform.OS === 'ios') {
-					if (response.uri) {
-						const url = `data:${response.type};base64,${response.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+				if (response?.assets?.length > 0) {
+					const image = response?.assets[0]
+					const url = `data:${image.type};base64,${image.base64}`
+					setImage && setImage(url);
 				} else {
-					if (response?.assets?.length > 0) {
-						const image = response?.assets[0]
-						const url = `data:${image.type};base64,${image.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+					showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
 				}
 			}
 		});
@@ -235,7 +227,7 @@ const MessagesUI = (props: MessagesParams) => {
 						{image && (
 							<TouchableOpacity
 								style={{ position: 'absolute', top: -5, right: -5, borderColor: theme.colors.backgroundDark, backgroundColor: theme.colors.white, borderRadius: 25 }}
-								onPress={() => removeImage()}
+								onPress={removeImage}
 							>
 								<MaterialCommunityIcon name='close-circle-outline' color={theme.colors.backgroundDark} size={24} />
 							</TouchableOpacity>
@@ -340,30 +332,34 @@ const MessagesUI = (props: MessagesParams) => {
 		)
 	)
 
-	const renderSend = (props: any) => (
-		<Send
-			{...props}
-			disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-			alwaysShowSend
-			containerStyle={styles.containerSend}
-		>
-			<OIconButton
-				onClick={onSubmit}
-				style={{
-					height: 44,
-					width: 44,
-					borderRadius: 7.6,
-					opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
-					borderColor: theme.colors.primary,
-					backgroundColor: theme.colors.primary,
-				}}
-				iconStyle={{ marginTop: 3, marginRight: 2 }}
-				icon={theme.images.general.enter}
-				disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-				disabledColor={theme.colors.white}
-			/>
-		</Send>
-	)
+	const renderSend = (props: any) => {
+		const isDisabled = (sendMessage?.loading || (message === '' && !image) || messages?.loading)
+		return (
+			<Send
+				{...props}
+				disabled={isDisabled}
+				alwaysShowSend
+				containerStyle={styles.containerSend}
+			>
+				<OIconButton
+					onClick={onSubmit}
+					style={{
+						height: 44,
+						width: 44,
+						borderRadius: 7.6,
+						opacity: isDisabled ? 0.2 : 1,
+						borderColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+						backgroundColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+					}}
+					iconStyle={{ marginTop: 3, marginRight: 2 }}
+					icon={theme.images.general.enter}
+					iconColor={isDisabled ? '#000' : '#fff'}
+					disabled={isDisabled}
+					disabledColor={theme.colors.secondary}
+				/>
+			</Send>
+		)
+	}
 
 	const renderBubble = (props: any) => (
 		<Bubble
@@ -543,9 +539,20 @@ const styles = StyleSheet.create({
 })
 
 export const Messages = (props: MessagesParams) => {
+	const [allMessages, setAllMessages] = useState(props.messages)
+
+	useEffect(() => {
+		setAllMessages(props.messages)
+	}, [props.messages])
+
 	const MessagesProps = {
 		...props,
-		UIComponent: MessagesUI
+		UIComponent: MessagesUI,
+		messages: allMessages,
+		setMessages: (values: any) => {
+			props.setMessages && props.setMessages(values)
+			setAllMessages(values)
+		}
 	}
 	return <MessagesController {...MessagesProps} />
 }

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

@@ -1,7 +1,5 @@
-
 import styled, { css } from 'styled-components/native'
 
-
 export const Wrapper = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -39,4 +37,4 @@ export const MessageTypeItem = styled.View`
   ${({ active }: any) => active && css`
     background-color: ${(props: any) => props.theme.colors.whiteGray};
   `}
-`
+`

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

@@ -4,6 +4,7 @@ import CalendarStrip from 'react-native-calendar-strip'
 import {
 	useLanguage,
 	useConfig,
+	useUtils,
 	useOrder,
 	MomentOption as MomentOptionController,
 } from 'ordering-components/native';
@@ -132,6 +133,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
+	const [{ parseTime }] = useUtils()
 	const [orderState] = useOrder();
 	const [optionSelected, setOptionSelected] = useState({
 		isAsap: false,
@@ -143,6 +145,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 	});
 	const { bottom } = useSafeAreaInsets();
 
+	const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
 	const [selectedTime, setSelectedTime] = useState(null);
 	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
 	const [selectDate, setSelectedDate] = useState<any>(null)
@@ -338,7 +342,12 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 													style={{
 														lineHeight: 24
 													}}
-												>{time.startTime}</OText>
+												>{is12hours ? ( 
+													time.startTime.includes('12') 
+														? `${time.startTime}PM`
+														: parseTime(moment(time.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+													) : time.startTime
+												}</OText>
 											</TimeItem>
 										</TouchableOpacity>
 									))}

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

@@ -18,7 +18,7 @@ export const OrderTimeWrapper = styled.View`
 
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
-  max-height: 160px;
+  max-height: 210px;
 `
 
 export const TimeContentWrapper = styled.View`

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

@@ -1,14 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, BackHandler, KeyboardAvoidingView, Platform, Linking } from 'react-native';
-import Spinner from 'react-native-loading-spinner-overlay';
+import { View, StyleSheet, BackHandler, Platform, Linking } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { Messages } from '../Messages';
 import {
   useLanguage,
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
-  useConfig,
-  useSession,
+  useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -16,14 +13,10 @@ import {
   Header,
   OrderContent,
   OrderBusiness,
-  Logo,
   OrderData,
   OrderInfo,
-  OrderStatus,
   StaturBar,
-  StatusImage,
   OrderCustomer,
-  CustomerPhoto,
   InfoBlock,
   HeaderInfo,
   Customer,
@@ -31,17 +24,16 @@ import {
   Table,
   OrderBill,
   Total,
-  NavBack,
   Icons,
   OrderDriver,
   Map,
   Divider,
+  OrderAction
 } from './styles';
 import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { OrderDetailsParams } from '../../types';
-import { USER_TYPE } from '../../config/constants';
 import { GoogleMap } from '../GoogleMap';
 import { verifyDecimals } from '../../utils';
 import { OSRow } from '../OrderSummary/styles';
@@ -55,9 +47,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     messages,
     setMessages,
     readMessages,
-    messagesReadList,
     isFromCheckout,
     driverLocation,
+    onNavigationRedirect,
+    reorderState,
+    handleReorder
   } = props;
 
   const theme = useTheme();
@@ -92,19 +86,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const [, t] = useLanguage();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
-  const [{ user }] = useSession();
   const [{ configs }] = useConfig();
-
-  const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
-  const [openModalForDriver, setOpenModalForDriver] = useState(false);
   const [isReviewed, setIsReviewed] = useState(false)
-  const [unreadAlert, setUnreadAlert] = useState({
-    business: false,
-    driver: false,
-  });
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
 
   const { order, businessData } = props.order;
+  const mapValidStatuses = [9, 19, 23]
 
   const walletName: any = {
     cash: {
@@ -293,18 +280,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         percentage: 95,
         image: theme.images.order.status7,
       },
-      { 
-        key: 22, 
-        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), 
-        slug: 'ORDER_LOOKING_FOR_DRIVER', 
-        percentage: 35, 
-        image: theme.images.order.status8 
+      {
+        key: 22,
+        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
+        slug: 'ORDER_LOOKING_FOR_DRIVER',
+        percentage: 35,
+        image: theme.images.order.status8
       },
-      { 
-        key: 23, 
-        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), 
-        slug: 'ORDER_DRIVER_ON_WAY', 
-        percentage: 45, 
+      {
+        key: 23,
+        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+        slug: 'ORDER_DRIVER_ON_WAY',
+        percentage: 45,
         image: theme.images.order.status8
       }
     ];
@@ -314,38 +301,24 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     return objectStatus && objectStatus;
   };
 
-  const handleOpenMessagesForBusiness = () => {
-    setOpenModalForBusiness(true);
-    readMessages && readMessages();
-    setUnreadAlert({ ...unreadAlert, business: false });
-  };
-
-  const handleOpenMessagesForDriver = () => {
-    setOpenModalForDriver(true);
+  const handleGoToMessages = (type: string) => {
     readMessages && readMessages();
-    setUnreadAlert({ ...unreadAlert, driver: false });
-  };
-
-  const unreadMessages = () => {
-    const length = messages?.messages.length;
-    const unreadLength = order?.unread_count;
-    const unreadedMessages = messages.messages.slice(
-      length - unreadLength,
-      length,
-    );
-    const business = unreadedMessages.some((message: any) =>
-      message?.can_see?.includes(2),
-    );
-    const driver = unreadedMessages.some((message: any) =>
-      message?.can_see?.includes(4),
-    );
-    setUnreadAlert({ business, driver });
-  };
-
-  const handleCloseModal = () => {
-    setOpenModalForBusiness(false);
-    setOpenModalForDriver(false);
-  };
+    navigation.navigate(
+      'MessageDetails',
+      {
+        type,
+        order,
+        messages,
+        setMessages,
+        orderId: order?.id,
+        business: type === 'business',
+        driver: type === 'driver',
+        onClose: () => navigation?.canGoBack()
+          ? navigation.goBack()
+          : navigation.navigate('BottomTab', { screen: 'MyOrders' }),
+      }
+    )
+  }
 
   const handleArrowBack: any = () => {
     if (!isFromCheckout) {
@@ -387,6 +360,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     )
   }
 
+
+  useEffect(() => {
+    if (reorderState?.error) {
+      navigation.navigate('Business', { store: businessData?.slug })
+    }
+    if (!reorderState?.error && reorderState?.result?.uuid) {
+      onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+    }
+  }, [reorderState])
+
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
     return () => {
@@ -394,14 +377,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     };
   }, []);
 
-  useEffect(() => {
-    if (messagesReadList?.length) {
-      openModalForBusiness
-        ? setUnreadAlert({ ...unreadAlert, business: false })
-        : setUnreadAlert({ ...unreadAlert, driver: false });
-    }
-  }, [messagesReadList]);
-
   const locations = [
     {
       ...order?.driver?.location,
@@ -430,10 +405,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
-  useEffect(() => {
-    console.log('order: ', order)
-  }, [order]);
-
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps="handled">
       {(!order || Object.keys(order).length === 0) && (
@@ -481,7 +452,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <PlaceholderLine width={65} height={10} />
             <PlaceholderLine width={80} height={10} />
             <PlaceholderLine width={70} height={10} />
-            <View style={{marginTop: 10}}>
+            <View style={{ marginTop: 10 }}>
               <PlaceholderLine width={60} height={20} />
               <PlaceholderLine width={40} height={10} />
             </View>
@@ -594,21 +565,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     {order?.business?.name}
                   </OText>
                   <Icons>
-                    <TouchableOpacity
-                      onPress={() => order?.business?.cellphone &&
-                        Linking.openURL(`tel:${order?.business?.cellphone}`)
-                      }
-                      style={{ paddingEnd: 5 }}
-                    >
-                      <OIcon
-                        src={theme.images.general.phone}
-                        width={16}
-                        color={theme.colors.disabled}
-                      />
-                    </TouchableOpacity>
+                    {!!order?.business?.cellphone && (
+                      <TouchableOpacity
+                        onPress={() => order?.business?.cellphone &&
+                          Linking.openURL(`tel:${order?.business?.cellphone}`)
+                        }
+                        style={{ paddingEnd: 5 }}
+                      >
+                        <OIcon
+                          src={theme.images.general.phone}
+                          width={16}
+                          color={theme.colors.disabled}
+                        />
+                      </TouchableOpacity>
+                    )}
                     <TouchableOpacity
                       style={{ paddingStart: 5 }}
-                      onPress={() => handleOpenMessagesForBusiness()}>
+                      onPress={() => handleGoToMessages('business')}>
                       <OIcon
                         src={theme.images.general.chat}
                         width={16}
@@ -624,13 +597,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   mBottom={2}>
                   {order?.business?.email}
                 </OText>
-                <OText
-                  size={12}
-                  lineHeight={18}
-                  color={theme.colors.textNormal}
-                  mBottom={2}>
-                  {order?.business?.cellphone}
-                </OText>
+                {!!order?.business?.cellphone && (
+                  <OText
+                    size={12}
+                    lineHeight={18}
+                    color={theme.colors.textNormal}
+                    mBottom={2}>
+                    {order?.business?.cellphone}
+                  </OText>
+                )}
                 <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
                   {order?.business?.address}
                 </OText>
@@ -698,7 +673,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               )}
               {order?.driver && (
                 <>
-                  {order?.driver?.location && parseInt(order?.status) === 9 && (
+                  {order?.driver?.location && mapValidStatuses.includes(parseInt(order?.status)) && (
                     <Map>
                       <GoogleMap
                         location={order?.driver?.location}
@@ -735,7 +710,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         </OText>
                         <Icons>
                           <TouchableOpacity
-                            onPress={() => handleOpenMessagesForDriver()}>
+                            onPress={() => handleGoToMessages('driver')}>
                             <OIcon
                               src={theme.images.general.chat}
                               width={16}
@@ -776,16 +751,37 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   'Once business accepts your order, we will send you an email, thank you!',
                 )}
               </OText>
-              <OButton
-                text={t('YOUR_ORDERS', 'Your Orders')}
-                textStyle={{ fontSize: 14, color: theme.colors.primary }}
-                imgRightSrc={null}
-                borderColor={theme.colors.primary}
-                bgColor={theme.colors.clear}
-                style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
-                parentStyle={{ marginTop: 29, width: '50%' }}
-                onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
-              />
+              <OrderAction>
+                <OButton
+                  text={t('YOUR_ORDERS', 'Your Orders')}
+                  textStyle={{ fontSize: 14, color: theme.colors.primary }}
+                  imgRightSrc={null}
+                  borderColor={theme.colors.primary}
+                  bgColor={theme.colors.clear}
+                  style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
+                  parentStyle={{ marginTop: 29, marginEnd: 15 }}
+                  onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
+                />
+                {(
+                  parseInt(order?.status) === 1 ||
+                  parseInt(order?.status) === 2 ||
+                  parseInt(order?.status) === 5 ||
+                  parseInt(order?.status) === 6 ||
+                  parseInt(order?.status) === 10 ||
+                  parseInt(order?.status) === 11 ||
+                  parseInt(order?.status) === 12
+                ) && (
+                    <OButton
+                      text={order.id === reorderState?.loading ? t('LOADING', 'Loading..') : t('REORDER', 'Reorder')}
+                      textStyle={{ fontSize: 14, color: theme.colors.primary }}
+                      imgRightSrc={null}
+                      borderColor='transparent'
+                      bgColor={theme.colors.primary + 10}
+                      style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginTop: 29 }}
+                      onClick={() => handleReorder && handleReorder(order.id)}
+                    />
+                  )}
+              </OrderAction>
             </HeaderInfo>
             <OrderProducts>
               {order?.products?.length &&
@@ -978,7 +974,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       marginTop: 10
                     }}
                   >
-                    {order?.payment_events?.map((event: any) => (
+                    {order?.payment_events?.map((event: any) => event.amount > 0 && (
                       <View
                         key={event.id}
                         style={{
@@ -1018,28 +1014,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </OrderContent>
         </>
       )}
-      <OModal
-        open={openModalForBusiness || openModalForDriver}
-        entireModal
-        customClose
-        onClose={() => handleCloseModal()}>
-        <Messages
-          type={openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER}
-          orderId={order?.id}
-          messages={messages}
-          order={order}
-          business={openModalForBusiness}
-          driver={openModalForDriver}
-          setMessages={setMessages}
-          onClose={handleCloseModal}
-        />
-      </OModal>
       <OModal
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
-        title={`${openTaxModal.data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
         <TaxInformation
           type={openTaxModal.type}

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

@@ -5,7 +5,6 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 
@@ -125,3 +124,6 @@ export const Divider = styled.View`
   margin-top: 5px;
   margin-bottom: 5px;
 `
+export const OrderAction = styled.View`
+  flex-direction: row;
+`

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

@@ -98,7 +98,7 @@ const OrderProgressUI = (props: any) => {
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90 },
       { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95 },
       { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35 },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY  || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
     ]
 
     const objectStatus = orderStatus.find((o) => o.key === status)
@@ -131,7 +131,7 @@ const OrderProgressUI = (props: any) => {
 
   useEffect(() => {
     if (isFocused) {
-      loadOrders()
+      loadOrders(false, false, false, true)
     }
   }, [isFocused])
 
@@ -188,7 +188,7 @@ const OrderProgressUI = (props: any) => {
               <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
             </ProgressContentWrapper>
             <ProgressTextWrapper>
-              <OText size={12}>{getOrderStatus(lastOrder.status)?.value}</OText>
+              <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
               <TimeWrapper>
                 <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
                 <OText size={11}>
@@ -218,7 +218,7 @@ export const OrderProgress = (props: any) => {
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
-    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,

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

@@ -20,6 +20,7 @@ export const ProgressTextWrapper = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
 `
 
 export const OrderInfoWrapper = styled.View`