ordering-ui-react-native 0.16.37-release → 0.16.38-release

package/package.json

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

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

@@ -24,13 +24,15 @@ const AddressDetailsUI = (props: any) => {
 	return (
 		<ADContainer>
 			<ADHeader>
-				<OText
-					size={16}
-					lineHeight={24}
-					color={theme.colors.textNormal}
-				>
-					{t('DELIVERY_ADDRESS', 'Delivery address')}
-				</OText>
+				{props.HeaderTitle ?? (
+					<OText
+						size={16}
+						lineHeight={24}
+						color={theme.colors.textNormal}
+					>
+						{t('DELIVERY_ADDRESS', 'Delivery address')}
+					</OText>
+				)}
 			</ADHeader>
 			{!!apiKey && (
 				<ADMap

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

@@ -65,6 +65,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	} = props;
 
 	const theme = useTheme();
+	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const tagsName = [
 		{ icon: theme.images.general.tag_home, value: 'home' },
@@ -104,6 +105,12 @@ const AddressFormUI = (props: AddressFormParams) => {
 			end: 0,
 			top: 12,
 			zIndex: 1002,
+			right: autoCompleteInputFocused && (
+				!!address?.address ||
+				!!formState.changes?.address ||
+				!!addressState.address.address
+			) ? 30 : 15,
+			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
 			? { paddingVertical: 0, paddingHorizontal: 40 }
@@ -138,7 +145,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const [isSignUpEffect, setIsSignUpEffect] = useState(false);
 	const [hasEditing, setAddressEditing] = useState(false);
-	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const googleInput: any = useRef(null);
 	const internalNumberRef: any = useRef(null);

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

@@ -11,7 +11,7 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
@@ -40,6 +40,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		navigation,
 		isBusinessOpen,
 		style,
+		isCustomLayout,
 		businessHeader,
 		businessFeatured,
 		businessLogo,
@@ -51,6 +52,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		handleFavoriteBusiness,
 		enableIntersection
 	} = props;
+
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
@@ -58,14 +60,19 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const windowHeight = Dimensions.get('window').height
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
+	const textSize = isCustomLayout ? 12 : 10
+	const cardHeight = windowHeight * 0.3
+
 	const styles = StyleSheet.create({
 		container: {
 			marginVertical: 20,
 			borderRadius: 7.6,
 			width: '100%',
-			position: 'relative'
+			position: 'relative',
+			height: cardHeight
 		},
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -159,11 +166,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
 				<CardAnimation
+					style={[style, styles.container]}
 					onClick={() => handleBusinessClick(business)}
-					style={[
-						style,
-						styles.container
-					]}
 				>
 					{business?.ribbon?.enabled && (
 						<RibbonBox
@@ -185,7 +189,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					)}
 					<BusinessHero>
 						<FastImage
-							style={{ height: 120 }}
+							style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
 							source={(businessHeader || business?.header) ? {
 								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
 								priority: FastImage.priority.normal,
@@ -211,7 +215,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo>
+						<BusinessInfo style={isCustomLayout && { position: 'absolute', bottom: 85, left: 15 }}>
 							<BusinessLogo style={styles.businessLogo}>
 								<FastImage
 									style={{ width: 56, height: 56 }}
@@ -222,38 +226,60 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 									resizeMode={FastImage.resizeMode.cover}
 								/>
 							</BusinessLogo>
-							<ReviewAndFavorite>
-								{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-									<Reviews>
-										<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
-										<OText size={10} style={{ lineHeight: 15 }}>
-											{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-										</OText>
-									</Reviews>
-								)}
-								<LottieAnimation
-									type='favorite'
-									onClick={handleChangeFavorite}
-									initialValue={business?.favorite ? 0.75 : 0}
-									toValue={business?.favorite ? 0 : 0.75}
-									disableAnimation={!auth}
-									iconProps={{ color: theme.colors.danger5, size: 18 }}
-									isActive={business?.favorite}
-								/>
-							</ReviewAndFavorite>
+							{!isCustomLayout && (
+								<ReviewAndFavorite>
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+										<Reviews>
+											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+											<OText size={10} style={{ lineHeight: 15 }}>
+												{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+											</OText>
+										</Reviews>
+									)}
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={business?.favorite ? 0.75 : 0}
+										toValue={business?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={business?.favorite}
+									/>
+								</ReviewAndFavorite>
+							)}
 						</BusinessInfo>
-						<OText
-							size={12}
-							style={{ lineHeight: 18, marginBottom: 6 }}
-							weight={'500'}>
-							{business?.name}
-						</OText>
-						<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+						<View style={isCustomLayout && { width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+							<OText
+								size={textSize + 2}
+								style={{ lineHeight: 18, marginBottom: 6 }}
+								weight={'500'}>
+								{business?.name}
+							</OText>
+							{isCustomLayout && (
+								<ReviewAndFavorite>
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+										<Reviews>
+											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+											<OText size={10} style={{ lineHeight: 15 }}>
+												{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+											</OText>
+										</Reviews>
+									)}
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={business?.favorite ? 0.75 : 0}
+										toValue={business?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={business?.favorite}
+									/>
+								</ReviewAndFavorite>
+							)}
+						</View>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={isCustomLayout ? 1 : 2}>
 							{business?.address}
 						</OText>
-						{/* <BusinessCategory>
-          <OText>{getBusinessType()}</OText>
-        </BusinessCategory> */}
 						<Metadata>
 							{!isBusinessOpen ? (
 								<View style={styles.closed}>
@@ -264,16 +290,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							) : (
 								<View style={styles.bullet}>
 									{orderState?.options?.type === 1 && (
-										<OText size={10} color={theme.colors.textSecondary}>
+										<OText size={textSize} color={theme.colors.textSecondary}>
 											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 										</OText>
 									)}
-									<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+									<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
 										orderState?.options?.type === 1
 											? (businessDeliveryTime ?? business?.delivery_time)
 											: (businessPickupTime ?? business?.pickup_time),
 									)} \u2022 `}</OText>
-									<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+									<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
 								</View>
 							)}
 						</Metadata>

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

@@ -9,7 +9,7 @@ export const BusinessHero = styled.View`
 
 export const BusinessContent = styled.View`
     padding-horizontal: 18px;
-    padding-bottom: 18px;
+    padding-bottom: 10px;
     border-bottom-left-radius: 7.6px;
     border-bottom-right-radius: 7.6px;
     border-width: 1px;

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

@@ -52,7 +52,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     brandList,
     onNavigationRedirect,
     handleUpdateBusinessList,
-    handleUpdateProducts
+    handleUpdateProducts,
+    brandId
   } = props
 
   const screenHeight = Dimensions.get('window').height;
@@ -75,6 +76,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
   ]
 
+  const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+
   const priceList = [
     { level: '1', content: '$' },
     { level: '2', content: '$$' },
@@ -96,7 +99,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       width: '100%'
     },
     searchInput: {
-      fontSize: 10,
+      fontSize: 12,
     },
     productsContainer: {
       marginTop: 20
@@ -230,6 +233,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       <SearchWrapper>
         <SearchBar
           lazyLoad
+          {...(isChewLayout && { height: 55 })}
           inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
           placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
           onSearch={(val: string) => handleChangeTermValue(val)}
@@ -253,6 +257,13 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           onNavigationRedirect={onNavigationRedirect}
           BusinessControllerSkeletons={BusinessControllerSkeletons}
           businessPaginationProps={paginationProps}
+          franchiseId={brandId}
+          hideBackBtn
+          titleStyle={{
+            paddingHorizontal: 0,
+            marginTop: 0,
+            marginLeft: 0
+          }}
         />
       )}
 
@@ -261,19 +272,26 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           {t('BUSINESSES', 'Businesses')}
         </OText>
       </OptionTitle>
-      <ScrollView horizontal>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
-          <BusinessController
+          <View
             key={business.id}
-            business={business}
-            isBusinessOpen={business.open}
-            enableIntersection={false}
-            handleCustomClick={() => onBusinessClick(business)}
-            handleUpdateBusinessList={handleUpdateBusinessList}
-            orderType={orderState?.options?.type}
-            style={{ width: screenWidth - 120, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
-          />
+            style={{
+              width: screenWidth - 120,
+              marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0
+            }}
+          >
+            <BusinessController
+              business={business}
+              isBusinessOpen={business.open}
+              enableIntersection={false}
+              handleCustomClick={() => onBusinessClick(business)}
+              handleUpdateBusinessList={handleUpdateBusinessList}
+              orderType={orderState?.options?.type}
+            />
+          </View>
         ))}
+        {console.log(screenWidth)}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
           <LoadMoreBusinessContainer>
             <OButton
@@ -370,7 +388,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                     </View>
                   </Placeholder>
                   <Placeholder style={{ paddingHorizontal: 5, bottom: 10 }} Animation={Fade}>
-                    <View style={{ flexDirection: 'row-reverse' }}>
+                    <View style={{ flexDirection: 'row-reverse', overflow: 'hidden' }}>
                       <PlaceholderLine
                         width={24}
                         height={70}

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

@@ -313,10 +313,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									key={business?.id}
 									onPress={() => handleBusinessClick && handleBusinessClick(business)}
 									style={{
-										width: 57,
-										height: 58,
-										borderBottomColor: theme.colors.primary,
-										borderBottomWidth: business?.slug === actualSlug ? 2 : 0,
+										width: 60,
+										height: 60,
+										borderRadius: 8,
 										marginRight: 5
 									}}
 								>
@@ -325,8 +324,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 											width: 56,
 											height: 56,
 											marginRight: 20,
-											borderTopLeftRadius: 7.6,
-											borderTopRightRadius: 7.6
+											borderRadius: 8,
+											borderColor: theme.colors.primary,
+											borderWidth: business?.slug === actualSlug ? 2 : 0
 										}}
 										source={{
 											uri: business?.logo,
@@ -369,8 +369,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			>
 				{isChewLayout && (
 					<View style={{ marginTop: 30, paddingHorizontal: 30, flexDirection: 'row', justifyContent: 'space-between' }}>
-						<OText size={18} weight={700} color={theme.colors?.white}>
-							{t('WELCOME', 'Welcome')} {user?.name}!
+						<OText size={24} weight={700} color={theme.colors?.white}>
+							{t('WELCOME', 'Welcome')} {user?.name}
 						</OText>
 					</View>
 				)}
@@ -571,6 +571,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<BusinessController
 							key={`${business.id}_` + i}
 							enableIntersection
+							isCustomLayout={isChewLayout}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}

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

@@ -152,6 +152,7 @@ const CheckoutUI = (props: any) => {
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
 	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
@@ -161,7 +162,6 @@ const CheckoutUI = (props: any) => {
 	}, cart?.subtotal)
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
-		// (placeSpotTypes.includes(options?.type) && !cart?.place) ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -267,10 +267,6 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [errors])
 
-	// useEffect(() => {
-	//   handlePaymethodChange(null)
-	// }, [cart?.total])
-
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
 			onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
@@ -281,6 +277,21 @@ const CheckoutUI = (props: any) => {
 		onFailPaypal()
 	}, [showGateway.closedByUser])
 
+	const HeaderTitle = (props: any) => {
+		const { text } = props
+		return (
+			<OText
+				size={16}
+				lineHeight={24}
+				weight={'500'}
+				mBottom={props.mb ?? 10}
+				color={theme.colors.textNormal}
+			>
+				{text}
+			</OText>
+		)
+	}
+
 	return (
 		<>
 			<Container noPadding>
@@ -298,13 +309,20 @@ const CheckoutUI = (props: any) => {
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>
 						<ChHeader>
-							{/* <OrderTypeSelector configTypes={configTypes} /> */}
-							<CHMomentWrapper onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-								<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(options?.type || 1), 'Delivery')}</OText>
+							<CHMomentWrapper isCustomColor={isChewLayout} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
+								<OText
+									size={12}
+									numberOfLines={1}
+									ellipsizeMode={'tail'}
+									color={theme.colors?.[isChewLayout ? 'white' : 'textSecondary']}
+								>
+									{t(getTypesText(options?.type || 1), 'Delivery')}
+								</OText>
 								<OIcon
 									src={theme.images.general.arrow_down}
 									width={10}
 									style={{ marginStart: 8 }}
+									{...(isChewLayout && { color: 'white' })}
 								/>
 							</CHMomentWrapper>
 							<CHMomentWrapper
@@ -347,9 +365,7 @@ const CheckoutUI = (props: any) => {
 								Object.values(businessDetails?.business).length > 0 &&
 								(
 									<>
-										<OText size={16} lineHeight={24} weight={'500'} mBottom={10} color={theme.colors.textNormal}>
-											{t('BUSINESS_DETAILS', 'Business Details')}
-										</OText>
+										<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
 										<View>
 											<OText size={12} lineHeight={18} weight={'400'}>
 												{businessDetails?.business?.name}
@@ -368,9 +384,7 @@ const CheckoutUI = (props: any) => {
 								)}
 							{businessDetails?.error && businessDetails?.error?.length > 0 && (
 								<View>
-									<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
-										{t('BUSINESS_DETAILS', 'Business Details')}
-									</OText>
+									<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
 									<NotFoundSource
 										content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
 									/>
@@ -392,6 +406,7 @@ const CheckoutUI = (props: any) => {
 							) : (
 								<UserDetails
 									isUserDetailsEdit={isUserDetailsEdit}
+									HeaderTitle={<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer Details')} mb={0} />}
 									cartStatus={cart?.status}
 									businessId={cart?.business_id}
 									useValidationFields
@@ -416,8 +431,8 @@ const CheckoutUI = (props: any) => {
 									</Placeholder>
 								</View>
 							) : (
-								<>
-									<OText size={16} color={theme.colors.textNormal} mBottom={10}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+								<ChSection>
+									<HeaderTitle text={t('DELIVERY_OPTIONS', 'Delivery options')} />
 									<View
 										style={{
 											backgroundColor: theme.colors.inputDisabled,
@@ -463,7 +478,7 @@ const CheckoutUI = (props: any) => {
 										/>
 									</View>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
-								</>
+								</ChSection>
 							)}
 
 						</DeliveryOptionsContainer>
@@ -485,29 +500,6 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-					{/* <ChSection>
-        <ChTotal>
-          {
-            (
-              <>
-                <OIcon
-                  url={businessLogo || businessDetails?.business?.logo}
-                  width={80}
-                  height={80}
-                  borderRadius={80}
-                />
-                <View style={{ marginLeft: 10, width: '85%' }}>
-                  <OText size={22} numberOfLines={2} ellipsizeMode='tail' style={{ width: '85%' }}>
-                    {businessName || businessDetails?.business?.name}
-                  </OText>
-                  <OText size={22}>
-                    {cart?.total >= 1 && parsePrice(cart?.total) || cartTotal >= 1 && parsePrice(cartTotal)}
-                  </OText>
-                </View>
-              </>
-            )}
-        </ChTotal>
-      </ChSection> */}
 					<ChSection>
 						<ChAddress>
 							{(businessDetails?.loading || cartState.loading) ? (
@@ -524,6 +516,7 @@ const CheckoutUI = (props: any) => {
 									uuid={cartUuid}
 									apiKey={configs?.google_maps_api_key?.value}
 									mapConfigs={mapConfigs}
+									HeaderTitle={<HeaderTitle text={t('DELIVERY_ADDRESS', 'Delivery address')} mb={0} />}
 								/>
 							)}
 						</ChAddress>
@@ -540,9 +533,7 @@ const CheckoutUI = (props: any) => {
 						(
 							<ChSection>
 								<ChDriverTips>
-									<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-										{t('DRIVER_TIPS', 'Driver Tips')}
-									</OText>
+									<HeaderTitle text={t('DRIVER_TIPS', 'Driver Tips')} mb={0} />
 									<DriverTips
 										uuid={cartUuid}
 										businessId={cart?.business_id}
@@ -561,9 +552,7 @@ const CheckoutUI = (props: any) => {
 					{!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
 						<ChSection>
 							<ChPaymethods>
-								<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-									{t('PAYMENT_METHOD', 'Payment Method')}
-								</OText>
+								<HeaderTitle text={t('PAYMENT_METHOD', 'Payment Method')} mb={0} />
 								{!cartState.loading && cart?.status === 4 && (
 									<OText
 										style={{ textAlign: 'center', marginTop: 20 }}
@@ -628,13 +617,7 @@ const CheckoutUI = (props: any) => {
 								) : (
 									<>
 										<CartHeader>
-											<OText
-												size={16}
-												lineHeight={24}
-												color={theme.colors.textNormal}
-											>
-												{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
-											</OText>
+											<HeaderTitle text={t('MOBILE_FRONT_YOUR_ORDER', 'Your order')} mb={0} />
 											<TouchableOpacity
 												onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
 											>

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

@@ -6,7 +6,7 @@ export const ChContainer = styled.View`
 `
 
 export const ChSection = styled.View`
-	padding-top: 30px;
+	padding-top: 20px;
 `
 
 export const ChHeader = styled.View`
@@ -40,7 +40,9 @@ export const ChMoment = styled(ChAddress)`
 `
 
 export const CHMomentWrapper = styled.TouchableOpacity`
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+	background-color: ${(props: any) => props.isCustomColor
+    ? props.theme.colors.primary
+    : props.theme.colors.backgroundGray100};
 	border-radius: 7.6px;
 	font-size: 12px;
 	max-width: 240px;

package/themes/original/src/components/GPSButton/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
 export const GpsButtonStyle = styled.TouchableOpacity`
-  width: 30px;
-	height: 30px;
-`
+  width: 16px;
+	height: 16px;
+`