ordering-ui-react-native 0.17.66 → 0.17.67

package/package.json

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

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -333,7 +333,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
-                {order?.delivery_option?.name}
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
             {!!order?.comment && (
@@ -378,7 +378,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency})}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency })}
           </OText>
         </Table>
         {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -391,7 +391,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             ) : (
               <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency})}</OText>
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency })}</OText>
           </Table>
         )}
         {
@@ -399,13 +399,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -413,9 +413,9 @@ export const OrderContentComponent = (props: OrderContent) => {
           <Table>
             <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
             {order?.tax_type === 1 ? (
-              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency })}</OText>
             ) : (
-              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency })}</OText>
             )}
           </Table>
         )}
@@ -425,7 +425,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
             <OText mBottom={4}>
-              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency})}
+              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency })}
             </OText>
           </Table>
         )}
@@ -436,7 +436,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 {t('SERVICE_FEE', 'Service fee')}
                 {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
-              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency })}</OText>
             </Table>
           )
         }
@@ -445,11 +445,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={tax.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -458,11 +458,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={fee.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency})} + `}{fee.percentage}%){' '}
+                  {t(fee?.name?.toUpperCase()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency })} + `}{fee.percentage}%){' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -471,13 +471,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -489,7 +489,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               </OText>
 
               <OText mBottom={4}>
-                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency})}
+                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}
               </OText>
             </Table>
           )
@@ -499,13 +499,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -520,7 +520,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency})}</OText>
+            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</OText>
           </Table>
         )}
 
@@ -534,7 +534,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency})}
+              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency })}
             </OText>
           </Table>
         </Total>
@@ -568,7 +568,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     <OText>
                       {event?.wallet_event
                         ? walletName[event?.wallet_event?.wallet?.type]?.name
-                        : event?.paymethod?.name}
+                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
                     </OText>
                     {event?.data?.charge_id && (
                       <OText>
@@ -577,7 +577,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount, { currency: order?.currency})}
+                    -{parsePrice(event.amount, { currency: order?.currency })}
                   </OText>
                 </View>
               ))}

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -271,7 +271,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             {order?.delivery_option && (
               <OText size={13}>
                 <OText size={13} weight='bold'>{`${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: `}</OText>
-                {order?.delivery_option?.name}
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
             {order?.payment_events?.length > 0 && (
@@ -286,8 +286,8 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
                         : walletName[event?.wallet_event?.wallet?.type]?.name
                       : idx < order?.payment_events?.length - 1
-                        ? `${event?.paymethod?.name} - `
-                        : event?.paymethod?.name
+                        ? `${t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)} - `
+                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
               </View>

package/themes/original/index.tsx

@@ -68,6 +68,7 @@ import { SingleProductCard } from './src/components/SingleProductCard';
 import { SingleOrderCard } from './src/components/SingleOrderCard';
 import { UpsellingRedirect } from './src/components/BusinessProductsListing/UpsellingRedirect';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
+import { ScheduleAccordion } from './src/components/ScheduleAccordion';
 import { BusinessItemAccordion } from './src/components/BusinessItemAccordion';
 import { CouponControl } from './src/components/CouponControl';
 import { TaxInformation } from './src/components/TaxInformation';
@@ -231,6 +232,7 @@ export {
 	SingleOrderCard,
 	UpsellingRedirect,
 	ProductItemAccordion,
+	ScheduleAccordion,
 	BusinessItemAccordion,
 	CouponControl,
 	TaxInformation,

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

@@ -25,7 +25,8 @@ import {
 	BusinessLogo,
 	Reviews,
 	RibbonBox,
-	ReviewAndFavorite
+	ReviewAndFavorite,
+	OfferBox
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
@@ -50,7 +51,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessPickupTime,
 		businessDistance,
 		handleFavoriteBusiness,
-		enableIntersection
+		enableIntersection,
+		getBusinessOffer
 	} = props;
 
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
@@ -201,6 +203,18 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								<FontAwesomeIcon name="crown" size={26} color="gold" />
 							</View>
 						)}
+						{(!isCustomLayout) && (
+							getBusinessOffer((business?.offers)) &&
+							<OfferBox>
+								<OText
+									size={10}
+									weight={'400'}
+									numberOfLines={2}
+									ellipsizeMode='tail'
+									lineHeight={13}
+								>{getBusinessOffer((business?.offers)) || parsePrice(0)}</OText>
+							</OfferBox>
+						)}
 						<BusinessState>
 							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 								<View style={styles.businessStateView}>

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

@@ -39,7 +39,7 @@ export const BusinessState = styled.View`
 `
 
 export const BusinessLogo = styled.View`
-   
+
 `
 
 export const ReviewAndFavorite = styled.View`
@@ -73,3 +73,15 @@ export const RibbonBox = styled.View`
     border-radius: 50px;
   `}
 `
+
+export const OfferBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 20px;
+  right: 10px;
+  border-radius: 50px;
+  color: ${(props: any) => props.theme.colors.textThird};
+  background: ${(props: any) => props.theme.colors.inputBorderColor};
+  padding: 3px 8px;
+  max-width: 180px;
+`

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

@@ -16,26 +16,19 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
 import { formatUrlVideo } from '../../utils'
+import { ScheduleAccordion } from '../ScheduleAccordion';
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
-	const daysOfWeek = [
-		t('SUNDAY_ABBREVIATION', 'Sun'),
-		t('MONDAY_ABBREVIATION', 'Mon'),
-		t('TUESDAY_ABBREVIATION', 'Tues'),
-		t('WEDNESDAY_ABBREVIATION', 'Wed'),
-		t('THURSDAY_ABBREVIATION', 'Thur'),
-		t('FRIDAY_ABBREVIATION', 'Fri'),
-		t('SATURDAY_ABBREVIATION', 'Sat'),
-	];
+
 	const scheduleFormatted = ({
 		hour,
 		minute,
@@ -112,25 +105,11 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 						<WrapScheduleBlock>
 							{businessSchedule.map((schedule: any, i: number) => (
 								<ScheduleBlock key={i}>
-									<OText
-										lineHeight={21}
-										mBottom={16}
-										size={14}
-										weight={Platform.OS === 'android' ? 'bold' : '600'}
-										style={{ flexBasis: '20%' }}>
-										{daysOfWeek[i].toUpperCase()}
-									</OText>
-									{schedule.enabled ? (
-										<OText mBottom={16}>
-											{scheduleFormatted(schedule.lapses[0].open) +
-												' - ' +
-												scheduleFormatted(schedule.lapses[0].close)}
-										</OText>
-									) : (
-										<OText color={theme.colors.red} mBottom={16}>
-											{t('CLOSED', 'Closed')}
-										</OText>
-									)}
+									<ScheduleAccordion
+										weekIndex={i}
+										scheduleFormatted={scheduleFormatted}
+										schedule={schedule}
+									/>
 								</ScheduleBlock>
 							))}
 						</WrapScheduleBlock>
@@ -152,10 +131,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 											style={{ width: 210, height: 127, borderRadius: 7.6 }}
 											javaScriptEnabled={true}
 											domStorageEnabled={true}
-											source={{ 
+											source={{
 												html: `
 													<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
-												`, 
+												`,
 											}}
 											mediaPlaybackRequiresUserAction={true}
 										/>

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

@@ -530,6 +530,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
 							btnRightValue={parsePrice(currentCart?.total)}
 							disabled={subtotalWithTaxes < currentCart?.minimum || openUpselling}
+							hideButton={isCheckoutMultiBusinessEnabled}
 							handleClick={() => setOpenUpselling(true)}
 						/>
 					</View>

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

@@ -104,9 +104,38 @@ const CartUI = (props: any) => {
   const handleUpsellingPage = () => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    if (isCheckoutMultiBusinessEnabled && openCarts.length > 1) {
+    const cartSelectedHasGroup = cart?.group?.uuid
+    const cartFilterValidation = (cart : any) => cart?.valid && cart?.status !== 2
+    const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter((_cart : any) => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
+    if (cartsGroupLength > 1 && isCheckoutMultiBusinessEnabled) {
       props.onNavigationRedirect('CheckoutNavigator', {
-        screen: 'MultiCheckout'
+        screen: 'MultiCheckout',
+        cartUuid: cart?.group?.uuid
+      })
+      return
+    }
+    const cartGroupsCount : any = {}
+    Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach((_cart : any) => {
+      if (cartGroupsCount[_cart?.group?.uuid]) {
+        cartGroupsCount[_cart?.group?.uuid] += 1
+      } else {
+        cartGroupsCount[_cart?.group?.uuid] = 1
+      }
+    })
+    let groupForTheCart
+    const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
+    const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
+    const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
+    if (indexes?.length > 1) {
+      groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
+    } else {
+      groupForTheCart = indexes[0]
+    }
+    if (isCheckoutMultiBusinessEnabled && openCarts.length > 1 && groupForTheCart) {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'MultiCart',
+        cartUuid: cart.uuid, 
+        cartGroup: groupForTheCart === 'undefined' ? 'create' : groupForTheCart
       })
     } else {
       props.onNavigationRedirect('CheckoutNavigator', {

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

@@ -22,7 +22,8 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 		disabled,
 		isSecondaryBtn,
 		handleEmpty,
-		iosBottom
+		iosBottom,
+		hideButton
 	} = props;
 
 	const [, t] = useLanguage();
@@ -77,16 +78,17 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 					</View>
 				)}
 			</View>
-			<Button
-				style={[isSecondaryBtn ? styles.secondaryBtn : styles.primaryBtn]}
-				onPress={handleButtonClick}
-				disabled={disabled}
-			>
-				<OText color={isSecondaryBtn ? theme.colors.textSecondary : theme.colors.white} lineHeight={24} size={14} weight={'400'}>
-					{btnText}
-				</OText>
-			</Button>
-
+			{!hideButton && (
+				<Button
+					style={[isSecondaryBtn ? styles.secondaryBtn : styles.primaryBtn]}
+					onPress={handleButtonClick}
+					disabled={disabled}
+				>
+					<OText color={isSecondaryBtn ? theme.colors.textSecondary : theme.colors.white} lineHeight={24} size={14} weight={'400'}>
+						{btnText}
+					</OText>
+				</Button>
+			)}
 		</Container>
 	);
 };

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import Clipboard from '@react-native-clipboard/clipboard';
 import { Messages as MessagesController, useSession, useUtils, useLanguage, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { launchImageLibrary } from 'react-native-image-picker'
@@ -397,6 +398,19 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 	}
 
+	const onLongPress = (context: any, message: any) => {
+		const options = [
+			t('COPY_TEXT', 'Copy text'),
+			t('CANCEL', 'Cancel'),
+		];
+		const cancelButtonIndex = options.length - 1;
+		context.actionSheet().showActionSheetWithOptions({
+			options,
+			cancelButtonIndex
+		}, (buttonIndex: any) => buttonIndex === 0 && Clipboard.setString(message.text)
+		);
+	}
+
 	return (
 		<View style={{ height: getViewHeight(), width: '100%', paddingTop: 12, backgroundColor: 'white' }}>
 			<Wrapper>
@@ -473,6 +487,7 @@ const MessagesUI = (props: MessagesParams) => {
 					onSend={onSubmit}
 					onInputTextChanged={onChangeMessage}
 					alignTop
+					onLongPress={(context: any, message: any) => onLongPress(context, message)}
 					scrollToBottom
 					renderAvatarOnTop
 					renderUsernameOnMessage

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import { ChAddress, ChContainer, ChSection, ChUserDetails, DeliveryOptionsContainer } from '../Checkout/styles'
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
+import { Container } from '../../layouts/Container';
+import { View, StyleSheet } from 'react-native'
+import { useTheme } from 'styled-components/native';
+import { MultiCartCreate } from 'ordering-components/native'
+
+export const MultiCartUI = () => {
+    const theme = useTheme();
+
+    const styles = StyleSheet.create({
+        pagePadding: {
+            paddingHorizontal: 40
+        }
+    })
+
+    return (
+        <>
+            <Container noPadding>
+                <ChContainer style={styles.pagePadding}>
+                    <ChSection>
+                        <ChUserDetails>
+                            <Placeholder Animation={Fade}>
+                                <PlaceholderLine height={20} />
+                                <PlaceholderLine height={12} />
+                                <PlaceholderLine height={12} />
+                                <PlaceholderLine height={12} style={{ marginBottom: 20 }} />
+                            </Placeholder>
+                        </ChUserDetails>
+                        <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+                    </ChSection>
+                    <DeliveryOptionsContainer>
+                        <View style={{ height: 110 }}>
+                            <Placeholder Animation={Fade}>
+                                <PlaceholderLine height={20} />
+                                <PlaceholderLine height={40} />
+                            </Placeholder>
+                        </View>
+                    </DeliveryOptionsContainer>
+                    <ChSection>
+                        <ChAddress>
+                            <Placeholder Animation={Fade}>
+                                <PlaceholderLine height={20} style={{ marginBottom: 50 }} />
+                                <PlaceholderLine height={100} />
+                            </Placeholder>
+                        </ChAddress>
+                        <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+                    </ChSection>
+                </ChContainer>
+            </Container>
+
+        </>
+    )
+}
+
+export const MultiCart = (props : any) => {
+    const mulcartProps = {
+        ...props,
+        UIComponent: MultiCartUI
+    }
+    return <MultiCartCreate {...mulcartProps} />
+}

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

@@ -25,7 +25,6 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
     businessIds,
     paymethodsAndWallets,
     walletsState,
-    businessPaymethods,
     paymethodSelected,
     handleSelectPaymethod,
     handleSelectWallet,
@@ -77,24 +76,24 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const renderPaymethods = ({ item }: any) => {
     return (
       <TouchableOpacity
-        onPress={() => handleSelectPaymethod(item)}
+        onPress={() => handleSelectPaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
       >
         <PMItem
           key={item.id}
-          isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
+          isActive={paymethodSelected?.id === item.id}
         >
           <OIcon
             src={getPayIcon(item.paymethod?.gateway)}
             width={20}
             height={20}
-            color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
+            color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
           />
           <OText
             size={10}
             style={{ margin: 0, marginTop: 4 }}
-            color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
+            color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
           >
-            {t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
+            {t(item?.gateway.toUpperCase(), item?.name)}
           </OText>
         </PMItem>
       </TouchableOpacity>
@@ -124,7 +123,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         <FlatList
           horizontal
           showsHorizontalScrollIndicator={false}
-          data={businessPaymethods?.result?.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
+          data={paymethodsAndWallets.paymethods}
           renderItem={renderPaymethods}
           keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
         />

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

@@ -53,7 +53,8 @@ const MultiCheckoutUI = (props: any) => {
     paymethodSelected,
     handleSelectPaymethod,
     handleSelectWallet,
-    handlePaymethodDataChange
+    handlePaymethodDataChange,
+    cartUuid
   } = props
 
 	const theme = useTheme();
@@ -78,7 +79,7 @@ const MultiCheckoutUI = (props: any) => {
 	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
   const maximumCarts = 5
-  const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || openCarts.length > maximumCarts
+  const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || openCarts.length > maximumCarts || (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data)
   const walletCarts = (Object.values(carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
 
 	const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
@@ -225,6 +226,7 @@ const MultiCheckoutUI = (props: any) => {
               handleSelectPaymethod={handleSelectPaymethod}
               handleSelectWallet={handleSelectWallet}
               handlePaymethodDataChange={handlePaymethodDataChange}
+              cartUuid={cartUuid}
             />
             <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
           </ChSection>

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

@@ -19,6 +19,7 @@ import {
   OrdersSummary,
   BorderLine
 } from './styles'
+import { NotFoundSource } from '../NotFoundSource'
 
 export const MultiOrdersDetailsUI = (props: any) => {
   const {
@@ -248,6 +249,19 @@ export const MultiOrdersDetailsUI = (props: any) => {
           ))}
         </>
       )}
+      {!loading && (error || orders?.length === 0) && (
+        error?.includes('ERROR_ACCESS_EXPIRED') ? (
+          <NotFoundSource
+            content={t(error[0], 'Sorry, the order has expired.')}
+          />
+        ) : (
+          <NotFoundSource
+            content={t('NOT_FOUND_ORDER', theme?.defaultLanguages?.NOT_FOUND_ORDER || 'Sorry, we couldn\'t find the requested order.')}
+            btnTitle={t('ORDERS_REDIRECT', theme?.defaultLanguages?.ORDERS_REDIRECT || 'Go to Orders')}
+            onClickButton={navigation.navigate('BusinessList')}
+          />
+        )
+      )}
       <Divider />
     </OrdersDetailsContainer>
   )

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

@@ -60,12 +60,42 @@ 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 = []
+
+
+	useEffect(() => {
+		if (loading || error) return
+		const orders = _orders.map((order: any) => order?.cart_group_id
+			? _orders
+				.filter((_order : any) => _order?.cart_group_id === order?.cart_group_id)
+				?.reduce((orderCompleted : any, currentOrder : any) => ({
+					...orderCompleted,
+					total: orderCompleted.summary?.total + currentOrder?.summary?.total,
+					business: [orderCompleted.business, currentOrder.business].flat(),
+					business_id: [orderCompleted.business_id, currentOrder.business_id].flat(),
+					id: [orderCompleted.id, currentOrder.id].flat(),
+					review: orderCompleted.review && currentOrder.review,
+					user_review: orderCompleted.user_review && currentOrder.user_review,
+					products: [orderCompleted.products, currentOrder.products].flat()
+				}))
+			: order)
+			.filter((order: any) => {
+				const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
+				if (!isDuplicate) {
+					uniqueOrders.push(order?.cart_group_id)
+					return true
+				}
+				return false
+			})
+		setOrders(orders)
+	}, [JSON.stringify(_orders)])
 
 	const getOrderStatus = (s: string) => {
 		const status = parseInt(s)
@@ -219,7 +249,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						)}
 				</>
 			)}
-			{isBusiness && !!businessesSearchList && businesses?.loading &&  (
+			{isBusiness && !!businessesSearchList && businesses?.loading && (
 				<ScrollView horizontal>
 					<BusinessControllerSkeletons paginationProps={businessPaginationProps} />
 				</ScrollView>

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

@@ -11,7 +11,8 @@ import {
   ActionContainer,
   SkipButton,
   RatingBarContainer,
-  RatingTextContainer
+  RatingTextContainer,
+  MultiLogosContainer
 } from './styles'
 import { OButton, OIcon, OInput, OText } from '../shared'
 import { TouchableOpacity, StyleSheet, View, I18nManager } from 'react-native';
@@ -215,14 +216,30 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        <BusinessLogo>
-          <View style={styles.logoWrapper}>
-            <OIcon
-              url={order?.logo}
-              width={80}
-              height={80}
-            />
-          </View>
+        <BusinessLogo isMulti={order?.business?.length > 1}>
+          {typeof order?.logo === 'string' || !order?.logo ? (
+            <View style={styles.logoWrapper}>
+              <OIcon
+                url={order?.logo}
+                width={80}
+                height={80}
+              />
+            </View>
+          ) : (
+            <MultiLogosContainer>
+              {order?.logo?.map((logo : string, i : number) => (
+                <React.Fragment key={logo}>
+                  <View style={styles.logoWrapper}>
+                    <OIcon
+                      url={logo}
+                      width={80}
+                      height={80}
+                    />
+                  </View>
+                </React.Fragment>
+              ))}
+            </MultiLogosContainer>
+          )}
         </BusinessLogo>
         {order?.review ? (
           <View style={styles.reviewedStyle}>

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

@@ -42,3 +42,10 @@ export const RatingTextContainer = styled.View`
   justify-content: space-between;
   margin-top: 10px;
 `
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  width: 100%;
+`

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

@@ -8,7 +8,8 @@ import {
   FormReviews,
   ActionContainer,
   RatingStarContainer,
-  PlacedDate
+  PlacedDate,
+  MultiLogosContainer
 } from './styles'
 import { OButton, OIcon, OText } from '../shared'
 import { StyleSheet, View, I18nManager } from 'react-native';
@@ -79,13 +80,30 @@ export const ReviewTrigger = (props: any) => {
     <>
       <ReviewOrderContainer>
         <BusinessLogo>
-          <View style={styles.logoWrapper}>
-            <OIcon
-              url={order?.logo}
-              width={80}
-              height={80}
-            />
-          </View>
+          {typeof order?.logo === 'string' || !order?.logo ? (
+            <View style={styles.logoWrapper}>
+              <OIcon
+                url={order?.logo}
+                width={80}
+                height={80}
+              />
+            </View>
+          ) : (
+            <MultiLogosContainer>
+              {order?.logo?.map((logo : string, i : number) => (
+                <React.Fragment key={logo}>
+                  <View style={styles.logoWrapper}>
+                    <OIcon
+                      url={logo}
+                      width={80}
+                      height={80}
+                    />
+                  </View>
+                </React.Fragment>
+              ))}
+            </MultiLogosContainer>
+
+          )}
         </BusinessLogo>
         {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
         <View style={{ flex: 1, justifyContent: 'flex-end' }}>
@@ -115,4 +133,4 @@ export const ReviewTrigger = (props: any) => {
       </FloatingBottomContainer>
     </>
   )
-}
+}

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

@@ -31,4 +31,11 @@ export const RatingStarContainer = styled.View`
 `
 export const PlacedDate = styled.View`
   margin-top: 30px;
-`
+`
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  width: 100%;
+`

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { Platform, View } from 'react-native'
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+
+import {
+	Accordion,
+	AccordionSection,
+	DropdownWrapper,
+} from './styles'
+import { OIcon, OText } from '../shared';
+
+export const ScheduleAccordion = (props: any) => {
+
+	const {
+		scheduleFormatted,
+		schedule,
+		weekIndex
+	} = props
+
+	const [isActive, setActiveState] = useState(false)
+	const [, t] = useLanguage()
+	const theme = useTheme();
+
+	const daysOfWeek = [
+		t('DAY7', 'Sunday'),
+		t('DAY1', 'Monday'),
+		t('DAY2', 'Tuesday'),
+		t('DAY3', 'Wednesday'),
+		t('DAY4', 'Thursday'),
+		t('DAY5', 'Friday'),
+		t('DAY6', 'Saturday'),
+	];
+
+	return (
+		<AccordionSection>
+			<Accordion
+				onPress={() => setActiveState(!isActive)}
+				activeOpacity={1}
+			>
+				<DropdownWrapper>
+					<OText
+						mBottom={16}
+						mRight={8}
+						lineHeight={21}
+						size={14}
+						weight={Platform.OS === 'android' ? 'bold' : '600'}
+					>{daysOfWeek[weekIndex]}</OText>
+					<OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} />
+				</DropdownWrapper>
+				<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 20 }}>
+					{schedule?.lapses?.map((lapse: any) => (
+						schedule?.enabled ?
+							<OText mBottom={16}>
+								{scheduleFormatted(lapse.open) +
+									' - ' +
+									scheduleFormatted(lapse.close)}
+							</OText>
+							:
+							<OText color={theme.colors.red} mBottom={16}>
+								{t('CLOSED', 'Closed')}
+							</OText>
+					))}
+				</View>
+			</Accordion>
+		</AccordionSection>
+	)
+}

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components/native'
+
+export const AccordionSection = styled.View`
+  background: #FFF;
+`
+
+export const Accordion = styled.TouchableOpacity`
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+export const DropdownWrapper = styled.View`
+  flex-direction: row;
+`

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

@@ -19,7 +19,8 @@ import {
   ButtonWrapper,
   ContentFooter,
   UnreadMessageCounter,
-  Price
+  Price,
+  MultiLogosContainer
 } from './styles';
 import { LottieAnimation } from '../LottieAnimation';
 import { CardAnimation } from '../shared/CardAnimation';
@@ -61,6 +62,11 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       width: 64,
       height: 64
     },
+    minilogo: {
+      borderRadius: 8,
+      width: 40,
+      height: 40
+    },
     logoWrapper: {
       overflow: 'hidden',
       backgroundColor: 'white',
@@ -141,11 +147,12 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           order: {
             id: order?.id,
             business_id: order?.business_id,
-            logo: order?.business?.logo,
+            logo: order?.business?.length > 1 ? order?.business?.map?.((business : any) => business?.logo): order?.business?.logo,
             driver: order?.driver,
             products: order?.products,
             review: order?.review,
-            user_review: order?.user_review
+            user_review: order?.user_review,
+            business: order?.business
           },
         });
       return
@@ -158,13 +165,16 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       onNavigationRedirect('OrderDetails', { orderId: order?.uuid });
   };
 
-  const handleClickViewOrder = (uuid: string) => {
+  const handleClickViewOrder = (order: any) => {
     if (isMessageView) {
       handleClickOrder(order?.uuid)
       return
     }
-    onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { orderId: uuid });
+    if (order?.cart_group_id){
+      onNavigationRedirect?.('MultiOrdersDetails', { orderId: order?.cart_group_id });
+    } else {
+      onNavigationRedirect?.('OrderDetails', { orderId: order?.uuid });
+    }
   };
 
   const handleChangeFavorite = () => {
@@ -180,24 +190,49 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   return (
     <>
       <CardAnimation
-        onClick={() => handleClickViewOrder(order?.uuid)}
+        onClick={() => handleClickViewOrder(order)}
         style={[styles.container]}
       >
         <InnerContainer>
           {(!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
-            <Logo style={styles.logoWrapper}>
-              <OIcon
-                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                src={optimizeImage(!order.business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
-                style={styles.logo}
-              />
-            </Logo>
+            <>
+              {order?.business?.length > 1 ? (
+                <MultiLogosContainer>
+                  {order?.business?.map((business: any, i: number) => (
+                    <View key={business?.id}>
+                      {i > 1 ? (
+                        <>
+                          {console.log(order?.business?.length - 2)}
+                        <OText mRight={3}> + {order?.business?.length - 2}</OText>
+                        </>
+                      ) : (
+                        <Logo style={styles.logoWrapper} isMulti>
+                          <OIcon
+                            url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                            src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                            style={styles.minilogo}
+                          />
+                        </Logo>
+                      )}
+                    </View>
+                  ))}
+                </MultiLogosContainer>
+              ) : (
+                <Logo style={styles.logoWrapper}>
+                  <OIcon
+                    url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+                    src={optimizeImage(!order.business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                    style={styles.logo}
+                  />
+                </Logo>
+              )}
+            </>
           )}
           <CardInfoWrapper>
             <ContentHeader>
               <View style={{ flex: 1 }}>
                 <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-                  {order.business?.name}
+                  {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
                 </OText>
               </View>
               {!!!pastOrders && (
@@ -253,7 +288,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
             <ContentFooter>
               <View style={{ flex: 1 }}>
                 <View style={styles.infoText}>
-                  {!!!pastOrders && (
+                  {(!!!pastOrders || order?.business?.length > 1) && (
                     <>
                       <OText
                         size={10}
@@ -263,7 +298,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {t('ORDER_NO', 'Order No') + '.'}
+                        {order?.business?.length > 1 ? order?.business?.length : (t('ORDER_NO', 'Order No') + '.')}
                       </OText>
                       <OText
                         size={10}
@@ -272,7 +307,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order.id + ` \u2022 `}
+                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : order.id + ` \u2022 `}
                       </OText>
                     </>
                   )}
@@ -297,7 +332,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   {getOrderStatus(order.status)?.value}
                 </OText>
               </View>
-              {!isMessageView && (
+              {!isMessageView && !order?.business?.length && (
                 <LottieAnimation
                   type='favorite'
                   onClick={handleChangeFavorite}

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const InnerContainer = styled.View`
   flex-direction: row;
@@ -8,6 +8,9 @@ export const InnerContainer = styled.View`
 export const Logo = styled.View`
 	border-radius: 7.6px;
   margin-right: 12px;
+  ${({ isMulti } : any) => isMulti && css`
+      margin-right: 5px;
+    `}
 `
 
 export const CardInfoWrapper = styled.View`
@@ -45,3 +48,9 @@ export const Price = styled.View`
   margin-left: 10px;
   width: 30%;
 `
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+`

package/themes/original/src/types/index.tsx

@@ -222,6 +222,7 @@ export interface BusinessControllerParams {
 	handleUpdateBusinessList?: any;
 	enableIntersection?: boolean;
 	isCustomLayout?: boolean;
+	getBusinessOffer?: any;
 	handleCustomUpdate?: (businessId: number, changes: any) => {};
 }
 export interface BusinessProductsListingParams {
@@ -529,6 +530,7 @@ export interface FloatingButtonParams {
 	handleClick?: any;
 	handleEmpty?: any;
 	iosBottom?: number
+	hideButton?: boolean
 }
 export interface MomentOptionParams {
 	navigation: any;