ordering-ui-react-native 0.16.16 → 0.16.17-release

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

@@ -0,0 +1,309 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { StyleSheet, Platform, View, Dimensions } 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, OIcon } from '../shared'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ProfessionalProfileParams } from '../../types'
+
+import {
+  Container,
+  ProfessionalPhoto,
+  InfoWrapper,
+  Divider,
+  ScheduleWrapper,
+  ButtonWrapper,
+  CalendarWrapper
+} from './styles'
+
+const windowWidth = Dimensions.get('window').width
+
+export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
+  const {
+    professional,
+    handleChangeProfessionalSelected,
+    onClose
+  } = props
+
+  const [{ optimizeImage }] = useUtils()
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const { top } = useSafeAreaInsets()
+
+  const [selectDate, setSelectedDate] = useState<any>(new Date())
+  const [isEnabled, setIsEnabled] = useState(false)
+  const [timeList, setTimeList] = useState<any>([])
+  const dropdownRef = useRef<any>(null)
+
+  const styles = StyleSheet.create({
+    buttonStyle: {
+      borderRadius: 7.6,
+      height: 44,
+      borderWidth: 0
+    },
+    selectOption: {
+      width: '100%',
+      backgroundColor: theme.colors.backgroundGray100,
+      paddingVertical: 5,
+      paddingHorizontal: 14,
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 40,
+      marginBottom: 30
+    },
+    photoStyle: {
+      alignSelf: 'center'
+    }
+  })
+
+  const onDateChange = (date: any) => {
+    setSelectedDate(date)
+    dropdownRef?.current && dropdownRef.current.reset()
+  }
+
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={12}
+      />
+    )
+  }
+
+  const customDayHeaderStylesCallback = () => {
+    return {
+      textStyle: {
+        color: theme.colors.disabled,
+        fontSize: 12,
+      },
+    };
+  };
+
+  const validateSelectedDate = (curdate: any, menu: any) => {
+    const day = moment(curdate).format('d')
+    setIsEnabled(menu?.schedule?.[day]?.enabled || false)
+  }
+
+  const getTimes = (curdate: any, menu: any) => {
+    validateSelectedDate(curdate, menu)
+    const date = new Date()
+    var dateSeleted = new Date(curdate)
+    var times = []
+    for (var k = 0; k < menu.schedule[dateSeleted.getDay()].lapses.length; k++) {
+      var open = {
+        hour: menu.schedule[dateSeleted.getDay()].lapses[k].open.hour,
+        minute: menu.schedule[dateSeleted.getDay()].lapses[k].open.minute
+      }
+      var close = {
+        hour: menu.schedule[dateSeleted.getDay()].lapses[k].close.hour,
+        minute: menu.schedule[dateSeleted.getDay()].lapses[k].close.minute
+      }
+      for (var i = open.hour; i <= close.hour; i++) {
+        if (date.getDate() !== dateSeleted.getDate() || i >= date.getHours()) {
+          let hour = ''
+          let meridian = ''
+          if (configs?.format_time?.value === '12') {
+            if (i === 0) {
+              hour = '12'
+              meridian = ' ' + t('AM', 'AM')
+            } else if (i > 0 && i < 12) {
+              hour = (i < 10 ? '0' + i : i)
+              meridian = ' ' + t('AM', 'AM')
+            } else if (i === 12) {
+              hour = '12'
+              meridian = ' ' + t('PM', 'PM')
+            } else {
+              hour = ((i - 12 < 10) ? '0' + (i - 12) : `${(i - 12)}`)
+              meridian = ' ' + t('PM', 'PM')
+            }
+          } else {
+            hour = i < 10 ? '0' + i : i
+          }
+          for (let j = (i === open.hour ? open.minute : 0); j <= (i === close.hour ? close.minute : 59); j += 15) {
+            if (i !== date.getHours() || j >= date.getMinutes() || date.getDate() !== dateSeleted.getDate()) {
+              times.push({
+                text: hour + ':' + (j < 10 ? '0' + j : j) + meridian,
+                value: (i < 10 ? '0' + i : i) + ':' + (j < 10 ? '0' + j : j)
+              })
+            }
+          }
+        }
+      }
+    }
+    return times
+  }
+
+  const handleSelectProfessional = () => {
+    handleChangeProfessionalSelected(professional)
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    if (selectDate === null) return
+    const _times = getTimes(selectDate, professional)
+    setTimeList(_times)
+  }, [selectDate, professional])
+
+  return (
+    <Container>
+      {!!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}
+          style={{ marginBottom: 3 }}
+          weight={Platform.OS === 'ios' ? '600' : 'bold'}
+        >
+          {professional?.name} {professional?.lastname}
+        </OText>
+      </InfoWrapper>
+      <Divider />
+      <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>
+        {!!professional?.schedule ? (
+          <CalendarWrapper>
+            {(timeList?.length > 0 && isEnabled) ? (
+              <SelectDropdown
+                ref={dropdownRef} 
+                data={timeList}
+                onSelect={(selectedItem, index) => {
+                  console.log(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={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={windowWidth - 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>
+        <OButton
+          bgColor={theme.colors.primary}
+          onClick={() => handleSelectProfessional()}
+          text={t('BOOK', 'Book')}
+          style={styles.buttonStyle}
+          textStyle={{ fontSize: 14, color: theme.colors.white }}
+        />
+      </ButtonWrapper>
+    </Container>
+  )
+}

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

@@ -0,0 +1,46 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.ScrollView``
+
+export const ProfessionalPhoto = styled.ImageBackground`
+  width: 100%;
+  position: relative;
+  max-height: 258px;
+  height: 258px;
+  resize-mode: cover;
+`;
+
+export const InfoWrapper = styled.View`
+  margin-vertical: 30px;
+  padding-horizontal: 40px;
+`
+
+export const Divider = styled.View`
+  width: 100%;
+  height: 8px;
+  background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+`
+
+export const ScheduleWrapper = styled.View`
+  padding-horizontal: 40px;
+  margin-top: 30px;
+`
+
+export const ButtonWrapper = styled.View`
+  justify-content: center;
+  flex-direction: row;
+  padding-vertical: 13px;
+  margin-top: 30px;
+  margin-bottom: 40px;
+  width: 100%;
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
+`
+
+export const CalendarWrapper = styled.View`
+  flex: 1;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  border-radius: 7.6px;
+  padding: 15px;
+`

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

@@ -44,7 +44,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
     photoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -86,11 +86,11 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
   const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('driver')
@@ -204,7 +204,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
             <OIcon
               url={order?.driver?.photo}
               src={!order?.driver?.photo && theme.images.general.user}
-              cover={order?.driver?.photo ? true: false}
+              cover={order?.driver?.photo ? true : false}
               width={80}
               height={80}
             />
@@ -212,7 +212,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
           <OText weight={500} style={{ marginVertical: 10 }} color={theme.colors.textNormal}>{order?.driver?.name} {order?.driver?.lastname}</OText>
         </DriverPhotoContainer>
 
-        <View style={{flex: 1, justifyContent: 'flex-end'}}>
+        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
           <FormReviews>
             <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_DRIVER', 'How was your driver?')}</OText>
             <RatingBarContainer>
@@ -264,7 +264,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
                   style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
                   imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
                   imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-                  onClick={() => handleChangeComment(commentItem) }
+                  onClick={() => handleChangeComment(commentItem)}
                 />
               ))}
             </CommentsButtonGroup>

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

@@ -92,6 +92,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
   const [comments, setComments] = useState<Array<any>>([])
   const [extraComment, setExtraComment] = useState('')
+  const [enableProduct, setEnableProduct] = useState(true)
 
   const onSubmit = () => {
     if (Object.values(stars).some((value: any) => value === 0)) {
@@ -105,6 +106,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     handleReviewState && handleReviewState(order?.id)
     setIsReviewed && setIsReviewed(true)
     setAlertState({ ...alertState, success: true })
+    !enableProduct && navigation?.canGoBack() && navigation.goBack()
   }
 
   const qualificationList = [
@@ -141,7 +143,16 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     if (!order?.review) {
       onSubmit()
     } else {
-      onNavigationRedirect('ReviewProducts', { order: order })
+      skipOrderReview()
+    }
+  }
+
+  const skipOrderReview = () => {
+    if (enableProduct) onNavigationRedirect('ReviewProducts', { order: order })
+    else if (order?.driver && !order?.user_review) {
+      onNavigationRedirect('ReviewDriver', { order: order })
+    } else {
+      navigation?.canGoBack() && navigation.goBack()
     }
   }
 
@@ -187,6 +198,10 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     setStars({ ...stars, comments: _comment })
   }, [comments, extraComment])
 
+  useEffect(() => {
+    setEnableProduct(!order?.products.every(product => product?.deleted))
+  }, [order])
+
   return (
     <>
       <ReviewOrderContainer>
@@ -296,7 +311,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
       <FloatingBottomContainer>
         <ActionContainer>
           <SkipButton
-            onPress={() => onNavigationRedirect('ReviewProducts', { order: order })}
+            onPress={() => skipOrderReview()}
           >
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
@@ -318,7 +333,7 @@ export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
     UIComponent: ReviewOrderUI,
-    defaultStar: 5
+    defaultStar: props?.defaultStar || 5
   }
   return <ReviewOrderController {...reviewOrderProps} />
 }

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

@@ -74,7 +74,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        {order?.products?.map((product: any) => (
+        {order?.products?.map((product: any) => !product?.deleted && (
           <SingleProductReview
             key={product.id}
             product={product}

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

@@ -0,0 +1,118 @@
+import React, { useState } from 'react'
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { useLanguage, useUtils } from 'ordering-components/native'
+
+import {
+  ReviewOrderContainer,
+  BusinessLogo,
+  FormReviews,
+  ActionContainer,
+  RatingStarContainer,
+  PlacedDate
+} from './styles'
+import { OButton, OIcon, OText } from '../shared'
+import { StyleSheet, View, I18nManager } from 'react-native';
+import { FloatingBottomContainer } from '../../layouts/FloatingBottomContainer'
+
+import { useTheme } from 'styled-components/native'
+
+export const ReviewTrigger = (props: any) => {
+  const {
+    order,
+    handleOpenOrderReview
+  } = props
+
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    logoWrapper: {
+      shadowColor: theme.colors.black,
+      shadowRadius: 3,
+      shadowOffset: { width: 1, height: 4 },
+      elevation: 3,
+      borderRadius: 8,
+      shadowOpacity: 0.1,
+      overflow: 'hidden'
+    },
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    },
+    statusBar: {
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+      height: 10,
+      borderRadius: 5,
+      marginTop: 5
+    },
+    ratingItemContainer: {
+      position: 'absolute',
+      top: -20
+    },
+    ratingItem: {
+      left: '-50%',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    ratingLineStyle: {
+      height: 10,
+      width: 1,
+      marginBottom: 10,
+      backgroundColor: theme.colors.dusk
+    },
+    reviewedStyle: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginVertical: 20
+    },
+  })
+
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const placedOnDate = parseDate(order?.delivery_datetime, { utc: true, outputFormat: 'dddd MMMM DD, YYYY' })
+  const [star, setStar] = useState(5)
+
+  return (
+    <>
+      <ReviewOrderContainer>
+        <BusinessLogo>
+          <View style={styles.logoWrapper}>
+            <OIcon
+              url={order?.logo}
+              width={80}
+              height={80}
+            />
+          </View>
+        </BusinessLogo>
+        {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
+        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
+          <FormReviews>
+            <RatingStarContainer>
+              {[...Array(5).keys()].map((index: number) => (<FontAwesome name={(index <= (star - 1)) ? 'star' : 'star-o'} size={28} key={`star-symbol-${index}`} onPress={() => setStar(index + 1)} color={theme?.colors?.primary} />)
+              )}
+            </RatingStarContainer>
+            <PlacedDate>
+              <OText color={theme.colors.textNormal}>{t('DONOT_FORGET_RATE_YOUR_ORDER', 'Do not forget to rate your order placed on ')}</OText>
+              <OText color={theme.colors.textNormal} style={{ fontWeight: "bold" }}>{placedOnDate}</OText>
+            </PlacedDate>
+          </FormReviews>
+        </View>
+      </ReviewOrderContainer>
+      <FloatingBottomContainer borderTopWidth={0} borderRadius={10}>
+        <ActionContainer>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={t('GOTO_REVIEW', 'Go to review')}
+            style={{ borderRadius: 8 }}
+            imgRightSrc={theme.images.general.arrow_right}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            onClick={() => handleOpenOrderReview(star)}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}

package/themes/original/src/components/ReviewTrigger/styles.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components/native'
+
+export const ReviewOrderContainer = styled.ScrollView`
+  padding: 0 25px;
+  margin-bottom: 100px;
+`
+
+export const BusinessLogo = styled.View`
+  margin-vertical: 5px;
+  align-items: center;
+`
+
+export const FormReviews = styled.View`
+  flex: 1;
+  height: 100%;
+  margin-top: 10px;
+`
+
+export const ActionContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 30px;
+`
+
+export const RatingStarContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+`
+export const PlacedDate = styled.View`
+  margin-top: 30px;
+`

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

@@ -22,7 +22,11 @@ export const SearchBar = (props: any) => {
 		isDisabled,
 		iconCustomRight,
 		onSubmitEditing,
-		blurOnSubmit
+		blurOnSubmit,
+		inputContainerStyles,
+		containerStyles,
+		hideIcon,
+		autoFocus
 	} = props
 
 	const theme = useTheme();
@@ -77,17 +81,18 @@ export const SearchBar = (props: any) => {
 	}
 
 	return (
-		<Pressable style={[styles.container, { height: height }]}>
+		<Pressable style={[styles.container, containerStyles, { height: height }]}>
 			<OInput
+				autoFocus={autoFocus}
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={styles.inputStyle}
+				style={{ ...styles.inputStyle, ...inputContainerStyles }}
 				placeholder={placeholder}
-				icon={theme.images.general.search}
+				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()}