ordering-ui-react-native 0.17.18 → 0.17.19-release

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useTheme } from 'styled-components/native'
-import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity } from 'react-native'
+import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity, Text } from 'react-native'
 import { OText, OButton, OModal, OIcon } from '../shared'
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -10,6 +10,10 @@ import CalendarPicker from 'react-native-calendar-picker'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ServiceFormParams } from '../../types'
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import uuid from 'react-native-uuid';
+import { orderTypeList } from '../../utils'
+
 import {
   ProductForm as ProductFormController,
   useUtils,
@@ -35,14 +39,17 @@ const screenWidth = Dimensions.get('window').width
 const ServiceFormUI = (props: ServiceFormParams) => {
   const {
     professionalSelected,
-    product,
+    productObject,
     handleSave,
     productCart,
     navigation,
     isSoldOut,
     maxProductQuantity,
     onClose,
-    professionalList
+    professionalListState,
+    isCartProduct,
+    actionStatus,
+    handleCreateGuestUser
   } = props
 
   const theme = useTheme()
@@ -52,15 +59,19 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [{ configs }] = useConfig()
 	const [orderState] = useOrder()
 	const [{ auth }] = useSession()
+	const { product, loading, error } = productObject;
 
   const [selectDate, setSelectedDate] = useState<any>(new Date())
   const [timeList, setTimeList] = useState<any>([])
   const [isEnabled, setIsEnabled] = useState(false)
-  const [timeSelected, setTimeSelected] = useState(null)
+  const [timeSelected, setTimeSelected] = useState<string | null>(null)
   const [dateSelected, setDateSelected] = useState<any>(null)
   const [isOpen, setIsOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState<any>(null)
 
+  const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
   const dropdownRef = useRef<any>(null)
 
   const styles = StyleSheet.create({
@@ -99,17 +110,41 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       height: 40,
       marginBottom: 30
     },
+    dropDownRow: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      marginHorizontal: 0
+    },
     professionalList: {
       paddingHorizontal: 40,
-      paddingVertical: 30
+      paddingVertical: 30,
     }
   })
 
-  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()
+  const getMomentTime = (time) => {
+    const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    return _moment
+  }
+
+  const isBusyTime = (professional, selectedMoment) => {
+    if (!selectedMoment) return false
+    const startDay = moment(selectedMoment).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
+    const duration = product?.duration ?? 0
+    const endDay = moment(selectedMoment).add(duration - 1, 'minutes').utc().format('d')
+    const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
+    if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
+    const busyTimes = isCartProduct
+      ? professional?.busy_times.filter(item => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
+      : [...professional?.busy_times]
+    const valid = busyTimes.some(item => {
+      return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
+        moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
+        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
+        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -130,6 +165,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     )
   }
 
+  const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
   const customDayHeaderStylesCallback = () => {
     return {
       textStyle: {
@@ -153,7 +193,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleRedirectLogin = () => {
-		navigation.navigate('Login', {
+		navigation && navigation.navigate('Login', {
 			store_slug: props.businessSlug
 		});
     onClose && onClose()
@@ -209,7 +249,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const addressRedirect = () => {
-    navigation.navigate('AddressList')
+    navigation && navigation.navigate('AddressList')
     onClose && onClose()
   }
 
@@ -234,304 +274,342 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }, [selectDate, timeSelected])
 
   useEffect(() => {
-    if (!professionalSelected) return
+    if (!professionalSelected?.schedule) return
     setCurrentProfessional(professionalSelected)
   }, [professionalSelected])
+
+  useEffect(() => {
+    if (isCartProduct && professionalListState?.professionals?.length > 0) {
+      const professional = professionalListState?.professionals?.find((item: any) => item.id === professionalSelected?.id)
+      setCurrentProfessional(professional)
+    }
+  }, [isCartProduct, professionalListState?.professionals])
+
+  useEffect(() => {
+    if (!productCart?.calendar_event?.start) return
+    setSelectedDate(moment.utc(productCart?.calendar_event?.start).local())
+    setTimeSelected(moment.utc(productCart?.calendar_event?.start).local().format('HH:mm'))
+  }, [productCart])
   
   return (
     <>
-      <Container>
-        {!!product?.images ? (
-          <ProfessionalPhoto
-            source={{
-              uri: product?.images
-            }}
-          />
-        ) : (
-          <OIcon
-            src={theme?.images?.dummies?.product}
-            cover={false}
-            style={{ alignSelf: 'center' }}
-            width={200}
-            height={200}
+      {loading && !error && (
+        <Placeholder Animation={Fade}>
+          <PlaceholderLine
+            height={258}
+            style={{ borderRadius: 0 }}
+            width={screenWidth}
           />
-        )}
-        <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
-            }}
-          >
+        </Placeholder>
+      )}
+      {!loading && !error && (
+        <Container>
+          {!!product?.images ? (
+            <ProfessionalPhoto
+              source={{
+                uri: product?.images
+              }}
+            />
+          ) : (
+            <OIcon
+              src={theme?.images?.dummies?.product}
+              cover={false}
+              style={{ alignSelf: 'center' }}
+              width={200}
+              height={200}
+            />
+          )}
+          <InfoWrapper>
             <OText
-              size={16}
+              size={20}
+              style={{ marginBottom: 4 }}
               weight={Platform.OS === 'ios' ? '600' : 'bold'}
             >
-              {t('PROFESSIONAL', 'Professional')}
-            </OText>
-            <OText
-              size={10}
-              weight={'400'}
-              color={theme.colors?.danger5}
-            >
-              {t('REQUIRED', 'Required')}
+              {product?.name}
             </OText>
-          </View>
-          <TouchableOpacity
-            style={styles.professionalSelect}
-            onPress={() => setIsOpen(true)}
-          >
-            {!!currentProfessional ? (
-              <>
-                <View style={{ flexDirection: 'row' }}>
-                  {!!currentProfessional?.photo ? (
-                    <FastImage
-                      style={styles.photoStyle}
-                      source={{
-                        uri: optimizeImage(currentProfessional?.photo, 'h_250,c_limit'),
-                        priority: FastImage.priority.normal,
-                      }}
-                      resizeMode={FastImage.resizeMode.cover}
-                    />
-                  ) : (
-                    <OIcon
-                      src={theme?.images?.general?.user}
-                      cover={false}
-                      style={styles.photoStyle}
-                    />
-                  )}
-                  <View style={{ marginLeft: 14 }}>
-                    <OText
-                      size={14}
-                      weight={'400'}
-                      lineHeight={22}
-                    >
-                      {currentProfessional?.name} {currentProfessional?.lastname}
-                    </OText>
-                    <OText
-                      size={12}
-                      weight={'400'}
-                      lineHeight={17}
-                      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>
-              </>
-            ) : (
-              <OText size={12}>{t('SELECT_PROFESSIONAL', 'Select professional')}</OText>
-            )}
-            <View style={{ marginLeft: 5 }}>
-              <IconAntDesign
-                name='down'
-                color={theme.colors.textThird}
-                size={12}
-              />
-            </View>
-          </TouchableOpacity>
-        </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>
-          {!!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'
-                />
+          </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>
+            <TouchableOpacity
+              style={styles.professionalSelect}
+              onPress={() => setIsOpen(true)}
+            >
+              {!!currentProfessional ? (
+                <>
+                  <View style={{ flexDirection: 'row' }}>
+                    {!!currentProfessional?.photo ? (
+                      <FastImage
+                        style={styles.photoStyle}
+                        source={{
+                          uri: optimizeImage(currentProfessional?.photo, 'h_250,c_limit'),
+                          priority: FastImage.priority.normal,
+                        }}
+                        resizeMode={FastImage.resizeMode.cover}
+                      />
+                    ) : (
+                      <OIcon
+                        src={theme?.images?.general?.user}
+                        cover={false}
+                        style={styles.photoStyle}
+                      />
+                    )}
+                    <View style={{ marginLeft: 14 }}>
+                      <OText
+                        size={14}
+                        weight={'400'}
+                        lineHeight={22}
+                      >
+                        {currentProfessional?.name} {currentProfessional?.lastname}
+                      </OText>
+                      <OText
+                        size={12}
+                        weight={'400'}
+                        lineHeight={17}
+                        color={isBusyTime(currentProfessional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
+                      >
+                        {isBusyTime(currentProfessional, dateSelected)
+                          ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
+                          : t('AVAILABLE', 'Available')
+                        }
+                      </OText>
+                    </View>
+                  </View>
+                </>
               ) : (
-                <OText
-                  size={12}
-                  style={{ marginBottom: 30 }}
-                  weight={'400'}
-                  color={theme.colors?.danger5}
-                >
-                  {t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
-                </OText>
+                <OText size={12}>{t('SELECT_PROFESSIONAL', 'Select professional')}</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 }}
+              <View style={{ marginLeft: 5 }}>
+                <IconAntDesign
+                  name='down'
+                  color={theme.colors.textThird}
+                  size={12}
+                />
+              </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} 
+                    defaultValueByIndex={timeList.findIndex((item: any) => item.value === 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
+                    }}
+                    renderCustomizedRowChild={(item, index) => {
+                      return (
+                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                          {item.text}
+                        </Text>
+                      )
+                    }}
+                    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={16}
+                style={{ marginBottom: 30, textAlign: 'center' }}
+                color={theme?.colors?.disabled}
+                weight={Platform.OS === 'ios' ? '600' : 'bold'}
+              >
+                {t('NO_SCHEDULE', 'No schedule')}
+              </OText>
+            )}
+          </ScheduleWrapper>
+          <ButtonWrapper>
             <OText
-              size={16}
-              style={{ marginBottom: 30, textAlign: 'center' }}
-              color={theme?.colors?.disabled}
+              size={14}
               weight={Platform.OS === 'ios' ? '600' : 'bold'}
             >
-              {t('NO_SCHEDULE', 'No schedule')}
+              {dateSelected && moment(dateSelected).format('hh:mm A')}
             </OText>
-          )}
-        </ScheduleWrapper>
-        <ButtonWrapper>
-          <OText
-            size={14}
-            weight={Platform.OS === 'ios' ? '600' : 'bold'}
-          >
-            {dateSelected && moment(dateSelected).format('hh:mm A')}
-          </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 || !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>
+            {((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 || isBusyTime(currentProfessional, 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,
+                  }}
+                />
+              )}
+              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
+                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                  {actionStatus?.loading ? (
+                    <Placeholder Animation={Fade}>
+                      <PlaceholderLine width={60} height={20} />
+                    </Placeholder>
+                  ) : (
+                    <OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+                  )}
+                </TouchableOpacity>
+              )}
+          </ButtonWrapper>
+        </Container>
+      )}
+
       <OModal
 				open={isOpen}
 				onClose={() => setIsOpen(false)}
@@ -546,7 +624,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               {t('ANY_OROFESSIONAL_MEMBER', 'Any professional member')}
             </OText>
           </View>
-          {professionalList?.map((professional: any) => (
+          {professionalListState?.professionals?.map((professional: any) => (
             <TouchableOpacity
               key={professional?.id}
               style={styles.professionalItem}
@@ -581,9 +659,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     size={12}
                     weight={'400'}
                     lineHeight={17}
-                    color={isBusyTime(professional) ? theme.colors.danger5 : theme.colors.success500}
+                    color={isBusyTime(professional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
                   >
-                    {isBusyTime(professional)
+                    {isBusyTime(professional, dateSelected)
                       ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
                       : t('AVAILABLE', 'Available')
                     }