ordering-ui-react-native 0.16.28 → 0.16.31

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/OrdersOption/PreviousBusinessOrdered/index.tsx

@@ -7,11 +7,12 @@ import { ListWrapper } from './styles'
 import {
   View,
   StyleSheet,
-  ScrollView
+  ScrollView,
+  Dimensions
 } from 'react-native';
 import { PreviousBusinessOrderedParams } from '../../../types';
 
-export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams) => {
+export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams) => {
   const {
     navigation,
     businessesList,
@@ -23,6 +24,8 @@ export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams)
   } = props
 
   const [orderState] = useOrder()
+  const windowWidth = Dimensions.get('window').width;
+
   const onBusinessClick = (business: any) => {
     onNavigationRedirect('Business', { store: business.slug })
   }
@@ -120,7 +123,7 @@ export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams)
         <>
           {!businessLoading && (
             <BusinessControllerList
-              style={{ width: 320, marginRight: 20 }}
+              style={{ width: windowWidth - 80, marginRight: 20 }}
             />
           )}
         </>
@@ -137,7 +140,7 @@ export const PreviousBusinessOrderedUI = (props : PreviousBusinessOrderedParams)
   )
 }
 
-export const PreviousBusinessOrdered = (props) => {
+export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
   const previousBusinessOrderedController = {
     ...props,
     UIComponent: PreviousBusinessOrderedUI,

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ScrollView, StyleSheet } from 'react-native'
+import { ScrollView, StyleSheet, Dimensions } from 'react-native'
 import {
   ListWrapper
 } from './styles'
@@ -7,13 +7,15 @@ import {
 import { SingleProductCard } from '../../SingleProductCard'
 import { PreviousProductsOrderedParams } from '../../../types'
 
-export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) => {
+export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) => {
   const {
     products,
     onProductClick,
     isBusinessesSearchList
   } = props
 
+  const windowWidth = Dimensions.get('window').width;
+
   const styles = StyleSheet.create({
     container: {
       marginBottom: 0,
@@ -24,15 +26,15 @@ export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) =
     return (
       <>
         {products?.map((product: any) => (
-          <SingleProductCard
-            key={product?.id}
-            isSoldOut={(product.inventoried && !product.quantity)}
-            product={product}
-            businessId={product?.business?.id}
-            onProductClick={onProductClick}
-            style={style}
-            productAddedToCartLength={0}
-          />
+            <SingleProductCard
+              key={product?.id}
+              isSoldOut={(product.inventoried && !product.quantity)}
+              product={product}
+              businessId={product?.business?.id}
+              onProductClick={onProductClick}
+              style={style}
+              productAddedToCartLength={0}
+            />
         ))}
       </>
     )
@@ -40,7 +42,7 @@ export const PreviousProductsOrdered = (props : PreviousProductsOrderedParams) =
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
-        <ProductList style={{ width: 320, marginRight: 20 }} />
+        <ProductList style={{ width: windowWidth - 80, marginRight: 20 }} />
       ) : (
         <ListWrapper isBusinessesSearchList={isBusinessesSearchList}>
           <ProductList />

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>
+    </>
+  )
+}