ordering-ui-react-native 0.15.96 → 0.15.97-release

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

@@ -11,7 +11,9 @@ export const OrdersOptionStatus = (props: any) => {
     tabs,
     orderStatus,
     search,
-    onSearch
+    onSearch,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -29,6 +31,10 @@ export const OrdersOptionStatus = (props: any) => {
     setOptionsList(_optionList)
   }, [currentTabSelected, tabs, orderStatus])
 
+  const handleOpenSelect = () => {
+    setOpenedSelect('state')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -40,6 +46,9 @@ export const OrdersOptionStatus = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_STATUS', 'Select Status')}
         dropViewMaxHeight={200}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='state'
       />
     </Container>
   );

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

@@ -230,6 +230,7 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
       fontWeight: '600',
       fontSize: 16,
       color: theme.colors.textGray,
+      width: '85%'
     },
     badge: {
       marginBottom: 6,

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

@@ -31,8 +31,8 @@ export const PreviousOrders = (props: any) => {
   const theme = useTheme();
   const [, setCurrentTime] = useState()
   const [allowColumns, setAllowColumns] = useState({
-    timer: true,
-    slaBar: true,
+    timer: configState?.configs?.order_deadlines_enabled?.value === '1',
+    slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
   })
 
   const [orientationState] = useDeviceOrientation();
@@ -104,8 +104,8 @@ export const PreviousOrders = (props: any) => {
     const offset = 300
     const cdtToutc = moment(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
     const _delivery = order?.delivery_datetime_utc
-      ? parseDate(order?.delivery_datetime_utc)
-      : parseDate(cdtToutc)
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
+      : parseDate(cdtToutc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
     const _eta = order?.eta_time
     const diffTimeAsSeconds = moment(_delivery, 'YYYY-MM-DD hh:mm A').add(_eta, 'minutes').diff(moment().utc(), 'seconds')
     return Math.ceil(diffTimeAsSeconds / 60)
@@ -178,9 +178,9 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                  {allowColumns?.slaBar && (
-                    <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
-                  )}
+                    {allowColumns?.slaBar && (
+                      <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
+                    )}
                     {
                       order.business?.logo && (
                         <Logo style={styles.logo}>

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

@@ -28,6 +28,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
     getProductMax,
     onDeleteProduct,
     onEditProduct,
+    currency
   } = props;
 
   const [, t] = useLanguage();
@@ -147,13 +148,13 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
               }}>
               <View style={{ flexDirection: 'row' }}>
                 <OText size={12} color={theme.colors.textGray}>
-                  {parsePrice(getProductPrice(product))}
+                  {parsePrice(getProductPrice(product), { currency })}
                 </OText>
 
                 {(
                   productInfo?.()?.ingredients?.length > 0 ||
                   productInfo?.()?.options?.length > 0 ||
-                  product.comment
+                  !!product.comment
                 ) && !isClickableEvent && (
                     <MaterialCommunityIcon name="chevron-down" size={12} />
                   )}
@@ -268,7 +269,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                                   suboption.position,
                                 )
                                 : '',
-                            price: parsePrice(suboption.price),
+                            price: parsePrice(suboption.price, { currency }),
                           })}
                         </OText>
                       </ProductSubOption>
@@ -278,7 +279,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
               </ProductOptionsList>
             )}
 
-            {product.comment && (
+            {!!product.comment && (
               <ProductComment>
                 <OText
                   size={12}

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

@@ -270,7 +270,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               }}
               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 }}
+              imgRightStyle={{ right: 5, margin: 5 }}
               onClick={() => handleChangeComment(commentItem) }
             />
           ))}

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Dimensions, View } from 'react-native'
+import { OButton, OIcon, OText } from '../shared'
+import { useLanguage, useSession } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+
+export const ScheduleBlocked = (props : any) => {
+    const { nextSchedule } = props
+    const [, t] = useLanguage()
+    const [, {logout}] = useSession()
+    const theme = useTheme()
+    const deviceWidth = Dimensions.get('screen').width
+
+    const daysOfWeek = [
+        t('SUNDAY', 'Sunday'),
+        t('MONDAY', 'Monday'),
+        t('TUESDAY', 'Tuesday'),
+        t('WEDNESDAY', 'Wednesday'),
+        t('THURSDAY', 'Thurday'),
+        t('FRIDAY', 'Friday'),
+        t('SATURDAY', 'Saturday'),
+    ]
+
+    const scheduleFormatted = ({ hour, minute }: any) => {
+        const checkTime = (val: number) => val < 10 ? `0${val}` : val
+        return `${checkTime(hour)}:${checkTime(minute)}`
+    }
+
+    const goBack = () => {
+        logout()
+    }
+
+    return (
+        <View style={{ alignItems: 'center', padding: 40 }}>
+            <OText size={20}>{t('YOU_CANT_LOGIN', 'You can\'t login')}</OText>
+            <OIcon
+                src={theme.images?.general?.deliveryWaiting}
+                width={(deviceWidth - 80) * 0.9}
+                height={(deviceWidth - 80) * 0.8}
+            />
+            <OText>{t('OUTSIDE_ESTABLISHED_SCHEDULE', 'You are outside the established schedule')}</OText>
+            <View style={{ flexDirection: 'row', marginBottom: 20 }}>
+                <OText color={theme.colors.primary}>{t('NEXT_TIME', 'Next time')}: </OText>
+                <OText>{daysOfWeek[nextSchedule?.day]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
+            </View>
+            <OButton
+                text={t('GO_BACK', 'Go back')}
+                textStyle={{ color: theme.colors.white }}
+                onClick={goBack}
+            />
+        </View>
+    )
+}

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

@@ -36,6 +36,7 @@ export const UserFormDetailsUI = (props: any) => {
     handleCancelEdit,
     toggleIsEdit,
     isCheckout,
+    isAlsea
   } = props;
 
   const theme = useTheme();
@@ -265,7 +266,9 @@ export const UserFormDetailsUI = (props: any) => {
               }).map(
                 (field: any) =>
                   showField &&
-                  showField(field.code) && (
+                  showField(field.code) &&
+                  !isAlsea
+                  && (
                     <React.Fragment key={field.id}>
                       <OText style={styles.label}>
                         {t(field?.code.toUpperCase(), field?.name)}
@@ -442,7 +445,7 @@ export const UserFormDetailsUI = (props: any) => {
                 </OText>
               )}
 
-              {!!showInputPhoneNumber && (
+              {!!showInputPhoneNumber && !isAlsea && (
                 <WrapperPhone>
                   <PhoneInputNumber
                     data={phoneInputData}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, ScrollView, ActivityIndicator, Pressable } from 'react-native';
 import { useForm } from 'react-hook-form';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -22,6 +22,7 @@ import {
 import { LogoutButton } from '../LogoutButton';
 import { LanguageSelector } from '../LanguageSelector';
 import { UserFormDetailsUI } from '../UserFormDetails';
+import { DriverSchedule } from '../DriverSchedule'
 import ToggleSwitch from 'toggle-switch-react-native';
 import { UDWrapper } from '../UserFormDetails/styles';
 import {
@@ -30,11 +31,12 @@ import {
   OText,
   OButton,
   OInput,
+  OModal,
 } from '../../components/shared';
 import { sortInputFields, getTraduction } from '../../utils';
 import { ProfileParams } from '../../types';
 import { NotFoundSource } from '../NotFoundSource';
-
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const ProfileUI = (props: ProfileParams) => {
   const {
     navigation,
@@ -47,6 +49,7 @@ const ProfileUI = (props: ProfileParams) => {
     handleToggleAvalaibleStatusDriver,
     userState,
     isAvailableLoading,
+    isAlsea
   } = props;
 
   const [{ user }] = useSession();
@@ -66,6 +69,7 @@ const ProfileUI = (props: ProfileParams) => {
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
   const [phoneToShow, setPhoneToShow] = useState('');
+  const [openModal, setOpenModal] = useState(false)
 
   useEffect(() => {
     if (phoneInputData.phone.cellphone) {
@@ -456,10 +460,10 @@ const ProfileUI = (props: ProfileParams) => {
                 hideUpdateButton
                 handleCancelEdit={handleCancelEdit}
                 toggleIsEdit={toggleIsEdit}
+                isAlsea={isAlsea}
               />
             </View>
           )}
-
           {!validationFields.loading && !isEdit && (
             <EditButton>
               <OButton
@@ -474,12 +478,32 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </EditButton>
           )}
-
+          {!!user?.schedule && (
+            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
+                <AntDesignIcon size={18} name='right' />
+              </View>
+              <View style={{
+                borderBottomColor: theme.colors.tabBar,
+                borderBottomWidth: 1,
+                marginTop: 10
+              }} />
+            </Pressable>
+          )}
           <Actions>
             <LanguageSelector />
 
             <LogoutButton />
           </Actions>
+          <OModal
+            open={openModal}
+            onClose={() => setOpenModal(false)}
+            entireModal
+            hideIcons
+          >
+            <DriverSchedule schedule={user?.schedule} />
+          </OModal>
         </ScrollView>
       )}
     </>

package/themes/business/src/components/shared/ODropDown.tsx

@@ -4,6 +4,7 @@ import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
 import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View } from 'react-native'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Text } from 'react-native-paper';
 
 interface Props {
@@ -16,7 +17,11 @@ interface Props {
   dropViewMaxHeight?: any,
   isModal?: any,
   bgcolor?: string,
-  textcolor?: string
+  textcolor?: string,
+  handleClear?: any,
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -70,7 +75,11 @@ const ODropDown = (props: Props) => {
     placeholder,
     onSelect,
     dropViewMaxHeight,
-    isModal
+    isModal,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -82,6 +91,7 @@ const ODropDown = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -91,12 +101,25 @@ const ODropDown = (props: Props) => {
     setIsOpen(false)
   }
 
+  const handleClearSearch = () => {
+    handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -110,11 +133,22 @@ const ODropDown = (props: Props) => {
         >
           {selectedOption?.content || selectedOption?.name || placeholder}
         </SelectedLabel>
-        <FeatherIcon
-          name='chevron-down'
-          color={props.textcolor}
-          size={24}
-        />
+        {selectedOption && handleClear ? (
+          <AntDesign
+            name={'close'}
+            size={20}
+            onPress={() => handleClearSearch()}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+          />
+        ) : (
+          <FeatherIcon
+            name='chevron-down'
+            color={props.textcolor}
+            size={24}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+
+          />
+        )}
       </Selected>
       {isOpen && options && (
         <DropView
@@ -154,7 +188,7 @@ const ODropDown = (props: Props) => {
               maxHeight: dropViewMaxHeight || null,
               paddingBottom: 15
             }}
-            nestedScrollEnabled={true}
+              nestedScrollEnabled={true}
             >
               {options.map((option: any, index: number) => (
                 <CustomTouchableOpacity

package/themes/business/src/components/shared/ODropDownCalendar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import styled, { css, useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
@@ -24,6 +24,10 @@ interface Props {
   handleChangeDate?: any,
   rangeDate?: any,
   isCalendarAlwaysVisible?: boolean
+  handleClear?: any;
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -96,7 +100,11 @@ const ODropDownCalendar = (props: Props) => {
     isCalendar,
     handleChangeDate,
     rangeDate,
-    isCalendarAlwaysVisible
+    isCalendarAlwaysVisible,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -110,6 +118,7 @@ const ODropDownCalendar = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -122,7 +131,7 @@ const ODropDownCalendar = (props: Props) => {
   const onDateChange = (date: any, type: any) => {
     if (!date) return
     if (type === 'END_DATE') {
-      handleChangeDate(rangeDate.from, date.format('MM/DD/YY'))
+      handleChangeDate(rangeDate.from, new Date(date.format('MM/DD/YY')) === rangeDate.from ? '' : date.format('MM/DD/YY'))
     } else {
       handleChangeDate(date.format('MM/DD/YY'), '')
     }
@@ -142,12 +151,31 @@ const ODropDownCalendar = (props: Props) => {
     return (from || to) ? (from + (to ? end : '')) : placeholder
   }
 
+  const handleClearCalendar = () => {
+    handleClear && handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
+  useEffect(() => {
+    if (rangeDate.to && rangeDate.from) {
+      onSelect('calendar')
+    }
+  }, [rangeDate.to, rangeDate.from])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -165,10 +193,11 @@ const ODropDownCalendar = (props: Props) => {
               : `${selectedOption?.content || selectedOption?.name || placeholder}`
           }
         </SelectedLabel>
-        <FeatherIcon
-          name='calendar'
-          color={theme.colors.backArrow}
-          size={24}
+        <AntDesign
+          name={selectedOption && handleClear ? 'close' : 'calendar'}
+          size={20}
+          onPress={() => handleClearCalendar()}
+          style={{ position: 'absolute', right: 12, top: 13 }}
         />
       </Selected>
       {isOpen && options && (

package/themes/business/src/components/shared/OModal.tsx

@@ -26,6 +26,7 @@ interface Props {
   isNotDecoration?: boolean;
   styleCloseButton?: any;
   order?: any;
+  hideIcons?: boolean
 }
 
 const OModal = (props: Props): React.ReactElement => {
@@ -47,6 +48,7 @@ const OModal = (props: Props): React.ReactElement => {
     style,
     styleCloseButton,
     order,
+    hideIcons
   } = props;
 
   const theme = useTheme();
@@ -70,8 +72,8 @@ const OModal = (props: Props): React.ReactElement => {
       alignItems: 'center',
       paddingHorizontal: 30,
       paddingTop: 30,
-      paddingBottom: 25,
-      borderBottomWidth: 2,
+      paddingBottom: !hideIcons ? 25 : 15,
+      borderBottomWidth: !hideIcons ? 2 : 0,
       borderBottomColor: '#e6e6e6',
     },
     titleGroups: {
@@ -165,7 +167,7 @@ const OModal = (props: Props): React.ReactElement => {
         transparent={isTransparent}
         visible={open}
         onRequestClose={() => {
-          onClose();
+          onClose && onClose();
         }}
         style={{
           height: '100%',
@@ -218,50 +220,51 @@ const OModal = (props: Props): React.ReactElement => {
                     {title}
                   </OText>
                 </View>
+                {!hideIcons && (
+                  <View style={styles.titleGroups}>
+                    <View style={styles.shadow}>
+                      {order?.business?.logo ? (
+                        <OIcon
+                          url={optimizeImage(
+                            order?.business?.logo,
+                            'h_300,c_limit',
+                          )}
+                          style={styles.titleIcons}
+                        />
+                      ) : (
+                        <OIcon
+                          src={theme.images.dummies.businessLogo}
+                          style={styles.titleIcons}
+                        />
+                      )}
+                    </View>
 
-                <View style={styles.titleGroups}>
-                  <View style={styles.shadow}>
-                    {order?.business?.logo ? (
+                    <View style={styles.shadow}>
                       <OIcon
                         url={optimizeImage(
-                          order?.business?.logo,
+                          order?.customer?.photo ||
+                          theme?.images?.dummies?.customerPhoto,
                           'h_300,c_limit',
                         )}
                         style={styles.titleIcons}
                       />
-                    ) : (
-                      <OIcon
-                        src={theme.images.dummies.businessLogo}
-                        style={styles.titleIcons}
-                      />
-                    )}
-                  </View>
+                    </View>
 
-                  <View style={styles.shadow}>
-                    <OIcon
-                      url={optimizeImage(
-                        order?.customer?.photo ||
-                          theme?.images?.dummies?.customerPhoto,
-                        'h_300,c_limit',
-                      )}
-                      style={styles.titleIcons}
-                    />
+                    {order?.driver && (
+                      <View style={styles.shadow}>
+                        <OIcon
+                          url={
+                            optimizeImage(
+                              order?.driver?.photo,
+                              'h_300,c_limit',
+                            ) || theme?.images?.dummies?.driverPhoto
+                          }
+                          style={styles.titleIcons}
+                        />
+                      </View>
+                    )}
                   </View>
-
-                  {order?.driver && (
-                    <View style={styles.shadow}>
-                      <OIcon
-                        url={
-                          optimizeImage(
-                            order?.driver?.photo,
-                            'h_300,c_limit',
-                          ) || theme?.images?.dummies?.driverPhoto
-                        }
-                        style={styles.titleIcons}
-                      />
-                    </View>
-                  )}
-                </View>
+                )}
               </View>
             )}
             {children}