ordering-ui-react-native 0.16.83-release → 0.16.84-release

package/package.json

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

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(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/Cart/index.tsx

@@ -43,7 +43,14 @@ const CartUI = (props: any) => {
     handleRemoveOfferClick,
     isMultiCheckout,
     hideDeliveryFee,
-    hideDriverTip
+    hideDriverTip,
+    hideCouponInput,
+    preorderSlotInterval,
+    preorderLeadTime,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringTypes
   } = props
 
   const theme = useTheme();
@@ -383,7 +390,7 @@ const CartUI = (props: any) => {
                 <OText size={12}>-{parsePrice(event.amount, { isTruncable: true })}</OText>
               </OSTable>
             ))}
-            {isCouponEnabled && !isCartPending && (
+            {isCouponEnabled && !isCartPending && !hideCouponInput && (
               <OSTable>
                 <OSCoupon>
                   <CouponControl

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

@@ -23,7 +23,9 @@ import { MultiCartsPaymethodsAndWallets } from '../MultiCartsPaymethodsAndWallet
 import { Cart } from '../Cart'
 import { FloatingButton } from '../FloatingButton'
 import { DriverTips } from '../DriverTips'
+import { CouponControl } from '../CouponControl';
 import { DriverTipsContainer } from '../Cart/styles'
+import { OSTable, OSCoupon } from '../OrderSummary/styles';
 
 import {
   ChContainer,
@@ -263,6 +265,29 @@ const MultiCheckoutUI = (props: any) => {
             </ChSection>
           )}
 
+          {
+            validationFields?.fields?.checkout?.coupon?.enabled &&
+            openCarts.every((cart: any) => cart.business_id && cart.status !== 2) &&
+            configs?.multi_business_checkout_coupon_input_style?.value === 'group' &&
+          (
+            <ChSection>
+              <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
+                {t('DISCOUNT_COUPON', 'Discount coupon')}
+              </OText>
+              <OSTable>
+                <OSCoupon>
+                  <CouponControl
+                    isMulti
+                    carts={openCarts}
+                    businessIds={openCarts.map((cart: any) => cart.business_id)}
+                    price={openCarts.reduce((total: any, cart: any) => total + cart.total, 0)}
+                  />
+                </OSCoupon>
+              </OSTable>
+              <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+            </ChSection>
+          )}
+
           <ChSection>
             <ChCarts>
               <CartsHeader>
@@ -276,6 +301,7 @@ const MultiCheckoutUI = (props: any) => {
                     cart={cart}
                     cartuuid={cart.uuid}
                     isMultiCheckout
+                    hideCouponInput={configs?.multi_business_checkout_coupon_input_style?.value === 'group'}
                     hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
                     hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
                     onNavigationRedirect={(route: string, params: any) => props.navigation.navigate(route, params)}

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

@@ -125,11 +125,11 @@ const OrderProgressUI = (props: any) => {
               <View style={styles.logoWrapper}>
                 <FastImage
                   style={{ width: 50, height: 50 }}
-                  source={{
+                  source={orderList?.orders.length === 1 ? {
                     uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
                     priority: FastImage.priority.normal,
-                  }}
-                  resizeMode={FastImage.resizeMode.cover}
+                  } : theme.images.logos.logotype}
+                  resizeMode={FastImage.resizeMode.contain}
                 />
               </View>
               <View style={{
@@ -198,7 +198,7 @@ export const OrderProgress = (props: any) => {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 1,
+      pageSize: 10,
       controlType: 'infinity'
     }
   }

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

@@ -75,7 +75,7 @@ const PaymentOptionsUI = (props: any) => {
 			case 'paypal':
 				return theme.images.general.paypal
 			case 'stripe':
-				return theme.images.general.stripe
+				return theme.images.general.creditCard
 			case 'stripe_direct':
 				return theme.images.general.stripecc
 			case 'stripe_connect':

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

@@ -361,7 +361,6 @@ export const priceList = [
 ]
 
 export const getLogisticTag = (status: any) => {
-  const [, t] = useLanguage()
   const keyList: any = {
     0: t('PENDING', 'Pending'),
     1: t('IN_PROGRESS', 'In progress'),