ordering-ui-react-native 0.15.33 → 0.15.35-release

package/themes/original/index.tsx

@@ -7,11 +7,17 @@ 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 { Favorite } from './src/components/Favorite';
+import { FavoriteList } from './src/components/FavoriteList';
+import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
 import { MomentOption } from './src/components/MomentOption';
 import { OrdersOption } from './src/components/OrdersOption';
@@ -33,12 +39,91 @@ 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 { BusinessListingSearch } from './src/components/BusinessListingSearch';
+import { LastOrders } from './src/components/LastOrders';
+import { MultiCheckout } from './src/components/MultiCheckout'
+import { MultiOrdersDetails } from './src/components/MultiOrdersDetails'
+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 { PaymentOptions } from './src/components/PaymentOptions';
+import { DriverTips } from './src/components/DriverTips';
+import { UserDetails } from './src/components/UserDetails';
+import { OrderSummary } from './src/components/OrderSummary';
+import { CartStoresListing } from './src/components/CartStoresListing';
+import { PaymentOptionsWebView } from '../../src/components/PaymentOptionsWebView';
+import { GoogleMap } from './src/components/GoogleMap';
+import { SingleProductCard } from './src/components/SingleProductCard';
+import { SingleOrderCard } from './src/components/SingleOrderCard';
+import { UpsellingRedirect } from './src/components/BusinessProductsListing/UpsellingRedirect';
+import { ProductItemAccordion } from './src/components/ProductItemAccordion';
+import { BusinessItemAccordion } from './src/components/BusinessItemAccordion';
+import { CouponControl } from './src/components/CouponControl';
+import { TaxInformation } from './src/components/TaxInformation';
+import { PlaceSpot } from './src/components/PlaceSpot';
+import { Cart } from './src/components/Cart';
+import { LanguageSelector } from './src/components/LanguageSelector';
+import { PhoneInputNumber } from './src/components/PhoneInputNumber'
+import { FacebookLogin } from './src/components/FacebookLogin';
+import { VerifyPhone } from './src/components/VerifyPhone';
+import { GoogleLogin } from './src/components/GoogleLogin';
+import { PreviousOrders } from './src/components/PreviousOrders';
+import { PaymentOptionCash } from './src/components/PaymentOptionCash';
+import { StripeElementsForm } from './src/components/StripeElementsForm';
+import { StripeCardsList } from './src/components/StripeCardsList';
+import { ProductIngredient } from './src/components/ProductIngredient';
+import { ProductOption } from './src/components/ProductOption';
+import { ProductOptionSubOption } from './src/components/ProductOptionSubOption';
+import { Sessions } from './src/components/Sessions';
+import { SingleProductReview } from './src/components/SingleProductReview';
+import { LogoutButton } from './src/components/LogoutButton';
+import { UserFormDetailsUI } from './src/components/UserFormDetails';
+import { WalletTransactionItem } from './src/components/WalletTransactionItem';
+import { Promotions } from './src/components/Promotions'
+import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
+
+import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
+
+import { FormInput, FormSide, ButtonsWrapper, LoginWith, OTab, OTabs } from './src/components/LoginForm/styles';
+import { OSItem, OSItemContent, OSItemActions } from './src/components/PaymentOptionStripe/styles';
+
+import Alert from './src/providers/AlertProvider'
+
+import {
+	LoginParams,
+	ProfileParams,
+	AddressListParams,
+	AddressFormParams,
+	SignupParams,
+	PhoneInputParams,
+	LanguageSelectorParams,
+	BusinessesListingParams,
+	HighestRatedBusinessesParams,
+	BusinessTypeFilterParams,
+	BusinessControllerParams,
+	BusinessProductsListingParams,
+	BusinessBasicInformationParams,
+	BusinessProductsCategoriesParams,
+	BusinessProductsListParams,
+	SingleProductCardParams,
+	BusinessInformationParams,
+	BusinessReviewsParams,
+	SearchBarParams,
+	NotFoundSourceParams,
+	OrdersOptionParams,
+	ActiveOrdersParams,
+	PreviousOrdersParams,
+	OrderDetailsParams,
+	ReviewDriverParams
+} from './src/types';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -55,10 +140,13 @@ import {
 	OAlert,
 	OModal,
 	OBottomPopup,
+	HeaderTitle
 } from './src/components/shared';
 
 import { Container } from './src/layouts/Container';
 import { SafeAreaContainer } from './src/layouts/SafeAreaContainer';
+import { FloatingBottomContainer } from './src/layouts/FloatingBottomContainer';
+
 import {
 	_retrieveStoreData,
 	_setStoreData,
@@ -81,6 +169,8 @@ export {
 	CartContent,
 	BusinessCart,
 	Checkout,
+	Favorite,
+	FavoriteList,
 	ForgotPasswordForm,
 	MomentOption,
 	OrdersOption,
@@ -94,11 +184,13 @@ export {
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,
-  Messages,
+	Messages,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	MultiCheckout,
+	MultiOrdersDetails,
 	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
@@ -108,6 +200,98 @@ export {
 	UpsellingProducts,
 	UserVerification,
 	BusinessListingSearch,
+	BusinessBasicInformation,
+	BusinessProductsCategories,
+	BusinessProductsList,
+	FloatingButton,
+	SearchBar,
+	LastOrders,
+	BusinessTypeFilter,
+	BusinessController,
+	BusinessFeaturedController,
+	HighestRatedBusinesses,
+	PaymentOptions,
+	DriverTips,
+	UserDetails,
+	OrderSummary,
+	CartStoresListing,
+	PaymentOptionsWebView,
+	GoogleMap,
+	SingleProductCard,
+	SingleOrderCard,
+	UpsellingRedirect,
+	ProductItemAccordion,
+	BusinessItemAccordion,
+	CouponControl,
+	TaxInformation,
+	PlaceSpot,
+	Cart,
+	LanguageSelector,
+	PhoneInputNumber,
+	FacebookLogin,
+	VerifyPhone,
+	GoogleLogin,
+	PreviousOrders,
+	PaymentOptionCash,
+	StripeElementsForm,
+	StripeCardsList,
+	ProductIngredient,
+	ProductOption,
+	ProductOptionSubOption,
+	Sessions,
+	SingleProductReview,
+	LogoutButton,
+	UserFormDetailsUI,
+	WalletTransactionItem,
+	Promotions,
+	ORDER_TYPES,
+	USER_TYPE,
+
+	OSBill,
+	OSTable,
+	OSCoupon,
+	OSTotal,
+	OSRow,
+
+	FormInput,
+	FormSide,
+	ButtonsWrapper,
+	LoginWith,
+	OTab,
+	OTabs,
+
+	OSItem,
+	OSItemContent,
+	OSItemActions,
+
+	Alert,
+
+	//Types
+	LoginParams,
+	ProfileParams,
+	AddressListParams,
+	AddressFormParams,
+	SignupParams,
+	PhoneInputParams,
+	LanguageSelectorParams,
+	BusinessesListingParams,
+	HighestRatedBusinessesParams,
+	BusinessTypeFilterParams,
+	BusinessControllerParams,
+	BusinessProductsListingParams,
+	BusinessBasicInformationParams,
+	BusinessProductsCategoriesParams,
+	BusinessProductsListParams,
+	SingleProductCardParams,
+	BusinessInformationParams,
+	BusinessReviewsParams,
+	SearchBarParams,
+	NotFoundSourceParams,
+	OrdersOptionParams,
+	ActiveOrdersParams,
+	PreviousOrdersParams,
+	OrderDetailsParams,
+	ReviewDriverParams,
 
 	// OComponents
 	Toast,
@@ -124,10 +308,13 @@ export {
 	OAlert,
 	OModal,
 	OBottomPopup,
+	HeaderTitle,
 
 	// layout
 	Container,
 	SafeAreaContainer,
+	FloatingBottomContainer,
+	NavBar,
 
 	// utils
 	_retrieveStoreData,

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

@@ -1,23 +1,13 @@
 import React from 'react';
-import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
-import { OButton, OIcon, OText } from '../shared';
+import { useConfig } from 'ordering-components/native';
 import {
-	ActiveOrdersContainer,
-	Card,
-	Map,
-	Information,
-	Logo,
-	OrderInformation,
-	BusinessInformation,
-	Price,
-	UnreadMessageCounter,
-	LoadMore
+	ActiveOrdersContainer
 } from './styles';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 
 import { ActiveOrdersParams } from '../../types';
-import moment from 'moment';
 import { useTheme } from 'styled-components/native';
+import { SingleOrderCard } from '../SingleOrderCard';
 
 export const ActiveOrders = (props: ActiveOrdersParams) => {
 	const {
@@ -27,111 +17,27 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 		loadMoreOrders,
 		getOrderStatus,
 		isMessageView,
-		handleClickOrder
+		handleClickOrder,
+		handleUpdateOrderList
 	} = props;
 
 	const theme = useTheme();
 	const [{ configs }] = useConfig();
-	const [, t] = useLanguage();
-	const [{ parseDate, parsePrice, optimizeImage }] = useUtils();
-
-	const formatDate = (date: string, option?: any) => {
-		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
-	};
-
-	const handleClickCard = (uuid: string) => {
-		if (isMessageView) {
-			handleClickOrder(uuid)
-			return
-		}
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const Order = ({ order, index }: { order: any; index: number }) => (
-		<React.Fragment>
-			<Card
-				isMiniCard={configs?.google_maps_api_key?.value}
-				onPress={() => handleClickCard(order?.uuid)}
-				activeOpacity={0.7}>
-				{/* {!!(configs?.google_maps_api_key?.value) && (
-					<Map>
-						<OIcon
-						url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-						height={100}
-						width={320}
-						style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
-						/>
-					</Map>
-				)} */}
-				<Information>
-					{!!order.business?.logo && (
-						<Logo>
-							<OIcon
-								url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-								style={styles.logo}
-							/>
-						</Logo>
-					)}
-					<OrderInformation>
-						<BusinessInformation>
-							<OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
-								{order.business?.name}
-							</OText>
-							<View style={styles.orderNumber}>
-								<OText size={10} space color={theme.colors.textSecondary}>
-									{t('ORDER_NO', 'Order No') + '.'}
-								</OText>
-								<OText size={10} color={theme.colors.textSecondary}>
-									{order.id + ` \u2022 `}
-								</OText>
-								<OText size={10} color={theme.colors.textSecondary}>
-									{order?.delivery_datetime_utc
-										? formatDate(order?.delivery_datetime_utc)
-										: formatDate(order?.delivery_datetime, { utc: false })}
-								</OText>
-							</View>
-							{/* {order?.status !== 0 && ( */}
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								weight={400}
-								numberOfLines={2}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-							{/* )} */}
-						</BusinessInformation>
-						{isMessageView ? (
-							<>
-								{order?.unread_count > 0 && (
-									<UnreadMessageCounter>
-										<OText size={12} color={theme.colors.primary} lineHeight={18} >
-											{order?.unread_count}
-										</OText>
-									</UnreadMessageCounter>
-								)}
-							</>
-						) : (
-							<Price>
-								<OText size={12} lineHeight={18}>
-									{parsePrice(order?.summary?.total || order?.total)}
-								</OText>
-							</Price>
-						)}
-
-					</OrderInformation>
-				</Information>
-			</Card >
-		</React.Fragment >
-	);
 
 	return (
 		<>
 			<ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
 				{orders.length > 0 &&
 					orders.map((order: any, index: any) => (
-						<Order key={index} order={order} index={index} />
+						<SingleOrderCard
+							key={index}
+							order={order}
+							handleClickOrder={handleClickOrder}
+							isMessageView={isMessageView}
+							getOrderStatus={getOrderStatus}
+							onNavigationRedirect={onNavigationRedirect}
+							handleUpdateOrderList={handleUpdateOrderList}
+						/>
 					))}
 			</ActiveOrdersContainer>
 			<View
@@ -144,26 +50,3 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 		</>
 	);
 };
-
-const styles = StyleSheet.create({
-	logo: {
-		borderRadius: 7.6,
-		width: 64,
-		height: 64,
-	},
-	orderNumber: {
-		flexDirection: 'row',
-		marginVertical: 3,
-	},
-	loadOrders: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		minWidth: 230,
-	},
-	loadMoreButton: {
-		width: '100%',
-		marginLeft: 'auto',
-		marginRight: 'auto',
-		borderRadius: 7.6
-	},
-});

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

@@ -3,57 +3,3 @@ import styled from 'styled-components/native'
 export const ActiveOrdersContainer = styled.View`
   margin-bottom: 20px;
 `
-
-export const Card = styled.TouchableOpacity`
-`
-
-export const Map = styled.View`
-  flex: 1;
-  height: 125px;
-  margin-bottom: 10px;
-`
-
-export const Information = styled.View`
-  flex-direction: row;
-  height: 100px;
-  align-items: center;
-  padding-vertical: 5px;
-`
-
-export const Logo = styled.View`
-	border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-`
-
-export const OrderInformation = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-  padding-left: 14px;
-`
-
-export const BusinessInformation = styled.View`
-	flex-basis: 65%;
-`
-
-export const Price = styled.View`
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-left: 10px;
-  width: 30%;
-`
-
-export const UnreadMessageCounter = styled.View`
-  justify-content: center;
-  align-items: center;
-  margin-left: 10px;
-  width: 24px;
-  height: 24px;
-  border-radius: 7.6px;
-  background-color: ${(props: any) => props.theme.colors.primaryContrast};
-`
-export const LoadMore = styled.View`
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 10px;
-`

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={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+					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, RefreshControl, StyleSheet, View } from 'react-native'
 import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
 import { Container } from '../../layouts/Container'
 import { AddressListParams } from '../../types'
@@ -27,7 +27,8 @@ const AddressListUI = (props: AddressListParams) => {
 		actionStatus,
 		isFromBusinesses,
 		isFromProductsList,
-		afterSignup
+		afterSignup,
+		loadAddresses
 	} = props
 
 	const theme = useTheme();
@@ -35,6 +36,7 @@ const AddressListUI = (props: AddressListParams) => {
 	const [orderState] = useOrder()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
+	const [refreshing] = useState(false);
 
 	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
 
@@ -121,6 +123,12 @@ const AddressListUI = (props: AddressListParams) => {
 		})
 	}
 
+	const handleOnRefresh = () => {
+		if (!addressList.loading) {
+			loadAddresses();
+		}
+	}
+
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
 
@@ -135,22 +143,26 @@ const AddressListUI = (props: AddressListParams) => {
 	}, [])
 
 	return (
-		<Container noPadding>
+		<Container 
+			noPadding
+			refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+		>
+			{isProfile && (
+				<NavBar
+					title={t('SAVED_PLACES', 'My saved places')}
+					titleAlign={'center'}
+					onActionLeft={goToBack}
+					showCall={false}
+					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+				/>
+			)}
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile || isProfile)) && (
 				<AddressListContainer>
-					{isProfile && (
-						<NavBar
-							title={t('MY_SAVED_PLACES', 'My saved places')}
-							titleAlign={'center'}
-							onActionLeft={() => goToBack()}
-							showCall={false}
-							btnStyle={{ paddingLeft: 0 }}
-							paddingTop={0}
-							isVertical
-							titleWrapStyle={{ paddingHorizontal: 0 }}
-							titleStyle={{ marginLeft: 0, marginRight: 0 }}
-						/>
-					)}
 					{
 						route &&
 						(
@@ -167,12 +179,12 @@ const AddressListUI = (props: AddressListParams) => {
 								showCall={false}
 								btnStyle={{ paddingLeft: 0 }}
 								paddingTop={0}
-								style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+								style={{ marginTop: Platform.OS === 'ios' ? 0 : 40 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>
 						)}
-					{addressList.loading && (
+					{addressList.loading && addressList?.addresses?.length === 0 && (
 						<>
 							{[...Array(5)].map((item, i) => (
 								<Placeholder key={i} style={{ paddingVertical: 20 }} Animation={Fade}>
@@ -261,6 +273,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=''