ordering-ui-react-native 0.17.98-release → 0.17.99-release

package/package.json

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

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

@@ -64,7 +64,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     container: {
       height: windowHeight,
       paddingVertical: 30,
-      paddingHorizontal: 40
+      paddingHorizontal: 20
     },
     businessLogo: {
       backgroundColor: 'white',
@@ -319,11 +319,10 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   return (
     <>
-      <PreOrderContainer contentContainerStyle={{ paddingVertical: 32, paddingHorizontal: 40 }}>
+      <PreOrderContainer contentContainerStyle={{ paddingVertical: 32, paddingHorizontal: 20 }}>
         <TouchableOpacity onPress={() => goToBack && goToBack()} style={{ marginBottom: 12 }}>
           <IconAntDesign
             name='close'
-            color={theme.colors.textThird}
             size={24}
             style={{ marginLeft: -4 }}
           />

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

@@ -21,6 +21,10 @@ export const OrderTimeWrapper = styled.View`
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
   max-height: 160px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    max-height: 210px;
+    height: 210px;
+  `}
 `
 
 export const TimeContentWrapper = styled.View`
@@ -38,6 +42,16 @@ export const TimeItem = styled.View`
   justify-content: center;
   align-items: center;
   margin: 10px 0px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    background: #fff;
+    width: 100%;
+    min-width: 100%;
+    height: 50px;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-left: 10px;
+    margin: 0;
+  `}
   ${({ active }: any) => active && css`
     background: #F5F9FF;
   `}

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

@@ -94,7 +94,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			backgroundColor: theme.colors.white,
 			borderColor: theme.colors.backgroundGray,
 			borderRadius: 8,
-			marginHorizontal: 40,
+			marginHorizontal: 20,
 			minHeight: 45,
 			paddingVertical: 5,
 			paddingHorizontal: 20,

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import {
   Cart as CartController,
   useOrder,
@@ -26,6 +26,7 @@ import { CartStoresListing } from '../CartStoresListing';
 import { OAlert } from '../shared'
 import { PlaceSpot } from '../PlaceSpot'
 import { DriverTips } from '../DriverTips'
+import { MomentOption } from '../MomentOption'
 
 const CartUI = (props: any) => {
   const {
@@ -51,7 +52,11 @@ const CartUI = (props: any) => {
     preorderMaximumDays,
     preorderMinimumDays,
     cateringTypes,
-    isFromUpselling
+    isFromUpselling,
+    cartsOpened,
+    setCartsOpened,
+    changeActiveState,
+    isActive
   } = props
 
   const theme = useTheme();
@@ -61,13 +66,13 @@ const CartUI = (props: any) => {
   const [{ configs }] = useConfig();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
   const [validationFields] = useValidationFields()
-
+  const commentRef = useRef()
   const [openUpselling, setOpenUpselling] = useState(false)
   const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const [openPlaceModal, setOpenPlaceModal] = useState(false)
-
+  const [maxDate, setMaxDate] = useState<any>(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)) ?? {}
@@ -108,7 +113,7 @@ const CartUI = (props: any) => {
     }
   }
 
-  const handleUpsellingPage = (individualCart : any) => {
+  const handleUpsellingPage = (individualCart: any) => {
     const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
@@ -191,6 +196,19 @@ const CartUI = (props: any) => {
     return acc = acc
   }, cart?.subtotal)
 
+  useEffect(() => {
+    const limitDays = parseInt(preorderMaximumDays ?? configs?.max_days_preorder?.value, 10)
+    const currentDate = new Date()
+    const time = limitDays > 1
+      ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
+      : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
+
+    currentDate.setTime(time)
+    currentDate.setHours(23)
+    currentDate.setMinutes(59)
+    setMaxDate(currentDate)
+  }, [preorderMaximumDays, configs?.max_days_preorder?.value])
+
   return (
     <CContainer>
       {openUpselling && (
@@ -218,6 +236,10 @@ const CartUI = (props: any) => {
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
         isFromUpselling={isFromUpselling}
+        cartsOpened={cartsOpened}
+        setCartsOpened={setCartsOpened}
+        changeActiveState={changeActiveState}
+        isActive={isActive}
         isGiftCart={!cart?.business_id}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
@@ -232,6 +254,7 @@ const CartUI = (props: any) => {
             offsetDisabled={offsetDisabled}
             onDeleteProduct={handleDeleteClick}
             onEditProduct={handleEditProduct}
+            viewString='business_view'
           />
         ))}
 
@@ -243,7 +266,7 @@ const CartUI = (props: any) => {
                 {parsePrice(cart?.subtotal + getIncludedTaxes())}
               </OText>
             </OSTable>
-            {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
+            {!hideCartDiscount && cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
               <OSTable>
                 {cart?.discount_type === 1 ? (
                   <OText size={12} lineHeight={18}>
@@ -257,7 +280,7 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
+              !hideCartDiscount && cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
                 <OSTable key={`${offer.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18}>{offer.name}</OText>
@@ -278,7 +301,7 @@ const CartUI = (props: any) => {
               ))
             }
             {/* <Divider /> */}
-            {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+            {!hideCartDiscount && cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
                 {cart?.business?.tax_type === 1 ? (
@@ -458,7 +481,7 @@ const CartUI = (props: any) => {
                 </TouchableOpacity>
               </OSTable>
             )}
-            {cart?.status !== 2 && (
+            {cart?.status !== 2 && !hideCartComments && (
               <OSTable>
                 <View style={{ width: '100%', marginTop: 20 }}>
                   <OText size={16} lineHeight={18}>{t('COMMENTS', 'Comments')}</OText>
@@ -476,6 +499,7 @@ const CartUI = (props: any) => {
                         marginTop: 10,
                         borderRadius: 7.6
                       }}
+                      forwardRef={commentRef}
                       multiline
                     />
                     {commentState?.loading && (
@@ -493,6 +517,21 @@ const CartUI = (props: any) => {
             )}
           </OSBill>
         )}
+        {cateringTypes.includes(orderState?.options?.type) && maxDate && cart?.valid_products && (
+          <View>
+            <MomentOption
+              maxDate={maxDate}
+              cateringPreorder
+              isCart
+              preorderSlotInterval={preorderSlotInterval}
+              preorderLeadTime={preorderLeadTime}
+              preorderTimeRange={preorderTimeRange}
+              preorderMaximumDays={preorderMaximumDays}
+              preorderMinimumDays={preorderMinimumDays}
+              business={cart?.business}
+            />
+          </View>
+        )}
         {!isMultiCheckout && (
           <>
             {cart?.valid_products ? (
@@ -509,7 +548,7 @@ const CartUI = (props: any) => {
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
                   borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
                   onClick={() => setOpenUpselling(true)}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { View } from 'react-native';
-import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
+import { useLanguage, useConfig, useUtils, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
 
@@ -11,10 +11,9 @@ import { NotFoundSource } from '../NotFoundSource';
 
 export const CartContent = (props: any) => {
 	const {
-		carts,
-		isOrderStateCarts,
 		onNavigationRedirect,
-		singleBusiness
+		singleBusiness,
+		businessSlug
 	} = props
 
 	const theme = useTheme();
@@ -22,16 +21,22 @@ export const CartContent = (props: any) => {
 	const [{ configs }] = useConfig()
 	const [{ parsePrice }] = useUtils();
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
-
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const [cartsOpened, setCartsOpened] = useState([])
+	const [{ carts: cartsContext }] = useOrder();
+	const cartsList =
+		(cartsContext &&
+			Object.values(cartsContext).filter((cart: any) => cart.products.length > 0)) ??
+		[];
+	const carts = businessSlug
+		? cartsList.filter((cart: any) => cart?.business?.slug === businessSlug || parseInt(businessSlug) === cart?.business_id)
+		: cartsList
+	const isOrderStateCarts = !!carts
 	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
-	const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
-
+	const cartsAvailable: any = Object.values(carts || {})?.filter((cart: any) => cart?.valid && cart?.status !== 2)
 	const totalCartsPrice = cartsAvailable?.length && cartsAvailable.reduce((total: any, cart: any) => { return total + cart?.total }, 0)
 	const totalCartsFee = cartsAvailable?.length && cartsAvailable
 		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
 		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
-
 	const handleCheckoutRedirect = () => {
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
@@ -66,9 +71,21 @@ export const CartContent = (props: any) => {
 		}
 	}
 
+	const changeActiveState = useCallback((isClosed : boolean, uuid : string) => {
+		const isActive = cartsOpened?.includes?.(uuid) || !!singleBusiness
+		if (isActive || !isClosed) {
+			setCartsOpened(cartsOpened?.filter?.((_uuid) => _uuid !== uuid))
+		} else {
+			setCartsOpened([
+				...cartsOpened,
+				uuid
+			])
+		}
+	}, [cartsOpened])
+
 	return (
 		<CCContainer
-			style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+			style={{ paddingHorizontal: 20 }}
 		>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
@@ -88,8 +105,12 @@ export const CartContent = (props: any) => {
 										hideUpselling
 										businessConfigs={cart?.business?.configs}
 										hideCouponInput={configs?.multi_business_checkout_coupon_input_style?.value === 'group'}
-                    hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
+										hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
 										hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
+										cartsOpened={cartsOpened}
+										setCartsOpened={setCartsOpened}
+										changeActiveState={changeActiveState}
+										isActive={cartsOpened?.includes?.(cart?.uuid) || !!singleBusiness}
 									/>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
 								</>
@@ -101,32 +122,32 @@ export const CartContent = (props: any) => {
 							{!!cartsAvailable.length && (
 								<ChCartsTotal>
 									{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
-                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
-                      </OText>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {parsePrice(totalCartsFee)}
-                      </OText>
-                    </View>
-                  )}
-                  {cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
-                    configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
-                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {t('DRIVER_TIP', 'Driver tip')}
-                      </OText>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
-                      </OText>
-                    </View>
-                  )}
-                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
-                      {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
-                    </OText>
-                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
-                  </View>
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+												{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
+											</OText>
+											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+												{parsePrice(totalCartsFee)}
+											</OText>
+										</View>
+									)}
+									{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
+										configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+											<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+													{t('DRIVER_TIP', 'Driver tip')}
+												</OText>
+												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+													{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+												</OText>
+											</View>
+										)}
+									<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+											{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+										</OText>
+										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+									</View>
 									<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
 										<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
 											{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}

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

@@ -1,9 +1,11 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import {
 	Checkout as CheckoutController,
@@ -46,7 +48,9 @@ import {
 	DeliveryOptionsContainer,
 	DeliveryOptionItem,
 	WalletPaymentOptionContainer,
-	CartHeader
+	CartHeader,
+	TopHeader,
+	TopActions
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { FloatingButton } from '../FloatingButton';
@@ -115,7 +119,7 @@ const CheckoutUI = (props: any) => {
 			padding: 20
 		},
 		pagePadding: {
-			paddingHorizontal: 40
+			paddingHorizontal: 20
 		},
 		icon: {
 			top: 15,
@@ -124,13 +128,14 @@ const CheckoutUI = (props: any) => {
 			fontSize: 20
 		},
 		detailWrapper: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			width: '100%'
 		},
 		wrapperNavbar: {
-			paddingVertical: 0,
-			paddingHorizontal: 40,
-			marginVertical: 2
+			paddingVertical: 2,
+			paddingHorizontal: 20,
+			backgroundColor: theme?.colors?.white,
+			borderWidth: 0
 		}
 	})
 
@@ -163,7 +168,9 @@ const CheckoutUI = (props: any) => {
 	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
 	const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
 	const [paymethodClicked, setPaymethodClicked] = useState<any>(null)
+	const [showTitle, setShowTitle] = useState(false)
 	const [cardList, setCardList] = useState<any>({ cards: [], loading: false, error: null })
+	const containerRef = useRef<any>()
 	const cardsMethods = ['credomatic']
 	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
 	const placeSpotTypes = [3, 4, 5]
@@ -331,6 +338,10 @@ const CheckoutUI = (props: any) => {
 		setPhoneUpdate(val)
 	}
 
+	const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+		setShowTitle(contentOffset.y > 30)
+	}
+
 	useEffect(() => {
 		if (validationFields && validationFields?.fields?.checkout) {
 			checkValidationFields()
@@ -391,11 +402,54 @@ const CheckoutUI = (props: any) => {
 		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
 	}, [])
 
+	useEffect(() => {
+		if (!cartState?.loading && (cartState?.error || typeof cartState?.cart === 'string')) {
+			const error = cartState?.error || typeof cartState.cart === 'string' && cartState.cart
+			if (error) {
+				showToast(ToastType.Error, cartState?.error || cartState.cart)
+				navigation.navigate('BusinessList')
+			}
+		}
+	}, [cartState?.error, cartState?.cart, cartState?.loading])
+
+	useEffect(() => {
+		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+			containerRef?.current?.scrollToEnd && containerRef.current.scrollToEnd({ animated: true })
+		})
+		return () => {
+			keyboardDidShowListener.remove()
+		}
+	}, [])
+
 	return (
 		<>
-			<Container noPadding>
+			<View style={styles.wrapperNavbar}>
+				<TopHeader>
+					<>
+						<TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
+							<IconAntDesign
+								name='arrowleft'
+								size={26}
+							/>
+						</TopActions>
+						{showTitle && (
+							<OText
+								size={16}
+								style={{ flex: 1, textAlign: 'center', right: 15 }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+							>
+								{t('CHECKOUT', 'Checkout')}
+							</OText>
+						)}
+					</>
+				</TopHeader>
+			</View>
+			<Container forwardRef={containerRef} noPadding onScroll={handleScroll}>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
+						hideArrowLeft
 						title={t('CHECKOUT', 'Checkout')}
 						titleAlign={'center'}
 						onActionLeft={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}

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

@@ -327,8 +327,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		<>
 			<Container
 				style={{
-					paddingLeft: !cateringPreorder || isPage ? 40 : 0,
-					paddingRight: !cateringPreorder || isPage ? 40 : 0
+					paddingLeft: !cateringPreorder || isPage ? 20 : 0,
+					paddingRight: !cateringPreorder || isPage ? 20 : 0
 				}}
 				nestedScrollEnabled
 			>
@@ -467,7 +467,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 				<Spinner visible={momentState.isLoading === 1} />
 			</Container>
 			{!isCart && !cateringPreorder && (
-				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, backgroundColor: 'white', width: '100%' }}>
+				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 20, backgroundColor: 'white', width: '100%' }}>
 					<OButton onClick={() => handleChangeMoment()} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }} textStyle={{ color: 'white', fontSize: 14 }} showNextIcon />
 				</View>
 			)}

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

@@ -19,6 +19,10 @@ export const OrderTimeWrapper = styled.View`
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
   max-height: 210px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    max-height: 250px;
+    height: 250px;
+  `}
 `
 
 export const TimeContentWrapper = styled.View`
@@ -26,6 +30,7 @@ export const TimeContentWrapper = styled.View`
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
+  
 `
 
 export const TimeItem = styled.View`
@@ -36,6 +41,16 @@ export const TimeItem = styled.View`
   justify-content: center;
   align-items: center;
   margin: 10px 0px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    background: #fff;
+    width: 100%;
+    min-width: 100%;
+    height: 50px;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-left: 10px;
+    margin: 0;
+  `}
   ${({ active }: any) => active && css`
     background: #F5F9FF;
   `}

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { ActivityIndicator, View } from 'react-native'
 import {
   Cart,
@@ -56,6 +56,7 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
+  const commentRef = useRef()
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
   const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
@@ -341,6 +342,7 @@ const OrderSummaryUI = (props: any) => {
                           marginTop: 10,
                           borderRadius: 8
                         }}
+                        forwardRef={commentRef}
                         multiline
                       />
                       {commentState?.loading && (

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

@@ -0,0 +1,120 @@
+import React from 'react'
+import { useSession, useOrder, useLanguage, useConfig } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { TouchableOpacity, View } from 'react-native'
+import { OButton, OText } from '../shared';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+
+export const ActionButton = (props : any) => {
+    const {
+        navigation,
+        isHaveWeight,
+        isSoldOut,
+        maxProductQuantity,
+        productCart,
+        handleSaveProduct,
+        editMode,
+        product,
+        errors,
+        productAddedToCartLength,
+        handleRedirectLogin,
+        guestCheckoutEnabled,
+        orderTypeEnabled,
+        handleUpdateGuest,
+        actionStatus
+    } = props
+    const [,t] = useLanguage()
+    const [{ auth }] = useSession()
+    const [orderState] = useOrder()
+    const theme = useTheme()
+	const [{ configs }] = useConfig()
+    const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+
+    const saveErrors =
+		orderState.loading ||
+		maxProductQuantity === 0 ||
+		Object.keys(errors)?.length > 0;
+
+    return (
+        <View
+            style={{
+                width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
+            }}>
+            {((productCart &&
+                auth &&
+                (orderState.options?.address_id || isAllowUnaddressOrderType)) || (isSoldOut || maxProductQuantity <= 0)) && (
+                    <OButton
+                        onClick={() => handleSaveProduct()}
+                        imgRightSrc=""
+                        text={`${orderState.loading
+                            ? t('LOADING', 'Loading')
+                            : (isSoldOut || maxProductQuantity <= 0)
+                                ? t('SOLD_OUT', 'Sold out')
+                                : editMode
+                                    ? t('UPDATE', 'Update')
+                                    : t('ADD', 'Add')
+                            }`}
+                        isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))}
+                        textStyle={{
+                            color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
+                            fontSize: orderState.loading || editMode ? 10 : 14
+                        }}
+                        style={{
+                            backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
+                            borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
+                            opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
+                            borderRadius: 7.6,
+                            height: 44,
+                            shadowOpacity: 0,
+                            borderWidth: 1,
+                            marginTop: isHaveWeight ? 10 : 0
+                        }}
+                    />
+                )}
+            {auth &&
+                !orderState.options?.address_id && !isAllowUnaddressOrderType &&
+                (orderState.loading ? (
+                    <OButton
+                        isDisabled
+                        text={t('LOADING', 'Loading')}
+                        imgRightSrc=""
+                        textStyle={{ fontSize: 10 }}
+                    />
+                ) : (
+                    <OButton onClick={navigation.navigate('AddressList')} />
+                ))}
+            {!auth && (
+                <OButton
+                    isDisabled={isSoldOut || maxProductQuantity <= 0}
+                    onClick={() => handleRedirectLogin()}
+                    text={
+                        isSoldOut || maxProductQuantity <= 0
+                            ? t('SOLD_OUT', 'Sold out')
+                            : t('LOGIN_SIGNUP', 'Login / Sign Up')
+                    }
+                    imgRightSrc=""
+                    textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
+                    style={{
+                        height: 42,
+                        borderColor: theme.colors.primary,
+                        backgroundColor: theme.colors.white,
+                        paddingLeft: 0,
+                        paddingRight: 0
+                    }}
+                />
+            )}
+            {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                    {actionStatus?.loading ? (
+                        <Placeholder Animation={Fade}>
+                            <PlaceholderLine height={20} />
+                        </Placeholder>
+                    ) : (
+                        <OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('AS_GUEST_USER', 'As guest user')}</OText>
+                    )}
+                </TouchableOpacity>
+            )}
+        </View>
+    )
+}

package/themes/original/src/config/constants.tsx

@@ -29,5 +29,15 @@ export const ORDER_TYPES = [
 		value: 5,
 		content: 'DRIVE_THRU',
 		description: 'ORDERTYPE_DESCRIPTION_DRIVETHRU',
+	},
+	{
+		value: 7,
+		content: 'CATERING_DELIVERY',
+		description: 'ORDERTYPE_DESCRIPTION_CATERING_DELIVERY',
+	},
+	{
+		value: 8,
+		content: 'CATERING_PICKUP',
+		description: 'ORDERTYPE_DESCRIPTION_CATERING_PICKUP',
 	}
 ]

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

@@ -550,13 +550,20 @@ export interface FloatingButtonParams {
 }
 export interface MomentOptionParams {
 	navigation: any;
-	isCart?: any;
 	nopadding?: boolean;
 	datesList: Array<any>;
 	hoursList: Array<any>;
 	dateSelected?: any;
 	timeSelected?: any;
 	isAsap?: boolean;
+	cateringPreorder?: boolean,
+	isCart?: boolean,
+	preorderLeadTime?: number,
+	business?: any,
+	getActualSchedule?: any,
+	preorderMaximumDays?: number,
+	preorderMinimumDays?: number,
+	isPage?: boolean,
 	handleAsap: () => {};
 	handleChangeDate: (value: any) => {};
 	handleChangeTime: (value: any) => {};