ordering-ui-react-native 0.17.50 → 0.17.52

package/package.json

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

package/src/utils/index.tsx

@@ -34,7 +34,8 @@ export const getTraduction = (key: string, t: any) => {
     ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY: 'Error adding product, very far for delivery',
     ERROR_PRODUCT_NOT_FOUND: 'Error with the product',
     ERROR_ADD_BUSINESS_INVALID: 'An error occurred with the business',
-    ERROR_INVALID_OFFER: 'The offer doesn\'t exist'
+    ERROR_INVALID_OFFER: 'The offer doesn\'t exist',
+    ERROR_ADD_PRODUCT_BEFORE_ADDRESS: 'You must have an address'
   }
 
   return keyList[key] ? t(key, keyList[key]) : t(key)

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

@@ -20,6 +20,7 @@ const BusinessesListingUI = (props: any) => {
   const {
     navigation,
     businessesList,
+    paginationProps,
     handleBusinessClick,
   } = props;
 
@@ -78,7 +79,7 @@ const BusinessesListingUI = (props: any) => {
         </CardsContainer>
 
 
-        {!businessesList.loading && businessesList.businesses.length === 0 && (
+        {!businessesList.loading && businessesList.businesses.length === 0 && paginationProps.totalPages !== null && (
           <NotFoundSource
             content={t(
               'NOT_FOUND_BUSINESSES',

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

@@ -550,7 +550,7 @@ export const ProductOptionsUI = (props: any) => {
             </View>
           )}
           <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
-            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
+            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (
               <OButton
                 onClick={() => handleSaveProduct()}
                 imgRightSrc=''
@@ -563,19 +563,6 @@ export const ProductOptionsUI = (props: any) => {
                 }}
               />
             )}
-            {auth && !orderState.options?.address_id && (
-              orderState.loading ? (
-                <OButton
-                  isDisabled
-                  text={t('LOADING', 'Loading')}
-                  imgRightSrc=''
-                />
-              ) : (
-                <OButton
-                  onClick={navigation?.navigate('AddressList')}
-                />
-              )
-            )}
             {(!auth || isSoldOut || maxProductQuantity <= 0) && (
               <OButton
                 isDisabled={isSoldOut || maxProductQuantity <= 0}

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

@@ -57,7 +57,7 @@ const AddressDetailsUI = (props: any) => {
 						}>
 						<OText
 							size={12}
-							color={theme.colors.textSecondary}
+							color={theme.colors.primary}
 							style={{ textDecorationLine: 'underline' }}>
 							{t('CHANGE', 'Change')}
 						</OText>

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

@@ -83,7 +83,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			backgroundColor: theme.colors.clear
 		},
 		inputsStyle: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 50,
@@ -92,7 +91,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			flex: 1,
 		},
 		textAreaStyles: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 104,
@@ -140,6 +138,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const [isSignUpEffect, setIsSignUpEffect] = useState(false);
 	const [hasEditing, setAddressEditing] = useState(false);
+	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const googleInput: any = useRef(null);
 	const internalNumberRef: any = useRef(null);
@@ -563,6 +562,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 												autoCorrect: false,
 												blurOnSubmit: false,
 												returnKeyType: 'next',
+												onFocus: () => setAutoCompleteInputFocused(true),
+												onBlur: () => setAutoCompleteInputFocused(false)
 											}}
 											onFail={(error) =>
 												setAlertState({
@@ -586,7 +587,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												textInput: {
 													borderWidth: 1,
 													borderRadius: 7.6,
-													borderColor: theme.colors.border,
+													borderColor: autoCompleteInputFocused ? theme.colors.primary : theme.colors.border,
 													flexGrow: 1,
 													fontSize: 15,
 													paddingLeft: 16,
@@ -676,6 +677,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													addressState?.address?.internal_number ||
 													''
 												}
+												isFocusHighlight
 												style={{
 													...styles.inputsStyle,
 													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
@@ -722,6 +724,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													addressState.address.zipcode ||
 													''
 												}
+												isFocusHighlight
 												style={styles.inputsStyle}
 												forwardRef={zipCodeRef}
 												returnKeyType="next"
@@ -767,6 +770,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												''
 											}
 											multiline
+											isFocusHighlight
 											style={styles.textAreaStyles}
 											returnKeyType="done"
 											forwardRef={addressNotesRef}

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

@@ -269,7 +269,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						{!isOpenSearchBar && (
 							<>
 								<TopActions onPress={() => handleBackNavigation()}>
-									<IconAntDesign name='arrowleft' size={26} />
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
 								</TopActions>
 								{!errorQuantityProducts && (
 									<View style={{ ...styles.headerItem }}>
@@ -277,7 +277,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 											onPress={() => setIsOpenSearchBar(true)}
 											style={styles.searchIcon}
 										>
-											<OIcon src={theme.images.general.search} color={theme.colors.textNormal} width={16} />
+											<OIcon src={theme.images.general.search} color={theme.colors.textNormal} width={20} />
 										</TouchableOpacity>
 									</View>
 								)}

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

@@ -32,7 +32,6 @@ import {
 	HeaderWrapper,
 	ListWrapper,
 	FeaturedWrapper,
-	OrderProgressWrapper,
 	FarAwayMessage,
 	AddressInputContainer,
 	PreorderInput,
@@ -138,7 +137,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			minHeight: 45,
 			paddingVertical: 5,
 			paddingHorizontal: 20,
-			borderWidth: 1
+			borderWidth: 1,
+			justifyContent: 'center'
 		},
 		businessSkeleton: {
 			borderRadius: 8,
@@ -501,12 +501,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</TouchableOpacity>
 				</View>
 			)}
-			<OrderProgressWrapper>
-				<OrderProgress
-					{...props}
-					isFocused={isFocused}
-				/>
-			</OrderProgressWrapper>
+			<OrderProgress
+				{...props}
+				isFocused={isFocused}
+			/>
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
@@ -659,14 +657,25 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							key={city?.id}
 							style={{
 								padding: 10,
-								borderBottomWidth: 1,
-								borderBottomColor: orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.backgroundGray,
-								marginBottom: 10,
+								flexDirection: 'row'
 							}}
 							onPress={() => handleChangeCity(city?.id)}
 							disabled={orderState?.loading}
 						>
-							<OText color={orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.black}>
+							{orderState?.options?.city_id === city?.id ? (
+								<OIcon
+									src={theme.images.general.option_checked}
+									width={16}
+									style={{ marginEnd: 24 }}
+								/>
+							) : (
+								<OIcon
+									src={theme.images.general.option_normal}
+									width={16}
+									style={{ marginEnd: 24 }}
+								/>
+							)}
+							<OText color={theme.colors.black}>
 								{city?.name}
 							</OText>
 						</TouchableOpacity>

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

@@ -74,16 +74,9 @@ export const ListWrapper = styled.View`
 
 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;

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

@@ -17,7 +17,8 @@ import {
   ProgressBar,
   TimeWrapper,
   ProgressTextWrapper,
-  OrderInfoWrapper
+  OrderInfoWrapper,
+  OrderProgressWrapper
 } from './styles'
 const OrderProgressUI = (props: any) => {
   const {
@@ -47,9 +48,9 @@ const OrderProgressUI = (props: any) => {
         height: 1
       },
       shadowColor: '#000',
-      shadowOpacity: 0.1,
-      shadowRadius: 1,
-      elevation: 2
+      shadowOpacity: 0.2,
+      shadowRadius: 2,
+      elevation: 3
     },
     logoWrapper: {
       overflow: 'hidden',
@@ -144,70 +145,74 @@ const OrderProgressUI = (props: any) => {
   return (
     <>
       {(orderList?.loading && !initialLoaded) && (
-        <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
-          <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
-          <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
-          <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
-        </Placeholder>
+        <OrderProgressWrapper>
+          <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
+            <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
+            <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
+            <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
+          </Placeholder>
+        </OrderProgressWrapper>
       )}
       {(!orderList?.loading || initialLoaded) && orderList?.orders?.length > 0 && lastOrder && (
-        <View style={styles.main}>
-          <OrderInfoWrapper style={{ flex: 1 }}>
-            <View style={styles.logoWrapper}>
-              <FastImage
-                style={{ width: 50, height: 50 }}
-                source={{
-                  uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
-                  priority: FastImage.priority.normal,
-                }}
-                resizeMode={FastImage.resizeMode.cover}
-              />
-            </View>
-            <View style={{
-              paddingHorizontal: 10,
-              flex: 1
-            }}
-            >
-              <OText
-                size={13}
-                style={{
-                  fontWeight: 'bold',
-                  marginBottom: 3
-                }}
-              >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
-              <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
-              <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
-                <View style={styles.navigationButton}>
-                  <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
-                  <IconAntDesign
-                    name='arrowright'
-                    color={theme.colors.primary}
-                    size={13}
-                    style={{ marginHorizontal: 5 }}
-                  />
-                </View>
-              </TouchableOpacity>
+        <OrderProgressWrapper>
+          <View style={styles.main}>
+            <OrderInfoWrapper style={{ flex: 1 }}>
+              <View style={styles.logoWrapper}>
+                <FastImage
+                  style={{ width: 50, height: 50 }}
+                  source={{
+                    uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
+                    priority: FastImage.priority.normal,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                />
+              </View>
+              <View style={{
+                paddingHorizontal: 10,
+                flex: 1
+              }}
+              >
+                <OText
+                  size={13}
+                  style={{
+                    fontWeight: 'bold',
+                    marginBottom: 3
+                  }}
+                >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
+                <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
+                <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
+                  <View style={styles.navigationButton}>
+                    <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
+                    <IconAntDesign
+                      name='arrowright'
+                      color={theme.colors.primary}
+                      size={13}
+                      style={{ marginHorizontal: 5 }}
+                    />
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </OrderInfoWrapper>
+            <View style={{ flex: 1 }}>
+              <ProgressContentWrapper>
+                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
+              </ProgressContentWrapper>
+              <ProgressTextWrapper>
+                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <TimeWrapper>
+                  <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
+                  <OText size={11}>
+                    {lastOrder?.delivery_datetime_utc
+                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                      : parseTime(lastOrder?.delivery_datetime, { utc: false })}
+                    &nbsp;-&nbsp;
+                    {convertDiffToHours(lastOrder)}
+                  </OText>
+                </TimeWrapper>
+              </ProgressTextWrapper>
             </View>
-          </OrderInfoWrapper>
-          <View style={{ flex: 1 }}>
-            <ProgressContentWrapper>
-              <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
-            </ProgressContentWrapper>
-            <ProgressTextWrapper>
-              <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
-              <TimeWrapper>
-                <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
-                <OText size={11}>
-                  {lastOrder?.delivery_datetime_utc
-                    ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
-                    : parseTime(lastOrder?.delivery_datetime, { utc: false })}
-                  &nbsp;-&nbsp;
-                  {convertDiffToHours(lastOrder)}
-                </OText>
-              </TimeWrapper>
-            </ProgressTextWrapper>
           </View>
-        </View>
+        </OrderProgressWrapper>
       )}
       {/* {!orderList?.loading && orderList?.orders?.length === 0 && (
         <NotFoundSource

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

@@ -29,3 +29,8 @@ export const OrderInfoWrapper = styled.View`
   align-items: center;
   margin-bottom: 15px;
 `
+export const OrderProgressWrapper = styled.View`
+  margin-top: 37px;
+  margin-bottom: 20px;
+	padding-horizontal: 40px;
+`

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

@@ -54,7 +54,7 @@ const PageBannerUI = (props: any) => {
           {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
             <PageBannerWrapper>
               <Swiper
-                loop={false}
+                loop={pageBannerState.banner?.items.length > 1}
                 showsButtons={true}
                 style={styles.mainSwiper}
                 showsPagination={false}

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

@@ -919,7 +919,7 @@ export const ProductOptionsUI = (props: any) => {
 										disabled={productCart.quantity === 1 || !productCart.quantity || isSoldOut || ((productCart?.quantity + productAddedToCartLength) <= product?.minimum_per_order)}>
 										<OIcon
 											src={theme.images.general.minus}
-											width={16}
+											width={20}
 											color={
 												productCart.quantity === 1 || isSoldOut
 													? theme.colors.backgroundGray
@@ -940,7 +940,8 @@ export const ProductOptionsUI = (props: any) => {
 												borderRadius: 8,
 												borderColor: theme.colors.inputBorderColor,
 												height: 44,
-												marginHorizontal: 10
+												marginHorizontal: 10,
+												fontSize: 16
 											}}
 										/>
 									)}
@@ -963,7 +964,7 @@ export const ProductOptionsUI = (props: any) => {
 										}>
 										<OIcon
 											src={theme.images.general.plus}
-											width={16}
+											width={20}
 											color={
 												maxProductQuantity <= 0 ||
 													(productCart?.quantity + productAddedToCartLength) >= maxProductQuantity ||

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

@@ -241,7 +241,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginEnd: 7 }}>
 											<OIcon
 												src={theme.images.general.pencil}
-												width={16}
+												width={20}
 												color={theme.colors.textSecondary}
 											/>
 										</TouchableOpacity>
@@ -254,7 +254,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										>
 											<OIcon
 												src={theme.images.general.trash}
-												width={17}
+												width={20}
 												color={theme.colors.textSecondary}
 											/>
 										</OAlert>

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

@@ -168,7 +168,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					<View style={{ flexDirection: 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer style={[styles.quantityContainer, {
-								transform: [{ translateX: 25 }, { translateY: hideAddButton ? -25 : -55 }],
+								transform: [{ translateX: 25 }, { translateY: -25 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -273,6 +273,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								width: '100%',
 								borderRadius: 7.6,
 								marginTop: 10,
+								height: 40
 
 							}}
 							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}

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

@@ -21,6 +21,7 @@ export const QuantityContainer = styled.View`
 export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
+  margin-vertical: 6px;
 `
 
 export const LogoWrapper = styled.View`

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

@@ -195,6 +195,9 @@ const StripeElementsFormUI = (props: any) => {
 								cardStyle={{
 									backgroundColor: '#FFFFFF',
 									textColor: '#000000',
+									borderWidth: 1,
+									borderRadius: 8,
+									borderColor: theme.colors.border
 								}}
 								style={{
 									width: '100%',

package/themes/original/src/components/shared/OInput.tsx

@@ -3,6 +3,7 @@ import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle }
 import styled from 'styled-components/native';
 import OIcon from './OIcon';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import { useTheme } from 'styled-components/native';
 
 const Input = styled.TextInput`
   flex-grow: 1;
@@ -39,6 +40,7 @@ interface Props extends TextInputProps {
 	inputStyle?: TextStyle;
 	wrapperRef?: any;
 	onPress?: any;
+	isFocusHighlight?: boolean
 }
 
 const Wrapper = styled.Pressable`
@@ -54,12 +56,16 @@ const Wrapper = styled.Pressable`
 `;
 
 const OInput = (props: Props): React.ReactElement => {
+	const theme = useTheme();
+	const [inputFocused, setInputFocused] = React.useState(false)
 	return (
 		<Wrapper
 			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
 			style={{
 				backgroundColor: props.bgColor,
-				borderColor: props.borderColor,
+				borderColor: !props.isFocusHighlight
+					? props.borderColor
+					: inputFocused ? theme.colors.primary : theme.colors.border,
 				...props.style,
 			}}>
 			{props.icon ? (
@@ -95,6 +101,8 @@ const OInput = (props: Props): React.ReactElement => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={props?.inputStyle}
+				onFocus={() => setInputFocused(true)}
+				onBlur={() => setInputFocused(false)}
 			/>
 			{props.iconRight && (
 				<OIcon
@@ -114,6 +122,7 @@ OInput.defaultProps = {
 	iconColor: '#959595',
 	bgColor: 'white',
 	borderColor: 'white',
+	isFocusHighlight: false
 };
 
 export default OInput;