ordering-ui-react-native 0.12.16 → 0.12.20

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { BusinessProductsCategories as ProductsCategories } from 'ordering-components/native'
 import { I18nManager, ScrollView, StyleSheet, View } from 'react-native'
 import { Tab } from './styles'
@@ -15,8 +15,20 @@ const BusinessProductsCategoriesUI = (props: any) => {
     categorySelected,
     loading,
     contentStyle,
+    scrollViewRef,
+    productListLayout,
+    categoriesLayout,
+    selectedCategoryId,
+    lazyLoadProductsRecommended,
+    setSelectedCategoryId,
+    setCategoryClicked
   } = props
 
+  const [tabLayouts, setTabLayouts] = useState<any>({});
+  const [scrollOffsetX, setScrollOffsetX] = useState<any>(0);
+	const tabsRef = useRef<any>(null);
+
+
   const theme = useTheme();
 
   const styles = StyleSheet.create({
@@ -41,8 +53,50 @@ const BusinessProductsCategoriesUI = (props: any) => {
     }
   })
 
+  const handleCategoryScroll = (category: any) => {
+    setCategoryClicked(true);
+    setSelectedCategoryId(`cat_${category?.id}`);
+    
+		if (!lazyLoadProductsRecommended) {
+			if (category?.id) {
+				scrollViewRef.current.scrollTo({
+					y: categoriesLayout[`cat_${category?.id}`]?.y + productListLayout?.y + 270,
+					animated: true
+				})
+			} else {
+				scrollViewRef.current.scrollTo({
+					y: productListLayout?.y - 70,
+					animated: true
+				})
+			}
+		} else {
+			handlerClickCategory(category)
+		}
+	}
+
+  
+	const handleOnLayout = (event: any, categoryId: any) => {
+    const _tabLayouts = { ...tabLayouts }
+    const categoryKey = 'cat_' + categoryId
+    _tabLayouts[categoryKey] = event.nativeEvent.layout
+    setTabLayouts(_tabLayouts)
+  }
+
+	useEffect(() => {
+		if (!selectedCategoryId || Object.keys(tabLayouts).length === 0) return
+		tabsRef.current.scrollTo({
+			x: tabLayouts[selectedCategoryId]?.x - 40,
+			animated: true
+		})
+	}, [selectedCategoryId, tabLayouts])
+
+
   return (
-    <ScrollView horizontal contentContainerStyle={contentStyle} style={{ ...styles.container, borderBottomWidth: loading ? 0 : 1 }} showsHorizontalScrollIndicator={false}>
+    <ScrollView ref={tabsRef} horizontal contentContainerStyle={contentStyle} 
+      style={{ ...styles.container, borderBottomWidth: loading ? 0 : 1 }} showsHorizontalScrollIndicator={false}
+      onScroll={(e: any) => setScrollOffsetX(e.nativeEvent.contentOffset.x)}
+			scrollEventThrottle={16}
+      >
       {loading && (
         <Placeholder Animation={Fade}>
           <View style={{ flexDirection: 'row' }}>
@@ -56,15 +110,16 @@ const BusinessProductsCategoriesUI = (props: any) => {
         !loading && categories && categories.length && categories.map((category: any) => (
           <Tab
             key={category.name}
-            onPress={() => handlerClickCategory(category)}
+            onPress={() => handleCategoryScroll(category)}
             style={{ ...(category.id === 'featured') && !featured && styles.featuredStyle }}
+            onLayout={(event: any) => handleOnLayout(event, category.id)}
           >
             <OText
-              color={categorySelected?.id === category.id ? theme.colors.textPrimary : theme.colors.textSecondary}
+              color={selectedCategoryId === `cat_${category.id}` ? theme.colors.textPrimary : theme.colors.textSecondary}
             >
               {category.name}
             </OText>
-            <View style={categorySelected?.id === category.id ? styles.tabStyle : styles.tabDeactived} />
+            <View style={selectedCategoryId === `cat_${category.id}` ? styles.tabStyle : styles.tabDeactived} />
           </Tab>
         ))
       }

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

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react'
-import { ProductsList, useLanguage } from 'ordering-components/native'
+import React, { useState, useEffect, Fragment } from 'react'
+import { ProductsList, useLanguage, useUtils } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { NotFoundSource } from '../NotFoundSource'
 import { BusinessProductsListParams } from '../../types'
-import { OText } from '../shared'
+import { OIcon, OText } from '../shared'
 import {
   ProductsContainer,
   ErrorMessage,
   WrapperNotFound
 } from './styles'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { Platform, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -27,120 +27,173 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleClearSearch,
     errorQuantityProducts,
     handleCancelSearch,
-    sortBy
+    sortBy,
+    categoriesLayout,
+    setCategoriesLayout
   } = props
 
   const [, t] = useLanguage()
-  const [sort, setSort] = useState(sortBy);
-  const [allProducts, setAllProducts] = useState(categoryState.products);
+  const [{optimizeImage}] = useUtils();
 
-  useEffect(() => {
-    if (categoryState?.products) {
-      setAllProducts([...categoryState.products.sort((a: any,b:any) => sort == 'alphabet' ? a.name > b.name : a?.rank > b?.rank)])
-      console.log(sortBy)
-    }
-  }, [categoryState, sortBy]);
+  const handleOnLayout = (event: any, categoryId: any) => {
+    const _categoriesLayout = { ...categoriesLayout }
+    const categoryKey = 'cat_' + categoryId
+    _categoriesLayout[categoryKey] = event.nativeEvent.layout
+    setCategoriesLayout(_categoriesLayout)
+  }
 
   return (
     <ProductsContainer>
-      {category.id && (
-        allProducts?.map((product: any) => (
+      {category.id && 
+        categoryState.products?.map((product: any) => (
           <SingleProductCard
-            key={product.id}
-            isSoldOut={(product.inventoried && !product.quantity)}
+            key={'prod_' + product.id}
+            isSoldOut={product.inventoried && !product.quantity}
             product={product}
             businessId={businessId}
             onProductClick={() => onProductClick(product)}
           />
-        ))
-      )}
+        ))}
 
-      {
-        !category.id && (
-          featured && allProducts?.find((product: any) => product.featured) && (
+      {!category.id &&
+        featured &&
+        categoryState?.products?.find((product: any) => product.featured) && (
+          <View
+            onLayout={(event: any) => handleOnLayout(event, 'featured')}
+          >
+            <OText size={16} weight={'600'} mBottom={15}>
+              {t('FEATURED', 'Featured')}
+            </OText>
             <>
-              <OText size={16} weight={Platform.OS == 'ios' ? '600' : 'bold'} mBottom={20}>{t('FEATURED', 'Featured')}</OText>
-              {allProducts?.map((product: any) => product.featured && (
-                <SingleProductCard
-                  key={product.id}
-                  isSoldOut={(product.inventoried && !product.quantity)}
-                  product={product}
-                  businessId={businessId}
-                  onProductClick={onProductClick}
-                />
-              ))}
+              {categoryState.products?.map(
+                (product: any, i: any) =>
+                  product.featured && (
+                    <SingleProductCard
+                      key={i}
+                      isSoldOut={product.inventoried && !product.quantity}
+                      product={product}
+                      businessId={businessId}
+                      onProductClick={onProductClick}
+                    />
+                  ),
+              )}
             </>
-          )
-        )
-      }
+          </View>
+      )}
+
 
-      {
-        !category.id && categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
-          const products = allProducts?.filter((product: any) => product.category_id === category.id) || []
-          return (
-            <View key={category.id} style={{alignItems: 'flex-start'}}>
-              {
-                products.length > 0 && (
-                  <>
-                    <OText size={16} weight={Platform.OS == 'ios' ? '600' : 'bold'} mBottom={20}>{category.name}</OText>
-                    <>
-                    {
-                      products.map((product: any) => (
+      {!category.id &&
+        categories &&
+        categories
+          .filter((category) => category.id !== null)
+          .map((category, i, _categories) => {
+            const products =
+              categoryState.products?.filter(
+                (product: any) => product.category_id === category.id,
+              ) || [];
+            return (
+              <React.Fragment key={'cat_' + category.id}>
+                {products.length > 0 && (
+                  <Fragment>
+                    <View
+                      style={bpStyles.catWrap}
+        							onLayout={(event: any) => handleOnLayout(event, category.id)}
+                    >
+                      <View style={bpStyles.catIcon}>
+                        <OIcon
+                          url={optimizeImage(category.image, 'h_100,c_limit')}
+                          width={41}
+                          height={41}
+                          style={{ borderRadius: 7.6 }}
+                        />
+                      </View>
+                      <OText size={16} weight="600">
+                        {category.name}
+                      </OText>
+                    </View>
+                    <Fragment>
+                      {products.map((product: any, i: any) => (
                         <SingleProductCard
-                          key={product.id}
+                          key={i}
                           isSoldOut={product.inventoried && !product.quantity}
                           businessId={businessId}
                           product={product}
                           onProductClick={onProductClick}
                         />
-                      ))
-                    }
-                    </>
-                  </>
-                )
-              }
-            </View>
-          )
-        })
-      }
+                      ))}
+                    </Fragment>
+                  </Fragment>
+                )}
+              </React.Fragment>
+            );
+          })}
 
-      {
-        (categoryState.loading || isBusinessLoading) && (
-          <>
-            {[...Array(categoryState?.pagination?.nextPageItems).keys()].map((item, i) => (
+      {(categoryState.loading || isBusinessLoading) && (
+        <>
+          {[...Array(categoryState?.pagination?.nextPageItems).keys()].map(
+            (item, i) => (
               <Placeholder key={i} style={{ padding: 5 }} Animation={Fade}>
                 <View style={{ flexDirection: 'row' }}>
-                  <PlaceholderLine width={24} height={70} style={{ marginRight: 10, marginBottom: 10 }} />
+                  <PlaceholderLine
+                    width={24}
+                    height={70}
+                    style={{ marginRight: 10, marginBottom: 10 }}
+                  />
                   <Placeholder style={{ paddingVertical: 10 }}>
-                      <PlaceholderLine width={60} style={{marginBottom: 25}}/>
-                      <PlaceholderLine width={20} />
+                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+                    <PlaceholderLine width={20} />
                   </Placeholder>
                 </View>
               </Placeholder>
-            ))}
-          </>
-        )
-      }
-      {
-        !categoryState.loading && !isBusinessLoading && categoryState.products.length === 0 && !errors && !((searchValue && errorQuantityProducts) || (!searchValue && !errorQuantityProducts)) && (
+            ),
+          )}
+        </>
+      )}
+
+
+      {!categoryState.loading &&
+        !isBusinessLoading &&
+        categoryState.products.length === 0 &&
+        !errors &&
+        !(
+          (searchValue && errorQuantityProducts) ||
+          (!searchValue && !errorQuantityProducts)
+        ) && (
           <WrapperNotFound>
             <NotFoundSource
-              content={!searchValue ? t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time') : t('ERROR_NOT_FOUND_PRODUCTS', 'No products found, please change filters.')}
-              btnTitle={!searchValue ? t('SEARCH_REDIRECT', 'Go to Businesses') : t('CLEAR_FILTERS', 'Clear filters')}
-              onClickButton={() => !searchValue ? handleSearchRedirect && handleSearchRedirect() : handleCancelSearch && handleCancelSearch()}
+              content={
+                !searchValue
+                  ? t(
+                      'ERROR_NOT_FOUND_PRODUCTS_TIME',
+                      'No products found at this time',
+                    )
+                  : t(
+                      'ERROR_NOT_FOUND_PRODUCTS',
+                      'No products found, please change filters.',
+                    )
+              }
+              btnTitle={
+                !searchValue
+                  ? t('SEARCH_REDIRECT', 'Go to Businesses')
+                  : t('CLEAR_FILTERS', 'Clear filters')
+              }
+              onClickButton={() =>
+                !searchValue
+                  ? handleSearchRedirect && handleSearchRedirect()
+                  : handleCancelSearch && handleCancelSearch()
+              }
             />
           </WrapperNotFound>
-        )
-      }
+        )}
 
-      {errors && errors.length > 0 && (
+      {errors &&
+        errors.length > 0 &&
         errors.map((e: any, i: number) => (
           <ErrorMessage key={i}>
             <OText space>ERROR:</OText>
             <OText>{e}</OText>
           </ErrorMessage>
-        ))
-      )}
+        ))}
     </ProductsContainer>
   )
 }
@@ -155,3 +208,15 @@ export const BusinessProductsList = (props: BusinessProductsListParams) => {
     <ProductsList {...businessProductsListProps} />
   )
 }
+
+const bpStyles = StyleSheet.create({
+  catWrap: { flexDirection: 'row', alignItems: 'center', height: 41, marginBottom: 19 },
+  catIcon: {
+    borderRadius: 7.6,
+    shadowColor: '#000000',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 0 },
+    shadowRadius: 1,
+    marginEnd: 13,
+  },
+});

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

@@ -1,11 +1,13 @@
-import React, { useState } from 'react'
+import React, { useState, useRef, useCallback } from 'react'
 import { View, TouchableOpacity, StyleSheet, TextStyle, ScrollView, I18nManager, Platform } from 'react-native'
 import {
 	BusinessAndProductList,
 	useLanguage,
 	useOrder,
 	useSession,
-	useUtils
+	useUtils,
+	useToast,
+	ToastType
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -35,6 +37,8 @@ import { OrderSummary } from '../OrderSummary'
 import NavBar from '../NavBar'
 import SocialShareFav from '../SocialShare'
 
+const PIXELS_TO_SCROLL = 1000
+
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
 		navigation,
@@ -52,7 +56,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		productModal,
 		handleChangeCategory,
 		setProductLogin,
-		updateProductModal
+		updateProductModal,
+		getNextProducts
 	} = props
 	const theme = useTheme()
 
@@ -97,14 +102,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [{ auth }] = useSession()
 	const [orderState] = useOrder()
 	const [{ parsePrice }] = useUtils()
+	const [ ,{showToast}] = useToast()
 	const { business, loading, error } = businessState
 	const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
 	const [curProduct, setCurProduct] = useState(null)
 	const [openUpselling, setOpenUpselling] = useState(false)
 	const [openCart, setOpenCart] = useState(false)
-	const [canOpenUpselling, setCanOpenUpselling] = useState(false)
+	const [isCategoryClicked, setCategoryClicked] = useState(false)
+	const [categoriesLayout, setCategoriesLayout] = useState<any>({})
+	const [productListLayout, setProductListLayout] = useState<any>(null)
+	const [selectedCategoryId, setSelectedCategoryId] = useState<any>('cat_all')
+
+	const scrollViewRef = useRef<any>(null)
 
-	const [isStickyCategory, setStickyCategory] = useState(false);
 	const { top } = useSafeAreaInsets();
 	const [sortBy, setSortBy] = useState('alphabet');
 
@@ -146,19 +156,36 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		setOpenCart(false)
 	}
 
-	const handlePageScroll = (event: any) => {
-		const y = event?.nativeEvent?.contentOffset?.y || 0;
-		if (y > 30 && !isStickyCategory) {
-			setStickyCategory(true);
-		} else if (y < 19 && isStickyCategory) {
-			setStickyCategory(false);
+	const handlePageScroll = useCallback(({ nativeEvent }: any) => {
+		const scrollOffset = nativeEvent.contentOffset.y
+		if (businessState?.business?.lazy_load_products_recommended) {
+			const height = nativeEvent.contentSize.height
+			const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
+			if (scrollOffset + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
+				getNextProducts()
+				showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
+			}
+		} else {
+			if (!scrollOffset || !categoriesLayout || !productListLayout || isCategoryClicked) return
+			
+			for (const key in categoriesLayout) {
+				const categoryOffset = categoriesLayout[key].y + productListLayout?.y - 70
+				if (scrollOffset < 10) {
+					setSelectedCategoryId('cat_all');
+					return;
+				}
+				if (categoryOffset - 50 <= scrollOffset && scrollOffset <= categoryOffset + 50) {
+					if (selectedCategoryId !== key) {
+						setSelectedCategoryId(key)
+					}
+				}
+			}
 		}
-	}
-	// useEffect(() => {
-	//   if (!orderState.loading) {
-	//     handleCloseProductModal()
-	//   }
-	// }, [orderState.loading])
+	}, [isCategoryClicked, selectedCategoryId])
+
+	const handleTouchDrag = useCallback(() => {
+		setCategoryClicked(false);
+	}, []);
 
 	return (
 		<>
@@ -172,11 +199,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							onClick={() => (navigation?.canGoBack() && navigation.goBack()) || (auth && navigation.navigate('BottomTab'))}
 							imgLeftStyle={{ tintColor: theme.colors.textPrimary }}
 						/>
-						{isStickyCategory && (
-							<Animated.View style={{ flexBasis: '74%', paddingHorizontal: 10, alignItems: 'center' }}>
-								<OText style={theme.labels.middle as TextStyle} numberOfLines={1} ellipsizeMode={'tail'}>{business?.name}</OText>
-							</Animated.View>
-						)}
 						{!errorQuantityProducts && (
 							<View style={{ ...styles.headerItem }}>
 								<View
@@ -196,8 +218,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				style={styles.mainContainer}
 				isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
 				stickyHeaderIndices={[1]}
+				ref={scrollViewRef}
 				onScroll={handlePageScroll}
-				scrollEventThrottle={14}
+				onScrollBeginDrag={handleTouchDrag}
+				scrollEventThrottle={16}
 			>
 				<WrapHeader>
 					<BusinessBasicInformation
@@ -211,7 +235,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						<WrapSearchBar>
 							<SearchBar
 								onSearch={handleChangeSearch}
-								// onCancel={() => handleCancel()}
 								isCancelXButtonShow
 								noBorderShow
 								placeholder={t('SEARCH', 'Search')}
@@ -232,18 +255,25 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				{!loading && business?.id && !(business?.categories?.length === 0) && (
 					<CategoryWrap>
 						<BusinessProductsCategories
-							categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
+							categories={[{ id: 'all', name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
 							categorySelected={categorySelected}
 							onClickCategory={handleChangeCategory}
 							featured={featuredProducts}
 							openBusinessInformation={openBusinessInformation}
+							scrollViewRef={scrollViewRef}
 							contentStyle={{ paddingHorizontal: 40 }}
+							productListLayout={productListLayout}
+							categoriesLayout={categoriesLayout}
+							selectedCategoryId={selectedCategoryId}
+							setSelectedCategoryId={setSelectedCategoryId}
+							setCategoryClicked={setCategoryClicked}
+							lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 						/>
 					</CategoryWrap>
 				)}
 				<View>
 					{!loading && business?.id && (
-						<WrapContent>
+						<WrapContent onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}>
 							<BusinessProductsList
 								categories={[
 									{ id: null, name: t('ALL', 'All') },
@@ -262,6 +292,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								errorQuantityProducts={errorQuantityProducts}
 								handleCancelSearch={handleCancel}
 								sortBy={sortBy}
+								categoriesLayout={categoriesLayout}
+								setCategoriesLayout={setCategoriesLayout}
 							/>
 						</WrapContent>
 					)}

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

@@ -10,7 +10,7 @@ import {
 
 import NavBar from '../NavBar';
 import { FormInput, FormSide } from '../LoginForm/styles'
-import { Container } from './styles'
+import { Container, InputWrap } from './styles'
 
 import { OButton, OInput, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
@@ -26,9 +26,8 @@ const ForgotPasswordUI = (props: any) => {
 
   const styles = StyleSheet.create({
     inputStyle: {
-      marginBottom: 25,
-      borderWidth: 1,
-      borderColor: theme.colors.disabled
+      borderWidth: 0,
+      minHeight: 44
     }
   });
 
@@ -84,47 +83,50 @@ const ForgotPasswordUI = (props: any) => {
         onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
         rightImg={null}
         paddingTop={0}
+        style={{paddingLeft: 0, paddingRight: 0}}
       />
       <FormSide>
         <OText
           color={'gray'}
           size={16}
           weight={'300'}
-          style={{ marginBottom: 30 }}
+          style={{ marginBottom: 30, marginTop: 30 }}
         >
           {t('FORGOT_PASSWORD_TEXT_MESSAGE', "Enter your email address and we'll sent a link to reset your password.")}
         </OText>
         <FormInput>
-          <Controller
-            control={control}
-            render={({ onChange, value }: any) => (
-              <OInput
-                placeholder={t('EMAIL', 'Email')}
-                style={styles.inputStyle}
-                icon={theme.images.general.email}
-                onChange={(e: any) => {
-                  handleChangeInputEmail(e, onChange)
-                }}
-                value={value}
-                autoCapitalize='none'
-                autoCorrect={false}
-                type='email-address'
-                autoCompleteType='email'
-                returnKeyType='done'
-                blurOnSubmit
-                onSubmitEditing={handleSubmit(onSubmit)}
-              />
-            )}
-            name="email"
-            rules={{
-              required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
-              pattern: {
-                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
-              }
-            }}
-            defaultValue=""
-          />
+          <InputWrap>
+            <OText weight="bold">Email</OText>
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  placeholder={t('EXAMPLE@MAIL.COM', 'your@email.com')}
+                  style={styles.inputStyle}
+                  onChange={(e: any) => {
+                    handleChangeInputEmail(e, onChange)
+                  }}
+                  value={value}
+                  autoCapitalize='none'
+                  autoCorrect={false}
+                  type='email-address'
+                  autoCompleteType='email'
+                  returnKeyType='done'
+                  blurOnSubmit
+                  onSubmitEditing={handleSubmit(onSubmit)}
+                />
+              )}
+              name="email"
+              rules={{
+                required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
+                }
+              }}
+              defaultValue=""
+            />
+          </InputWrap>
 
           <OButton
             text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}

package/themes/doordash/src/components/ForgotPasswordForm/styles.tsx

@@ -9,3 +9,10 @@ export const Wrapper = styled.View`
 export const Container = styled.View`
   padding-bottom: 40px;
 `
+export const InputWrap = styled.View`
+  flex-direction: row;
+  align-items: center;
+  border-bottom-width: 1px;
+  border-bottom-color: #D7D7D7;
+  margin-bottom: 35px;
+`