ordering-ui-react-native 0.16.73 → 0.16.74

package/package.json

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

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

@@ -371,7 +371,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             handleCustomClick={() => onBusinessClick(business)}
             handleUpdateBusinessList={handleUpdateBusinessList}
             orderType={orderState?.options?.type}
-            style={{ width: screenWidth - 80, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
+            style={{ width: screenWidth - 120, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
           />
         ))}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
@@ -433,7 +433,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                 style={{ borderRadius: 50, paddingLeft: 5, paddingRight: 5, height: 20 }}
               />
             </SingleBusinessContainer>
-            <ScrollView horizontal style={styles.productsContainer}>
+            <ScrollView horizontal style={styles.productsContainer} contentContainerStyle={{ flexGrow: 1 }}>
               {business?.categories?.map((category: any) => category?.products?.map((product: any, i: number) => (
                 <SingleProductCard
                   key={product?.id}
@@ -443,7 +443,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
-                  style={{ width: screenWidth - 80, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
+                  style={{ width: screenWidth - 120, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
                 />
               )))}
 

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

@@ -136,7 +136,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
-              enableIntersection
+              enableIntersection={!isFiltMode}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -164,7 +164,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
-                      enableIntersection
+                      enableIntersection={!isFiltMode}
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}
@@ -257,7 +257,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection
+                      enableIntersection={!isFiltMode}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
@@ -279,19 +279,24 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         <>
           {[...Array(categoryState?.pagination?.nextPageItems).keys()].map(
             (item, i) => (
-              <Placeholder key={i} style={{ padding: 5 }} Animation={Fade}>
-                <View style={{ flexDirection: 'row' }}>
+              <View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+                <Placeholder style={{ padding: 5 }} Animation={Fade}>
+                  <View style={{ flexDirection: 'row' }}>
+                    <Placeholder style={{ paddingVertical: 10, flex: 1 }}>
+                      <PlaceholderLine width={60} style={{ marginBottom: 15 }} />
+                      <PlaceholderLine width={20} />
+                    </Placeholder>
+                    <PlaceholderLine
+                      width={24}
+                      height={70}
+                      style={{ marginLeft: 10, marginBottom: 10 }}
+                    />
+                  </View>
                   <PlaceholderLine
-                    width={24}
-                    height={70}
-                    style={{ marginRight: 10, marginBottom: 10 }}
+                    height={52}
                   />
-                  <Placeholder style={{ paddingVertical: 10 }}>
-                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-                    <PlaceholderLine width={20} />
-                  </Placeholder>
-                </View>
-              </Placeholder>
+                </Placeholder>
+              </View>
             ),
           )}
         </>

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

@@ -127,7 +127,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
-	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
+	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 100
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -246,7 +246,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<TopHeader isIos={Platform.OS === 'ios'}>
 						{!isOpenSearchBar && (
 							<>
-								<View style={{ ...styles.headerItem, flex: 1 }}>
+								<View style={{ ...styles.headerItem, width: 175 }}>
 									<OButton
 										imgLeftSrc={theme.images.general.arrow_left}
 										imgRightSrc={null}
@@ -314,6 +314,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						style={{
 							height: Dimensions.get('window').height - filtProductsHeight
 						}}
+						contentContainerStyle={{ flexGrow: 1 }}
 					>
 						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
 							<BusinessProductsList
@@ -352,7 +353,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<BackgroundGray />
 				)}
 				<IOScrollView
-					stickyHeaderIndices={[2]}
+					stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
 					style={{
 						...styles.mainContainer,
 						marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
@@ -394,26 +395,21 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							marginTop: isChewLayout && showLogo ? 10 : 0
 						}}
 					/>
-					{!loading && business?.id && (
-						<>
-							{!(business?.categories?.length === 0) && (
-								<BusinessProductsCategories
-									categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
-									categorySelected={categorySelected}
-									onClickCategory={handleChangeCategory}
-									featured={featuredProducts}
-									openBusinessInformation={openBusinessInformation}
-									scrollViewRef={scrollViewRef}
-									productListLayout={productListLayout}
-									categoriesLayout={categoriesLayout}
-									selectedCategoryId={selectedCategoryId}
-									lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
-									setSelectedCategoryId={setSelectedCategoryId}
-									setCategoryClicked={setCategoryClicked}
-
-								/>
-							)}
-						</>
+					{!loading && business?.id && !(business?.categories?.length === 0) && (
+						<BusinessProductsCategories
+							categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
+							categorySelected={categorySelected}
+							onClickCategory={handleChangeCategory}
+							featured={featuredProducts}
+							openBusinessInformation={openBusinessInformation}
+							scrollViewRef={scrollViewRef}
+							productListLayout={productListLayout}
+							categoriesLayout={categoriesLayout}
+							selectedCategoryId={selectedCategoryId}
+							lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+							setSelectedCategoryId={setSelectedCategoryId}
+							setCategoryClicked={setCategoryClicked}
+						/>
 					)}
 					{!loading && business?.id && (
 						<>

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

@@ -464,19 +464,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				</OrderTypesContainer>
 			)}
-			{!businessId && (
-				<View style={{ marginTop: 20 }}>
-					<OButton
-						onClick={() => navigation.navigate('BusinessSearch', { businessTypes })}
-						text={t('SEARCH', 'Search')}
-						style={styles?.buttonCityStyle}
-						textStyle={{ color: theme.colors.textSecondary, fontSize: 16 }}
-					/>
-				</View>
-			)}
 
 			{!hideCities && (
-				<View style={{ marginTop: 10 }}>
+				<View style={{ marginTop: 20 }}>
 					<TouchableOpacity
 						style={styles.buttonCityStyle}
 						onPress={() => setIsOpenCities(true)}

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

@@ -119,14 +119,31 @@ export const MyOrders = (props: any) => {
           </View>
         </>
       )}
-      {notOrderOptions.includes(selectedOption) && (
+      {selectedOption === 'business' && (
         <OrdersOption
           {...props}
+          isBusiness
+          titleContent={t('PREVIOUSLY_ORDERED', 'Previously ordered')}
+          hideOrders
+          horizontal
+          activeOrders
+          pastOrders
+          preOrders
+          businessesSearchList={businessesSearchList}
+          setIsEmptyBusinesses={setIsEmptyBusinesses}
+          businessOrderIds={businessOrderIds}
+          setBusinessOrderIds={setBusinessOrderIds}
+          ordersLength={ordersLength}
+          setOrdersLength={setOrdersLength}
+        />
+      )}
+      {selectedOption === 'products' && (
+        <OrdersOption
+          {...props}
+          isProducts
           titleContent={t('PREVIOUSLY_ORDERED', 'Previously ordered')}
           hideOrders
           horizontal
-          isBusiness={selectedOption === 'business'}
-          isProducts={selectedOption === 'products'}
           activeOrders
           pastOrders
           preOrders

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/index.tsx

@@ -123,7 +123,7 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
         <>
           {!businessLoading && (
             <BusinessControllerList
-              style={{ width: windowWidth - 80, marginRight: 20 }}
+              style={{ width: windowWidth - 120, marginRight: 20 }}
             />
           )}
         </>

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

@@ -189,15 +189,18 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			)}
 			{(ordersLength?.activeOrdersLength > 0 || ordersLength?.previousOrdersLength > 0) && (
 				<>
-					<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
-						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-							{titleContent || (activeOrders
-								? t('ACTIVE', 'Active')
-								: preOrders
-									? t('PREORDERS', 'Preorders')
-									: t('PAST', 'Past'))}
-						</OText>
-					</OptionTitle>
+					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
+						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
+							<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+								{titleContent || (activeOrders
+									? t('ACTIVE', 'Active')
+									: preOrders
+										? t('PREORDERS', 'Preorders')
+										: t('PAST', 'Past'))}
+							</OText>
+						</OptionTitle>
+					)}
+
 					{!(ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) &&
 						!loading &&
 						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
@@ -210,7 +213,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						)}
 				</>
 			)}
-			{isBusiness && !!businessesSearchList && businessLoading && (
+			{isBusiness && !!businessesSearchList && businessLoading && businessOrderIds?.length > 0 && (
 				<ScrollView horizontal>
 					<BusinessControllerSkeletons />
 				</ScrollView>

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

@@ -98,6 +98,10 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
 
   const onChangeSpot = () => {
     if (orderState.loading) return
+    if (!Number.isInteger(Number(spotNumber))) {
+      showToast(ToastType.Error, t('VALIDATION_ERROR_INTEGER', 'The _attribute_ must be an integer.').replace('_attribute_', placeholderText))
+      return
+    }
     const isVehicle = Object.values(vehicle).every(e => e)
     const bodyToSend: any = {}
     spotNumber && (bodyToSend.spot_number = spotNumber)
@@ -126,7 +130,7 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
 
   useEffect(() => {
     if (spotState?.error?.length > 0) {
-      const errorText = manageErrorsToShow(spotState?.errors)
+      const errorText = manageErrorsToShow(spotState?.error)
 			showToast(ToastType.Error, errorText)
     }
   }, [spotState?.error])
@@ -211,7 +215,7 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
           <OInput
             value={spotNumber?.toString() ?? ''}
             placeholder={placeholderText}
-            keyboardType='number-pad'
+            type='number-pad'
             onChange={(value: string) => setSpotNumber(value)}
             style={{
               borderColor: theme.colors.border,

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

@@ -76,8 +76,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		},
 		quantityContainer: {
 			position: 'absolute',
-			left: '100%',
-			bottom: '100%',
+			right: 0,
+			top: 0,
 			width: 25,
 			height: 25,
 			textAlign: 'center',
@@ -125,12 +125,12 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	);
 
 	const fadeIn = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 500,
+		Animated.timing(fadeAnim, {
+			toValue: 1,
+			duration: 500,
 			useNativeDriver: true
-    }).start();
-  };
+		}).start();
+	};
 
 	const handleChangeFavorite = () => {
 		if (auth) {
@@ -164,7 +164,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					<View style={{ flexDirection: 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer style={[styles.quantityContainer, {
-								transform: [{ translateX: 10 }, { translateY: -10 }],
+								transform: [{ translateX: 25 }, { translateY: -55 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -281,19 +281,24 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					)}
 				</CardContainer>
 			) : (
-				<Placeholder style={{ padding: 5 }} Animation={Fade}>
-					<View style={{ flexDirection: 'row' }}>
+				<View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+					<Placeholder style={{ padding: 5 }} Animation={Fade}>
+						<View style={{ flexDirection: 'row' }}>
+							<Placeholder style={{ paddingVertical: 10, flex: 1 }}>
+								<PlaceholderLine width={60} style={{ marginBottom: 15 }} />
+								<PlaceholderLine width={20} />
+							</Placeholder>
+							<PlaceholderLine
+								width={24}
+								height={70}
+								style={{ marginLeft: 10, marginBottom: 10 }}
+							/>
+						</View>
 						<PlaceholderLine
-							width={24}
-							height={70}
-							style={{ marginRight: 10, marginBottom: 10 }}
+							height={52}
 						/>
-						<Placeholder style={{ paddingVertical: 10 }}>
-							<PlaceholderLine width={60} style={{ marginBottom: 25 }} />
-							<PlaceholderLine width={20} />
-						</Placeholder>
-					</View>
-				</Placeholder>
+					</Placeholder>
+				</View>
 			)}
 		</InView>
 	);