ordering-ui-react-native 0.16.95 → 0.16.96-release

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

@@ -1,21 +1,21 @@
 import React, { useState } from 'react'
-import { ScrollView, TouchableOpacity, View, StyleSheet, Platform } from 'react-native'
-import { useUtils, useLanguage } from 'ordering-components/native'
+import { ScrollView, TouchableOpacity, View, StyleSheet } from 'react-native'
+import { useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
-import FastImage from 'react-native-fast-image'
-import { OIcon, OText, OModal } from '../shared'
+import { OText, OModal } from '../shared'
 import { ProfessionalProfile } from '../ProfessionalProfile'
 import { ProfessionalFilterParams } from '../../types'
+import { SingleProfessionalCard } from './SingleProfessionalCard'
 
 export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
   const {
     professionals,
     professionalSelected,
-		handleChangeProfessionalSelected
+		handleChangeProfessionalSelected,
+    handleUpdateProfessionals
   } = props
 
   const theme = useTheme()
-  const [{ optimizeImage }] = useUtils()
   const [, t] = useLanguage()
   const [open, setOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState(null)
@@ -30,6 +30,11 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
     setOpen(false)
   }
 
+  const onUpdateProfessionals = (id, changes) => {
+    const updatedProfessional = professionals.find(professional => professional.id === id)
+    handleUpdateProfessionals({ ...updatedProfessional, ...changes })
+  }
+
   const styles = StyleSheet.create({
     professionalItem: {
       flexDirection: 'row',
@@ -39,12 +44,7 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
       borderWidth: 1,
       marginRight: 12,
       minHeight: 64
-    },
-		photoStyle: {
-			width: 42,
-			height: 42,
-			borderRadius: 7.6
-		}
+    }
   })
 
   return (
@@ -73,43 +73,14 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
             </OText>
           </View>
         </TouchableOpacity>
-        {professionals.map((professional: any, i: number) => (
-          <TouchableOpacity
-            key={i}
-            onPress={() => handleOpenProfile(professional)}
-          >
-            <View
-              style={{
-                ...styles.professionalItem,
-                borderColor: (professional?.id === professionalSelected?.id)
-                  ? theme.colors.primary
-                  : theme.colors.border 
-              }}
-            >
-              {professional?.photo ? (
-                <FastImage
-                  style={styles.photoStyle}
-                  source={{
-                    uri: optimizeImage(professional?.photo, 'h_250,c_limit'),
-                    priority: FastImage.priority.normal,
-                  }}
-                  resizeMode={FastImage.resizeMode.cover}
-                />
-              ) : (
-                <OIcon
-                  src={theme?.images?.dummies?.product}
-                  style={styles.photoStyle}
-                />
-              )}
-              <OText
-                size={12}
-                style={{ marginLeft: 12 }}
-                weight={'400'}
-              >
-                {professional?.name} {professional?.lastname}
-              </OText>
-            </View>
-          </TouchableOpacity>
+        {professionals.map((professional: any) => (
+          <SingleProfessionalCard
+            key={professional.id}
+            professional={professional}
+            active={professional?.id === professionalSelected?.id}
+            handleProfessionalClick={handleOpenProfile}
+            handleUpdateProfessionals={onUpdateProfessionals}
+          />
         ))}
       </ScrollView>
       <OModal

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

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { StyleSheet, Platform, View, Dimensions } from 'react-native'
+import { StyleSheet, Platform, View, Dimensions, Text } from 'react-native'
 import { useUtils, useLanguage, useConfig } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 import CalendarPicker from 'react-native-calendar-picker'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import moment from 'moment'
 import SelectDropdown from 'react-native-select-dropdown'
-import { OButton, OText } from '../shared'
+import { OButton, OText, OIcon } from '../shared'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ProfessionalProfileParams } from '../../types'
@@ -58,6 +58,14 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
       height: 40,
       marginBottom: 30
     },
+    photoStyle: {
+      alignSelf: 'center'
+    },
+    dropDownRow: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      marginHorizontal: 0
+    },
   })
 
   const onDateChange = (date: any) => {
@@ -89,6 +97,28 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
     setIsEnabled(menu?.schedule?.[day]?.enabled || false)
   }
 
+  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
+    if (!isStartScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
+    const busyTimes = 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())
+    })
+    return valid
+  }
+
   const getTimes = (curdate: any, menu: any) => {
     validateSelectedDate(curdate, menu)
     const date = new Date()
@@ -144,20 +174,28 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
   }
 
   useEffect(() => {
-    if (selectDate === null) return
+    if (selectDate === null || !professional?.schedule) return
     const _times = getTimes(selectDate, professional)
     setTimeList(_times)
   }, [selectDate, professional])
 
   return (
     <Container>
-			<ProfessionalPhoto
-				source={{
-					uri:
-          professional?.photo ||
-						optimizeImage(theme.images.general.user, 'h_250,c_limit'),
-				}}
-      />
+      {!!professional?.photo ? (
+        <ProfessionalPhoto
+          source={{
+            uri: professional?.photo
+          }}
+        />
+      ) : (
+        <OIcon
+          src={theme.images.general.user}
+          style={styles.photoStyle}
+          cover={false}
+          width={200}
+          height={200}
+        />
+      )}
       <InfoWrapper>
         <OText
           size={20}
@@ -227,10 +265,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
                   paddingTop: 8,
                   paddingHorizontal: 12
                 }}
-                rowTextStyle={{
-                  color: theme.colors.disabled,
-                  fontSize: 14,
-                  marginHorizontal: 0
+                renderCustomizedRowChild={(item, index) => {
+                  return (
+                    <Text style={[styles.dropDownRow, { color: isBusyTime(professional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                      {item.text}
+                    </Text>
+                  )
                 }}
                 renderDropdownIcon={() => dropDownIcon()}
                 dropdownOverlayColor='transparent'