ordering-ui-react-native 0.17.51 → 0.17.53

package/package.json

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

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

@@ -57,7 +57,7 @@ const AddressDetailsUI = (props: any) => {
 						}>
 						<OText
 							size={12}
-							color={theme.colors.textSecondary}
+							color={theme.colors.primary}
 							style={{ textDecorationLine: 'underline' }}>
 							{t('CHANGE', 'Change')}
 						</OText>

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

@@ -83,7 +83,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			backgroundColor: theme.colors.clear
 		},
 		inputsStyle: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 50,
@@ -92,7 +91,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			flex: 1,
 		},
 		textAreaStyles: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 104,
@@ -140,6 +138,7 @@ 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);
@@ -154,7 +153,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		'true';
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
-
+	const countryCode = configState?.configs?.country_autocomplete?.value
 	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
@@ -544,7 +543,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 											onPress={(data, details: any) => {
 												handleChangeAddress(data, details);
 											}}
-											query={{ key: googleMapsApiKey }}
+											query={{
+												key: googleMapsApiKey,
+												components: countryCode && countryCode !== '*' ? `country:${countryCode}` : ''
+											}}
 											fetchDetails
 											ref={googleInput}
 											textInputProps={{
@@ -563,6 +565,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 												autoCorrect: false,
 												blurOnSubmit: false,
 												returnKeyType: 'next',
+												onFocus: () => setAutoCompleteInputFocused(true),
+												onBlur: () => setAutoCompleteInputFocused(false)
 											}}
 											onFail={(error) =>
 												setAlertState({
@@ -586,7 +590,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												textInput: {
 													borderWidth: 1,
 													borderRadius: 7.6,
-													borderColor: theme.colors.border,
+													borderColor: autoCompleteInputFocused ? theme.colors.primary : theme.colors.border,
 													flexGrow: 1,
 													fontSize: 15,
 													paddingLeft: 16,
@@ -676,6 +680,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													addressState?.address?.internal_number ||
 													''
 												}
+												isFocusHighlight
 												style={{
 													...styles.inputsStyle,
 													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
@@ -722,6 +727,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													addressState.address.zipcode ||
 													''
 												}
+												isFocusHighlight
 												style={styles.inputsStyle}
 												forwardRef={zipCodeRef}
 												returnKeyType="next"
@@ -767,6 +773,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												''
 											}
 											multiline
+											isFocusHighlight
 											style={styles.textAreaStyles}
 											returnKeyType="done"
 											forwardRef={addressNotesRef}

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

@@ -251,7 +251,11 @@ export const BusinessBasicInformation = (
 						)}
 						{isChewLayout && (
 							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
-								<OText style={{ textDecorationColor: theme.colors.black, textDecorationLine: 'underline' }}>
+								<OText 
+									color={theme.colors.primary}
+									style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+									size={12}
+								>
 									{t('SEE_MORE_DESCRIPTION', 'See more')}
 								</OText>
 							</TouchableOpacity>
@@ -416,7 +420,11 @@ export const BusinessBasicInformation = (
 									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
 										<>
 											<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-												<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+												<OText 
+													color={theme.colors.primary}
+													style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+													size={12}
+												>
 													{t('PREORDER', 'Preorder')}
 												</OText>
 											</TouchableOpacity>
@@ -424,7 +432,11 @@ export const BusinessBasicInformation = (
 										</>
 									)}
 									<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
-										<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+										<OText
+											color={theme.colors.primary}
+											style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+											size={12}
+										>
 											{t('REVIEWS', 'Reviews')}
 										</OText>
 									</TouchableOpacity>

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

@@ -46,6 +46,12 @@ export const BusinessItemAccordion = (props: any) => {
 		}
 	}, [orderState?.carts, isClosed])
 
+	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
+		if (item?.type === 1)
+			return acc = acc + item?.summary?.tax
+		return acc = acc
+	}, cart?.subtotal)
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
@@ -102,7 +108,7 @@ export const BusinessItemAccordion = (props: any) => {
 										<OText
 											size={12}
 											lineHeight={18}
-											color={theme.colors.textSecondary}
+											color={theme.colors.primary}
 											style={{ textDecorationLine: 'underline' }}
 										>
 											{t('CHANGE_STORE', 'Change store')}
@@ -151,7 +157,7 @@ export const BusinessItemAccordion = (props: any) => {
 							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
 							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 							text={t('CHECKOUT', 'Checkout')}
-							bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+							bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
 							borderColor={theme.colors.primary}
 							isDisabled={checkoutButtonDisabled}
 						/>

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

@@ -269,7 +269,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						{!isOpenSearchBar && (
 							<>
 								<TopActions onPress={() => handleBackNavigation()}>
-									<IconAntDesign name='arrowleft' size={26} />
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
 								</TopActions>
 								{!errorQuantityProducts && (
 									<View style={{ ...styles.headerItem }}>
@@ -277,7 +277,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 											onPress={() => setIsOpenSearchBar(true)}
 											style={styles.searchIcon}
 										>
-											<OIcon src={theme.images.general.search} color={theme.colors.textNormal} width={16} />
+											<OIcon src={theme.images.general.search} color={theme.colors.textNormal} width={20} />
 										</TouchableOpacity>
 									</View>
 								)}

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

@@ -32,7 +32,6 @@ import {
 	HeaderWrapper,
 	ListWrapper,
 	FeaturedWrapper,
-	OrderProgressWrapper,
 	FarAwayMessage,
 	AddressInputContainer,
 	PreorderInput,
@@ -138,7 +137,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			minHeight: 45,
 			paddingVertical: 5,
 			paddingHorizontal: 20,
-			borderWidth: 1
+			borderWidth: 1,
+			justifyContent: 'center'
 		},
 		businessSkeleton: {
 			borderRadius: 8,
@@ -501,12 +501,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</TouchableOpacity>
 				</View>
 			)}
-			<OrderProgressWrapper>
-				<OrderProgress
-					{...props}
-					isFocused={isFocused}
-				/>
-			</OrderProgressWrapper>
+			<OrderProgress
+				{...props}
+				isFocused={isFocused}
+			/>
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
@@ -659,14 +657,25 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							key={city?.id}
 							style={{
 								padding: 10,
-								borderBottomWidth: 1,
-								borderBottomColor: orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.backgroundGray,
-								marginBottom: 10,
+								flexDirection: 'row'
 							}}
 							onPress={() => handleChangeCity(city?.id)}
 							disabled={orderState?.loading}
 						>
-							<OText color={orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.black}>
+							{orderState?.options?.city_id === city?.id ? (
+								<OIcon
+									src={theme.images.general.option_checked}
+									width={16}
+									style={{ marginEnd: 24 }}
+								/>
+							) : (
+								<OIcon
+									src={theme.images.general.option_normal}
+									width={16}
+									style={{ marginEnd: 24 }}
+								/>
+							)}
+							<OText color={theme.colors.black}>
 								{city?.name}
 							</OText>
 						</TouchableOpacity>

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

@@ -74,16 +74,9 @@ export const ListWrapper = styled.View`
 
 export const FeaturedWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	height: 220px;
 	paddingVertical: 30px;
 `;
 
-export const OrderProgressWrapper = styled.View`
-  margin-top: 37px;
-  margin-bottom: 20px;
-	padding-horizontal: 40px;
-`
-
 export const FarAwayMessage = styled.View`
   flex-direction: row;
   align-items: center;

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

@@ -154,6 +154,12 @@ const CartUI = (props: any) => {
     }
   }
 
+  const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
+    if (item?.type === 1)
+      return acc = acc + item?.summary?.tax
+    return acc = acc
+  }, cart?.subtotal)
+
   return (
     <CContainer>
       {openUpselling && (
@@ -178,7 +184,7 @@ const CartUI = (props: any) => {
         onNavigationRedirect={props.onNavigationRedirect}
         handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
-        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
@@ -369,22 +375,22 @@ const CartUI = (props: any) => {
               validationFields?.fields?.checkout?.driver_tip?.enabled &&
               driverTipsOptions && driverTipsOptions?.length > 0 &&
               (
-								<DriverTipsContainer>
-									<OText size={14} lineHeight={20} color={theme.colors.textNormal}>
-										{t('DRIVER_TIPS', 'Driver Tips')}
-									</OText>
-									<DriverTips
-										uuid={cart?.uuid}
-										businessId={cart?.business_id}
-										driverTipsOptions={driverTipsOptions}
-										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-										isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-										driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
-											? cart?.driver_tip
-											: cart?.driver_tip_rate}
-										useOrderContext
-									/>
-								</DriverTipsContainer>
+                <DriverTipsContainer>
+                  <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
+                    {t('DRIVER_TIPS', 'Driver Tips')}
+                  </OText>
+                  <DriverTips
+                    uuid={cart?.uuid}
+                    businessId={cart?.business_id}
+                    driverTipsOptions={driverTipsOptions}
+                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+                      ? cart?.driver_tip
+                      : cart?.driver_tip_rate}
+                    useOrderContext
+                  />
+                </DriverTipsContainer>
               )}
 
             <OSTotal>
@@ -455,15 +461,15 @@ const CartUI = (props: any) => {
             {cart?.valid_products ? (
               <CheckoutAction>
                 <OButton
-                  text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
+                  text={(subtotalWithTaxes >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
                     !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
                   ) : !cart?.valid_address ? (
                     `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
                   ) : (
                     `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
                   )}
-                  bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-                  isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+                  bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
                   borderColor={theme.colors.primary}
                   imgRightSrc={null}
                   textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}

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

@@ -154,8 +154,13 @@ const CheckoutUI = (props: any) => {
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
+	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
+		if (item?.type === 1)
+			return acc = acc + item?.summary?.tax
+		return acc = acc
+	}, cart?.subtotal)
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
-		placing || errorCash || cart?.subtotal < cart?.minimum ||
+		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
 		// (placeSpotTypes.includes(options?.type) && !cart?.place) ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
@@ -634,7 +639,7 @@ const CheckoutUI = (props: any) => {
 												onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
 											>
 												<OText
-													size={10}
+													size={12}
 													lineHeight={15}
 													color={theme.colors.primary}
 													style={{ textDecorationLine: 'underline' }}
@@ -651,7 +656,7 @@ const CheckoutUI = (props: any) => {
 												<OText
 													size={12}
 													lineHeight={18}
-													color={theme.colors.textSecondary}
+													color={theme.colors.primary}
 													style={{ textDecorationLine: 'underline' }}
 												>
 													{t('CHANGE_STORE', 'Change store')}
@@ -756,7 +761,7 @@ const CheckoutUI = (props: any) => {
 					handleClick={() => handlePlaceOrder(null)}
 					isSecondaryBtn={isDisabledButtonPlace}
 					disabled={isDisabledButtonPlace}
-					btnText={cart?.subtotal >= cart?.minimum
+					btnText={subtotalWithTaxes >= cart?.minimum
 						? (
 							placing
 								? t('PLACING', 'Placing')

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

@@ -622,7 +622,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         onPress={() => handleClickOrderReview(order)}
                       >
                         <OText
-                          size={10}
+                          size={12}
                           lineHeight={15}
                           color={theme.colors.primary}
                           style={{ textDecorationLine: 'underline' }}
@@ -638,7 +638,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
                   >
                     <OText
-                      size={10}
+                      size={12}
                       lineHeight={15}
                       color={theme.colors.primary}
                       style={{ textDecorationLine: 'underline', textTransform: 'capitalize' }}

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

@@ -17,7 +17,8 @@ import {
   ProgressBar,
   TimeWrapper,
   ProgressTextWrapper,
-  OrderInfoWrapper
+  OrderInfoWrapper,
+  OrderProgressWrapper
 } from './styles'
 const OrderProgressUI = (props: any) => {
   const {
@@ -47,9 +48,9 @@ const OrderProgressUI = (props: any) => {
         height: 1
       },
       shadowColor: '#000',
-      shadowOpacity: 0.1,
-      shadowRadius: 1,
-      elevation: 2
+      shadowOpacity: 0.2,
+      shadowRadius: 2,
+      elevation: 3
     },
     logoWrapper: {
       overflow: 'hidden',
@@ -144,70 +145,74 @@ const OrderProgressUI = (props: any) => {
   return (
     <>
       {(orderList?.loading && !initialLoaded) && (
-        <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
-          <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
-          <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
-          <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
-        </Placeholder>
+        <OrderProgressWrapper>
+          <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
+            <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
+            <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
+            <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
+          </Placeholder>
+        </OrderProgressWrapper>
       )}
       {(!orderList?.loading || initialLoaded) && orderList?.orders?.length > 0 && lastOrder && (
-        <View style={styles.main}>
-          <OrderInfoWrapper style={{ flex: 1 }}>
-            <View style={styles.logoWrapper}>
-              <FastImage
-                style={{ width: 50, height: 50 }}
-                source={{
-                  uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
-                  priority: FastImage.priority.normal,
-                }}
-                resizeMode={FastImage.resizeMode.cover}
-              />
-            </View>
-            <View style={{
-              paddingHorizontal: 10,
-              flex: 1
-            }}
-            >
-              <OText
-                size={13}
-                style={{
-                  fontWeight: 'bold',
-                  marginBottom: 3
-                }}
-              >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
-              <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
-              <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
-                <View style={styles.navigationButton}>
-                  <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
-                  <IconAntDesign
-                    name='arrowright'
-                    color={theme.colors.primary}
-                    size={13}
-                    style={{ marginHorizontal: 5 }}
-                  />
-                </View>
-              </TouchableOpacity>
+        <OrderProgressWrapper>
+          <View style={styles.main}>
+            <OrderInfoWrapper style={{ flex: 1 }}>
+              <View style={styles.logoWrapper}>
+                <FastImage
+                  style={{ width: 50, height: 50 }}
+                  source={{
+                    uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
+                    priority: FastImage.priority.normal,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                />
+              </View>
+              <View style={{
+                paddingHorizontal: 10,
+                flex: 1
+              }}
+              >
+                <OText
+                  size={13}
+                  style={{
+                    fontWeight: 'bold',
+                    marginBottom: 3
+                  }}
+                >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
+                <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
+                <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
+                  <View style={styles.navigationButton}>
+                    <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
+                    <IconAntDesign
+                      name='arrowright'
+                      color={theme.colors.primary}
+                      size={13}
+                      style={{ marginHorizontal: 5 }}
+                    />
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </OrderInfoWrapper>
+            <View style={{ flex: 1 }}>
+              <ProgressContentWrapper>
+                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
+              </ProgressContentWrapper>
+              <ProgressTextWrapper>
+                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <TimeWrapper>
+                  <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
+                  <OText size={11}>
+                    {lastOrder?.delivery_datetime_utc
+                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                      : parseTime(lastOrder?.delivery_datetime, { utc: false })}
+                    &nbsp;-&nbsp;
+                    {convertDiffToHours(lastOrder)}
+                  </OText>
+                </TimeWrapper>
+              </ProgressTextWrapper>
             </View>
-          </OrderInfoWrapper>
-          <View style={{ flex: 1 }}>
-            <ProgressContentWrapper>
-              <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
-            </ProgressContentWrapper>
-            <ProgressTextWrapper>
-              <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
-              <TimeWrapper>
-                <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
-                <OText size={11}>
-                  {lastOrder?.delivery_datetime_utc
-                    ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
-                    : parseTime(lastOrder?.delivery_datetime, { utc: false })}
-                  &nbsp;-&nbsp;
-                  {convertDiffToHours(lastOrder)}
-                </OText>
-              </TimeWrapper>
-            </ProgressTextWrapper>
           </View>
-        </View>
+        </OrderProgressWrapper>
       )}
       {/* {!orderList?.loading && orderList?.orders?.length === 0 && (
         <NotFoundSource

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

@@ -29,3 +29,8 @@ export const OrderInfoWrapper = styled.View`
   align-items: center;
   margin-bottom: 15px;
 `
+export const OrderProgressWrapper = styled.View`
+  margin-top: 37px;
+  margin-bottom: 20px;
+	padding-horizontal: 40px;
+`

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

@@ -54,7 +54,7 @@ const PageBannerUI = (props: any) => {
           {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
             <PageBannerWrapper>
               <Swiper
-                loop={false}
+                loop={pageBannerState.banner?.items.length > 1}
                 showsButtons={true}
                 style={styles.mainSwiper}
                 showsPagination={false}

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

@@ -126,6 +126,7 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		slide1: {
 			flex: 1,
+			alignItems: 'center'
 		},
 		mainSwiper: {
 			height: 258,
@@ -919,7 +920,7 @@ export const ProductOptionsUI = (props: any) => {
 										disabled={productCart.quantity === 1 || !productCart.quantity || isSoldOut || ((productCart?.quantity + productAddedToCartLength) <= product?.minimum_per_order)}>
 										<OIcon
 											src={theme.images.general.minus}
-											width={16}
+											width={20}
 											color={
 												productCart.quantity === 1 || isSoldOut
 													? theme.colors.backgroundGray
@@ -940,7 +941,8 @@ export const ProductOptionsUI = (props: any) => {
 												borderRadius: 8,
 												borderColor: theme.colors.inputBorderColor,
 												height: 44,
-												marginHorizontal: 10
+												marginHorizontal: 10,
+												fontSize: 16
 											}}
 										/>
 									)}
@@ -963,7 +965,7 @@ export const ProductOptionsUI = (props: any) => {
 										}>
 										<OIcon
 											src={theme.images.general.plus}
-											width={16}
+											width={20}
 											color={
 												maxProductQuantity <= 0 ||
 													(productCart?.quantity + productAddedToCartLength) >= maxProductQuantity ||

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

@@ -241,7 +241,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginEnd: 7 }}>
 											<OIcon
 												src={theme.images.general.pencil}
-												width={16}
+												width={20}
 												color={theme.colors.textSecondary}
 											/>
 										</TouchableOpacity>
@@ -254,7 +254,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										>
 											<OIcon
 												src={theme.images.general.trash}
-												width={17}
+												width={20}
 												color={theme.colors.textSecondary}
 											/>
 										</OAlert>

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

@@ -186,7 +186,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
         <NavBar
           title={t('REVIEW_DRIVER', 'Review driver')}
           titleAlign={'center'}
-          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          onActionLeft={() => onNavigationRedirect('BottomTab')}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}

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

@@ -67,7 +67,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
         <NavBar
           title={t('REVIEW_PRODUCT', 'Review product')}
           titleAlign={'center'}
-          onActionLeft={() => onNavigationRedirect('MyOrders')}
+          onActionLeft={() => onNavigationRedirect('BottomTab')}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}

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

@@ -168,7 +168,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					<View style={{ flexDirection: 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer style={[styles.quantityContainer, {
-								transform: [{ translateX: 25 }, { translateY: hideAddButton ? -25 : -55 }],
+								transform: [{ translateX: 25 }, { translateY: -25 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -273,6 +273,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								width: '100%',
 								borderRadius: 7.6,
 								marginTop: 10,
+								height: 40
 
 							}}
 							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}

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

@@ -21,6 +21,7 @@ export const QuantityContainer = styled.View`
 export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
+  margin-vertical: 6px;
 `
 
 export const LogoWrapper = styled.View`

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

@@ -195,6 +195,9 @@ const StripeElementsFormUI = (props: any) => {
 								cardStyle={{
 									backgroundColor: '#FFFFFF',
 									textColor: '#000000',
+									borderWidth: 1,
+									borderRadius: 8,
+									borderColor: theme.colors.border
 								}}
 								style={{
 									width: '100%',

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

@@ -163,7 +163,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	}, [removeAccountState])
 
 	return (
-		<View style={{ flex: 1, height: height - top - bottom - 62, paddingTop: 20 }}>
+		<View style={{ flex: 1, height: height - top - bottom - 42, paddingTop: 20 }}>
 			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
 				{t('PROFILE', 'Profile')}
 			</OText> */}
@@ -183,7 +183,7 @@ const ProfileListUI = (props: ProfileParams) => {
 				<View style={{ flexBasis: '70%' }}>
 					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{user?.name} {user?.lastname}</OText>
 					<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
-						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
+						<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
 					</TouchableOpacity>
 				</View>
 			</CenterView>

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

@@ -3,6 +3,7 @@ import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle }
 import styled from 'styled-components/native';
 import OIcon from './OIcon';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import { useTheme } from 'styled-components/native';
 
 const Input = styled.TextInput`
   flex-grow: 1;
@@ -39,6 +40,7 @@ interface Props extends TextInputProps {
 	inputStyle?: TextStyle;
 	wrapperRef?: any;
 	onPress?: any;
+	isFocusHighlight?: boolean
 }
 
 const Wrapper = styled.Pressable`
@@ -54,12 +56,16 @@ const Wrapper = styled.Pressable`
 `;
 
 const OInput = (props: Props): React.ReactElement => {
+	const theme = useTheme();
+	const [inputFocused, setInputFocused] = React.useState(false)
 	return (
 		<Wrapper
 			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
 			style={{
 				backgroundColor: props.bgColor,
-				borderColor: props.borderColor,
+				borderColor: !props.isFocusHighlight
+					? props.borderColor
+					: inputFocused ? theme.colors.primary : theme.colors.border,
 				...props.style,
 			}}>
 			{props.icon ? (
@@ -95,6 +101,8 @@ const OInput = (props: Props): React.ReactElement => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={props?.inputStyle}
+				onFocus={() => setInputFocused(true)}
+				onBlur={() => setInputFocused(false)}
 			/>
 			{props.iconRight && (
 				<OIcon
@@ -114,6 +122,7 @@ OInput.defaultProps = {
 	iconColor: '#959595',
 	bgColor: 'white',
 	borderColor: 'white',
+	isFocusHighlight: false
 };
 
 export default OInput;