ordering-ui-react-native 0.16.91 → 0.16.92-release

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

@@ -46,6 +46,12 @@ export const BusinessItemAccordion = (props: any) => {
 		}
 	}, [orderState?.carts, isClosed])
 
+	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
+		if (item?.type === 1)
+			return acc = acc + item?.summary?.tax
+		return acc = acc
+	}, cart?.subtotal)
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
@@ -102,7 +108,7 @@ export const BusinessItemAccordion = (props: any) => {
 										<OText
 											size={12}
 											lineHeight={18}
-											color={theme.colors.textSecondary}
+											color={theme.colors.primary}
 											style={{ textDecorationLine: 'underline' }}
 										>
 											{t('CHANGE_STORE', 'Change store')}
@@ -149,9 +155,9 @@ export const BusinessItemAccordion = (props: any) => {
 						<OButton
 							onClick={handleClickCheckout}
 							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-							style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 							text={t('CHECKOUT', 'Checkout')}
-							bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+							bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
 							borderColor={theme.colors.primary}
 							isDisabled={checkoutButtonDisabled}
 						/>

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

@@ -25,7 +25,8 @@ import {
   BrandItem,
   PriceFilterWrapper,
   OptionTitle,
-  BContainer
+  BContainer,
+  WrapperButtons
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
@@ -51,7 +52,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     brandList,
     onNavigationRedirect,
     handleUpdateBusinessList,
-    handleUpdateProducts
+    handleUpdateProducts,
+    brandId
   } = props
 
   const screenHeight = Dimensions.get('window').height;
@@ -74,6 +76,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
   ]
 
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+
   const priceList = [
     { level: '1', content: '$' },
     { level: '2', content: '$$' },
@@ -95,7 +99,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       width: '100%'
     },
     searchInput: {
-      fontSize: 10,
+      fontSize: 12,
     },
     productsContainer: {
       marginTop: 20
@@ -134,7 +138,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       borderWidth: 0
     },
     applyButton: {
-      paddingHorizontal: 40,
+      paddingHorizontal: 10,
       width: '100%',
       marginTop: 20
     }
@@ -145,10 +149,14 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   }
 
   const handleCloseFilters = () => {
-    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [], price_level: null })
+    clearFilters()
     setOpenFilters(false)
   }
 
+  const clearFilters = () => {
+    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [], price_level: null })
+  }
+
   const handleChangeActiveBusinessType = (type: any) => {
     if (type?.id === null) {
       handleChangeFilters('business_types', [])
@@ -183,7 +191,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
 
   const isInteger = (val: any) => Number.isInteger(Number(val)) && !!val
 
-  const onProductClick = (business: any, categoryId: any, productId: any) => {
+
+  const onProductClick = (business: any, categoryId: any, productId: any, product: any) => {
     if (!isInteger(business?.id) ||
       !isInteger(categoryId) ||
       !isInteger(productId) ||
@@ -191,17 +200,20 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       showToast(ToastType.error, t('NOT_AVAILABLE', 'Not Available'))
       return
     }
-
+    const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
+    const productAddedToCartLength = currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === productId ? Cproduct?.quantity : 0) }, 0) || 0
     navigation.navigate('ProductDetails', {
       isRedirect: 'business',
       businessId: business?.id,
       categoryId: categoryId,
       productId: productId,
+      product: product,
       business: {
         store: business.slug,
         header: business.header,
         logo: business.logo,
-      }
+      },
+      productAddedToCartLength
     })
   }
 
@@ -221,17 +233,23 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   }, [isFocused])
 
   return (
-    <BContainer>
+    <BContainer
+      style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+    >
       <SearchWrapper>
         <SearchBar
           lazyLoad
-          inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
+          {...(isChewLayout && { height: 55 })}
+          inputStyle={{ ...styles.searchInput }}
+          placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
           onSearch={(val: string) => handleChangeTermValue(val)}
           value={termValue}
           iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
         />
       </SearchWrapper>
+      <OText size={12} lineHeight={20} color={theme.colors.textThird} mLeft={5}>
+        {t('TYPE_AT_LEAST_3_CHARACTERS', 'Type at least 3 characters')}
+      </OText>
       {
         noResults && (
           <View>
@@ -248,26 +266,41 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           onNavigationRedirect={onNavigationRedirect}
           BusinessControllerSkeletons={BusinessControllerSkeletons}
           businessPaginationProps={paginationProps}
+          franchiseId={brandId}
+          hideBackBtn
+          titleStyle={{
+            paddingHorizontal: 0,
+            marginTop: 0,
+            marginLeft: 0
+          }}
         />
       )}
 
-      <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
-        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
-          {t('BUSINESSES', 'Businesses')}
-        </OText>
-      </OptionTitle>
-      <ScrollView horizontal>
+      {businessesSearchList.businesses?.length > 0 && (
+        <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
+          <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
+            {t('BUSINESSES', 'Businesses')}
+          </OText>
+        </OptionTitle>
+      )}
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
-          <BusinessController
+          <View
             key={business.id}
-            business={business}
-            isBusinessOpen={business.open}
-            enableIntersection={false}
-            handleCustomClick={() => onBusinessClick(business)}
-            handleUpdateBusinessList={handleUpdateBusinessList}
-            orderType={orderState?.options?.type}
-            style={{ width: screenWidth - 120, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
-          />
+            style={{
+              width: screenWidth - 120,
+              marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0
+            }}
+          >
+            <BusinessController
+              business={business}
+              isBusinessOpen={business.open}
+              enableIntersection={false}
+              handleCustomClick={() => onBusinessClick(business)}
+              handleUpdateBusinessList={handleUpdateBusinessList}
+              orderType={orderState?.options?.type}
+            />
+          </View>
         ))}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
           <LoadMoreBusinessContainer>
@@ -336,7 +369,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   product={product}
                   enableIntersection={false}
                   businessId={business?.id}
-                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
+                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id, product)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
                   style={{ width: screenWidth - 80, maxWidth: screenWidth - 80, marginRight: 20 }}
@@ -482,22 +515,28 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </PriceFilterWrapper>
           {orderState?.options?.type === 1 && (
             <MaxSectionItem
+              filters={filters}
               title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
               options={maxDeliveryFeeOptions}
               filter='max_delivery_price'
+              handleChangeFilters={handleChangeFilters}
             />
           )}
           {[1, 2].includes(orderState?.options?.type) && (
             <MaxSectionItem
+              filters={filters}
               title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
               options={maxTimeOptions}
               filter='max_eta'
+              handleChangeFilters={handleChangeFilters}
             />
           )}
           <MaxSectionItem
+            filters={filters}
             title={t('MAX_DISTANCE', 'Max distance')}
             options={maxDistanceOptions}
             filter='max_distance'
+            handleChangeFilters={handleChangeFilters}
           />
           {businessTypes?.length > 0 && (
             <TagsContainer>
@@ -517,12 +556,26 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             </TagsContainer>
           )}
         </ScrollView>
-        <OButton
-          text={t('APPLY', 'Apply')}
-          parentStyle={styles.applyButton}
-          textStyle={{ color: '#fff' }}
-          onClick={() => handleApplyFilters()}
-        />
+        <WrapperButtons>
+          <View style={{ width: '50%' }}>
+            <OButton
+              text={t('APPLY', 'Apply')}
+              parentStyle={styles.applyButton}
+              textStyle={{ color: '#fff' }}
+              onClick={() => handleApplyFilters()}
+            />
+          </View>
+          <View style={{ width: '50%' }}>
+            <OButton
+              text={t('CLEAR_FILTERS', 'Clear')}
+              bgColor={theme.colors.white}
+              borderColor={theme.colors.primary}
+              parentStyle={styles.applyButton}
+              textStyle={{ color: theme.colors.primary }}
+              onClick={() => clearFilters()}
+            />
+          </View>
+        </WrapperButtons>
       </OModal>
     </BContainer>
   )

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

@@ -86,3 +86,9 @@ export const OptionTitle = styled.View`
 		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
 	`}
 `
+
+export const WrapperButtons = styled.View`
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+`

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

@@ -166,14 +166,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   style={bpStyles.catWrap}
                   onLayout={(event: any) => handleOnLayout(event, category.id)}
                 >
-                  <View style={bpStyles.catIcon}>
-                    <OIcon
-                      url={optimizeImage(category.image, 'h_250,c_limit')}
-                      width={41}
-                      height={41}
-                      style={{ borderRadius: 7.6 }}
-                    />
-                  </View>
+                  {!!category.image && (
+                    <View style={bpStyles.catIcon}>
+                      <OIcon
+                        url={optimizeImage(category.image, 'h_250,c_limit')}
+                        width={41}
+                        height={41}
+                        style={{ borderRadius: 7.6 }}
+                      />
+                    </View>
+                  )}
                   <OText size={16} weight="600">
                     {category.name}
                   </OText>

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

@@ -18,15 +18,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 2px 8px;
   max-width: 180px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}