ordering-ui-react-native 0.16.0 → 0.16.1-release

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

@@ -4,6 +4,7 @@ import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
 import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,28 +66,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -134,7 +134,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

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

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

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

@@ -395,7 +395,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         </View>
       </OSTable>
 
-      {order?.products?.length && (
+      {order?.products?.length > 0 && (
         <>
           <View
             style={{
@@ -598,7 +598,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     <>
       <Spinner visible={!order || Object.keys(order).length === 0} />
 
-      {order && Object.keys(order).length > 0 && (
+      {!!order && Object.keys(order).length > 0 && (
         <>
           <Container>
             <NavBar

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

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

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

@@ -107,7 +107,7 @@ const PaymentOptionsUI = (props: any) => {
 
   const handlePlaceOrder = () => {
     if (!userErrors.length) {
-      handlerClickPlaceOrder && handlerClickPlaceOrder();
+      handlerClickPlaceOrder && handlerClickPlaceOrder(null, { on_behalf_of: props.customerName });
       return;
     }
     let stringError = '';

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

@@ -82,6 +82,8 @@ export interface LoginParams {
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
   useRootPoint?: any;
+  enableReCaptcha?: boolean;
+  handleReCaptcha?: (vlaue: any) => void;
 }
 
 export interface ProductItemAccordionParams {

package/themes/original/index.tsx

@@ -15,6 +15,8 @@ import { BusinessProductsListing } from './src/components/BusinessProductsListin
 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';
@@ -30,6 +32,7 @@ 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 { MyOrders } from './src/components/MyOrders';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
@@ -45,6 +48,8 @@ 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';
@@ -54,16 +59,22 @@ 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 { OrderItAgain } from './src/components/OrderItAgain';
 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 { ProfessionalFilter } from './src/components/ProfessionalFilter';
+import { ProfessionalProfile } from './src/components/ProfessionalProfile';
+import { ServiceForm } from './src/components/ServiceForm';
+import { MomentSelector } from './src/components/MomentSelector';
 import { Cart } from './src/components/Cart';
 import { LanguageSelector } from './src/components/LanguageSelector';
 import { PhoneInputNumber } from './src/components/PhoneInputNumber'
@@ -164,6 +175,8 @@ export {
 	CartContent,
 	BusinessCart,
 	Checkout,
+	Favorite,
+	FavoriteList,
 	ForgotPasswordForm,
 	MomentOption,
 	OrdersOption,
@@ -182,6 +195,8 @@ export {
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	MultiCheckout,
+	MultiOrdersDetails,
 	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
@@ -205,16 +220,22 @@ export {
 	DriverTips,
 	UserDetails,
 	OrderSummary,
+	OrderItAgain,
 	CartStoresListing,
 	PaymentOptionsWebView,
 	GoogleMap,
 	SingleProductCard,
+	SingleOrderCard,
 	UpsellingRedirect,
 	ProductItemAccordion,
 	BusinessItemAccordion,
 	CouponControl,
 	TaxInformation,
 	PlaceSpot,
+	ProfessionalFilter,
+	ServiceForm,
+	ProfessionalProfile,
+	MomentSelector,
 	Cart,
 	LanguageSelector,
 	PhoneInputNumber,
@@ -234,6 +255,7 @@ export {
 	UserFormDetailsUI,
 	WalletTransactionItem,
 	Promotions,
+	MyOrders,
 	ORDER_TYPES,
 	USER_TYPE,
 

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;
-`