ordering-ui-react-native 0.14.3 → 0.14.7

package/package.json

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

package/src/components/VerifyPhone/index.tsx

@@ -196,7 +196,7 @@ export const VerifyPhone = (props: any) => {
       <WrappCountdown>
         <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
           <OText
-            size={30}
+            size={26}
             color={timer === '00:00' ? theme.colors.error: theme.colors.success}
           >
             {timer}

package/src/components/VerifyPhone/styles.tsx

@@ -8,7 +8,7 @@ export const Container = styled.View`
 export const CountDownContainer = styled.View`
   background-color: ${(props: any) => `${props.color}4D`};
   border-radius: 30px;
-  padding: 5px 80px 0px;
+  padding: 5px 0px 0px;
   margin: 0 auto;
   display: flex;
   justify-content: center;

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

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useCallback } from 'react'
-import { View, TouchableOpacity, StyleSheet, TextStyle, ScrollView, I18nManager, Platform } from 'react-native'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
+import { View, TouchableOpacity, StyleSheet, TextStyle, ScrollView, I18nManager, Platform, KeyboardAvoidingView, Keyboard } from 'react-native'
 import {
   BusinessAndProductList,
   useLanguage,
@@ -36,7 +36,7 @@ import { Cart } from '../Cart'
 import { OrderSummary } from '../OrderSummary'
 import NavBar from '../NavBar'
 import SocialShareFav from '../SocialShare'
-
+import { SafeAreaContainer } from '../../layouts/SafeAreaContainer'
 const PIXELS_TO_SCROLL = 1000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
@@ -112,6 +112,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [categoriesLayout, setCategoriesLayout] = useState<any>({})
   const [productListLayout, setProductListLayout] = useState<any>(null)
   const [selectedCategoryId, setSelectedCategoryId] = useState<any>('cat_all')
+  const [isKeyboardOpen, setIsKeyBoardOpen] = useState(false)
+  const cartRef = useRef<any>()
 
   const scrollViewRef = useRef<any>(null)
 
@@ -187,6 +189,21 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     setCategoryClicked(false);
   }, []);
 
+  useEffect(() => {
+		Keyboard.addListener('keyboardDidShow', () => {
+        setIsKeyBoardOpen(true)
+		})
+
+    Keyboard.addListener('keyboardDidHide', () => [
+      setIsKeyBoardOpen(false)
+    ])
+
+		return () => {
+			Keyboard.removeAllListeners('keyboardDidShow')
+      Keyboard.removeAllListeners('keyboardDidHide')
+		}
+	}, [])
+
   return (
     <>
       <Animated.View style={{ flex: 1, backgroundColor: theme.colors.white, position: 'absolute', width: '100%', top: top, zIndex: 1 }}>
@@ -358,18 +375,36 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         entireModal
         customClose
       >
-        <ScrollView stickyHeaderIndices={[0]} style={{ backgroundColor: 'white' }} contentContainerStyle={{ paddingBottom: 100 }}>
-          <NavBar title={t('CART', 'Cart')} onActionLeft={handleCloseCartModal} leftImg={theme.images.general.close} noBorder btnStyle={{ paddingLeft: 0 }} />
-          <OrderSummary
-            cart={currentCart}
-            isCartPending={currentCart?.status === 2}
-            hasUpSelling={true}
-            isFromCheckout
-            title={t('ITEMS', 'Items')}
-            paddingH={40}
-          />
-        </ScrollView>
-        <FloatingButton btnText={t('CHECKOUT', 'Checkout')} handleClick={() => handleUpsellingPage()} />
+        <SafeAreaContainer>
+          <KeyboardAvoidingView
+            style={{ flex: 1 }}
+            behavior={Platform.OS === 'ios' ? 'height' : 'padding'}
+            enabled={Platform.OS === 'ios'}
+          >
+            <ScrollView 
+              stickyHeaderIndices={[0]} 
+              style={{ backgroundColor: 'white' }} 
+              contentContainerStyle={{ paddingBottom: 100 }}
+              ref={(ref : any) => cartRef.current = ref}
+            >
+              <NavBar title={t('CART', 'Cart')} onActionLeft={handleCloseCartModal} leftImg={theme.images.general.close} noBorder btnStyle={{ paddingLeft: 0 }} />
+              <OrderSummary
+                cart={currentCart}
+                isCartPending={currentCart?.status === 2}
+                hasUpSelling={true}
+                isFromCheckout
+                title={t('ITEMS', 'Items')}
+                paddingH={40}
+                cartRef={cartRef}
+              />
+            </ScrollView>
+            <FloatingButton 
+              style={{bottom: isKeyboardOpen && Platform.OS === 'ios' ? 30 : 0}}
+              btnText={t('CHECKOUT', 'Checkout')} 
+              handleClick={() => handleUpsellingPage()} 
+            />
+          </KeyboardAvoidingView>
+        </SafeAreaContainer>
       </OModal>
     </>
   )

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

@@ -19,7 +19,8 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
     btnText,
     handleButtonClick,
     disabled,
-    isSecondaryBtn
+    isSecondaryBtn,
+    style
   } = props
 
   const theme = useTheme();
@@ -39,7 +40,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
   const { bottom } = useSafeAreaInsets();
 
   return (
-    <Container isIos={Platform.OS === 'ios'} style={{ paddingBottom: bottom + 10 }}>
+    <Container isIos={Platform.OS === 'ios'} style={{ ...style, paddingBottom: bottom + 10 }}>
       <Button
         style={[isSecondaryBtn ? styles.secodaryBtn : styles.primaryBtn]}
         onPress={handleButtonClick}

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

@@ -272,7 +272,8 @@ const MessagesUI = (props: MessagesParams) => {
       {...props}
       containerStyle={{
         padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
-        flexDirection: 'column-reverse'
+        flexDirection: 'column-reverse',
+        marginBottom: Platform.OS === 'ios' && isKeyboardShow ? 500 : 0
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
       renderAccessory={() => renderAccessory()}

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

@@ -41,7 +41,8 @@ const OrderSummaryUI = (props: any) => {
     paddingH,
     isMini,
     commentState,
-    handleChangeComment
+    handleChangeComment,
+    cartRef
   } = props;
 
   const theme = useTheme();
@@ -256,6 +257,7 @@ const OrderSummaryUI = (props: any) => {
                         }}
                         multiline
                         inputStyle={{color: theme.colors.textPrimary}}
+                        onFocus={() => cartRef?.current?.scrollToEnd?.()}
                       />
                       {commentState?.loading && (
                         <View style={{ position: 'absolute', right: 20 }}>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import {
 	ProductForm as ProductOptions,
 	useSession,
@@ -8,7 +8,7 @@ import {
 } from 'ordering-components/native'
 import { ProductIngredient } from '../ProductIngredient'
 import { ProductOption } from '../ProductOption'
-import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform, KeyboardAvoidingView } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform, KeyboardAvoidingView, Keyboard } from 'react-native'
 import {
 	ProductHeader,
 	WrapHeader,
@@ -107,9 +107,9 @@ export const ProductOptionsUI = (props: any) => {
 	const [orderState] = useOrder()
 	const [{ auth }] = useSession()
 	const { product, loading, error } = productObject
-
 	const { bottom } = useSafeAreaInsets();
-
+	const [commentY, setCommentY] = useState(0)
+	const productFormRef = useRef<any>()
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white
 		if (errors[`id:${id}`]) {
@@ -136,13 +136,25 @@ export const ProductOptionsUI = (props: any) => {
 
 	const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
 
+	useEffect(() => {
+		Keyboard.addListener('keyboardDidShow', () => {
+			if (commentY > 100) {
+				productFormRef?.current?.scrollTo?.({ x: 0, y: commentY + 300, animated: true })
+			}
+		})
+
+		return () => {
+			Keyboard.removeAllListeners('keyboardDidShow')
+		}
+	}, [productFormRef?.current, commentY])
+
 	return (
 		<KeyboardAvoidingView
 			style={{ flex: 1 }}
 			behavior={Platform.OS ? 'padding' : 'height'}
 			enabled={Platform.OS === 'ios'}
 		>
-			<ScrollView style={styles.mainContainer}>
+			<ScrollView style={styles.mainContainer} ref={(ref) => productFormRef.current = ref}>
 				{!error && (
 					<View style={{ paddingBottom: 80 }}>
 						<WrapHeader>
@@ -275,7 +287,7 @@ export const ProductOptionsUI = (props: any) => {
 											</React.Fragment>
 										)
 									}))}
-									<ProductComment>
+									<ProductComment onLayout={(e: any) => setCommentY(e.nativeEvent.layout.y + e.nativeEvent.layout.height)}>
 										<SectionTitle>
 											<OText style={theme.labels.middle as TextStyle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
 										</SectionTitle>

package/themes/doordash/src/components/shared/OInput.tsx

@@ -99,6 +99,7 @@ const OInput = (props: Props): React.ReactElement => {
         returnKeyType={props.returnKeyType}
         onSubmitEditing={props.onSubmitEditing}
         blurOnSubmit={props.blurOnSubmit}
+        onFocus={props.onFocus}
         ref={props.forwardRef}
         style={{padding: 0, ...props.inputStyle}}
       />

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

@@ -365,6 +365,7 @@ export interface FloatingButtonParams {
   btnLeftValueShow?: boolean;
   btnRightValueShow?: boolean;
   handleClick?: any;
+  style?: ViewStyle
 }
 export interface MomentOptionParams {
   navigation: any;

package/themes/original/index.tsx

@@ -9,6 +9,7 @@ import { AppleLogin } from './src/components/AppleLogin';
 import { BusinessesListing } from './src/components/BusinessesListing';
 import { BusinessProductsListing } from './src/components/BusinessProductsListing';
 import { CartContent } from './src/components/CartContent';
+import { BusinessCart } from './src/components/BusinessCart';
 import { Checkout } from './src/components/Checkout';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
 import { MomentOption } from './src/components/MomentOption';
@@ -66,6 +67,7 @@ export {
 	BusinessesListing,
 	BusinessProductsListing,
 	CartContent,
+  BusinessCart,
 	Checkout,
 	ForgotPasswordForm,
 	MomentOption,
@@ -110,4 +112,4 @@ export {
 	_setStoreData,
 	_removeStoreData,
 	_clearStoreData
-}
+}

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

@@ -0,0 +1,182 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View, ActivityIndicator } from 'react-native';
+import {
+  useUtils,
+  useLanguage,
+  useOrder
+} from 'ordering-components/native'
+
+import { useTheme } from 'styled-components/native';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { OIcon, OText } from '../shared';
+import { convertHoursToMinutes } from '../../utils';
+
+import {
+  Card,
+  BusinessContent,
+  BusinessInfo,
+  BusinessActions,
+  Metadata,
+  Reviews,
+  BtnWrapper
+} from './styles'
+
+export const BusinessCart = (props: any) => {
+  const {
+    business,
+    isLoading,
+    isDisabled,
+    isSkeleton,
+    handleCartStoreClick
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme();
+  const [orderState] = useOrder()
+  const [{ parsePrice, parseDistance, parseNumber }] = useUtils();
+
+  const styles = StyleSheet.create({
+    starIcon: {
+      marginHorizontal: 2,
+      marginTop: -5,
+    },
+    bullet: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+    },
+  });
+
+  return (
+    <Card>
+      <BusinessContent>
+        <BusinessInfo>
+          {business?.name && (
+            <OText
+              size={12}
+              weight={'500'}>
+              {business?.name}
+            </OText>
+          )}
+          {isSkeleton && (
+            <Placeholder
+              Animation={Fade}
+              style={{ marginBottom: 5 }}
+            >
+              <PlaceholderLine
+                height={10}
+                width={40}
+                style={{ marginBottom: 5 }}
+              />
+            </Placeholder>
+          )}
+          {!!business?.address && (
+            <OText
+              size={10}
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{ marginBottom: 5 }}
+            >
+              {business?.address}
+            </OText>
+          )}
+          {isSkeleton && (
+            <Placeholder
+              Animation={Fade}
+              style={{ marginBottom: 5 }}
+            >
+              <PlaceholderLine
+                height={10}
+                width={80}
+                style={{ marginBottom: 5 }}
+              />
+            </Placeholder>
+          )}
+          <Metadata>
+            {!isSkeleton ? (
+              <View style={styles.bullet}>
+                <OText size={10} color={theme.colors.textSecondary}>
+                  {`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(business?.delivery_price) + ' \u2022 '}`}
+                </OText>
+                <OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+                  orderState?.options?.type === 1
+                    ? business?.delivery_time
+                    : business?.pickup_time,
+                )} \u2022 `}</OText>
+                <OText size={10} color={theme.colors.textSecondary}>{parseDistance(business?.distance)}</OText>
+              </View>
+            ) : (
+              <Placeholder
+                Animation={Fade}
+                style={{ marginBottom: 5 }}
+              >
+                <PlaceholderLine
+                  height={10}
+                  width={60}
+                  style={{ marginBottom: 5 }}
+                />
+              </Placeholder>
+            )}
+          </Metadata>
+        </BusinessInfo>
+        <BusinessActions>
+          {business?.reviews?.total > 0 && (
+            <Reviews>
+              <OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+              <OText size={10} style={{ lineHeight: 15 }}>
+                {parseNumber(business?.reviews?.total ?? 1, { separator: '.' })}
+              </OText>
+            </Reviews>
+          )}
+          <BtnWrapper>
+          {handleCartStoreClick && (
+            <TouchableOpacity
+              activeOpacity={1}
+              disabled={isDisabled}
+              onPress={() => handleCartStoreClick && handleCartStoreClick(business?.id)}
+              style={{
+                backgroundColor: isDisabled ? theme.colors.disabled : theme.colors.white,
+                borderColor: isDisabled ? theme.colors.disabled : theme.colors.primary,
+                justifyContent: 'center',
+                position: 'relative',
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingRight: 10,
+                paddingLeft: 10,
+                borderRadius: 7.6,
+                borderWidth: 1,
+                height: 30,
+              }}
+            >
+              <OText
+                style={{
+                  color: isDisabled ? theme.colors.white : theme.colors.primary,
+                  fontSize: 12,
+                }}
+              >
+                {isLoading ? (
+                  <ActivityIndicator size="small" color={theme.colors.primary} />
+                ) : (
+                  t('SELECT', 'Select')
+                )}
+              </OText>
+            </TouchableOpacity>
+          )}
+          {isSkeleton && (
+            <Placeholder
+              Animation={Fade}
+              style={{ marginBottom: 5 }}
+            >
+              <PlaceholderLine
+                height={30}
+                width={80}
+                style={{ marginBottom: 5 }}
+              />
+            </Placeholder>
+          )}
+          </BtnWrapper>
+        </BusinessActions>
+      </BusinessContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,46 @@
+import styled from 'styled-components/native';
+
+export const Card = styled.View`
+  margin-bottom: 20px;
+  border-radius: 7.6px;
+  width: 100%;
+  position: relative;
+`
+
+export const BusinessContent = styled.View`
+  border-radius: 7.6px;
+  overflow: visible;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const BusinessInfo = styled.View`
+  width: 70%;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+export const BusinessActions = styled.View`
+  width: 30%;
+  flex-direction: column;
+  align-items: flex-end;
+`
+
+export const Metadata = styled.View`
+  flex-direction: row;
+`;
+
+export const Reviews = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: 5px;
+`
+
+export const BtnWrapper = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  `

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

@@ -84,6 +84,23 @@ export const BusinessItemAccordion = (props: any) => {
 									<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
 								</OAlert>
 							)}
+              {props.handleChangeStore && (
+                <>
+                  <OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+                  <TouchableOpacity
+                    onPress={props.handleChangeStore}
+                  >
+                    <OText
+                      size={12}
+                      lineHeight={18}
+                      color={theme.colors.textSecondary}
+                      style={{ textDecorationLine: 'underline' }}
+                    >
+                      {t('CHANGE_STORE', 'Change store')}
+                    </OText>
+                  </TouchableOpacity>
+                </>
+              )}
 						</View>
 					</BIContentInfo>
 				</BIInfo>

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

@@ -277,7 +277,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				</OrderProgressWrapper>
 			)}
-			{featuredBusiness && featuredBusiness.length > 0 && (
+			{!props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 				<FeaturedWrapper>
 					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
 					<ScrollView
@@ -306,7 +306,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</FeaturedWrapper>
 			)}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+      {!props.franchiseId && (
+        <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+      )}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
 				<BusinessTypeFilter

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

@@ -23,6 +23,7 @@ import { verifyDecimals } from '../../utils';
 import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
+import { CartStoresListing } from '../CartStoresListing';
 
 const CartUI = (props: any) => {
   const {
@@ -51,12 +52,16 @@ const CartUI = (props: any) => {
   const [openProduct, setModalIsOpen] = useState(false)
   const [curProduct, setCurProduct] = useState<any>(null)
   const [openUpselling, setOpenUpselling] = useState(false)
+  const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
 
+  const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
+  const businessId = business?.business_id ?? null
+
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
     : parseDate(orderState?.option?.moment, { outputFormat: 'YYYY-MM-DD HH:mm' })
@@ -116,6 +121,7 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
+        handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any) => (
           <ProductItemAccordion
@@ -217,7 +223,7 @@ const CartUI = (props: any) => {
               <OSTable>
                 <OSCoupon>
                   <CouponControl
-                    businessId={cart.business_id}
+                    businessId={businessId}
                     price={cart.total}
                   />
                 </OSCoupon>
@@ -299,20 +305,31 @@ const CartUI = (props: any) => {
           isCartProduct
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={cart?.business_id}
+          businessId={businessId}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}
           onClose={() => setModalIsOpen(false)}
         />
+      </OModal>
 
+      <OModal
+        open={openChangeStore && props.isFranchiseApp}
+        entireModal
+        customClose
+        onClose={() => setOpenChangeStore(false)}
+      >
+        <CartStoresListing
+          cartuuid={cart?.uuid}
+          onClose={() => setOpenChangeStore(false)}
+        />
       </OModal>
 
       {openUpselling && (
         <UpsellingProducts
           handleUpsellingPage={handleUpsellingPage}
           openUpselling={openUpselling}
-          businessId={cart?.business_id}
+          businessId={businessId}
           business={cart?.business}
           cartProducts={cart?.products}
           canOpenUpselling={canOpenUpselling}

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

@@ -25,12 +25,14 @@ export const CartContent = (props: any) => {
 					<OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
 						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
 					</OText>
-					{carts.map((cart: any) => (
-						<CCList key={cart.uuid} style={{ overflow: 'visible' }}>
+					{carts.map((cart: any, i: number) => (
+						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (
 								<>
 									<Cart
+                    isFranchiseApp={props.isFranchiseApp}
 										cart={cart}
+                    cartuuid={cart.uuid}
 										onNavigationRedirect={props.onNavigationRedirect}
 										isCartsLoading={isCartsLoading}
 										setIsCartsLoading={setIsCartsLoading}

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { useTheme } from 'styled-components/native';
+import {
+  CartStoresListing as StoresListingController,
+  useOrder,
+  useLanguage
+} from 'ordering-components/native'
+
+import { NotFoundSource } from '../NotFoundSource'
+import { BusinessCart } from '../BusinessCart'
+import { OIcon } from '../shared';
+
+import {
+  Container,
+  ItemListing,
+  TopHeader,
+  HeaderItem
+} from './styles';
+
+const CartStoresListingUI = (props: any) => {
+  const {
+    businessIdSelect,
+    storesState,
+    changeStoreState,
+    handleCartStoreChange,
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme();
+  const [orderState] = useOrder()
+  const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
+  const businessId = business?.business_id ?? null
+
+  return(
+    <>
+      <TopHeader>
+        <HeaderItem
+          onPress={props.onClose}>
+          <OIcon src={theme.images.general.close} width={16} />
+        </HeaderItem>
+      </TopHeader>
+      <Container>
+        {!storesState?.loading && !storesState?.error && storesState?.result && (
+          <>
+            {storesState?.result?.length > 0 ? (
+              <ItemListing
+                horizontal={false}
+              >
+                {storesState?.result.map((store: any) => (
+                  <BusinessCart
+                    key={store.id}
+                    business={store}
+                    isLoading={changeStoreState.loading && businessIdSelect === store.id}
+                    isDisabled={(changeStoreState?.result?.business_id ?? businessId) === store.id}
+                    handleCartStoreClick={handleCartStoreChange}
+                  />
+                ))}
+              </ItemListing>
+            ) : (
+              <NotFoundSource
+                content={t('NOT_FOUND_CART_STORES', 'No businesses to show at this time.')}
+              />
+            )}
+          </>
+        )}
+
+        {storesState?.loading && (
+          <ItemListing>
+            {[...Array(8).keys()].map(i => (
+              <BusinessCart
+                key={i}
+                business={{}}
+                isSkeleton
+              />
+            ))}
+          </ItemListing>
+        )}
+
+        {!storesState?.loading && storesState?.error && (
+          <NotFoundSource
+            content={t('ERROR_NOT_FOUND_CART_STORES', 'Sorry, an error has occurred')}
+          />
+        )}
+      </Container>
+    </>
+  )
+}
+
+export const CartStoresListing = (props: any) => {
+  const storeProps = {
+    ...props,
+    UIComponent: CartStoresListingUI
+  }
+
+  return (
+    <StoresListingController {...storeProps} />
+  )
+}

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  width: 100%;
+`
+
+export const ItemListing = styled.ScrollView`
+  padding: 0 40px;
+  margin: 0 0 140px;
+`
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  padding: 0 40px;
+`
+
+export const HeaderItem = styled.TouchableOpacity`
+  overflow: hidden;
+  background-color: ${(props: any) => props.theme.colors.clear};
+  width: 35px;
+  margin: 18px 0;
+`

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

@@ -16,7 +16,7 @@ import {
 	ToastType,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OText, OIcon } from '../shared';
+import { OText, OIcon, OModal } from '../shared';
 
 import { AddressDetails } from '../AddressDetails';
 import { PaymentOptions } from '../PaymentOptions';
@@ -46,6 +46,7 @@ import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OrderSummary } from '../OrderSummary';
 import { getTypesText } from '../../utils';
+import { CartStoresListing } from '../CartStoresListing';
 
 const mapConfigs = {
 	mapZoom: 16,
@@ -71,6 +72,7 @@ const CheckoutUI = (props: any) => {
 		errors,
 		placing,
 		cartState,
+    cartUuid,
 		businessDetails,
 		paymethodSelected,
 		handlePaymethodChange,
@@ -120,6 +122,7 @@ const CheckoutUI = (props: any) => {
 	const [userErrors, setUserErrors] = useState<any>([]);
 	const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
+  const [openChangeStore, setOpenChangeStore] = useState(false)
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -433,7 +436,7 @@ const CheckoutUI = (props: any) => {
 									location={businessDetails?.business?.location}
 									businessLogo={businessDetails?.business?.logo}
 									isCartPending={cart?.status === 2}
-									businessId={cart?.business_id}
+									uuid={cartUuid}
 									apiKey={configs?.google_maps_api_key?.value}
 									mapConfigs={mapConfigs}
 								/>
@@ -456,6 +459,7 @@ const CheckoutUI = (props: any) => {
 										{t('DRIVER_TIPS', 'Driver Tips')}
 									</OText>
 									<DriverTips
+                    uuid={cartUuid}
 										businessId={cart?.business_id}
 										driverTipsOptions={driverTipsOptions}
 										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
@@ -513,6 +517,21 @@ const CheckoutUI = (props: any) => {
 										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
 											{t('ORDER_SUMMARY', 'Order Summary')}
 										</OText>
+                    {props.isFranchiseApp && (
+                      <TouchableOpacity
+                        onPress={() => setOpenChangeStore(true)}
+                        style={{alignSelf: 'flex-start'}}
+                      >
+                        <OText
+                          size={12}
+                          lineHeight={18}
+                          color={theme.colors.textSecondary}
+                          style={{ textDecorationLine: 'underline' }}
+                        >
+                          {t('CHANGE_STORE', 'Change store')}
+                        </OText>
+                      </TouchableOpacity>
+                    )}
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
@@ -555,6 +574,17 @@ const CheckoutUI = (props: any) => {
 							</ChErrors>
 						</ChSection>
 					)}
+          <OModal
+            open={openChangeStore && props.isFranchiseApp}
+            entireModal
+            customClose
+            onClose={() => setOpenChangeStore(false)}
+          >
+            <CartStoresListing
+              cartuuid={cart?.uuid}
+              onClose={() => setOpenChangeStore(false)}
+            />
+          </OModal>
 				</ChContainer>
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
@@ -732,7 +762,7 @@ export const Checkout = (props: any) => {
 		...props,
 		UIComponent: CheckoutUI,
 		cartState,
-		businessId: cartState.cart?.business_id
+    [props.isFranchiseApp ? 'uuid' : 'businessId']: props.isFranchiseApp ? cartUuid : cartState.cart?.business_id
 	}
 
 	return (

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

@@ -128,6 +128,7 @@ export interface BusinessesListingParams {
 	images?: any;
 	businessTypes?: any;
 	defaultBusinessType?: any;
+	franchiseId?: any;
 }
 export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
@@ -472,4 +473,4 @@ export interface HelpAccountAndPaymentParams {
   
 export interface MessageListingParams {
 	navigation: any;
-}
+}