ordering-ui-react-native 0.15.69 → 0.15.71-release

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { PromotionsController, useLanguage, useUtils, useEvent } from 'ordering-components/native'
+import { PromotionsController, useLanguage, useUtils } from 'ordering-components/native'
 import {
     PromotionsContainer,
     SingleOfferContainer,
@@ -17,15 +17,18 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView } from 'react-native'
+import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { PromotionParams } from '../../types'
-const PromotionsUI = (props : PromotionParams) => {
+import { Container } from '../../layouts/Container'
+
+const PromotionsUI = (props: PromotionParams) => {
     const {
         navigation,
         offersState,
         handleSearchValue,
         searchValue,
+        loadOffers,
         offerSelected,
         setOfferSelected
     } = props
@@ -65,20 +68,26 @@ const PromotionsUI = (props : PromotionParams) => {
 
     const [, t] = useLanguage()
     const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
-    const [events] = useEvent()
     const [openModal, setOpenModal] = useState(false)
+    const [refreshing] = useState(false);
 
-    const handleClickOffer = (offer : any) => {
+    const handleClickOffer = (offer: any) => {
         setOpenModal(true)
         setOfferSelected(offer)
     }
 
-    const handleBusinessClick = (business : any) => {
-        events.emit('go_to_page', { page: 'business', params: { store: business.slug } })
+    const handleBusinessClick = (store: any) => {
+        setOpenModal(false)
+        navigation.navigate('Business', { store: store.slug })
     }
 
-    const filteredOffers = offersState?.offers?.filter((offer : any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
+    const handleOnRefresh = () => {
+        if (!offersState.loading) {
+            loadOffers();
+        }
+    }
 
+    const filteredOffers = offersState?.offers?.filter((offer: any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
     const targetString = offerSelected?.target === 1
         ? t('SUBTOTAL', 'Subtotal')
         : offerSelected?.target === 2
@@ -86,141 +95,150 @@ const PromotionsUI = (props : PromotionParams) => {
             : t('SERVICE_FEE', 'Service fee')
 
     return (
-        <PromotionsContainer>
+        <Container
+            noPadding
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={() => handleOnRefresh()}
+                />
+            }
+        >
             <NavBar
-                onActionLeft={() => navigation.goBack()}
-                btnStyle={{ paddingLeft: 0 }}
-                paddingTop={20}
-                style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
                 title={t('PROMOTIONS', 'Promotions')}
                 titleAlign={'center'}
-                titleStyle={{ fontSize: 16, marginRight: 0, marginLeft: 0, marginBottom: 10 }}
-                titleWrapStyle={{ paddingHorizontal: 0 }}
+                onActionLeft={() => navigation.goBack()}
+                showCall={false}
+                style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
             />
-            <SearchBarContainer>
-                <SearchBar
-                    placeholder={t('SEARCH_OFFERS', 'Search offers')}
-                    onSearch={handleSearchValue}
-                />
-            </SearchBarContainer>
+            <PromotionsContainer>
+                <SearchBarContainer>
+                    <SearchBar
+                        placeholder={t('SEARCH_OFFERS', 'Search offers')}
+                        onSearch={handleSearchValue}
+                    />
+                </SearchBarContainer>
 
-            {offersState?.loading && (
-                <>
-                    {[...Array(5).keys()].map((key, i) => (
-                        <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
-                            <PlaceholderLine height={10} width={45} />
-                            <PlaceholderLine height={10} width={60} />
-                            <PlaceholderLine height={10} width={75} />
-                        </Placeholder>
+                {offersState?.loading && (
+                    <>
+                        {[...Array(5).keys()].map((key, i) => (
+                            <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
+                                <PlaceholderLine height={10} width={45} />
+                                <PlaceholderLine height={10} width={60} />
+                                <PlaceholderLine height={10} width={75} />
+                            </Placeholder>
+                        ))}
+                    </>
+                )}
+                {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
+                    <NotFoundSource
+                        content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
+                    />
+                )}
+                <ScrollView>
+                    {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
+                        <SingleOfferContainer key={offer.id}>
+                            <OfferInformation>
+                                <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
+                                {!!offer?.description && (
+                                    <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
+                                )}
+                                <OText style={styles.offerExtraInfo}>
+                                    {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
+                                </OText>
+                                <AvailableBusinesses>
+                                    <OText style={styles.offerExtraInfo} numberOfLines={1}>
+                                        {t('APPLY_FOR', 'Apply for')}:
+                                        {offer.businesses.map((business: any, i: number) => (
+                                            <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
+                                        ))}
+                                    </OText>
+                                </AvailableBusinesses>
+                            </OfferInformation>
+                            <OButton
+                                onClick={() => handleClickOffer(offer)}
+                                text={t('VIEW', 'View')}
+                                style={styles.buttonStyle}
+                                textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
+                            />
+                        </SingleOfferContainer>
                     ))}
-                </>
-            )}
-            {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
-                <NotFoundSource
-                    content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
-                />
-            )}
-            <ScrollView>
-                {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer : any) => (
-                    <SingleOfferContainer key={offer.id}>
-                        <OfferInformation>
-                            <OText style={styles.offerTitle}>{offer?.name}</OText>
-                            {offer?.description && (
-                                <OText style={styles.offerDescription}>{offer?.description}</OText>
-                            )}
-                            <OText style={styles.offerExtraInfo}>
-                                {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
-                            </OText>
-                            <AvailableBusinesses>
-                                <OText style={styles.offerExtraInfo}>{t('APPLY_FOR', 'Apply for')}:</OText>
-                                {offer.businesses.map((business: any, i: number) => (
-                                    <OText style={styles.offerExtraInfo} key={business?.id}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</OText>
-                                ))}
-                            </AvailableBusinesses>
-                        </OfferInformation>
-                        <OButton
-                            onClick={() => handleClickOffer(offer)}
-                            text={t('VIEW', 'View')}
-                            style={styles.buttonStyle}
-                            textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
-                        />
-                    </SingleOfferContainer>
-                ))}
-            </ScrollView>
-            <OModal
-                open={openModal}
-                onClose={() => setOpenModal(false)}
-                entireModal
+                </ScrollView>
+                <OModal
+                    open={openModal}
+                    onClose={() => setOpenModal(false)}
+                    entireModal
 
-                title={``}
-            >
-                <View style={{ padding: 20 }}>
-                    <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
-                        {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
-                    </OText>
-                    <OfferData>
-                        {offerSelected?.type === 2 && (
-                            <Code>
-                                <OText>{t('YOUR_CODE', 'Your code')}</OText>
-                                <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
-                            </Code>
-                        )}
-                        <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
-                        {offerSelected?.auto && (
-                            <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
-                        )}
-                        {offerSelected?.minimum && (
-                            <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purshase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
-                        )}
-                        {offerSelected?.max_discount && (
-                            <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
-                        )}
-                        {offerSelected?.description && (
-                            <OText>{offerSelected?.description}</OText>
-                        )}
-                    </OfferData>
-                    <OText style={{ marginTop: 10, marginBottom: 10 }}>
-                        {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
-                    </OText>
-                    <ScrollView style={{height: '75%'}}>
-                        {offerSelected?.businesses?.map((business : any) => {
-                            return (
-                                <SingleBusinessOffer key={business.id}>
-                                    {business?.logo ? (
-                                        <FastImage
-                                            style={styles.productStyle}
-                                            source={{
-                                                uri: optimizeImage(business?.logo, 'h_250,c_limit'),
-                                                priority: FastImage.priority.normal,
-                                            }}
-                                            resizeMode={FastImage.resizeMode.cover}
-                                        />
-                                    ) : (
-                                        <OIcon
-                                            src={theme?.images?.dummies?.product}
-                                            style={styles.productStyle}
-                                        />
-                                    )}
-                                    <BusinessInfo>
-                                        <OText>{business.name}</OText>
-                                        <OButton
-                                            onClick={() => handleBusinessClick(business)}
-                                            text={t('GO_TO_BUSINESSS', 'Go to business')}
-                                            style={styles.modalButtonStyle}
-                                            textStyle={{ fontSize: 10, color: '#fff' }}
-                                        />
-                                    </BusinessInfo>
-                                </SingleBusinessOffer>
-                            )
-                        })}
-                    </ScrollView>
-                </View>
-            </OModal>
-        </PromotionsContainer>
+                    title={``}
+                >
+                    <View style={{ padding: 20 }}>
+                        <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
+                            {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
+                        </OText>
+                        <OfferData>
+                            {offerSelected?.type === 2 && (
+                                <Code>
+                                    <OText>{t('YOUR_CODE', 'Your code')}</OText>
+                                    <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
+                                </Code>
+                            )}
+                            <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
+                            {offerSelected?.auto && (
+                                <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
+                            )}
+                            {!!offerSelected?.minimum && (
+                                <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
+                            )}
+                            {!!offerSelected?.max_discount && (
+                                <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
+                            )}
+                            {!!offerSelected?.description && (
+                                <OText>{offerSelected?.description}</OText>
+                            )}
+                        </OfferData>
+                        <OText style={{ marginTop: 10, marginBottom: 10 }}>
+                            {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
+                        </OText>
+                        <ScrollView style={{ height: '75%' }}>
+                            {offerSelected?.businesses?.map((business: any) => {
+                                return (
+                                    <SingleBusinessOffer key={business.id}>
+                                        {business?.logo ? (
+                                            <FastImage
+                                                style={styles.productStyle}
+                                                source={{
+                                                    uri: optimizeImage(business?.logo, 'h_250,c_limit'),
+                                                    priority: FastImage.priority.normal,
+                                                }}
+                                                resizeMode={FastImage.resizeMode.cover}
+                                            />
+                                        ) : (
+                                            <OIcon
+                                                src={theme?.images?.dummies?.product}
+                                                style={styles.productStyle}
+                                            />
+                                        )}
+                                        <BusinessInfo>
+                                            <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
+                                            <OButton
+                                                onClick={() => handleBusinessClick(business)}
+                                                text={t('GO_TO_BUSINESSS', 'Go to business')}
+                                                style={styles.modalButtonStyle}
+                                                textStyle={{ fontSize: 10, color: '#fff' }}
+                                            />
+                                        </BusinessInfo>
+                                    </SingleBusinessOffer>
+                                )
+                            })}
+                        </ScrollView>
+                    </View>
+                </OModal>
+            </PromotionsContainer>
+        </Container>
     )
 }
 
-export const Promotions = (props : PromotionParams) => {
+export const Promotions = (props: PromotionParams) => {
     const PromotionsProps = {
         ...props,
         UIComponent: PromotionsUI

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

@@ -2,12 +2,13 @@ import styled, { css } from 'styled-components/native'
 
 export const PromotionsContainer = styled.View`
   width: 100%;
+  padding-left: 40px;
+	padding-right: 40px;
 `
 
 export const SingleOfferContainer = styled.View`
   flex-direction: row;
   width: 100%;
-  height: 80px;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;

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

@@ -44,7 +44,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
     photoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -86,11 +86,11 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
   const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('driver')
@@ -204,7 +204,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
             <OIcon
               url={order?.driver?.photo}
               src={!order?.driver?.photo && theme.images.general.user}
-              cover={order?.driver?.photo ? true: false}
+              cover={order?.driver?.photo ? true : false}
               width={80}
               height={80}
             />
@@ -212,7 +212,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
           <OText weight={500} style={{ marginVertical: 10 }} color={theme.colors.textNormal}>{order?.driver?.name} {order?.driver?.lastname}</OText>
         </DriverPhotoContainer>
 
-        <View style={{flex: 1, justifyContent: 'flex-end'}}>
+        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
           <FormReviews>
             <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_DRIVER', 'How was your driver?')}</OText>
             <RatingBarContainer>
@@ -264,7 +264,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
                   style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
                   imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
                   imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-                  onClick={() => handleChangeComment(commentItem) }
+                  onClick={() => handleChangeComment(commentItem)}
                 />
               ))}
             </CommentsButtonGroup>

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

@@ -318,7 +318,7 @@ export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
     UIComponent: ReviewOrderUI,
-    defaultStar: 5
+    defaultStar: props?.defaultStar || 5
   }
   return <ReviewOrderController {...reviewOrderProps} />
 }

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

@@ -0,0 +1,118 @@
+import React, { useState } from 'react'
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { useLanguage, useUtils } from 'ordering-components/native'
+
+import {
+  ReviewOrderContainer,
+  BusinessLogo,
+  FormReviews,
+  ActionContainer,
+  RatingStarContainer,
+  PlacedDate
+} from './styles'
+import { OButton, OIcon, OText } from '../shared'
+import { StyleSheet, View, I18nManager } from 'react-native';
+import { FloatingBottomContainer } from '../../layouts/FloatingBottomContainer'
+
+import { useTheme } from 'styled-components/native'
+
+export const ReviewTrigger = (props: any) => {
+  const {
+    order,
+    handleOpenOrderReview
+  } = props
+
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    logoWrapper: {
+      shadowColor: theme.colors.black,
+      shadowRadius: 3,
+      shadowOffset: { width: 1, height: 4 },
+      elevation: 3,
+      borderRadius: 8,
+      shadowOpacity: 0.1,
+      overflow: 'hidden'
+    },
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    },
+    statusBar: {
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+      height: 10,
+      borderRadius: 5,
+      marginTop: 5
+    },
+    ratingItemContainer: {
+      position: 'absolute',
+      top: -20
+    },
+    ratingItem: {
+      left: '-50%',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    ratingLineStyle: {
+      height: 10,
+      width: 1,
+      marginBottom: 10,
+      backgroundColor: theme.colors.dusk
+    },
+    reviewedStyle: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginVertical: 20
+    },
+  })
+
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const placedOnDate = parseDate(order?.delivery_datetime, { utc: true, outputFormat: 'dddd MMMM DD, YYYY' })
+  const [star, setStar] = useState(5)
+
+  return (
+    <>
+      <ReviewOrderContainer>
+        <BusinessLogo>
+          <View style={styles.logoWrapper}>
+            <OIcon
+              url={order?.logo}
+              width={80}
+              height={80}
+            />
+          </View>
+        </BusinessLogo>
+        {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
+        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
+          <FormReviews>
+            <RatingStarContainer>
+              {[...Array(5).keys()].map((index: number) => (<FontAwesome name={(index <= (star - 1)) ? 'star' : 'star-o'} size={28} key={`star-symbol-${index}`} onPress={() => setStar(index + 1)} color={theme?.colors?.primary} />)
+              )}
+            </RatingStarContainer>
+            <PlacedDate>
+              <OText color={theme.colors.textNormal}>{t('DONOT_FORGET_RATE_YOUR_ORDER', 'Do not forget to rate your order placed on ')}</OText>
+              <OText color={theme.colors.textNormal} style={{ fontWeight: "bold" }}>{placedOnDate}</OText>
+            </PlacedDate>
+          </FormReviews>
+        </View>
+      </ReviewOrderContainer>
+      <FloatingBottomContainer borderTopWidth={0} borderRadius={10}>
+        <ActionContainer>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={t('GOTO_REVIEW', 'Go to review')}
+            style={{ borderRadius: 8 }}
+            imgRightSrc={theme.images.general.arrow_right}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            onClick={() => handleOpenOrderReview(star)}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components/native'
+
+export const ReviewOrderContainer = styled.ScrollView`
+  padding: 0 25px;
+  margin-bottom: 100px;
+`
+
+export const BusinessLogo = styled.View`
+  margin-vertical: 5px;
+  align-items: center;
+`
+
+export const FormReviews = styled.View`
+  flex: 1;
+  height: 100%;
+  margin-top: 10px;
+`
+
+export const ActionContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 30px;
+`
+
+export const RatingStarContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+`
+export const PlacedDate = styled.View`
+  margin-top: 30px;
+`

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

@@ -20,7 +20,13 @@ export const SearchBar = (props: any) => {
 		inputStyle,
 		onPress,
 		isDisabled,
-		iconCustomRight
+		iconCustomRight,
+		onSubmitEditing,
+		blurOnSubmit,
+		inputContainerStyles,
+		containerStyles,
+		hideIcon,
+		autoFocus
 	} = props
 
 	const theme = useTheme();
@@ -75,19 +81,21 @@ export const SearchBar = (props: any) => {
 	}
 
 	return (
-		<Pressable style={[styles.container, { height: height }]}>
+		<Pressable style={[styles.container, containerStyles, { height: height }]}>
 			<OInput
+				autoFocus={autoFocus}
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={styles.inputStyle}
+				style={{ ...styles.inputStyle, ...inputContainerStyles }}
 				placeholder={placeholder}
-				icon={theme.images.general.search}
+				icon={!hideIcon && theme.images.general.search}
 				isDisabled={isDisabled}
 				iconStyle={{ width: 12 }}
 				returnKeyType='done'
-				inputStyle={{padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle}}
+				inputStyle={{ padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle }}
 				onPress={() => onPress && onPress()}
 				iconCustomRight={iconCustomRight}
+				onSubmitEditing={() => onSubmitEditing && onSubmitEditing()}
 			/>
 			{isCancelButtonShow && (
 				<OButton