ordering-ui-react-native 0.17.4 → 0.17.5-release

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

@@ -1,12 +1,5 @@
 import styled, { css } from 'styled-components/native';
 
-export const Card = styled.TouchableOpacity`
-  margin-vertical: 20px;
-  border-radius: 7.6px;
-  width: 100%;
-  position: relative;
-`
-
 export const BusinessHero = styled.View`
   position: relative;
   border-top-right-radius: 7.6px;
@@ -16,7 +9,7 @@ export const BusinessHero = styled.View`
 
 export const BusinessContent = styled.View`
     padding-horizontal: 18px;
-    padding-bottom: 18px;
+    padding-bottom: 10px;
     border-bottom-left-radius: 7.6px;
     border-bottom-right-radius: 7.6px;
     border-width: 1px;
@@ -46,7 +39,7 @@ export const BusinessState = styled.View`
 `
 
 export const BusinessLogo = styled.View`
-   
+
 `
 
 export const ReviewAndFavorite = styled.View`
@@ -79,4 +72,24 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
+`
+
+export const OfferBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 20px;
+  right: 10px;
+  border-radius: 50px;
+  color: ${(props: any) => props.theme.colors.textThird};
+  background: ${(props: any) => props.theme.colors.inputBorderColor};
+  padding: 3px 8px;
+  max-width: 180px;
 `

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
@@ -6,33 +7,29 @@ import {
 	useLanguage,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import FastImage from 'react-native-fast-image'
+
+import { OText } from '../shared';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
 	BusinessContent,
-	BusinessCategory,
 	BusinessInfo,
 	Metadata,
-	BusinessState,
 	BusinessLogo,
-	Reviews,
 	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 	const { business, handleClick, isBusinessOpen } = props;
-	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
-		useUtils();
+
+	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
-
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 25,
@@ -79,35 +76,28 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			justifyContent: 'flex-start',
 			width: '100%',
 		},
+		productStyle: {
+			height: 40,
+			width: 40
+		}
 	});
 
-	const types = ['food', 'laundry', 'alcohol', 'groceries'];
-
 	const { width } = useWindowDimensions();
 
-	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
-		const _types: any = [];
-		types.forEach((type) => {
-			if (business[type]) {
-				_types.push(t(type.toUpperCase(), type));
-			}
-		});
-		return _types.join(', ');
-	};
-
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
 			{business?.ribbon?.enabled && (
 				<RibbonBox
 					bgColor={business?.ribbon?.color}
+					colorText={lightenDarkenColor(business?.ribbon?.color)}
+					borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 				>
 					<OText
 						size={10}
 						weight={'400'}
-						color={theme.colors.white}
+						color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 						numberOfLines={2}
 						ellipsizeMode='tail'
 						lineHeight={13}
@@ -118,10 +108,13 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			)}
 			<BusinessHero>
 				<BusinessLogo>
-					<OIcon
-						url={optimizeImage(business?.logo, 'h_100,c_limit')}
-						width={40}
-						height={40}
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(business?.logo, 'h_100,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
 					/>
 				</BusinessLogo>
 				<BusinessContent style={{ width: width * 0.6 }}>
@@ -129,23 +122,7 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 						<OText size={12} ellipsizeMode={'tail'} numberOfLines={2}>
 							{business?.name}
 						</OText>
-						{/* {business?.reviews?.total > 0 && (
-              <Reviews>
-                <IconAntDesign
-                  name="star"
-                  color={theme.colors.primary}
-                  size={16}
-                  style={styles.starIcon}
-                />
-                <OText>
-                  {parseNumber(business?.reviews?.total, { separator: '.' })}
-                </OText>
-              </Reviews>
-            )} */}
 					</BusinessInfo>
-					{/* <BusinessCategory>
-            <OText>{getBusinessType()}</OText>
-          </BusinessCategory> */}
 					<Metadata>
 						{!isBusinessOpen ? (
 							<View style={styles.closed}>
@@ -155,7 +132,6 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 							</View>
 						) : (
 							<View style={styles.bullet}>
-								{/* <MaterialComIcon name="alarm" size={16} /> */}
 								<OText size={10} color={theme.colors.textSecondary}>
 									{t('DELIVERY_FEE', 'Delivery Fee')}
 								</OText>
@@ -184,15 +160,6 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 						)}
 					</Metadata>
 				</BusinessContent>
-				{/* <BusinessState>
-          {!business?.open && (
-            <View style={styles.businessStateView}>
-              <OText color={theme.colors.white} size={20} style={styles.businessStateText}>
-                {t('PREORDER', 'PREORDER')}
-              </OText>
-            </View>
-          )}
-        </BusinessState> */}
 			</BusinessHero>
 		</Card>
 	);

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

@@ -70,4 +70,12 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `

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

@@ -16,26 +16,19 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
 import { formatUrlVideo } from '../../utils'
+import { ScheduleAccordion } from '../ScheduleAccordion';
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
-	const daysOfWeek = [
-		t('SUNDAY_ABBREVIATION', 'Sun'),
-		t('MONDAY_ABBREVIATION', 'Mon'),
-		t('TUESDAY_ABBREVIATION', 'Tues'),
-		t('WEDNESDAY_ABBREVIATION', 'Wed'),
-		t('THURSDAY_ABBREVIATION', 'Thur'),
-		t('FRIDAY_ABBREVIATION', 'Fri'),
-		t('SATURDAY_ABBREVIATION', 'Sat'),
-	];
+
 	const scheduleFormatted = ({
 		hour,
 		minute,
@@ -112,25 +105,11 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 						<WrapScheduleBlock>
 							{businessSchedule.map((schedule: any, i: number) => (
 								<ScheduleBlock key={i}>
-									<OText
-										lineHeight={21}
-										mBottom={16}
-										size={14}
-										weight={Platform.OS === 'android' ? 'bold' : '600'}
-										style={{ flexBasis: '20%' }}>
-										{daysOfWeek[i].toUpperCase()}
-									</OText>
-									{schedule.enabled ? (
-										<OText mBottom={16}>
-											{scheduleFormatted(schedule.lapses[0].open) +
-												' - ' +
-												scheduleFormatted(schedule.lapses[0].close)}
-										</OText>
-									) : (
-										<OText color={theme.colors.red} mBottom={16}>
-											{t('CLOSED', 'Closed')}
-										</OText>
-									)}
+									<ScheduleAccordion
+										weekIndex={i}
+										scheduleFormatted={scheduleFormatted}
+										schedule={schedule}
+									/>
 								</ScheduleBlock>
 							))}
 						</WrapScheduleBlock>
@@ -152,10 +131,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 											style={{ width: 210, height: 127, borderRadius: 7.6 }}
 											javaScriptEnabled={true}
 											domStorageEnabled={true}
-											source={{ 
+											source={{
 												html: `
 													<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
-												`, 
+												`,
 											}}
 											mediaPlaybackRequiresUserAction={true}
 										/>

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils, useConfig } from 'ordering-components/native';
+import { useOrder, useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	BIContainer,
@@ -22,7 +22,8 @@ export const BusinessItemAccordion = (props: any) => {
 		handleClearProducts,
 		handleClickCheckout,
 		checkoutButtonDisabled,
-		isMultiCheckout
+		isMultiCheckout,
+		isFromUpselling
 	} = props
 
 	const [orderState] = useOrder();
@@ -30,6 +31,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const [{ parsePrice }] = useUtils();
 	const [{ configs }] = useConfig()
 	const theme = useTheme();
+	const [events] = useEvent()
 
 	const isCartPending = cart?.status === 2
 	const isClosed = !cart?.valid_schedule
@@ -37,6 +39,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const [isActive, setActiveState] = useState(!!singleBusiness)
+	const [viewedCart, setViewedCart] = useState<any>(null)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
@@ -46,6 +49,21 @@ 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)
+
+	useEffect(() => {
+		if (isActive && !isFromUpselling) {
+			if (cart?.uuid !== viewedCart?.uuid) {
+				setViewedCart(cart)
+				events.emit('cart_viewed', cart)
+			}
+		}
+	}, [isActive, viewedCart])
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
@@ -56,23 +74,6 @@ export const BusinessItemAccordion = (props: any) => {
 				<BIInfo>
 					<BIContentInfo>
 						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
-						{/* {orderState?.options?.type === 1 ? (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
-              </View>
-            ) : (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
-              </View>
-            )} */}
 						<View style={{ flexDirection: 'row' }}>
 							{props.onNavigationRedirect && !isClosed && (
 								<>
@@ -81,7 +82,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</TouchableOpacity>
 								</>
 							)}
-							{!isCartPending && !isClosed && (
+							{!isCartPending && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<OAlert
@@ -102,7 +103,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 +150,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

@@ -52,7 +52,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     brandList,
     onNavigationRedirect,
     handleUpdateBusinessList,
-    handleUpdateProducts
+    handleUpdateProducts,
+    brandId
   } = props
 
   const screenHeight = Dimensions.get('window').height;
@@ -75,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: '$$' },
@@ -96,7 +99,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       width: '100%'
     },
     searchInput: {
-      fontSize: 10,
+      fontSize: 12,
     },
     productsContainer: {
       marginTop: 20
@@ -188,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) ||
@@ -196,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
     })
   }
 
@@ -226,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>
@@ -253,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>
@@ -341,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 }}