ordering-ui-react-native 0.18.2 → 0.18.3

package/package.json

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

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

@@ -12,7 +12,7 @@ import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
-import { showLocation } from 'react-native-map-link';
+import { Popup } from 'react-native-map-link';
 import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
@@ -48,6 +48,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
   const [distancesFromTwoPlacesKm, setDistancesFromTwoPlacesKm] = useState(0);
   const [isMin, setIsMin] = useState(false);
   const [{ parseDate }] = useUtils();
+  const [popUp, setPopUp] = useState<boolean>(false);
   const mapErrors: any = {
     ERROR_NOT_FOUND_ADDRESS: "Sorry, we couldn't find an address",
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
@@ -478,7 +479,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 style={styles.arrowDistance}
               />
               <OText size={12} numberOfLines={3}>
-                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`} 
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`}
               </OText>
 
             </View>
@@ -501,7 +502,18 @@ export const DriverMap = (props: GoogleMapsParams) => {
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
             style={styles.showButton}
-            onClick={() => showLocation({
+            onClick={() => setPopUp(true)}
+            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+          />
+          <Popup
+            isVisible={popUp}
+            onCancelPressed={() => setPopUp(false)}
+            onAppPressed={() => setPopUp(false)}
+            onBackButtonPressed={() => setPopUp(false)}
+            modalProps={{
+              animationIn: 'slideInUp'
+            }}
+            options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
               sourceLatitude: userLocation.latitude,
@@ -510,8 +522,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
               cancelText: t('CANCEL', 'Cancel'),
-            })}
-            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+            }}
           />
         </View>
         {showAcceptOrReject && (

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

@@ -43,12 +43,12 @@ interface OrderContent {
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
-  const [{user}] = useSession()
-  console.log(user)
+  const [{ user }] = useSession()
   const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
   const [orientationState] = useDeviceOrientation();
+  const distanceUnit = configs?.distance_unit?.value
 
   const WIDTH_SCREEN = orientationState?.dimensions?.width
 
@@ -110,7 +110,7 @@ export const OrderContentComponent = (props: OrderContent) => {
 
   const onTextLayout = useCallback((e: any) => {
     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 (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, StyleSheet, SafeAreaView, View } from 'react-native';
+import { Modal, StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import OIcon from './OIcon';
 import OText from './OText';
@@ -158,6 +158,18 @@ const OModal = (props: Props): React.ReactElement => {
       fontWeight: '600',
       textAlign: 'center',
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
+    },
   });
 
   return (
@@ -205,14 +217,9 @@ const OModal = (props: Props): React.ReactElement => {
             {!customClose && (
               <View style={styles.titleSection}>
                 <View style={styles.titleGroups}>
-                  <OIconButton
-                    icon={theme.images.general.arrow_left}
-                    iconStyle={{ width: 20, height: 20 }}
-                    borderColor={theme.colors.clear}
-                    style={styleCloseButton || styles.cancelBtn}
-                    onClick={onClose}
-                  />
-
+                  <TouchableOpacity onPress={() => onClose()} style={styles.btnBackArrow}>
+                    <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+                  </TouchableOpacity>
                   <OText
                     size={16}
                     style={styles.modalText}

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { TouchableOpacity, StyleSheet, View, Dimensions, Platform } from 'react-native'
 import { useLanguage, useUtils, useConfig, useOrder, MomentOption } from 'ordering-components/native'
-import { OButton, OText } from '../shared'
+import { OButton, OIcon, OText } from '../shared'
 import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
@@ -37,7 +37,10 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     handleChangeDate,
     handleChangeTime,
     handleAsap,
-    isAsap
+    getActualSchedule,
+    isAsap,
+    cateringPreorder,
+    preorderLeadTime
   } = props
 
   const theme = useTheme()
@@ -52,6 +55,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
   const { top } = useSafeAreaInsets()
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
   const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   const styles = StyleSheet.create({
@@ -252,10 +257,45 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   useEffect(() => {
     if (selectDate === null) return
-    const selectedMenu = Object.keys(menu).length > 0 ? (menu?.use_business_schedule ? business : menu) : business
-    const _times = getTimes(selectDate, selectedMenu)
-    setTimeList(_times)
-  }, [selectDate, menu])
+    if (cateringPreorder) {
+      let _timeLists = []
+      const schedule = business && getActualSchedule()
+      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+        return
+      }
+      _timeLists = hoursList
+        .filter(hour => ((Object.keys(business || {})?.length === 0) || schedule?.lapses?.some((lapse: any) =>
+          moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
+          moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
+          (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+        .map(hour => {
+          return {
+            value: hour.startTime,
+            text: 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' })
+            ),
+            endText: is12hours ? (
+              hour.endTime.includes('12')
+                ? `${hour.endTime}PM`
+                : parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            )
+          }
+        })
+      if (_timeLists?.length > 0) {
+        setTimeList(_timeLists)
+      }
+    } else {
+      const selectedMenu = Object.keys(menu).length > 0 ? (menu?.use_business_schedule ? business : menu) : business
+      const _times = getTimes(selectDate, selectedMenu)
+      setTimeList(_times)
+    }
+  }, [selectDate, menu, business, cateringPreorder, hoursList, dateSelected])
 
   useEffect(() => {
     if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
@@ -263,6 +303,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   useEffect(() => {
     if (dateSelected) {
+
       const dateParts = dateSelected.split('-')
       const _dateSelected = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
       setSelectedDate(_dateSelected)
@@ -302,7 +343,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             />
           </View>
         </BusinessInfoWrapper>
-        {isPreOrderSetting && (
+        {isPreOrderSetting && !cateringPreorder && (
           <PreorderTypeWrapper>
             <OText
               size={16}
@@ -415,19 +456,36 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                 />
               )}
             </View>
-            <TimeListWrapper nestedScrollEnabled={true}>
-              {(isEnabled && timeList?.length > 0) ? (
+            <TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
+              {((isEnabled || cateringPreorder) && timeList?.length > 0) ? (
                 <TimeContentWrapper>
                   {timeList.map((time: any, i: number) => (
                     <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
-                      <TimeItem active={timeSelected === time.value}>
+                      <TimeItem active={timeSelected === time.value} cateringPreorder={cateringPreorder}>
+                        {cateringPreorder && (
+                          <>
+                            {timeSelected === time.value ? (
+                              <OIcon
+                                src={theme.images.general.option_checked}
+                                width={18}
+                                style={{ marginEnd: 24, bottom: 2 }}
+                              />
+                            ) : (
+                              <OIcon
+                                src={theme.images.general.option_normal}
+                                width={18}
+                                style={{ marginEnd: 24, bottom: 2 }}
+                              />
+                            )}
+                          </>
+                        )}
                         <OText
-                          size={14}
+                          size={cateringPreorder ? 18 : 16}
                           color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
                           style={{
                             lineHeight: 24
                           }}
-                        >{time.text}</OText>
+                        >{time.text} {cateringPreorder && `- ${time.endText}`}</OText>
                       </TimeItem>
                     </TouchableOpacity>
                   ))}
@@ -461,7 +519,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
               marginBottom: 12,
               textAlign: 'center'
             }}
-            >
+          >
             {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
           </OText>
         )}
@@ -480,7 +538,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
 export const BusinessPreorder = (props: any) => {
   const [{ configs }] = useConfig()
-
+  const [orderState] = useOrder()
   const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
 
   const currentDate = new Date()
@@ -492,10 +550,33 @@ export const BusinessPreorder = (props: any) => {
   currentDate.setHours(23)
   currentDate.setMinutes(59)
 
+  const cateringTypeString = orderState?.options?.type === 7
+  ? 'catering_delivery'
+  : orderState?.options?.type === 8
+    ? 'catering_pickup'
+    : null
+
+const splitCateringValue = (configName : string) =>
+  Object.values(a || props?.business?.configs || {})
+    ?.find(config => config?.key === configName)
+    ?.value?.split('|')
+    ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]
+const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
+const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
+const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))
+const preorderMaximumDays = parseInt(splitCateringValue('preorder_maximum_days'))
+const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days'))
+
   const businessPreorderProps = {
     ...props,
     UIComponent: BusinessPreorderUI,
-    maxDate: currentDate
+    maxDate: currentDate,
+    preorderLeadTime,
+    preorderSlotInterval,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringPreorder: !!cateringTypeString
   }
   return <MomentOption {...businessPreorderProps} />
 }

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

@@ -21,6 +21,10 @@ export const OrderTimeWrapper = styled.View`
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
   max-height: 160px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    max-height: 210px;
+    height: 210px;
+  `}
 `
 
 export const TimeContentWrapper = styled.View`
@@ -38,6 +42,16 @@ export const TimeItem = styled.View`
   justify-content: center;
   align-items: center;
   margin: 10px 0px;
+  ${({ cateringPreorder }: any) => cateringPreorder && css`
+    background: #fff;
+    width: 100%;
+    min-width: 100%;
+    height: 50px;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-left: 10px;
+    margin: 0;
+  `}
   ${({ active }: any) => active && css`
     background: #F5F9FF;
   `}

package/themes/original/src/types/index.tsx

@@ -570,6 +570,9 @@ export interface BusinessPreorderParams {
 	goToBack: any;
 	business: any;
 	handleBusinessClick: (value: any) => {};
+	getActualSchedule?: any;
+	cateringPreorder?: boolean;
+	preorderLeadTime?: number 
 }
 export interface BusinessMenuListParams {
 	menu: any;