ordering-ui-react-native 0.14.83 → 0.14.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.83",
+  "version": "0.14.86",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/OrderDetails/index.tsx

@@ -134,7 +134,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business'), slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 0.15, image: theme.images.order.status18 },
       { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer'), slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 0.90, image: theme.images.order.status19 },
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90, image: theme.images.order.status20 },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 }
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35, image: theme.images.order.status22 },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45, image: theme.images.order.status23 }
     ]
 
 

package/src/components/OrdersOption/index.tsx

@@ -91,7 +91,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       { 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: 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)
@@ -213,7 +215,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     ...props,
     UIComponent: OrdersOptionUI,
     orderStatus: props.activeOrders
-      ? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21]
+      ? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23]
       : [1, 2, 5, 6, 10, 11, 12, 16, 17],
     useDefualtSessionManager: true,
     paginationSettings: {

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

@@ -712,6 +712,14 @@ export const OrdersOption = (props: OrdersOptionParams) => {
           'Customer arrived to business',
         ),
       },
+      { 
+        key: 22, 
+        text: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') 
+      },
+      { 
+        key: 23, 
+        text: t('ORDER_DRIVER_ON_WAY', 'Driver on way') 
+      }
     ],
     tabs: [
       {
@@ -723,7 +731,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
       {
         key: 1,
         text: t('IN_PROGRESS', 'In Progress'),
-        tags: props?.orderGroupStatusCustom?.inProgress ?? [3, 4, 7, 8, 9, 14, 18, 19, 20, 21],
+        tags: props?.orderGroupStatusCustom?.inProgress ?? [3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23],
         title: 'inProgress',
       },
       {

package/themes/business/src/components/PreviousMessages/index.tsx

@@ -176,6 +176,18 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
         slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
         percentage: 95,
       },
+      { 
+        key: 22, 
+        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), 
+        slug: 'ORDER_LOOKING_FOR_DRIVER', 
+        percentage: 35
+      },
+      { 
+        key: 23, 
+        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), 
+        slug: 'ORDER_DRIVER_ON_WAY', 
+        percentage: 45 
+      }
     ];
 
     const objectStatus = orderStatus.find(o => o.key === status);

package/themes/business/src/utils/index.tsx

@@ -325,6 +325,18 @@ export const getOrderStatus = (s: string, t: any) => {
       slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
       percentage: 95,
     },
+    {
+      key: 22,
+      value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
+      slug: 'ORDER_LOOKING_FOR_DRIVER',
+      percentage: 35
+    },
+    {
+      key: 23,
+      value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+      slug: 'ORDER_DRIVER_ON_WAY',
+      percentage: 45
+    }
   ];
 
   const objectStatus = orderStatus.find(o => o.key === status);

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

@@ -126,7 +126,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business'), slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 0.15, image: theme.images.order.status18 },
       { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer'), slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 0.90, image: theme.images.order.status19 },
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90, image: theme.images.order.status20 },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 }
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35, image: theme.images.order.status22 },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45, image: theme.images.order.status23 }
     ]
 
 

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

@@ -91,7 +91,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ 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: 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)
@@ -208,7 +210,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 		...props,
 		UIComponent: OrdersOptionUI,
 		orderStatus: props.activeOrders
-			? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21]
+			? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23]
 			: [1, 2, 5, 6, 10, 11, 12, 16, 17],
 		useDefualtSessionManager: true,
 		paginationSettings: {

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

@@ -133,7 +133,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business'), slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 0.15, image: theme.images.order.status18 },
       { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer'), slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 0.90, image: theme.images.order.status19 },
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90, image: theme.images.order.status20 },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 }
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35, image: theme.images.order.status22 },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45, image: theme.images.order.status23 }
     ]
 
 

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

@@ -89,7 +89,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       { 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: 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)
@@ -205,7 +207,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     ...props,
     UIComponent: OrdersOptionUI,
     orderStatus: props.activeOrders
-      ? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21]
+      ? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23]
       : [1, 2, 5, 6, 10, 11, 12, 16, 17],
     useDefualtSessionManager: true,
     paginationSettings: {

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

@@ -117,6 +117,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 
+  const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
+		Number(configs?.max_days_preorder?.value) > 0
+
 	const timerId = useRef<any>(false)
 	// const panResponder = useRef(
 	// 	PanResponder.create({
@@ -128,6 +131,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	// 	})
 	// ).current
 
+  const handleMomentClick = () => {
+		if (isPreorderEnabled) {
+			navigation.navigate('MomentOption')
+		}
+	}
+
 	const configTypes =
 		configs?.order_types_allowed?.value
 			.split('|')
@@ -198,14 +207,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}, [orderState?.options?.address?.location])
 
 	useEffect(() => {
-		const onFocusApp = (nextAppState : any) => {
+		const onFocusApp = (nextAppState: any) => {
 			if (
 				appState.current.match(/inactive|background/) &&
 				nextAppState === "active"
 			) {
-				if (!businessesList.loading) {
-					getBusinesses(true);
-				}
+				getBusinesses(true);
 			}
 			appState.current = nextAppState;
 			setAppStateVisible(appState.current);
@@ -281,7 +288,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 						<WrapMomentOption
-							onPress={() => navigation.navigate('MomentOption')}>
+							onPress={() => handleMomentClick()}>
 							<OText
 								size={12}
 								numberOfLines={1}
@@ -291,11 +298,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
 									: t('ASAP_ABBREVIATION', 'ASAP')}
 							</OText>
-							<OIcon
-								src={theme.images.general.arrow_down}
-								width={10}
-								style={{ marginStart: 8 }}
-							/>
+							{isPreorderEnabled && (
+								<OIcon
+									src={theme.images.general.arrow_down}
+									width={10}
+									style={{ marginStart: 8 }}
+								/>
+							)}
 						</WrapMomentOption>
 
 						{!businessId && (

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

@@ -667,6 +667,19 @@ const CheckoutUI = (props: any) => {
 					setShowGateway={setShowGateway}
 				/>
 			)}
+			{webviewPaymethod?.gateway === 'square' && showGateway.open && (
+				<PaymentOptionsWebView
+					onNavigationRedirect={onNavigationRedirect}
+					uri={`https://test-square-f50f7.web.app`}
+					user={user}
+					token={token}
+					cart={cart}
+					currency={currency}
+					webviewPaymethod={webviewPaymethod}
+					setShowGateway={setShowGateway}
+					locationId={'L1NGAY5M6KJRX'}
+				/>
+			)}
 		</>
 	)
 }

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

@@ -91,7 +91,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ 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: 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)

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

@@ -73,7 +73,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ 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: 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)
@@ -218,7 +220,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
-		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
+		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
 		useDefualtSessionManager: true,
 		paginationSettings: {
 			initialPage: 1,

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

@@ -293,6 +293,20 @@ 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: 23, 
+        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), 
+        slug: 'ORDER_DRIVER_ON_WAY', 
+        percentage: 45, 
+        image: theme.images.order.status8
+      }
     ];
 
     const objectStatus = orderStatus.find((o) => o.key === status);

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

@@ -97,7 +97,9 @@ const OrderProgressUI = (props: any) => {
       { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business'), slug: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', percentage: 55 },
       { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer'), slug: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', percentage: 90 },
       { 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: 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 }
     ]
 
     const objectStatus = orderStatus.find((o) => o.key === status)
@@ -137,7 +139,7 @@ const OrderProgressUI = (props: any) => {
   return (
     <>
       {orderList?.loading && (
-        <Placeholder Animation={Fade} height={160}>
+        <Placeholder Animation={Fade} height={158}>
           <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
           <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
           <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
@@ -217,7 +219,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],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,

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

@@ -93,7 +93,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ 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: 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)
@@ -230,7 +232,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 		...props,
 		UIComponent: OrdersOptionUI,
 		orderStatus: props.preOrders ? [13] : props.activeOrders
-			? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21]
+			? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21, 22, 23]
 			: [1, 2, 5, 6, 10, 11, 12, 16, 17],
 		useDefualtSessionManager: true,
 	}

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

@@ -154,7 +154,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>

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

@@ -935,28 +935,29 @@ export const ProductOptionsUI = (props: any) => {
 						style={{
 							width: isSoldOut || maxProductQuantity <= 0 ? '60%' : '40%',
 						}}>
-						{productCart &&
-							!isSoldOut &&
-							maxProductQuantity > 0 &&
+						{((productCart &&
 							auth &&
-							orderState.options?.address_id && (
+							orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
 								<OButton
 									onClick={() => handleSaveProduct()}
 									imgRightSrc=""
 									text={`${orderState.loading
 										? t('LOADING', 'Loading')
-										: editMode
-											? t('UPDATE', 'Update')
-											: t('ADD', 'Add')
+										: (isSoldOut || maxProductQuantity <= 0)
+											? t('SOLD_OUT', 'Sold out')
+											: editMode
+												? t('UPDATE', 'Update')
+												: t('ADD', 'Add')
 										}`}
+									isDisabled={isSoldOut || maxProductQuantity <= 0}
 									textStyle={{
-										color: (saveErrors || !productCart.quantity) ? theme.colors.primary : theme.colors.white,
+										color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
 										fontSize: orderState.loading || editMode ? 10 : 14
 									}}
 									style={{
-										backgroundColor: (saveErrors || !productCart.quantity) ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: (saveErrors || !productCart.quantity) ? theme.colors.white : theme.colors.primary,
-										opacity: (saveErrors || !productCart.quantity) ? 0.3 : 1,
+										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.lightGray : theme.colors.primary,
+										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.white : theme.colors.primary,
+										opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
 										borderRadius: 7.6,
 										height: 44,
 										shadowOpacity: 0,
@@ -976,7 +977,7 @@ export const ProductOptionsUI = (props: any) => {
 							) : (
 								<OButton onClick={navigation.navigate('AddressList')} />
 							))}
-						{(!auth || isSoldOut || maxProductQuantity <= 0) && (
+						{!auth && (
 							<OButton
 								isDisabled={isSoldOut || maxProductQuantity <= 0}
 								onClick={() => handleRedirectLogin()}

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

@@ -5,7 +5,7 @@ import {
 	ProductOptionSuboption as ProductSubOptionController
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
-import { StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import {
 	Container,
@@ -52,81 +52,83 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 	return (
-		<Container onPress={() => handleSuboptionClick()}>
-			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
-				{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
-					state?.selected ? (
-						<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
+		<View>
+			<Container onPress={() => handleSuboptionClick()}>
+				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
+					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
+						state?.selected ? (
+							<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
+						) : (
+							<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
+						)
 					) : (
-						<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
-					)
-				) : (
-					state?.selected ? (
-						<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
-					) : (
-						<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
-					)
-				)}
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
-					{suboption?.name}
+						state?.selected ? (
+							<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+						) : (
+							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
+						)
+					)}
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
+						{suboption?.name}
+					</OText>
+				</IconControl>
+				<QuantityControl>
+					{option?.allow_suboption_quantity && state?.selected && (
+						<>
+							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+								<OIcon
+									src={theme.images.general.minus}
+									width={16}
+									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
+								/>
+							</Checkbox>
+							<OText size={12} mLeft={5} mRight={5}>
+								{state.quantity}
+							</OText>
+							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+								<OIcon
+									src={theme.images.general.plus}
+									width={16}
+									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+								/>
+							</Checkbox>
+						</>
+					)}
+				</QuantityControl>
+				<PositionControl>
+					{option?.with_half_option && state?.selected && (
+						<>
+							<Circle disabled={disabled} onPress={() => changePosition('left')}>
+								<OIcon
+									src={theme.images.general.half_l}
+									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+									style={styles.inverse}
+								/>
+							</Circle>
+							<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+								<OIcon
+									src={theme.images.general.half_f}
+									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+								/>
+							</Circle>
+							<Circle disabled={disabled} onPress={() => changePosition('right')}>
+								<OIcon
+									src={theme.images.general.half_r}
+									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+								/>
+							</Circle>
+						</>
+					)}
+				</PositionControl>
+				<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+					+ {parsePrice(price)}
 				</OText>
-			</IconControl>
+			</Container>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
-			<QuantityControl>
-				{option?.allow_suboption_quantity && state?.selected && (
-					<>
-						<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-							<OIcon
-								src={theme.images.general.minus}
-								width={16}
-								color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-							/>
-						</Checkbox>
-						<OText size={12} mLeft={5} mRight={5}>
-							{state.quantity}
-						</OText>
-						<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-							<OIcon
-								src={theme.images.general.plus}
-								width={16}
-								color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
-							/>
-						</Checkbox>
-					</>
-				)}
-			</QuantityControl>
-			<PositionControl>
-				{option?.with_half_option && state?.selected && (
-					<>
-						<Circle disabled={disabled} onPress={() => changePosition('left')}>
-							<OIcon
-								src={theme.images.general.half_l}
-								color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-								style={styles.inverse}
-							/>
-						</Circle>
-						<Circle disabled={disabled} onPress={() => changePosition('whole')}>
-							<OIcon
-								src={theme.images.general.half_f}
-								color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-							/>
-						</Circle>
-						<Circle disabled={disabled} onPress={() => changePosition('right')}>
-							<OIcon
-								src={theme.images.general.half_r}
-								color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-							/>
-						</Circle>
-					</>
-				)}
-			</PositionControl>
-			<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-				+ {parsePrice(price)}
-			</OText>
-		</Container>
+		</View>
 	)
 }
 

package/themes/single-business/src/components/LastOrder/index.tsx

@@ -91,7 +91,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ 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: 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)

package/themes/single-business/src/components/OrderDetails/index.tsx

@@ -284,6 +284,21 @@ 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: 23,
+        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+        slug: 'ORDER_DRIVER_ON_WAY',
+        percentage: 45,
+        image: theme.images.order.status8,
+      }
     ];
 
     const objectStatus = orderStatus.find((o) => o.key === status);

package/themes/single-business/src/components/OrdersOption/index.tsx

@@ -91,7 +91,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       { 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: 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)
@@ -228,7 +230,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     ...props,
     UIComponent: OrdersOptionUI,
     orderStatus: props.preOrders ? [13] : props.activeOrders
-      ? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21]
+      ? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21, 22, 23]
       : [1, 2, 5, 6, 10, 11, 12, 16, 17],
     useDefualtSessionManager: true,
     paginationSettings: {

package/themes/single-business/src/utils/index.tsx

@@ -216,6 +216,10 @@ export const getOrderStatus = (status: number) => {
       return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS'
     case 21:
       return 'ORDER_CUSTOMER_ARRIVED_BUSINESS'
+    case 22:
+      return 'ORDER_LOOKING_FOR_DRIVER'
+    case 23:
+      return 'ORDER_DRIVER_ON_WAY'
     default:
       return status
   }
@@ -245,7 +249,9 @@ export const getTextOrderStatus = (s: string, t: any) => {
     { 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: 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)

package/themes/uber-eats/src/components/OrderDetails/index.tsx

@@ -119,7 +119,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business'), slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', progress: 2 },
       { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer'), slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', progress: 2 },
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', progress: 2 },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', progress: 2 }
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', progress: 2 },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', progress: 2 },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', progress: 2 }
     ]
 
     const objectStatus = orderStatus.find((o) => o.key === status)

package/themes/uber-eats/src/components/OrdersOption/index.tsx

@@ -89,7 +89,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       { 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: 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)
@@ -208,7 +210,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     ...props,
     UIComponent: OrdersOptionUI,
     orderStatus: props.activeOrders
-      ? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21]
+      ? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23]
       : [1, 2, 5, 6, 10, 11, 12, 16, 17],
     useDefualtSessionManager: true,
     paginationSettings: {