ordering-ui-react-native 0.16.78-release → 0.16.79-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.78-release",
+  "version": "0.16.79-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -29,6 +29,10 @@ import { ReviewCustomer } from '../ReviewCustomer'
 
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 interface OrderContent {
   order: any,
   logisticOrderStatus?: Array<number>,
@@ -44,7 +48,9 @@ export const OrderContentComponent = (props: OrderContent) => {
   const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
-  const distanceUnit = configs?.distance_unit?.value
+  const [orientationState] = useDeviceOrientation();
+
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
@@ -103,7 +109,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   }
 
   const onTextLayout = useCallback((e: any) => {
-    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
   },[]);
 
   return (

package/themes/business/src/components/ProductItemAccordion/index.tsx

@@ -3,6 +3,10 @@ import { View, Animated, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useUtils, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 import {
   Accordion,
   AccordionSection,
@@ -34,6 +38,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ parsePrice }] = useUtils();
+  const [orientationState] = useDeviceOrientation();
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [isActive, setActiveState] = useState(false);
   const [isReadMore, setIsReadMore] = useState(false);
@@ -111,7 +117,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   }, []);
 
   const onTextLayout = useCallback((e: any) => {
-    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
   },[]);
 
   return (

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

@@ -1,5 +1,5 @@
 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'
@@ -60,7 +60,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
     },
     photoStyle: {
       alignSelf: 'center'
-    }
+    },
+    dropDownRow: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      marginHorizontal: 0
+    },
   })
 
   const onDateChange = (date: any) => {
@@ -92,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()
@@ -238,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'

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'
@@ -110,31 +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 (!dateSelected) return false
-    const startDay = moment(dateSelected).utc().format('d')
+  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(dateSelected).add(duration - 1, 'minutes').utc().format('d')
+    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: any) => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
+      ? 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: any) => {
-      return (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() < moment.utc(item?.end).local().valueOf()) ||
-        (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).add(duration, 'minutes').valueOf() &&
-        moment(dateSelected).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
+    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
   }
@@ -391,9 +401,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                         size={12}
                         weight={'400'}
                         lineHeight={17}
-                        color={isBusyTime(currentProfessional) ? theme.colors.danger5 : theme.colors.success500}
+                        color={isBusyTime(currentProfessional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
                       >
-                        {isBusyTime(currentProfessional)
+                        {isBusyTime(currentProfessional, dateSelected)
                           ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
                           : t('AVAILABLE', 'Available')
                         }
@@ -473,10 +483,12 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       paddingTop: 8,
                       paddingHorizontal: 12
                     }}
-                    rowTextStyle={{
-                      color: theme.colors.disabled,
-                      fontSize: 14,
-                      marginHorizontal: 0
+                    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'
@@ -549,7 +561,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       ? t('SOLD_OUT', 'Sold out')
                       : t('BOOK', 'Book'))}
                   style={styles.buttonStyle}
-                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional)}
+                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
                   textStyle={{ fontSize: 14, color: theme.colors.white }}
                 />
               )}
@@ -647,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')
                     }