ordering-ui-react-native 0.16.52 → 0.16.53-release

package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const WelcomeTitle = styled.View`
   flex: 1;
@@ -16,6 +16,9 @@ export const Search = styled.View`
   align-items: center;
   margin-vertical: 10px;
   margin-horizontal: 20px;
+  ${(props: any) => props.isChewLayout && css`
+    margin-horizontal: 30px;
+  `}
 `
 
 export const AddressInput = styled.TouchableOpacity`
@@ -27,6 +30,9 @@ export const AddressInput = styled.TouchableOpacity`
   width: 100%;
   height: 44px;
   max-height: 44px;
+  ${(props: any) => props.isChewLayout && css`
+    border-radius: 8px;
+  `}
 `
 
 export const OrderControlContainer = styled.View`
@@ -54,28 +60,20 @@ export const WrapMomentOption = styled.TouchableOpacity`
 
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
-	height: 270px;
+  height: 270px;
 	padding: 20px 40px;
 	background-color: transparent;
 `;
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
 `;
 
 export const FeaturedWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	height: 220px;
 	paddingVertical: 30px;
 `;
 
-export const OrderProgressWrapper = styled.View`
-  margin-top: 37px;
-  margin-bottom: 20px;
-	padding-horizontal: 40px;
-`
-
 export const FarAwayMessage = styled.View`
   flex-direction: row;
   align-items: center;
@@ -89,5 +87,43 @@ export const AddressInputContainer = styled.View`
   flex-direction: row;
   width: 100%;
   align-items: center;
-  justify-content: center
+  justify-content: center;
+  ${(props: any) => props.isChewLayout && css`
+    flex-direction: row-reverse;
+  `}
+`
+
+export const PreorderInput = styled(AddressInput)`
+  justify-content: center;
+`
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: -1px;
+  width: 100%;
+`;
+
+export const OTab = styled.TouchableOpacity`
+  padding-bottom: 10px;
+  border-bottom-width: 1px;
+  margin-end: 14px;
+  padding-horizontal: 5px;
+`;
+
+export const OrderTypesContainer = styled.View`
+  flex-direction: row;
+  font-size: 14px;
+  width: 180px;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+  margin-top: 10px;
+  align-self: center;
+`
+
+export const BusinessLogosContainer = styled.ScrollView`
+  padding-bottom: 10px;
 `

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

@@ -1,125 +1,105 @@
-
 import React, { useState, useEffect } from 'react'
-import { useOrder, useSession, useLanguage } from 'ordering-components/native';
+import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';
 
 import { useTheme } from 'styled-components/native'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
 import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
 import { OBottomPopup } from '../shared';
-import { ReviewOrderModal, ReviewProductsModal, ReviewDriverModal } from '../Reviews'
+import { ReviewTrigger } from '../ReviewTrigger';
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting';
 
 export const BusinessesListing = (props: any) => {
+  const { logosLayout } = props
   const theme = useTheme()
+  const layout = theme?.business_listing_view?.components?.layout?.type || 'original'
   const [, t] = useLanguage();
-  const layout = theme?.layout?.businessListing?.layout?.type || 'original'
   const [{ auth }] = useSession()
   const [, { getLastOrderHasNoReview }] = useOrder();
+  const [{ configs }] = useConfig()
+  const isShowReviewsPopupEnabled = configs?.show_reviews_popups_enabled?.value === '1'
 
+  const [, setIsReviewed] = useState()
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
+  const defaultOrder = {
+    id: 0,
+    business_id: 0,
+    business_name: '',
+    logo: '',
+    driver: {},
+    products: [],
+    review: {},
+    user_review: {},
+    delivery_datetime: ''
+  }
   const [lastOrderReview, setLastOrderReview] = useState({
     isReviewOpen: false,
-    order: {
-      id: 0,
-      business_id: 0,
-      business_name: '',
-      delivery_datetime: '',
-      logo: '',
-      driver: null,
-      products: [],
-      review: null,
-      user_review: null
-    },
-    reviewStatus: { order: false, product: false, driver: false },
-    reviewed: { isOrderReviewed: false, isProductReviewed: false, isDriverReviewed: false }
+    order: defaultOrder,
+    defaultStar: 5,
   })
 
   const _getLastOrderHasNoReview = async () => {
     const lastOrderHasNoReview = await getLastOrderHasNoReview()
-    lastOrderHasNoReview && handleOrderReview(lastOrderHasNoReview)
+    lastOrderHasNoReview && OrderReviewRequired(lastOrderHasNoReview)
   }
 
-  const handleOrderReview = (order: any) => {
+  const OrderReviewRequired = (order: any) => {
     setLastOrderReview({
       isReviewOpen: true,
       order: {
         id: order?.id,
         business_id: order?.business_id,
         business_name: order?.business?.name,
-        delivery_datetime: order?.delivery_datetime,
         logo: order.business?.logo,
         driver: order?.driver,
         products: order?.products,
         review: order?.review,
-        user_review: order?.user_review
+        user_review: order?.user_review,
+        delivery_datetime: order?.delivery_datetime_utc
       },
-      reviewStatus: { order: true, product: false, driver: false },
-      reviewed: { isOrderReviewed: false, isProductReviewed: false, isDriverReviewed: false }
-    })
-  }
-
-  const handleCloseReivew = () => {
-    setLastOrderReview({
-      ...lastOrderReview,
-      isReviewOpen: false,
-      reviewStatus: { order: false, product: false, driver: false }
+      defaultStar: 5
     })
   }
 
-  const setIsReviewed = (reviewType: string) => {
-    const _reviewStatus = { ...lastOrderReview?.reviewed }
+  const handleOpenOrderReview = (star: number) => {
     setLastOrderReview({
-      ...lastOrderReview,
-      reviewed: { ..._reviewStatus, [reviewType]: true }
+      ...lastOrderReview, isReviewOpen: false, order: defaultOrder
     })
-  }
-
-  const closeReviewOrder = () => {
-    if (!lastOrderReview?.reviewed?.isProductReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: true, driver: false } })
-    else if (lastOrderReview?.order?.driver && !lastOrderReview?.order?.user_review && !lastOrderReview?.reviewed?.isDriverReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: false, driver: true } })
-    else handleCloseReivew()
-  }
-
-  const closeReviewProduct = () => {
-    if (lastOrderReview?.order?.driver && !lastOrderReview?.order?.user_review && !lastOrderReview?.reviewed?.isDriverReviewed) setLastOrderReview({ ...lastOrderReview, reviewStatus: { order: false, product: false, driver: true } })
-    else {
-      setIsReviewed('isDriverReviewed')
-      handleCloseReivew()
-    }
+    props?.navigation && props.navigation.navigate(
+      'ReviewOrder',
+      {
+        order: lastOrderReview.order,
+        defaultStar: star || 5,
+        setIsReviewed
+      }
+    )
   }
 
   useEffect(() => {
-    auth && _getLastOrderHasNoReview()
-  }, [auth])
+    if (!isShowReviewsPopupEnabled) return
+    (checkNotificationStatus?.checked && auth) && _getLastOrderHasNoReview()
+  }, [checkNotificationStatus, auth, isShowReviewsPopupEnabled])
 
   return (
     <>
-      {(layout === 'original') && <OriginalBusinessListing {...props} />}
-      {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
+      {((layout === 'original') || logosLayout) && <OriginalBusinessListing {...props} />}
+      {(layout === 'appointments') && !logosLayout && <AppointmentBusinessListing {...props} />}
 
       {lastOrderReview?.isReviewOpen && (
         <OBottomPopup
           open={lastOrderReview?.isReviewOpen}
-          onClose={handleCloseReivew}
-          title={lastOrderReview?.order
-            ? (lastOrderReview?.reviewStatus?.order
-              ? t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')
-              : (lastOrderReview?.reviewStatus?.product
-                ? t('REVIEW_PRODUCT', 'Review Product')
-                : t('REVIEW_DRIVER', 'Review Driver')))
-            : t('LOADING', 'Loading...')}
-          bottomContainerStyle={{ height: 'auto' }}
+          transparent={true}
+          onClose={() => setLastOrderReview({ ...lastOrderReview, isReviewOpen: false, order: defaultOrder })}
+          title={t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')}
+          bottomContainerStyle={{ height: 'auto', borderRadius: 10 }}
           titleStyle={{ textAlign: 'center' }}
           closeIcon={theme.images.general.close}
+          presentationStyle='overFullScreen'
         >
-          {
-            lastOrderReview?.reviewStatus?.order
-              ? <ReviewOrderModal order={lastOrderReview?.order} closeReviewOrder={closeReviewOrder} skipReview={handleCloseReivew} setIsReviewed={() => setIsReviewed('isOrderReviewed')} />
-              : (lastOrderReview?.reviewStatus?.product
-                ? <ReviewProductsModal order={lastOrderReview?.order} closeReviewProduct={closeReviewProduct} setIsProductReviewed={() => setIsReviewed('isProductReviewed')} />
-                : <ReviewDriverModal order={lastOrderReview?.order} closeReviewDriver={handleCloseReivew} setIsDriverReviewed={() => setIsReviewed('isDriverReviewed')} />)
-          }
-
+          {lastOrderReview?.order && <ReviewTrigger order={lastOrderReview?.order} handleOpenOrderReview={handleOpenOrderReview} />}
         </OBottomPopup>
       )}
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
     </>
   )
-}
+}

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CContainer, CheckoutAction, Divider } from './styles';
+import { CContainer, CheckoutAction, Divider, DriverTipsContainer } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -25,6 +25,7 @@ import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
 import { OAlert } from '../../../../../src/components/shared'
 import { PlaceSpot } from '../PlaceSpot'
+import { DriverTips } from '../DriverTips'
 
 const CartUI = (props: any) => {
   const {
@@ -60,11 +61,16 @@ const CartUI = (props: any) => {
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
-	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
+  const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
+  const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
 
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
-  const placeSpotTypes = [3, 4]
+  const placeSpotTypes = [4]
+
+  const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
 
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
@@ -98,11 +104,40 @@ const CartUI = (props: any) => {
   const handleUpsellingPage = () => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    if (isCheckoutMultiBusinessEnabled) {
-			props.onNavigationRedirect('CheckoutNavigator', {
-				screen: 'MultiCheckout'
-			})
-		} else {
+    const cartSelectedHasGroup = cart?.group?.uuid
+    const cartFilterValidation = (cart : any) => cart?.valid && cart?.status !== 2
+    const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter((_cart : any) => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
+    if (cartsGroupLength > 1 && isCheckoutMultiBusinessEnabled) {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'MultiCheckout',
+        cartUuid: cart?.group?.uuid
+      })
+      return
+    }
+    const cartGroupsCount : any = {}
+    Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach((_cart : any) => {
+      if (cartGroupsCount[_cart?.group?.uuid]) {
+        cartGroupsCount[_cart?.group?.uuid] += 1
+      } else {
+        cartGroupsCount[_cart?.group?.uuid] = 1
+      }
+    })
+    let groupForTheCart
+    const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
+    const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
+    const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
+    if (indexes?.length > 1) {
+      groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
+    } else {
+      groupForTheCart = indexes[0]
+    }
+    if (isCheckoutMultiBusinessEnabled && openCarts.length > 1 && groupForTheCart) {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'MultiCart',
+        cartUuid: cart.uuid, 
+        cartGroup: groupForTheCart === 'undefined' ? 'create' : groupForTheCart
+      })
+    } else {
       props.onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
         cartUuid: cart?.uuid,
@@ -148,6 +183,12 @@ const CartUI = (props: any) => {
     }
   }
 
+  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 (
     <CContainer>
       {openUpselling && (
@@ -172,7 +213,7 @@ const CartUI = (props: any) => {
         onNavigationRedirect={props.onNavigationRedirect}
         handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
-        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
@@ -355,12 +396,38 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
 
+            {isMultiCheckout &&
+              cart &&
+              cart?.valid &&
+              orderState?.options?.type === 1 &&
+              cart?.status !== 2 &&
+              validationFields?.fields?.checkout?.driver_tip?.enabled &&
+              driverTipsOptions && driverTipsOptions?.length > 0 &&
+              (
+                <DriverTipsContainer>
+                  <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
+                    {t('DRIVER_TIPS', 'Driver Tips')}
+                  </OText>
+                  <DriverTips
+                    uuid={cart?.uuid}
+                    businessId={cart?.business_id}
+                    driverTipsOptions={driverTipsOptions}
+                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+                      ? cart?.driver_tip
+                      : cart?.driver_tip_rate}
+                    useOrderContext
+                  />
+                </DriverTipsContainer>
+              )}
+
             <OSTotal>
               <OSTable style={{ marginTop: 15 }}>
-                <OText size={14} lineHeight={21} weight={'600'}>
+                <OText size={14} lineHeight={21} weight={'bold'} color={theme.colors.textNormal}>
                   {t('TOTAL', 'Total')}
                 </OText>
-                <OText size={14} lineHeight={21} weight={'600'}>
+                <OText size={14} lineHeight={21} weight={'bold'} color={theme.colors.textNormal}>
                   {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                 </OText>
               </OSTable>
@@ -423,15 +490,15 @@ const CartUI = (props: any) => {
             {cart?.valid_products ? (
               <CheckoutAction>
                 <OButton
-                  text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
+                  text={(subtotalWithTaxes >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
                     !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
                   ) : !cart?.valid_address ? (
                     `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
                   ) : (
                     `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
                   )}
-                  bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-                  isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+                  bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
                   borderColor={theme.colors.primary}
                   imgRightSrc={null}
                   textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
@@ -446,7 +513,7 @@ const CartUI = (props: any) => {
                 </OText>
               </View>
             )}
-          </>          
+          </>
         )}
       </BusinessItemAccordion>
 

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

@@ -33,3 +33,7 @@ export const Divider = styled.View`
   margin-top: 5px;
   margin-bottom: 10px;
 `
+
+export const DriverTipsContainer = styled.View`
+  padding: 5px 0;
+`

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

@@ -1,39 +1,41 @@
-import React, { useEffect, useState } from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList } from './styles';
 
 import { Cart } from '../Cart';
-import { OIcon, OText } from '../shared';
+import { OButton, OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
-import { View } from 'react-native';
 
 export const CartContent = (props: any) => {
 	const {
 		carts,
-		isOrderStateCarts
+		isOrderStateCarts,
+		onNavigationRedirect
 	} = props
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
 
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+
 	return (
-		<CCContainer>
+		<CCContainer
+			style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+		>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
-					{/* <OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
-						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText> */}
 					{carts.map((cart: any, i: number) => (
 						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (
 								<>
 									<Cart
-                    singleBusiness={props.singleBusiness}
-                    isFranchiseApp={props.isFranchiseApp}
+										singleBusiness={props.singleBusiness}
+										isFranchiseApp={props.isFranchiseApp}
 										cart={cart}
-                    cartuuid={cart.uuid}
+										cartuuid={cart.uuid}
 										onNavigationRedirect={props.onNavigationRedirect}
 										isCartsLoading={isCartsLoading}
 										setIsCartsLoading={setIsCartsLoading}
@@ -48,14 +50,22 @@ export const CartContent = (props: any) => {
 			)}
 			{(!carts || carts?.length === 0) && (
 				<CCNotCarts>
-					{/* <OIcon
-            url={props.icon}
-            width={200}
-            height={122}
-          /> */}
 					<OText size={24} style={{ textAlign: 'center' }}>
 						{t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
 					</OText>
+					<OButton
+						text={t('START_SHOPPING', 'Start shopping')}
+						bgColor={theme.colors.primary}
+						borderColor={theme.colors.primary}
+						textStyle={{
+							color: theme.colors.white,
+							fontSize: 14,
+							paddingRight: 0
+						}}
+						style={{ height: 35, marginVertical: 20, borderRadius: 8 }}
+						imgRightSrc={null}
+						onClick={() => onNavigationRedirect('BusinessList')}
+					/>
 				</CCNotCarts>
 			)}
 			<Spinner visible={isCartsLoading} />

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native';
 
 export const CCContainer = styled.View`
-  padding: 20px 40px;
+  padding-vertical: 20px;
 `
 
 export const CCNotCarts = styled.View`