ordering-ui-react-native 0.15.22 → 0.15.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.22",
+  "version": "0.15.25",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -71,10 +71,11 @@
     "react-native-background-timer": "^2.4.1",
     "react-native-bootsplash": "^3.2.3",
     "react-native-calendar-picker": "^7.1.2",
-    "react-native-calendar-strip": "^2.2.5",
+    "react-native-calendar-strip": "^2.2.1",
     "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
+    "react-native-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",
     "react-native-fast-image": "^8.3.3",

package/src/components/BusinessTypeFilter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { StyleSheet, View, ScrollView, TouchableOpacity, Dimensions } from 'react-native'
+import { StyleSheet, View, ScrollView, TouchableOpacity, Dimensions, Platform, PlatformIOSStatic } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components/native'
 
@@ -8,6 +8,7 @@ import { OIcon, OText, OModal } from '../shared'
 import { BusinessTypeFilterParams } from '../../types'
 import { useTheme } from 'styled-components/native'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import DeviceInfo from 'react-native-device-info';
 
 const windowWidth = Dimensions.get('window').width;
 
@@ -18,6 +19,10 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
     handleChangeBusinessType,
   } = props;
 
+  const platformIOS = Platform as PlatformIOSStatic
+  const isIpad = platformIOS.isPad
+  const isTablet = DeviceInfo.isTablet();
+
   const theme = useTheme();
   const [, t] = useLanguage();
   const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
@@ -122,7 +127,9 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
                 {t('BUSINESS_CATEGORIES', 'Business Categories')}
               </OText>
             </BusinessCategoriesTitle>
-            <BusinessCategories>
+            <BusinessCategories
+              mt={(isIpad || isTablet) ? 65 : null}
+            >
               {typesState?.types.slice(0, 3).map((type: any) => (
                 <RenderTypes
                   key={type.id}

package/src/components/BusinessTypeFilter/styles.tsx

@@ -18,7 +18,7 @@ export const BusinessCategories = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin: 10px 0px;
+  margin: ${(props: any) => props.mt ?? 10}px 0px 10px;
   width: 100%;
 `
 export const Category = styled.View`

package/themes/kiosk/src/components/BusinessController/index.tsx

@@ -6,6 +6,7 @@ import {
   BusinessController as BusinessSingleCard,
   useUtils,
 } from 'ordering-components/native';
+import FastImage from 'react-native-fast-image'
 
 import { Card, BusinessLogo } from './styles';
 
@@ -26,6 +27,16 @@ export const BusinessControllerUI = (props: any) => {
       alignItems: 'center',
       textAlign: 'center',
       marginTop: 10
+    },
+    logoStyle: {
+      width: 120,
+      height: 120,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
     }
   });
 
@@ -39,12 +50,22 @@ export const BusinessControllerUI = (props: any) => {
       activeOpacity={1}
       onPress={() => handleBusinessClick(business)}
     >
-      <BusinessLogo
-        source={business?.logo ? {
-          uri: optimizeImage(business?.logo, 'h_120,c_limit'),
-        } : theme.images.dummies.businessLogo}
-        resizeMode='contain'
-      />
+      {business?.logo ? (
+        <FastImage
+          style={styles.logoStyle}
+          source={{
+            uri: business?.logo,
+            priority: FastImage.priority.high,
+            cache:FastImage.cacheControl.web
+          }}
+          resizeMode={FastImage.resizeMode.contain}
+        />
+      ) : (
+        <BusinessLogo
+          source={theme.images.dummies.businessLogo}
+          resizeMode='contain'
+        />
+      )}
       <OText
         size={WIDTH_SCREEN * 0.012}
         numberOfLines={2}

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components/native';
 export const Card = styled.TouchableOpacity`
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   margin: 0 15px 20px;
   width: 120px;

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native'
+import { View, StyleSheet, ScrollView, TouchableOpacity, ImageBackground } from 'react-native'
 import { BusinessAndProductList, useLanguage } from 'ordering-components/native'
 import { BusinessProductsListingParams, Business } from '../../types'
 import { OCard, OText, OIcon } from '../shared'
@@ -7,6 +7,7 @@ import GridContainer from '../../layouts/GridContainer'
 import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import styled, { useTheme } from 'styled-components/native';
+import FastImage from 'react-native-fast-image'
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const {navigation, businessState, resetInactivityTimeout, clearInactivityTimeout, bottomSheetVisibility } = props;
@@ -59,17 +60,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   );
 
   const RenderCategories = ({ item, cardStyle, widthScreen }: any) => {
-    const Category = styled.ImageBackground`
-      position: relative;
-      height: 150px;
-      width: ${(props: any) => props.w * 0.45}px;
-      border-radius: 10px;
-      padding: 10px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    `
+    const stylesCat = StyleSheet.create({
+      categoryStyle: {
+        height: 150,
+        borderRadius: 10,
+        padding: 10,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }
+    })
+
     const WrapText = styled.View`
       height: 90px;
       display: flex;
@@ -78,6 +79,25 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       border-radius: 10px;
     `
 
+    const Category = (props: any) => {
+      const imageProps = {
+        style: props.style,
+        source: props.source,
+        resizeMode: props.resizeMode,
+      }
+      return (
+        props.uri ? (
+          <FastImage {...imageProps}>
+            {props.children}
+          </FastImage>
+        ) : (
+          <ImageBackground {...imageProps}>
+            {props.children}
+          </ImageBackground>
+        )
+      )
+    }
+
     return (
       <TouchableOpacity
         key={item.id}
@@ -92,11 +112,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         }}
       >
         <Category
-          style={cardStyle}
-          source={item.images ? {uri: item.images} : theme.images.categories.all}
-          resizeMode="cover"
-          w={widthScreen}
-          borderRadius={16}
+          style={{ ...cardStyle, ...stylesCat.categoryStyle, width: widthScreen * 0.45 }}
+          uri={!!item.images}
+          source={!!item.images
+            ? {
+              uri: item.images,
+              priority: FastImage.priority.high,
+              cache:FastImage.cacheControl.web
+            }
+            : theme.images.categories.all
+          }
+          resizeMode={FastImage.resizeMode.cover}
         >
           {item?.inventoried && (
             <View style={styles.soldOut}>
@@ -111,7 +137,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               mLeft={0}
               size={32}
               numberOfLines={1}
-              // mBottom={8}
               style={{...props?.titleStyle}}
               weight="bold"
             >
@@ -121,7 +146,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               <OText
                 color={theme.colors.white}
                 numberOfLines={1}
-                // mBottom={4}
                 size={18}
                 style={{...props?.descriptionStyle}}
                 weight="400"
@@ -161,7 +185,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const _renderCategories = (): React.ReactElement => (
     <>
       {_renderTitle(t('CATEGORIES', 'Categories'))}
-      <GridContainer 
+      <GridContainer
         style={{
           paddingLeft: orientationState?.orientation === LANDSCAPE
           ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.004 :orientationState?.dimensions?.width * 0.008
@@ -171,9 +195,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         {_categories && _categories.map((category: any) => (
           <OCard
             key={category.id}
+            isCentered
+            isUri={!!category.image}
             title={category?.name || ''}
-            image={category.images ? {uri: category.images} : theme.images.categories.all}
+            image={category.image ? {uri: category.image} : theme.images.categories.all}
             style={{
+              borderRadius: 10,
               width:
                 orientationState?.orientation === LANDSCAPE
                   ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.145 :orientationState?.dimensions?.width * 0.16

package/themes/kiosk/src/components/CategoriesMenu/index.tsx

@@ -156,13 +156,17 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                 <OCard
                   key={product.id}
                   title={product?.name}
-                  image={{ uri: product?.images }}
+                  isUri={!!product.images}
+                  image={product.images ? {uri: product.images} : theme.images.dummies.product}
+                  price={parsePrice(product?.price)}
+                  description={product?.description}
+                  prevPrice={product?.offer_price > 0 && parsePrice(product?.offer_price)}
                   style={{
+                    borderRadius: 10,
                     width: orientationState?.orientation === LANDSCAPE
                       ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.145 :orientationState?.dimensions?.width * 0.16
                       : orientationState?.dimensions?.width * 0.20
                   }}
-                  titleStyle={{marginTop: Platform.OS === 'ios' ? orientationState?.orientation === LANDSCAPE ? orientationState?.dimensions.height * 0.05 : orientationState?.dimensions.width * 0.05 : 0}}
                   onPress={() => {
                     resetInactivityTimeout()
                     if (isDrawer) {
@@ -176,9 +180,6 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                       });
                     }
                   }}
-                  {...(!!product?.description && { description: product?.description } )}
-                  {...(!!product?.price && { price: parsePrice(product?.price) } )}
-                  {...(product?.in_offer && { prevPrice: `$${product?.offer_price}` } )}
                 />
               ))}
             </GridContainer>

package/themes/kiosk/src/components/LanguageSelector/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { TouchableOpacity, View, StyleSheet } from 'react-native'
-import { LanguageSelector as LanguageSelectorController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet, ActivityIndicator } from 'react-native'
+import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
 import CountryPicker, { Flag } from 'react-native-country-picker-modal'
 
 import { Container, LanguageItem } from './styles'
@@ -40,6 +40,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     (a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
 	)
 
+	const [orderState] = useOrder()
 	const [isCountryModalVisible, setCountryModalVisible] = useState(false);
 
 	const countryCodes = _languages?.map((item:any) => item.countryCode);
@@ -48,7 +49,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
 	return (
 		<>
-		{ languagesState.loading ? 
+		{ languagesState.loading ?
 		(<Container>
 			<Placeholder  style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
 				<PlaceholderLine height={15}/>
@@ -66,8 +67,8 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 							closeButtonStyle={styles.closeIcon}
 							renderFlagButton={() => (
 								<TouchableOpacity
-									onPress={() => setCountryModalVisible(true)}
-									disabled={languagesState.loading}
+									onPress={() => orderState.loading ? {} : setCountryModalVisible(true)}
+									// disabled={orderState.loading}
 								>
 									<LanguageItem>
 											<Flag
@@ -76,7 +77,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 												countryCode={currentLanguageData?.countryCode}
 											/>
 										<OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
-										<MatarialIcon name='keyboard-arrow-down' size={24}/>
+										{orderState.loading ? (
+											<ActivityIndicator size="small" color={theme.colors.primary} style={{ marginLeft: 5 }} />
+										) : (
+											<MatarialIcon name='keyboard-arrow-down' size={24}/>
+										)}
 									</LanguageItem>
 								</TouchableOpacity>
 							)}
@@ -87,11 +92,10 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 								renderItem: ({item} : any) => (
 									<TouchableOpacity
 										onPress={() => {
-											/* @ts-ignore */
 											handleChangeLanguage(item.value);
 											setCountryModalVisible(false);
 										}}
-										disabled={languagesState.loading}
+										disabled={orderState.loading}
 									>
 										<LanguageItem>
 											<View style={styles.flagsContainer} />

package/themes/kiosk/src/components/shared/OCard.tsx

@@ -1,110 +1,144 @@
 import React from 'react';
-import { TextStyle, ViewStyle, Platform } from 'react-native';
+import { TextStyle, ImageBackground, StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
+import FastImage from 'react-native-fast-image'
 
-import styled from 'styled-components/native';
-import OImage from './OImage';
+import styled, { css } from 'styled-components/native';
 import OText from './OText';
 
 const CardContainer = styled.TouchableOpacity`
-	width: 21%;
-	margin: 10px 20px;
-	overflow: hidden;
+	position: relative;
+  flex-direction: column;
+  border-radius: 10px;
+  position: relative;
+  margin: 0 30px 30px 0;
+  align-self: flex-start;
 `
 
-const CardBody = styled.View`
-	padding: 4%;
+const WrapPrice = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
 `
 
-const CardBadge = styled.Text`
-	padding: 2% 4%;
-	position: absolute;
-	background-color: ${(props: any) => props.theme.theme.colors.primary};
-	z-index: 100;
-	border-radius: 5px;
-	color: #fff;
-	font-weight: bold;
-	margin: 10px 0;
+const WrapImage = styled.View`
+  width: 100%;
+  height: 120px;
+`
+
+const WrapContent = styled.View`
+  display: flex;
+  flex-direction: column;
+	${(props: any) => props.isCentered && css`
+		align-items: center;
+	`}
 `
 
 const OCard = (props: Props): React.ReactElement => {
 	const theme = useTheme()
 
+	const styles = StyleSheet.create({
+    textStyle: {
+      marginTop: 10
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+			borderBottomLeftRadius: 0,
+			borderBottomRightRadius: 0,
+    }
+  })
+
 	return (
 		<CardContainer
-		 style={{...props.style}}
-		 onPress={props?.onPress}
-		 disabled={!props?.onPress}
-     activeOpacity={1}
-		>
-			{props?.badgeText && (
-				<CardBadge>
-					{props?.badgeText}
-				</CardBadge>
-			)}
-			<OImage
-				source={props.image}
-				height={120}
-				resizeMode="cover"
-				borderRadius={16}
-			/>
-			<CardBody>
-				<OText
-					mLeft={0}
-					size={18}
-					numberOfLines={2}
-					mBottom={8}
-					style={{...props?.titleStyle}}
-				>
-					{props.title}
-				</OText>
-
-				{props?.description && (
-					<OText
-						color={theme.colors.mediumGray}
-						numberOfLines={3}
-						mBottom={8}
-						style={{...props?.descriptionStyle}}
-					>
-						{props.description}
-					</OText>
+			activeOpacity={1}
+      style={props.style}
+      onPress={props?.onPress}
+			disabled={!props?.onPress}
+    >
+      <WrapImage>
+				{props.isUri ? (
+					<FastImage
+						style={[styles.image, props.style]}
+						source={{
+							uri: props.image?.uri,
+							priority: FastImage.priority.normal,
+							// cache:FastImage.cacheControl.web
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<ImageBackground
+						style={[styles.image, props.style]}
+						source={props.image}
+						imageStyle={{
+							borderBottomLeftRadius: 0,
+							borderBottomRightRadius: 0,
+							borderRadius: 10
+						}}
+						resizeMode='cover'
+					/>
 				)}
-				
-				{props?.price && (
-					<OText>
-						<OText
-							color={theme.colors.primary}
-							weight="bold"
-						>
-							{props.price}
-						</OText>
-
-						<OText
-							color={theme.colors.mediumGray}
-							size={12}
-							style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
-						>
-							{props?.prevPrice ? `  ${props?.prevPrice}  ` : ''}
-						</OText>
-					</OText>
-				)}
-
-			</CardBody>
-		</CardContainer>
-	);
+      </WrapImage>
+      <WrapContent isCentered={props.isCentered}>
+        <OText
+          size={18}
+          numberOfLines={1}
+          ellipsizeMode='tail'
+          style={styles.textStyle}
+        >
+          {props.title}
+        </OText>
+        {!!props?.description && (
+          <OText
+            color={theme.colors.mediumGray}
+            size={18}
+            numberOfLines={3}
+            ellipsizeMode='tail'
+            style={styles.textStyle}
+          >
+            {props?.description}
+          </OText>
+        )}
+        <WrapPrice>
+          <OText
+            size={18}
+          >
+            {props.price}
+          </OText>
+          {props?.prevPrice && (
+            <OText
+              size={18}
+              color={theme.colors.mediumGray}
+              style={{
+                textDecorationLine: 'line-through',
+                textDecorationStyle: 'solid',
+                marginLeft: 20,
+              }}
+            >
+              {props?.prevPrice}
+            </OText>
+          )}
+        </WrapPrice>
+      </WrapContent>
+    </CardContainer>
+	)
 }
 
 interface Props {
 	badgeText?: string;
+	isUri?: boolean;
 	onPress?(): void;
-	image: string | { uri: string };
+	image: any;
+	isCentered?: any;
 	title: string;
 	titleStyle?: TextStyle;
 	description?: string;
 	descriptionStyle?: TextStyle;
 	price?: string;
 	prevPrice?: string;
-	style?: ViewStyle;
+	style?: any;
 }
 
 export default OCard;

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

@@ -991,14 +991,14 @@ export const ProductOptionsUI = (props: any) => {
 												? t('UPDATE', 'Update')
 												: t('ADD', 'Add')
 										}`}
-									isDisabled={isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order}
+									isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
 									textStyle={{
 										color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
 										fontSize: orderState.loading || editMode ? 10 : 14
 									}}
 									style={{
-										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order ? theme.colors.white : theme.colors.primary,
+										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
+										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
 										opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
 										borderRadius: 7.6,
 										height: 44,

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

@@ -40,9 +40,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
-		if (error) {
+
+		if (balance === option?.max - 1 && !state.selected) {
 			scrollDown(option?.id)
 		}
+
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}