ordering-ui-react-native 0.14.89 → 0.14.90-release

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

@@ -40,7 +40,7 @@ export const ProductTitle = styled.View`
 `
 
 export const ProductDescription = styled.View`
-  margin-bottom: 30px;
+  margin-top: 10px;
 `
 
 export const ProductEditions = styled.View`

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

@@ -32,6 +32,7 @@ const ProductOptionUI = (props: any) => {
         <OText
           size={26}
           weight="bold"
+          style={{ width: '80%' }}
         >
           {option.name}
         </OText>

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

@@ -12,4 +12,5 @@ export const WrapHeader = styled.View`
   background-color: ${(props: any) => props.theme.colors.paleGray};
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
+  width: 100%;
 `

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

@@ -1,6 +1,6 @@
 import React,{ useState, useEffect } from 'react'
 import Spinner from 'react-native-loading-spinner-overlay';
-import { StyleSheet, View, Platform } from 'react-native'
+import { StyleSheet, View, Platform, ImageBackground } from 'react-native'
 import {
   UpsellingPage as UpsellingPageController,
   useUtils,
@@ -20,6 +20,7 @@ import { Container } from '../../layouts/Container';
 import GridContainer from '../../layouts/GridContainer';
 import { PORTRAIT, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 import { useTheme } from 'styled-components/native';
+import FastImage from 'react-native-fast-image';
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   const {
@@ -114,7 +115,24 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                 {
                   !upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
                     <Item key={product.id}>
-                      <OImage source={{ uri: product.images }} style={styles.imageStyle} />
+                      {product?.images ? (
+                        <FastImage
+                          style={styles.imageStyle}
+                          source={{
+                            uri: product?.images,
+                            priority: FastImage.priority.normal,
+                            // cache:FastImage.cacheControl.web
+                          }}
+                          resizeMode={FastImage.resizeMode.cover}
+                        />
+                      ) : (
+                        <ImageBackground
+                          style={styles.imageStyle}
+                          source={theme.images.dummies.product}
+                          imageStyle={{ borderRadius: 10 }}
+                          resizeMode='cover'
+                        />
+                      )}
                       <Details>
                         <OText
                           weight="500"
@@ -125,24 +143,22 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                           {product.name}
                         </OText>
 
-                        {!!product?.price && (
-                          <OText>
-                            <OText
-                              color={theme.colors.primary}
-                              weight="500"
-                            >
-                              {parsePrice(product.price)}
-                            </OText>
+                        <OText>
+                          <OText
+                            color={theme.colors.primary}
+                            weight="500"
+                          >
+                            {parsePrice(product.price)}
+                          </OText>
 
-                            <OText
-                              color={theme.colors.mediumGray}
-                              size={12}
-                              style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
-                            >
-                              {product?.offer_price ? `  ${parsePrice(product?.offer_price)}  ` : ''}
-                            </OText>
+                          <OText
+                            color={theme.colors.mediumGray}
+                            size={12}
+                            style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
+                          >
+                            {product?.offer_price ? `  ${parsePrice(product?.offer_price)}  ` : ''}
                           </OText>
-                        )}
+                        </OText>
                       </Details>
 
                       <OButton
@@ -200,24 +216,22 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                                   {product.name}
                                 </OText>
 
-                                {!!product?.price && (
-                                  <OText>
-                                    <OText
-                                      color={theme.colors.primary}
-                                      weight="500"
-                                      >
-                                      {parsePrice(product.price)}
-                                    </OText>
+                                <OText>
+                                  <OText
+                                    color={theme.colors.primary}
+                                    weight="500"
+                                    >
+                                    {parsePrice(product.price)}
+                                  </OText>
 
-                                    <OText
-                                      color={theme.colors.mediumGray}
-                                      size={12}
-                                      style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
-                                      >
-                                      {product?.offer_price ? parsePrice(product?.offer_price) : ''}
-                                    </OText>
+                                  <OText
+                                    color={theme.colors.mediumGray}
+                                    size={12}
+                                    style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
+                                    >
+                                    {product?.offer_price ? parsePrice(product?.offer_price) : ''}
                                   </OText>
-                                )}
+                                </OText>
                               </Details>
                               <OButton
                                 text={t('ADD_PRODUCT', 'add product')}

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

@@ -10,8 +10,6 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -79,19 +77,17 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
-  iconProps?: IconProps;
-  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
+      <StyledButtonDisabled style={props.style}>
+        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+          {props.text}
+        </StyledTextDisabled>
+      </StyledButtonDisabled>
       </View>
     );
   }
@@ -115,15 +111,6 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
-        {props.iconProps ? (
-          <>
-            {props?.IconCustom ? (
-              <props.IconCustom {...props.iconProps} />
-            ) : (
-              <AntDesignIcon {...props.iconProps} />
-            )}
-          </>
-        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}

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/kiosk/src/types/index.d.ts

@@ -473,3 +473,7 @@ export interface Cart {
   total: number;
   clearInactivityTimeout: any;
 }
+
+export interface NoNetworkParams {
+  image?: any;
+}

package/themes/original/index.tsx

@@ -1,16 +1,21 @@
 import { AddressForm } from './src/components/AddressForm';
 import { AddressDetails } from './src/components/AddressDetails';
+import { AnalyticsSegment } from './src/components/AnalyticsSegment';
 import { Home } from './src/components/Home';
 import { LoginForm } from './src/components/LoginForm';
 import { SignupForm } from './src/components/SignupForm';
 import { ActiveOrders } from './src/components/ActiveOrders';
 import { AddressList } from './src/components/AddressList';
 import { AppleLogin } from './src/components/AppleLogin';
+import { BusinessBasicInformation } from './src/components/BusinessBasicInformation';
+import { BusinessProductsCategories } from './src/components/BusinessProductsCategories';
+import { BusinessProductsList } from './src/components/BusinessProductsList';
 import { BusinessesListing } from './src/components/BusinessesListing';
 import { BusinessProductsListing } from './src/components/BusinessProductsListing';
 import { CartContent } from './src/components/CartContent';
 import { BusinessCart } from './src/components/BusinessCart';
 import { Checkout } from './src/components/Checkout';
+import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
 import { MomentOption } from './src/components/MomentOption';
 import { OrdersOption } from './src/components/OrdersOption';
@@ -24,17 +29,26 @@ import { ReviewProducts } from './src/components/ReviewProducts';
 import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
+import { Messages } from './src/components/Messages';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
 import { HelpOrder } from './src/components/HelpOrder';
+import { NetworkError } from './src/components/NetworkError';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { SearchBar } from './src/components/SearchBar';
 import { Wallets } from './src/components/Wallets';
 import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
 import { ProductForm } from './src/components/ProductForm';
 import { UpsellingProducts } from './src/components/UpsellingProducts';
 import { UserVerification } from './src/components/UserVerification';
+import { LastOrders } from './src/components/LastOrders';
+import  NavBar from './src/components/NavBar';
+import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
+import { BusinessController } from './src/components/BusinessController';
+import { BusinessFeaturedController } from './src/components/BusinessFeaturedController';
+import { HighestRatedBusinesses } from './src/components/HighestRatedBusinesses';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -51,6 +65,7 @@ import {
 	OAlert,
 	OModal,
 	OBottomPopup,
+  	HeaderTitle
 } from './src/components/shared';
 
 import { Container } from './src/layouts/Container';
@@ -65,6 +80,7 @@ import {
 export {
 	AddressForm,
 	AddressDetails,
+	AnalyticsSegment,
 	Home as HomeView,
 	SignupForm,
 	LoginForm,
@@ -74,7 +90,7 @@ export {
 	BusinessesListing,
 	BusinessProductsListing,
 	CartContent,
-  BusinessCart,
+	BusinessCart,
 	Checkout,
 	ForgotPasswordForm,
 	MomentOption,
@@ -89,17 +105,29 @@ export {
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,
+  	Messages,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
-  Wallets,
-  PaymentOptionWallet,
-  ProductForm,
-  UpsellingProducts,
-  UserVerification,
+	Wallets,
+	PaymentOptionWallet,
+	ProductForm,
+	UpsellingProducts,
+	UserVerification,
+	BusinessBasicInformation,
+	BusinessProductsCategories,
+	BusinessProductsList,
+	FloatingButton,
+	SearchBar,
+	LastOrders,
+	BusinessTypeFilter,
+	BusinessController,
+	BusinessFeaturedController,
+	HighestRatedBusinesses,
 
 	// OComponents
 	Toast,
@@ -116,10 +144,12 @@ export {
 	OAlert,
 	OModal,
 	OBottomPopup,
+ 	HeaderTitle,
 
 	// layout
 	Container,
 	SafeAreaContainer,
+	NavBar,
 
 	// utils
 	_retrieveStoreData,

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

@@ -108,6 +108,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 			top: 12,
 			zIndex: 1002,
 		},
+		wrapperNavbar: Platform.OS === 'ios'
+			? {  paddingVertical: 0, paddingHorizontal: 40 }
+			: {  paddingVertical: 20, paddingHorizontal: 40 }
 	});
 
 	const [, t] = useLanguage();
@@ -500,16 +503,18 @@ const AddressFormUI = (props: AddressFormParams) => {
 			keyboardShouldPersistTaps='always'
 			listViewDisplayed={false}
 		>
-			<NavBar
-				title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
-				titleAlign={'center'}
-				onActionLeft={goToBack}
-				showCall={false}
-				paddingTop={20}
-				btnStyle={{ paddingLeft: 40 }}
-				titleStyle={{ fontSize: 14 }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-			/>
+			<View style={styles.wrapperNavbar}>
+				<NavBar
+					title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
+					titleAlign={'center'}
+					onActionLeft={goToBack}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+				/>
+			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
 				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
 					<View>

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
 import { AddressListContainer, AddressItem } from './styles'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
 import { Container } from '../../layouts/Container'
 import { AddressListParams } from '../../types'
@@ -261,6 +261,32 @@ const AddressListUI = (props: AddressListParams) => {
 					)}
 					{!addressList.loading && !addressList.error && (
 						<>
+							{addressList?.addresses?.length === 0 && (
+								<View
+									style={{
+										flexDirection: 'column',
+										paddingHorizontal: 10,
+										paddingTop: 20
+									}}
+								>
+									<OText
+										size={24}
+										lineHeight={36}
+										weight={Platform.OS === 'ios' ? '600' : 'bold'}
+										style={{
+											textAlign: 'center',
+											marginRight: 40,
+											color: theme.colors.textNormal,
+											paddingHorizontal: 0,
+											width: '100%',
+											marginLeft: 0
+										}}
+									>
+										{t('ADDRESS_LIST', 'Address List')}
+									</OText>
+								</View>
+							)}
+
 							<OButton
 								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
 								imgRightSrc=''