ordering-ui-react-native 0.16.44 → 0.16.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.44",
+  "version": "0.16.47",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -86,6 +86,7 @@
     "react-native-google-places-autocomplete": "^2.1.3",
     "react-native-html-to-pdf": "^0.10.0",
     "react-native-image-picker": "^4.0.6",
+    "react-native-intersection-observer": "^0.0.9",
     "react-native-lightbox": "^0.8.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",

package/themes/business/src/components/OrderDetails/Business.tsx

@@ -439,7 +439,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <>
               <OrderContentComponent order={order} />
               {(order?.status === 7 || order?.status === 4) &&
-                order?.delivery_type === 1 && (
+                order?.delivery_type === 1 && configs?.assign_driver_enabled?.value === '1' && (
                   <AssignDriver>
                     <OText style={{ marginBottom: 5 }} size={16} weight="600">
                       {t('ASSIGN_DRIVER', 'Assign driver')}

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

@@ -203,7 +203,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			multiRemoveProducts && await multiRemoveProducts(unavailableProducts, _carts)
 			return
 		}
-	
+
 		if (alreadyRemoved === 'removed') {
 			setAlertState({ open: true, content: [t('NOT_AVAILABLE_PRODUCT', 'This product is not available.')] })
 		}
@@ -223,7 +223,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	return (
 		<>
-					<ContainerSafeAreaView
+			<ContainerSafeAreaView
 				style={{ flex: 1 }}
 				isOpenFiltProducts={isOpenFiltProducts}
 			>
@@ -237,7 +237,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 										imgRightSrc={null}
 										style={styles.btnBackArrow}
 										onClick={() => handleBackNavigation()}
-										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 30 }}
 									/>
 								</View>
 								{!errorQuantityProducts && (
@@ -255,6 +255,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						{isOpenSearchBar && (
 							<WrapSearchBar>
 								<SearchBar
+									autoFocus
 									onSearch={handleChangeSearch}
 									onCancel={() => handleCancel()}
 									isCancelXButtonShow
@@ -268,42 +269,42 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				</Animated.View>
 
 				{business?.categories?.length > 0 && isOpenFiltProducts && (
-						<FiltProductsContainer
-							isIos={Platform.OS === 'ios'}
-							style={{
-								height: Dimensions.get('window').height - filtProductsHeight
-							}}
-						>
-							<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
-								<BusinessProductsList
-									categories={[
-										{ id: null, name: t('ALL', 'All') },
-										{ id: 'featured', name: t('FEATURED', 'Featured') },
-										...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
-									]}
-									category={categorySelected}
-									categoryState={categoryState}
-									businessId={business.id}
-									errors={errors}
-									onProductClick={onProductClick}
-									handleSearchRedirect={handleSearchRedirect}
-									featured={featuredProducts}
-									searchValue={searchValue}
-									handleClearSearch={handleChangeSearch}
-									errorQuantityProducts={errorQuantityProducts}
-									handleCancelSearch={handleCancel}
-									categoriesLayout={categoriesLayout}
-									subcategoriesSelected={subcategoriesSelected}
-									lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
-									setCategoriesLayout={setCategoriesLayout}
-									currentCart={currentCart}
-									setSubcategoriesSelected={setSubcategoriesSelected}
-									onClickCategory={handleChangeCategory}
-									handleUpdateProducts={handleUpdateProducts}
-									isFiltMode
-								/>
-							</View>
-						</FiltProductsContainer>
+					<FiltProductsContainer
+						isIos={Platform.OS === 'ios'}
+						style={{
+							height: Dimensions.get('window').height - filtProductsHeight
+						}}
+					>
+						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
+							<BusinessProductsList
+								categories={[
+									{ id: null, name: t('ALL', 'All') },
+									{ id: 'featured', name: t('FEATURED', 'Featured') },
+									...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+								]}
+								category={categorySelected}
+								categoryState={categoryState}
+								businessId={business.id}
+								errors={errors}
+								onProductClick={onProductClick}
+								handleSearchRedirect={handleSearchRedirect}
+								featured={featuredProducts}
+								searchValue={searchValue}
+								handleClearSearch={handleChangeSearch}
+								errorQuantityProducts={errorQuantityProducts}
+								handleCancelSearch={handleCancel}
+								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+								setCategoriesLayout={setCategoriesLayout}
+								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
+								isFiltMode
+							/>
+						</View>
+					</FiltProductsContainer>
 				)}
 				{isOpenFiltProducts && (
 					<BackgroundGray />

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

@@ -104,8 +104,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 		searchInput: {
 			fontSize: 12,
-			// backgroundColor: theme.colors.white,
-			paddingLeft: 10,
+			paddingLeft: 0,
+			paddingRight: 17,
 			paddingTop: 7
 		},
 		iconStyle: {

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

@@ -97,10 +97,10 @@ export const FilterWrapper = styled.View`
 `
 
 export const ServiceWrapper = styled.View`
-  padding-left: 40px;
+  padding-horizontal: 40px;
 `
 
 export const PriceWrapper = styled.View`
-  padding-left: 40px;
+  padding-horizontal: 40px;
   margin-top: 30px;
 `

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

@@ -332,7 +332,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</OrderControlContainer>
 			</View>
 			<HeaderWrapper
-				source={theme.images.general.homeHero}
+				source={theme.images.backgrounds.business_list_header}
 				style={{ paddingTop: top + 20 }}
 				resizeMode='stretch'
 			>

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

@@ -370,7 +370,7 @@ export const ProductOptionsUI = (props: any) => {
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
 				<TopActions onPress={() => handleGoBack()}>
-					<OIcon src={theme.images.general.arrow_left} width={15} />
+					<OIcon src={theme.images.general.arrow_left} width={30} />
 				</TopActions>
 			</TopHeader>
 			<ScrollView ref={scrollViewRef}>

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

@@ -62,7 +62,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
 
   const onDateChange = (date: any) => {
     setSelectedDate(date)
-    dropdownRef.current.reset()
+    dropdownRef?.current && dropdownRef.current.reset()
   }
 
   const dropDownIcon = () => {
@@ -191,9 +191,9 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
             {t('REQUIRED', 'Required')}
           </OText>
         </View>
-        {(!!professional?.schedule && isEnabled) ? (
+        {!!professional?.schedule ? (
           <CalendarWrapper>
-            {timeList?.length > 0 ? (
+            {(timeList?.length > 0 && isEnabled) ? (
               <SelectDropdown
                 ref={dropdownRef} 
                 data={timeList}
@@ -237,11 +237,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
               />
             ) : (
               <OText
-                size={20}
+                size={12}
                 style={{ marginBottom: 30 }}
-                weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                weight={'400'}
+                color={theme.colors?.danger5}
               >
-                {t('NOT_AVAILABLE', 'Not available')}
+                {t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
               </OText>
             )}
 

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

@@ -25,7 +25,8 @@ export const SearchBar = (props: any) => {
 		blurOnSubmit,
 		inputContainerStyles,
 		containerStyles,
-		hideIcon
+		hideIcon,
+		autoFocus
 	} = props
 
 	const theme = useTheme();
@@ -82,15 +83,16 @@ export const SearchBar = (props: any) => {
 	return (
 		<Pressable style={[styles.container, containerStyles, { height: height }]}>
 			<OInput
+				autoFocus={autoFocus}
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={{...styles.inputStyle, ...inputContainerStyles}}
+				style={{ ...styles.inputStyle, ...inputContainerStyles }}
 				placeholder={placeholder}
 				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()}

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useTheme } from 'styled-components/native'
-import { Platform, View, StyleSheet, Dimensions } from 'react-native'
-import { OText, OButton } from '../shared'
+import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity } from 'react-native'
+import { OText, OButton, OModal } from '../shared'
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import SelectDropdown from 'react-native-select-dropdown'
@@ -41,7 +41,8 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     navigation,
     isSoldOut,
     maxProductQuantity,
-    onClose
+    onClose,
+    professionalList
   } = props
 
   const theme = useTheme()
@@ -57,6 +58,8 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [isEnabled, setIsEnabled] = useState(false)
   const [timeSelected, setTimeSelected] = useState(null)
   const [dateSelected, setDateSelected] = useState<any>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [currentProfessional, setCurrentProfessional] = useState<any>(null)
 
   const dropdownRef = useRef<any>(null)
 
@@ -75,7 +78,15 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       borderRadius: 7.6,
       padding: 11,
       borderWidth: 1,
-      borderColor: theme.colors.backgroundGray200
+      borderColor: theme.colors.backgroundGray200,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    professionalItem: {
+      padding: 11,
+      borderColor: theme.colors.backgroundGray200,
+      borderTopWidth: 1
     },
     selectOption: {
       width: '100%',
@@ -87,12 +98,16 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       justifyContent: 'space-between',
       height: 40,
       marginBottom: 30
+    },
+    professionalList: {
+      paddingHorizontal: 40,
+      paddingVertical: 30
     }
   })
 
-  const isBusyTime = () => {
-    if (professionalSelected?.busy_times?.length === 0 || !dateSelected) return false
-    const valid = professionalSelected?.busy_times.some((item: any) => {
+  const isBusyTime = (professional: any) => {
+    if (professional?.busy_times?.length === 0 || !dateSelected) return false
+    const valid = professional?.busy_times.some((item: any) => {
       return moment(item?.start).valueOf() <= moment(dateSelected).valueOf() &&
         moment(dateSelected).valueOf() <= moment(item?.end).valueOf()
     })
@@ -102,7 +117,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const onDateChange = (date: any) => {
     setSelectedDate(date)
     setTimeSelected(null)
-    dropdownRef.current.reset()
+    dropdownRef?.current && dropdownRef.current.reset()
   }
 
   const dropDownIcon = () => {
@@ -125,7 +140,10 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   };
 
   const handleSaveService = () => {
-    const updated = { serviceTime: dateSelected }
+    const updated = {
+      serviceTime: dateSelected,
+      professional: currentProfessional
+    }
     handleSave && handleSave(updated)
   }
 
@@ -195,11 +213,16 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     onClose && onClose()
   }
 
+  const handleChangeProfessional = (professional: any) => {
+    setCurrentProfessional(professional)
+    setIsOpen(false)
+  }
+
   useEffect(() => {
-    if (selectDate === null) return
-    const _times = getTimes(selectDate, professionalSelected)
+    if (selectDate === null || currentProfessional === null) return
+    const _times = getTimes(selectDate, currentProfessional)
     setTimeList(_times)
-  }, [selectDate, professionalSelected])
+  }, [selectDate, currentProfessional])
 
   useEffect(() => {
     if (!selectDate || !timeSelected) {
@@ -209,269 +232,330 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     const date = `${moment(selectDate).format('YYYY-MM-DD')} ${timeSelected}:00`
     setDateSelected(date)
   }, [selectDate, timeSelected])
+
+  useEffect(() => {
+    if (!professionalSelected) return
+    setCurrentProfessional(professionalSelected)
+  }, [professionalSelected])
   
   return (
-    <Container>
-      <ProfessionalPhoto
-				source={{
-					uri:
-          product?.images ||
-						optimizeImage(theme?.images?.dummies?.product, 'h_250,c_limit'),
-				}}
-      />
-      <InfoWrapper>
-        <OText
-          size={20}
-          style={{ marginBottom: 4 }}
-          weight={Platform.OS === 'ios' ? '600' : 'bold'}
-        >
-          {product?.name}
-        </OText>
-        <OText
-          size={16}
-          style={{ marginBottom: 10 }}
-          weight={'400'}
-        >
-          {parsePrice(product?.price)} • {product?.duration}min
-        </OText>
-        <OText
-          size={14}
-          weight={'400'}
-          color={theme?.colors?.disabled}
-        >
-          {product?.description}
-        </OText>
-      </InfoWrapper>
-      <Divider />
-      <ProfessionalWrapper>
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: 23
+    <>
+      <Container>
+        <ProfessionalPhoto
+          source={{
+            uri:
+            product?.images ||
+              optimizeImage(theme?.images?.dummies?.product, 'h_250,c_limit'),
           }}
-        >
+        />
+        <InfoWrapper>
           <OText
-            size={16}
+            size={20}
+            style={{ marginBottom: 4 }}
             weight={Platform.OS === 'ios' ? '600' : 'bold'}
           >
-            {t('PROFESSIONAL', 'Proffesional')}
-          </OText>
-          <OText
-            size={10}
-            weight={'400'}
-            color={theme.colors?.danger5}
-          >
-            {t('REQUIRED', 'Required')}
+            {product?.name}
           </OText>
-        </View>
-        <View
-          style={styles.professionalSelect}
-        >
-          <View style={{ flexDirection: 'row' }}>
-            <FastImage
-              style={styles.photoStyle}
-              source={{
-                uri: optimizeImage(professionalSelected?.photo, 'h_250,c_limit'),
-                priority: FastImage.priority.normal,
-              }}
-              resizeMode={FastImage.resizeMode.cover}
-            />
-            <View style={{ marginLeft: 14 }}>
-              <OText
-                size={14}
-                weight={'400'}
-              >
-                {professionalSelected?.name} {professionalSelected?.lastname}
-              </OText>
-              <OText
-                size={12}
-                weight={'400'}
-                color={isBusyTime() ? theme.colors.danger5 : theme.colors.success500}
-              >
-                {isBusyTime()
-                  ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
-                  : t('AVAILABLE', 'Available')
-                }
-              </OText>
-            </View>
-          </View>
-        </View>
-      </ProfessionalWrapper>
-      <ScheduleWrapper>
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: 23
-          }}
-        >
           <OText
             size={16}
-            weight={Platform.OS === 'ios' ? '600' : 'bold'}
+            style={{ marginBottom: 10 }}
+            weight={'400'}
           >
-            {t('SCHEDULE', 'Schedule')}
+            {parsePrice(product?.price)} • {product?.duration}min
           </OText>
           <OText
-            size={10}
+            size={14}
             weight={'400'}
-            color={theme.colors?.danger5}
+            color={theme?.colors?.disabled}
           >
-            {t('REQUIRED', 'Required')}
+            {product?.description}
           </OText>
-        </View>
-        {(!!professionalSelected?.schedule && isEnabled) ? (
-          <CalendarWrapper>
-            {timeList?.length > 0 ? (
-              <SelectDropdown
-                ref={dropdownRef} 
-                defaultValue={timeSelected}
-                data={timeList}
-                onSelect={(selectedItem, index) => {
-                  setTimeSelected(selectedItem.value)
-                }}
-                buttonTextAfterSelection={(selectedItem, index) => {
-                  return selectedItem.text
-                }}
-                rowTextForSelection={(item, index) => {
-                  return item.text
-                }}
-                buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
-                buttonTextStyle={{
-                  color: theme.colors.disabled,
-                  fontSize: 14,
-                  textAlign: 'left',
-                  marginHorizontal: 0
-                }}
-                dropdownStyle={{
-                  borderRadius: 8,
-                  borderColor: theme.colors.lightGray,
-                  marginTop: Platform.OS === 'ios' ? 12 : -top
-                }}
-                rowStyle={{
-                  borderBottomColor: theme.colors.backgroundGray100,
-                  backgroundColor: theme.colors.backgroundGray100,
-                  height: 30,
-                  flexDirection: 'column',
-                  alignItems: 'flex-start',
-                  paddingTop: 8,
-                  paddingHorizontal: 12
-                }}
-                rowTextStyle={{
-                  color: theme.colors.disabled,
-                  fontSize: 14,
-                  marginHorizontal: 0
-                }}
-                renderDropdownIcon={() => dropDownIcon()}
-                dropdownOverlayColor='transparent'
-              />
-            ) : (
-              <OText
-                size={20}
-                style={{ marginBottom: 30 }}
-                weight={Platform.OS === 'ios' ? '600' : 'bold'}
-              >
-                {t('NOT_AVAILABLE', 'Not available')}
-              </OText>
-            )}
-
-            <CalendarPicker
-              previousComponent={
-                <FeatherIcon
-                  name='chevron-left'
-                  color={theme.colors.disabled}
-                  size={24}
-                  style={{ marginHorizontal: 4 }}
+        </InfoWrapper>
+        <Divider />
+        <ProfessionalWrapper>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginBottom: 23
+            }}
+          >
+            <OText
+              size={16}
+              weight={Platform.OS === 'ios' ? '600' : 'bold'}
+            >
+              {t('PROFESSIONAL', 'Professional')}
+            </OText>
+            <OText
+              size={10}
+              weight={'400'}
+              color={theme.colors?.danger5}
+            >
+              {t('REQUIRED', 'Required')}
+            </OText>
+          </View>
+          {currentProfessional && (
+            <TouchableOpacity
+              style={styles.professionalSelect}
+              onPress={() => setIsOpen(true)}
+            >
+              <View style={{ flexDirection: 'row' }}>
+                <FastImage
+                  style={styles.photoStyle}
+                  source={{
+                    uri: optimizeImage(currentProfessional?.photo, 'h_250,c_limit'),
+                    priority: FastImage.priority.normal,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                />
+                <View style={{ marginLeft: 14 }}>
+                  <OText
+                    size={14}
+                    weight={'400'}
+                  >
+                    {currentProfessional?.name} {currentProfessional?.lastname}
+                  </OText>
+                  <OText
+                    size={12}
+                    weight={'400'}
+                    color={isBusyTime(currentProfessional) ? theme.colors.danger5 : theme.colors.success500}
+                  >
+                    {isBusyTime(currentProfessional)
+                      ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
+                      : t('AVAILABLE', 'Available')
+                    }
+                  </OText>
+                </View>
+              </View>
+              <View style={{ marginLeft: 5 }}>
+                <IconAntDesign
+                  name='down'
+                  color={theme.colors.textThird}
+                  size={12}
                 />
-              }
-              nextComponent={
-                <FeatherIcon
-                  name='chevron-right'
-                  color={theme.colors.disabled}
-                  size={24}
-                  style={{ marginHorizontal: 4 }}
+              </View>
+            </TouchableOpacity>
+          )}
+        </ProfessionalWrapper>
+        <ScheduleWrapper>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginBottom: 23
+            }}
+          >
+            <OText
+              size={16}
+              weight={Platform.OS === 'ios' ? '600' : 'bold'}
+            >
+              {t('SCHEDULE', 'Schedule')}
+            </OText>
+            <OText
+              size={10}
+              weight={'400'}
+              color={theme.colors?.danger5}
+            >
+              {t('REQUIRED', 'Required')}
+            </OText>
+          </View>
+          {!!currentProfessional?.schedule ? (
+            <CalendarWrapper>
+              {(timeList?.length > 0 && isEnabled) ? (
+                <SelectDropdown
+                  ref={dropdownRef} 
+                  defaultValue={timeSelected}
+                  data={timeList}
+                  onSelect={(selectedItem, index) => {
+                    setTimeSelected(selectedItem?.value)
+                  }}
+                  buttonTextAfterSelection={(selectedItem, index) => {
+                    return selectedItem?.text
+                  }}
+                  rowTextForSelection={(item, index) => {
+                    return item.text
+                  }}
+                  buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
+                  buttonTextStyle={{
+                    color: theme.colors.disabled,
+                    fontSize: 14,
+                    textAlign: 'left',
+                    marginHorizontal: 0
+                  }}
+                  dropdownStyle={{
+                    borderRadius: 8,
+                    borderColor: theme.colors.lightGray,
+                    marginTop: Platform.OS === 'ios' ? 12 : -top
+                  }}
+                  rowStyle={{
+                    borderBottomColor: theme.colors.backgroundGray100,
+                    backgroundColor: theme.colors.backgroundGray100,
+                    height: 30,
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                    paddingTop: 8,
+                    paddingHorizontal: 12
+                  }}
+                  rowTextStyle={{
+                    color: theme.colors.disabled,
+                    fontSize: 14,
+                    marginHorizontal: 0
+                  }}
+                  renderDropdownIcon={() => dropDownIcon()}
+                  dropdownOverlayColor='transparent'
                 />
-              }
-              width={screenWidth - 110}
-              selectedDayTextColor={theme.colors.white}
-              selectedDayColor={theme.colors.primary}
-              todayBackgroundColor={theme.colors.border}
-              dayLabelsWrapper={{ borderColor: theme.colors.clear }}
-              onDateChange={onDateChange}
-              minDate={new Date()}
-              customDayHeaderStyles={customDayHeaderStylesCallback}
-              selectedStartDate={selectDate}
-            />
-          </CalendarWrapper>
-        ) : (
+              ) : (
+                <OText
+                  size={12}
+                  style={{ marginBottom: 30 }}
+                  weight={'400'}
+                  color={theme.colors?.danger5}
+                >
+                  {t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
+                </OText>
+              )}
+              <CalendarPicker
+                previousComponent={
+                  <FeatherIcon
+                    name='chevron-left'
+                    color={theme.colors.disabled}
+                    size={24}
+                    style={{ marginHorizontal: 4 }}
+                  />
+                }
+                nextComponent={
+                  <FeatherIcon
+                    name='chevron-right'
+                    color={theme.colors.disabled}
+                    size={24}
+                    style={{ marginHorizontal: 4 }}
+                  />
+                }
+                width={screenWidth - 110}
+                selectedDayTextColor={theme.colors.white}
+                selectedDayColor={theme.colors.primary}
+                todayBackgroundColor={theme.colors.border}
+                dayLabelsWrapper={{ borderColor: theme.colors.clear }}
+                onDateChange={onDateChange}
+                minDate={new Date()}
+                customDayHeaderStyles={customDayHeaderStylesCallback}
+                selectedStartDate={selectDate}
+              />
+            </CalendarWrapper>
+          ) : (
+            <OText
+              size={20}
+              style={{ marginBottom: 30 }}
+              weight={Platform.OS === 'ios' ? '600' : 'bold'}
+            >
+              {t('NO_SCHEDULE', 'No schedule')}
+            </OText>
+          )}
+        </ScheduleWrapper>
+        <ButtonWrapper>
           <OText
-            size={20}
-            style={{ marginBottom: 30 }}
+            size={14}
             weight={Platform.OS === 'ios' ? '600' : 'bold'}
           >
-            {t('NO_SCHEDULE', 'No schedule')}
+            {dateSelected
+              ? moment(dateSelected).format('hh:mm A')
+              : t('ASAP_ABBREVIATION', 'ASAP')}
           </OText>
-        )}
-      </ScheduleWrapper>
-      <ButtonWrapper>
-        <OText
-          size={14}
-          weight={Platform.OS === 'ios' ? '600' : 'bold'}
-        >
-          {dateSelected
-            ? moment(dateSelected).format('hh:mm A')
-            : t('ASAP_ABBREVIATION', 'ASAP')}
-        </OText>
-        {((productCart &&
-          auth &&
-          orderState.options?.address_id)) && (
-            <OButton
-              bgColor={theme.colors.primary}
-              onClick={() => handleSaveService()}
-              text={orderState.loading
-                ? t('LOADING', 'Loading')
-                : ((isSoldOut || maxProductQuantity <= 0)
-                  ? t('SOLD_OUT', 'Sold out')
-                  : t('BOOK', 'Book'))}
-              style={styles.buttonStyle}
-              isDisabled={isSoldOut || maxProductQuantity <= 0 || !professionalSelected?.id || !dateSelected}
-              textStyle={{ fontSize: 14, color: theme.colors.white }}
-            />
-          )}
-        {auth &&
-          !orderState.options?.address_id &&
-          (orderState.loading ? (
-            <OButton
-              isDisabled
-              text={t('LOADING', 'Loading')}
-              imgRightSrc=""
-              textStyle={{ fontSize: 10 }}
-            />
-          ) : (
-            <OButton onClick={() => addressRedirect()} />
+          {((productCart &&
+            auth &&
+            orderState.options?.address_id)) && (
+              <OButton
+                bgColor={theme.colors.primary}
+                onClick={() => handleSaveService()}
+                text={orderState.loading
+                  ? t('LOADING', 'Loading')
+                  : ((isSoldOut || maxProductQuantity <= 0)
+                    ? t('SOLD_OUT', 'Sold out')
+                    : t('BOOK', 'Book'))}
+                style={styles.buttonStyle}
+                isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected}
+                textStyle={{ fontSize: 14, color: theme.colors.white }}
+              />
+            )}
+          {auth &&
+            !orderState.options?.address_id &&
+            (orderState.loading ? (
+              <OButton
+                isDisabled
+                text={t('LOADING', 'Loading')}
+                imgRightSrc=""
+                textStyle={{ fontSize: 10 }}
+              />
+            ) : (
+              <OButton onClick={() => addressRedirect()} />
+            ))}
+            {!auth && (
+              <OButton
+                isDisabled={isSoldOut || maxProductQuantity <= 0}
+                onClick={() => handleRedirectLogin()}
+                text={
+                  isSoldOut || maxProductQuantity <= 0
+                    ? t('SOLD_OUT', 'Sold out')
+                    : t('LOGIN_SIGNUP', 'Login / Sign Up')
+                }
+                imgRightSrc=""
+                textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+                style={{
+                  height: 44,
+                  borderColor: theme.colors.primary,
+                  backgroundColor: theme.colors.white,
+                }}
+              />
+            )}
+        </ButtonWrapper>
+      </Container>
+      <OModal
+				open={isOpen}
+				onClose={() => setIsOpen(false)}
+				entireModal
+			>
+				<ScrollView contentContainerStyle={styles.professionalList}>
+          {professionalList?.map((professional: any) => professional?.products?.includes(product?.id) && (
+            <TouchableOpacity
+              key={professional?.id}
+              style={styles.professionalItem}
+              onPress={() => handleChangeProfessional(professional)}
+            >
+              <View style={{ flexDirection: 'row' }}>
+                <FastImage
+                  style={styles.photoStyle}
+                  source={{
+                    uri: optimizeImage(professional?.photo, 'h_250,c_limit'),
+                    priority: FastImage.priority.normal,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                />
+                <View style={{ marginLeft: 14 }}>
+                  <OText
+                    size={14}
+                    weight={'400'}
+                  >
+                    {professional?.name} {professional?.lastname}
+                  </OText>
+                  <OText
+                    size={12}
+                    weight={'400'}
+                    color={isBusyTime(professional) ? theme.colors.danger5 : theme.colors.success500}
+                  >
+                    {isBusyTime(professional)
+                      ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
+                      : t('AVAILABLE', 'Available')
+                    }
+                  </OText>
+                </View>
+              </View>
+            </TouchableOpacity>
           ))}
-          {!auth && (
-            <OButton
-              isDisabled={isSoldOut || maxProductQuantity <= 0}
-              onClick={() => handleRedirectLogin()}
-              text={
-                isSoldOut || maxProductQuantity <= 0
-                  ? t('SOLD_OUT', 'Sold out')
-                  : t('LOGIN_SIGNUP', 'Login / Sign Up')
-              }
-              imgRightSrc=""
-              textStyle={{ color: theme.colors.primary, fontSize: 14 }}
-              style={{
-                height: 44,
-                borderColor: theme.colors.primary,
-                backgroundColor: theme.colors.white,
-              }}
-            />
-          )}
-      </ButtonWrapper>
-    </Container>
+        </ScrollView>
+			</OModal>
+    </>
   )
 }
 

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

@@ -271,16 +271,16 @@ const ProfileUI = (props: ProfileParams) => {
 	}, [verifyPhoneState])
 
 	const handleSendPhoneCode = (values: any) => {
-    setWillVerifyOtpState(false)
+		setWillVerifyOtpState(false)
 		setIsModalVisible(false)
-    setFormState({
-      ...formState,
-      changes: {
-        ...formState?.changes,
-        verification_code: values?.code
-      }
-    })
-  }
+		setFormState({
+			...formState,
+			changes: {
+				...formState?.changes,
+				verification_code: values?.code
+			}
+		})
+	}
 
 	return (
 		<>
@@ -289,7 +289,7 @@ const ProfileUI = (props: ProfileParams) => {
 				titleAlign={'center'}
 				onActionLeft={() => navigation.goBack()}
 				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 , marginTop: Platform.OS === 'ios' ? 50 : 40 }}
+				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
 			/>
 			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
 				<Container noPadding>

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

@@ -56,7 +56,7 @@ const Wrapper = styled.Pressable`
 const OInput = (props: Props): React.ReactElement => {
 	return (
 		<Wrapper
-			onPress={() => {props.forwardRef?.current?.focus?.(); props.onPress && props.onPress()}}
+			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
 			style={{
 				backgroundColor: props.bgColor,
 				borderColor: props.borderColor,
@@ -75,6 +75,7 @@ const OInput = (props: Props): React.ReactElement => {
 				<MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
 			)}
 			<Input
+				autoFocus={props?.autoFocus}
 				name={props.name}
 				secureTextEntry={props.isSecured}
 				onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
@@ -90,7 +91,7 @@ const OInput = (props: Props): React.ReactElement => {
 				returnKeyType={props.returnKeyType}
 				onSubmitEditing={props.onSubmitEditing}
 				blurOnSubmit={props.blurOnSubmit}
-				ref={(e : any) => {
+				ref={(e: any) => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={props?.inputStyle}

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

@@ -711,7 +711,8 @@ export interface ServiceFormParams {
 	isSoldOut: boolean,
 	maxProductQuantity: any,
 	businessSlug?: string,
-	onClose: any
+	onClose: any,
+	professionalList: any
 }
 
 export interface ProfessionalFilterParams {