ordering-ui-react-native 0.16.29 → 0.16.32

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

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, View, Platform } from 'react-native'
+import SelectDropdown from 'react-native-select-dropdown'
+import { useTheme } from 'styled-components/native'
+import {
+  MomentOption as MomentOptionController,
+  useConfig,
+  useUtils
+} from 'ordering-components/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { Container } from './styles'
+import moment from 'moment'
+
+const MomentSelectorUI = (props: any) => {
+  const {
+		datesList,
+		hoursList,
+		dateSelected,
+		timeSelected,
+		handleChangeDate,
+		handleChangeTime,
+  } = props
+
+  const theme = useTheme()
+  const { top } = useSafeAreaInsets()
+  const [{ configs }] = useConfig()
+  const [{ parseTime }] = useUtils()
+
+  const [customizedDateList, setCustomizedDateList] = useState([])
+  const [customizedTimeList, setCustomizedTimeList] = useState([])
+
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
+  const styles = StyleSheet.create({
+    selectOption: {
+      width: '100%',
+      backgroundColor: theme.colors.backgroundGray100,
+      paddingVertical: 5,
+      paddingHorizontal: 14,
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 30
+    },
+    selectWrapper: {
+      flex: 1
+    }
+  })
+
+  useEffect(() => {
+    const updatedDatesList = datesList?.map((date: any) => {
+      return { value: moment(date).format('MMM DD, YYYY'), key: date }
+    })
+    setCustomizedDateList(updatedDatesList)
+  }, [datesList])
+
+  useEffect(() => {
+    if (hoursList?.length > 0) {
+      
+      const updatedHoursList = hoursList?.map((hour: any) => {
+        const timeValue = is12hours ? (
+          hour?.startTime?.includes('12')
+            ? `${hour.startTime}PM`
+            : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+        ) : (
+          parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+          )
+          return { value: timeValue, key: hour.startTime }
+        })
+      setCustomizedTimeList(updatedHoursList)
+    }
+  }, [hoursList])
+
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={12}
+      />
+    )
+  }
+
+  return (
+    <Container>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedDateList?.find((item: any) => item.key === dateSelected)}
+          data={customizedDateList}
+          onSelect={(selectedItem, index) => {
+            handleChangeDate(selectedItem?.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem?.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopLeftRadius: 7.6, borderBottomLeftRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            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: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedTimeList?.find((item: any) => item.key === timeSelected)}
+          data={customizedTimeList}
+          onSelect={(selectedItem, index) => {
+            handleChangeTime(selectedItem.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopRightRadius: 7.6, borderBottomRightRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            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: 14
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+    </Container>
+  )
+}
+
+export const MomentSelector = (props: any) => {
+  const [{ configs }] = useConfig()
+
+  const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
+
+  const currentDate = new Date()
+  const time = limitDays > 1
+    ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
+    : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
+
+  currentDate.setTime(time)
+  currentDate.setHours(23)
+  currentDate.setMinutes(59)
+
+  const businessPreorderProps = {
+    ...props,
+    UIComponent: MomentSelectorUI,
+    maxDate: currentDate
+  }
+  return <MomentOptionController {...businessPreorderProps} />
+}

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex-direction: row;
+  width: 100%;
+`

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

@@ -0,0 +1,128 @@
+import React, { useState } from 'react'
+import { ScrollView, TouchableOpacity, View, StyleSheet, Platform } from 'react-native'
+import { useUtils, 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 { ProfessionalProfile } from '../ProfessionalProfile'
+import { ProfessionalFilterParams } from '../../types'
+
+export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
+  const {
+    professionals,
+    professionalSelected,
+		handleChangeProfessionalSelected
+  } = props
+
+  const theme = useTheme()
+  const [{ optimizeImage }] = useUtils()
+  const [, t] = useLanguage()
+  const [open, setOpen] = useState(false)
+  const [currentProfessional, setCurrentProfessional] = useState(null)
+
+  const handleOpenProfile = (professional: any) => {
+    setCurrentProfessional(professional)
+    setOpen(true)
+  }
+
+  const handleCloseProfile = () => {
+    setCurrentProfessional(null)
+    setOpen(false)
+  }
+
+  const styles = StyleSheet.create({
+    professionalItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 7.6,
+      padding: 11,
+      borderWidth: 1,
+      marginRight: 12,
+      minHeight: 64
+    },
+		photoStyle: {
+			width: 42,
+			height: 42,
+			borderRadius: 7.6
+		}
+  })
+
+  return (
+    <>
+      <ScrollView
+        horizontal
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      >
+        <TouchableOpacity
+          onPress={() => handleChangeProfessionalSelected(null)}
+        >
+          <View
+            style={{
+              ...styles.professionalItem,
+              borderColor: !professionalSelected
+                ? theme.colors.primary
+                : theme.colors.border 
+            }}
+          >
+            <OText
+              size={12}
+              weight={'400'}
+            >
+              {t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}
+            </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>
+        ))}
+      </ScrollView>
+      <OModal
+				open={open}
+				onClose={() => handleCloseProfile()}
+				entireModal
+			>
+				<ProfessionalProfile
+          professional={currentProfessional}
+          onClose={() => handleCloseProfile()}
+          handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+        />
+			</OModal>
+    </>
+  )
+}

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

@@ -0,0 +1,297 @@
+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 } 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
+    },
+  })
+
+  const onDateChange = (date: any) => {
+    setSelectedDate(date)
+    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>
+			<ProfessionalPhoto
+				source={{
+					uri:
+          professional?.photo ||
+						optimizeImage(theme.images.general.user, 'h_250,c_limit'),
+				}}
+      />
+      <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 && isEnabled) ? (
+          <CalendarWrapper>
+            {timeList?.length > 0 ? (
+              <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={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 }}
+                />
+              }
+              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;
+`