ordering-ui-react-native 0.21.3 → 0.21.5

package/package.json

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

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

@@ -464,7 +464,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     return (
       <>
         <OrderContentComponent
-          isDelivery
           order={order}
           logisticOrderStatus={logisticOrderStatus}
           isOrderGroup={isOrderGroup}

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

@@ -37,15 +37,14 @@ interface OrderContent {
   order: any,
   logisticOrderStatus?: Array<number>,
   isOrderGroup?: boolean,
-  lastOrder?: boolean,
-  isDelivery?: boolean
+  lastOrder?: boolean
 }
 
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
   const [{ user }] = useSession()
-  const { order, logisticOrderStatus, isOrderGroup, lastOrder, isDelivery } = props;
+  const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
   const [orientationState] = useDeviceOrientation();
@@ -55,8 +54,14 @@ export const OrderContentComponent = (props: OrderContent) => {
 
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
-  const [isReadMore, setIsReadMore] = useState(false)
-  const [lengthMore, setLengthMore] = useState(false)
+  const [isReadMore, setIsReadMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
+  const [lengthMore, setLengthMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
@@ -109,8 +114,15 @@ export const OrderContentComponent = (props: OrderContent) => {
     return /^\d+$/.test(str);
   }
 
-  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
+  const onTextLayout = useCallback((e: any, item: string) => {
+    if (item === 'customerAddress') {
+      const customerAddressMore = (e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2
+      setLengthMore(prev => ({ ...prev, customerAddress: customerAddressMore }))
+    }
+    if (item === 'businessAddressNotes') {
+      const businessAddressNotesMore = (e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3
+      setLengthMore(prev => ({ ...prev, businessAddressNotes: businessAddressNotesMore }))
+    }
   }, []);
 
   return (
@@ -210,18 +222,28 @@ export const OrderContentComponent = (props: OrderContent) => {
           </OText>
         )}
         {!!order?.business?.address_notes && (
-          <View style={styles.linkWithIcons}>
-            <OLink
-              PressStyle={styles.linkWithIcons}
-              url={Platform.select({
-                ios: `maps:0,0?q=${order?.business?.address_notes}`,
-                android: `geo:0,0?q=${order?.business?.address_notes}`,
-              })}
-              shorcut={order?.business?.address_notes}
-              TextStyle={styles.textLink}
-              numberOfLines={isDelivery ? 0 : 1}
-            />
-          </View>
+          <>
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.business?.address_notes}`,
+                  android: `geo:0,0?q=${order?.business?.address_notes}`,
+                })}
+                shorcut={order?.business?.address_notes}
+                TextStyle={styles.textLink}
+                onTextLayout={e => onTextLayout(e, 'businessAddressNotes')}
+                numberOfLines={isReadMore.businessAddressNotes ? 20 : 3}
+              />
+            </View>
+            {lengthMore.businessAddressNotes && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, businessAddressNotes: !isReadMore.businessAddressNotes })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.businessAddressNotes ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+              </TouchableOpacity>
+            )}
+          </>
         )}
       </OrderBusiness>
 
@@ -329,15 +351,17 @@ export const OrderContentComponent = (props: OrderContent) => {
                   ios: `maps:0,0?q=${order?.customer?.address}`,
                   android: `geo:0,0?q=${order?.customer?.address}`,
                 })}
-                onTextLayout={onTextLayout}
-                numberOfLines={isReadMore ? 20 : 2}
+                onTextLayout={e => onTextLayout(e, 'customerAddress')}
+                numberOfLines={isReadMore.customerAddress ? 20 : 2}
                 shorcut={order?.customer?.address}
                 TextStyle={styles.textLink}
               />
             </View>
-            {lengthMore && (
-              <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)}>
-                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+            {lengthMore.customerAddress && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, customerAddress: !isReadMore.customerAddress })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.customerAddress ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
               </TouchableOpacity>
             )}
           </>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import {
 	BusinessInformation as BusinessInformationController,
 	useLanguage, useUtils, useConfig,
@@ -16,13 +16,16 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } 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';
 import moment from 'moment';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
@@ -30,6 +33,11 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
 	const [{ configs }] = useConfig()
+	const [orientationState] = useDeviceOrientation();
+
+	const [isReadMore, setIsReadMore] = useState(false)
+	const [lengthMore, setLengthMore] = useState(false)
+	const WIDTH_SCREEN = orientationState?.dimensions?.width
 
 	const hideLocation = theme?.business_view?.components?.information?.components?.location?.hidden
 	const hideSchedule = theme?.business_view?.components?.information?.components?.schedule?.hidden
@@ -73,6 +81,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 		return iAry;
 	};
 
+	const onTextLayout = useCallback((e: any) => {
+		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
+	}, [])
+
 	return (
 		<BusinessInformationContainer>
 			<WrapMainContent contentContainerStyle={{}}>
@@ -93,16 +105,36 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										readOnly
 										location={businessLocation.location}
 										markerTitle={businessState?.business?.name}
+										businessZones={businessState?.business?.zones}
 									/>
 								</WrapBusinessMap>
 							)}
 						</>
 					)}
 					{!hideAddress && (
-						<OText size={12} mBottom={20}>
+						<OText size={12} mBottom={10}>
 							{businessState?.business?.address}
 						</OText>
 					)}
+					{businessState?.business?.address_notes && (
+						<>
+							<OText
+								size={12}
+								mBottom={10}
+								numberOfLines={isReadMore ? 20 : 3}
+								onTextLayout={onTextLayout}
+							>
+								{businessState?.business?.address_notes}
+							</OText>
+							{lengthMore && (
+								<TouchableOpacity
+									onPress={() => setIsReadMore(!isReadMore)}
+								>
+									<OText size={12} mBottom={20} color={theme.colors.primary}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+								</TouchableOpacity>
+							)}
+						</>
+					)}
 					<DivideView />
 					{!hideSchedule && (
 						<>

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

@@ -163,9 +163,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     if (product.ingredients?.length === 0 && product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
       const isProductAddedToCart = currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)
       const productQuantity = isProductAddedToCart?.quantity
+      const minimumPerOrder = product?.minimum_per_order || 1
       const addCurrentProduct = {
         ...product,
-        quantity: 1
+        quantity: minimumPerOrder
       }
       const updateCurrentProduct = {
         name: product?.name,

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

@@ -569,6 +569,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					{
 						!businessId && !props.franchiseId && (
 							<HighestRatedBusinesses
+								propsToFetch={props.propsToFetch}
 								onBusinessClick={handleBusinessClick}
 								navigation={navigation}
 								favoriteIds={favoriteIds}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import Picker from 'react-native-country-picker-modal';
@@ -56,6 +56,8 @@ import { OrderSummary } from '../OrderSummary';
 import { getTypesText } from '../../utils';
 import { CartStoresListing } from '../CartStoresListing';
 import { PaymentOptionsWebView } from '../../../../../src/components/PaymentOptionsWebView';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+const { useDeviceOrientation } = DeviceOrientationMethods
 
 const mapConfigs = {
 	mapZoom: 16,
@@ -141,6 +143,10 @@ const CheckoutUI = (props: any) => {
 	const [{ options, carts, loading }, { confirmCart }] = useOrder();
 	const [validationFields] = useValidationFields();
 	const [events] = useEvent()
+	const [orientationState] = useDeviceOrientation();
+	const [isReadMore, setIsReadMore] = useState(false)
+	const [lengthMore, setLengthMore] = useState(false)
+	const WIDTH_SCREEN = orientationState?.dimensions?.width
 
 	const [errorCash, setErrorCash] = useState(false);
 	const [userErrors, setUserErrors] = useState<any>([]);
@@ -367,6 +373,10 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [cart?.paymethod_data])
 
+	const onTextLayout = useCallback((e: any) => {
+		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
+	}, [])
+
 	return (
 		<>
 			<Container noPadding>
@@ -458,6 +468,25 @@ const CheckoutUI = (props: any) => {
 														{businessDetails?.business?.address}
 													</OText>
 												)}
+												{businessDetails?.business?.address_notes && (
+													<>
+														<OText
+															size={12}
+															lineHeight={18}
+															numberOfLines={isReadMore ? 20 : 3}
+															onTextLayout={onTextLayout}
+														>
+															{businessDetails?.business?.address_notes}
+														</OText>
+														{lengthMore && (
+															<TouchableOpacity
+																onPress={() => setIsReadMore(!isReadMore)}
+															>
+																<OText size={12} color={theme.colors.primary}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+															</TouchableOpacity>
+														)}
+													</>
+												)}
 											</View>
 										</>
 									)}

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Dimensions, StyleSheet, View, Platform } from 'react-native';
-import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, } from 'react-native-maps'
+import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, Polygon, Circle } from 'react-native-maps'
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig } from 'ordering-components/native'
 import { GoogleMapsParams } from '../../types';
@@ -19,7 +19,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     setSaveLocation,
     handleToggleMap,
     locations,
-    isIntGeoCoder
+    isIntGeoCoder,
+    businessZones
   } = props
 
   const [, t] = useLanguage()
@@ -44,6 +45,19 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
 
+  const units: any = {
+    mi: 1609,
+    km: 1000
+  }
+
+  const types: any = [1, 2, 5]
+
+  const fillStyles = {
+    fillColor: 'rgba(44, 123, 229, 0.3)',
+    strokeColor: 'rgba(44, 123, 229, 1)',
+    strokeWidth: 2
+  }
+
   const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
@@ -230,6 +244,36 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
           />
         )}
+        {businessZones?.length > 0 && businessZones.filter((item: any) => types.includes(item?.type)).map((businessZone: any, i: number) => (
+          <React.Fragment key={i}>
+            {businessZone?.type === 2 && Array.isArray(businessZone?.data) && (
+              <Polygon
+                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng}))}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 1 && businessZone?.data?.center && businessZone?.data?.radio) && (
+              <Circle
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                radius={businessZone?.data.radio * 1000}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 5 && businessZone?.data?.distance) && (
+              <Circle
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+          </React.Fragment>
+        ))}
       </MapView>
       <Alert
         open={alertState.open}

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

@@ -176,7 +176,7 @@ export const ProductOptionsUI = (props: any) => {
 			marginTop: 10
 		},
 		wrapperNavbar: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 30,
 			paddingTop: 0,
 		}
 	});
@@ -613,7 +613,7 @@ export const ProductOptionsUI = (props: any) => {
 										>
 											{(String(img).includes('http') || typeof img === 'number') ? (
 												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 16 / 9 }}
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 4 / 3 }}
 													source={typeof img !== 'number' ? {
 														uri: optimizeImage(img, 'h_1024,c_limit'),
 														priority: FastImage.priority.normal,
@@ -690,7 +690,7 @@ export const ProductOptionsUI = (props: any) => {
 						)}
 					</WrapHeader>
 					<ProductSummary
-						ph={isChewLayout ? 20 : 40}
+						ph={isChewLayout ? 20 : 30}
 						onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}
 					>
 						<ProductTitle>
@@ -792,7 +792,7 @@ export const ProductOptionsUI = (props: any) => {
 								marginBottom: 20,
 								borderBottomWidth: 1,
 								borderBottomColor: theme.colors.border,
-								marginHorizontal: isChewLayout ? 20 : 30,
+								marginHorizontal: 20,
 								backgroundColor: theme.colors.backgroundPage,
 							}}
 						>
@@ -866,7 +866,7 @@ export const ProductOptionsUI = (props: any) => {
 						</>
 					) : (
 						<ProductEditions
-							style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+							style={{ paddingHorizontal: isChewLayout ? 20 : 30 }}
 							onLayout={(event: any) => {
 								setEditionsLayoutY(event.nativeEvent.layout?.y)
 							}}

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

@@ -70,7 +70,7 @@ export const ProductActions = styled.View`
   position: absolute;
   bottom: 0px;
   padding-top: ${(props: any) => props.ios ? '20px' : '0'};
-  padding-horizontal: 40px;
+  padding-horizontal: 30px;
   padding-vertical: 20px;
   width: 100%;
   flex-direction: ${(props: any) => props.isColumn ? 'column' : 'row'};

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

@@ -86,8 +86,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 						{suboption?.name}
 					</OText>
 				</IconControl>
-				<QuantityControl>
-					{option?.allow_suboption_quantity && state?.selected && (
+				{option?.allow_suboption_quantity && state?.selected && (
+					<QuantityControl>
 						<>
 							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
 								<IconAntDesign
@@ -107,10 +107,10 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								/>
 							</Checkbox>
 						</>
-					)}
-				</QuantityControl>
-				<PositionControl>
-					{option?.with_half_option && state?.selected && (
+					</QuantityControl>
+				)}
+				{option?.with_half_option && state?.selected && (
+					<PositionControl>
 						<>
 							<Circle disabled={disabled} onPress={() => changePosition('left')}>
 								<OIcon
@@ -138,10 +138,10 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								/>
 							</Circle>
 						</>
-					)}
-				</PositionControl>
+					</PositionControl>
+				)}
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ paddingRight: 10 }}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{width: 70, maxWidth: 70}}>
 						+ {parsePrice(price)}
 					</OText>
 				)}

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

@@ -18,14 +18,12 @@ export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  margin-right: 5px;
-  width: 55px;
+  width: 62px;
 `
 
 export const PositionControl = styled.View`
   flex-direction: row;
   align-items: center;
-  margin-right: 5px;
 `
 
 export const Checkbox = styled.TouchableOpacity`

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

@@ -632,7 +632,8 @@ export interface GoogleMapsParams {
 	locations?: Array<any>,
 	setSaveLocation?: (val: boolean) => void,
 	handleToggleMap?: () => void,
-	isIntGeoCoder: boolean
+	isIntGeoCoder: boolean,
+	businessZones?: any
 }
 
 export interface HelpParams {