ordering-ui-react-native 0.15.45 → 0.15.47-release

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

@@ -6,8 +6,7 @@ import {
   StyleSheet,
   Animated,
   ScrollView,
-  Platform,
-  ImageBackground
+  ImageBackground,
 } from 'react-native'
 import {
   ProductForm as ProductOptions,
@@ -17,7 +16,6 @@ import {
   useUtils
 } from 'ordering-components/native'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import Spinner from 'react-native-loading-spinner-overlay'
 import { useTheme } from 'styled-components/native'
 
 import { ProductIngredient } from '../ProductIngredient'
@@ -32,12 +30,11 @@ import {
   ProductComment,
   ProductActions
 } from './styles'
-import { OButton, OImage, OInput, OText } from '../shared'
+import { OButton, OInput, OText } from '../shared'
 import { ProductOptionSubOption } from '../ProductOptionSubOption'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
-import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 
 export const ProductOptionsUI = (props: any) => {
   const {
@@ -56,7 +53,6 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeCommentState,
     productObject,
     onClose,
-    isFromCheckout,
     isDrawer
   } = props;
 
@@ -66,7 +62,6 @@ export const ProductOptionsUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ auth }] = useSession();
   const [orientationState] = useDeviceOrientation();
-  const [, { showCartBottomSheet }] = useCartBottomSheet();
 
   const { product, loading, error } = productObject;
 
@@ -87,6 +82,8 @@ export const ProductOptionsUI = (props: any) => {
   const handleSaveProduct = () => {
     const isErrors = Object.values(errors).length > 0
     if (!isErrors) {
+      props.onProductStateChange &&
+      props.onProductStateChange(props.isEdit ? { product, productCart }: productCart)
       handleSave && handleSave()
       return
     }
@@ -446,7 +443,7 @@ export const ProductOptionsUI = (props: any) => {
                     </WrapperIngredients>
                   </View>
                 )}
-                {product?.extras.map((extra: any) => extra.options.map((option: any) => {
+                {product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) => extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
                   const currentState = productCart.options[`id:${option.id}`] || {}
                   return (
                     <React.Fragment key={option.id}>
@@ -460,7 +457,7 @@ export const ProductOptionsUI = (props: any) => {
                             >
                               <WrapperSubOption style={{ backgroundColor: isError(option.id) }}>
                                 {
-                                  option.suboptions.map((suboption: any) => {
+                                  option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map((suboption: any) => {
                                     const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {}
                                     const balance = productCart.options[`id:${option.id}`]?.balance || 0
                                     return (
@@ -503,12 +500,14 @@ export const ProductOptionsUI = (props: any) => {
             </WrapContent>
           </View>
         )}
+
         {error && error.length > 0 && (
           <NotFoundSource
             content={error[0]?.message || error[0]}
           />
         )}
       </ScrollView>
+
       {!loading && !error && product && (
         <ProductActions>
           {productCart && !isSoldOut && maxProductQuantity > 0 && (

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

@@ -103,7 +103,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
     const pos = position ? `(${position})` : ''
-    return `${quantity} x ${name} ${pos} +${price}`
+    return `${quantity} x ${name} ${pos} ${price}`
   }
 
   /*useEffect(() => {
@@ -210,7 +210,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                             quantity: suboption.quantity,
                             name: suboption.name,
                             position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
+                            price: suboption.price > 0 ? `+${parsePrice(suboption.price)}` : parsePrice(suboption.price)
                           })}
                         </OText>
                       </ProductSubOption>

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

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

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

@@ -144,13 +144,15 @@ export const ProductOptionSubOptionUI = (props: any) => {
             </PositionControl>
           )
         }
+        {price > 0 && (
           <OText
             color="#909BA9"
             size={16}
             weight="bold"
           >
-            + {parsePrice(price)}
+          + {parsePrice(price)}
           </OText>
+        )}
       </RightSide>
     </Container>
   )

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

@@ -71,6 +71,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   }, [upsellingProducts.loading, upsellingProducts?.products.length])
 
   const handleFormProduct = (product: any) => {
+    if (props.onAddProduct) {
+      onClose && onClose()
+      props.onAddProduct(product)
+      return
+    }
     setActualProduct(product)
     setModalIsOpen(true)
   }
@@ -81,9 +86,18 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   }
 
   const UpsellingLayout = () => {
-
     const theme = useTheme()
 
+    const onClickProduct = (product: any) => {
+      resetInactivityTimeout()
+      if (props.onAddProduct) {
+        onClose && onClose()
+        props.onAddProduct(product)
+        return
+      }
+      handleFormProduct(product)
+    }
+
     return (
       <Container>
         {
@@ -167,10 +181,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                         style={{ height: 40, width: '100%' }}
                         bgColor="#EAF2FE"
                         borderColor="#EAF2FE"
-                        onClick={() => {
-                          resetInactivityTimeout()
-                          handleFormProduct(product)
-                        }}
+                        onClick={() => onClickProduct(product)}
                       />
                     </Item>
                   )) : (

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

@@ -55,6 +55,7 @@ export interface UpsellingProductsParams {
   setCanOpenUpselling?: (value: any) => void;
   onClose?: () => void;
   resetInactivityTimeout: any;
+  onAddProduct: any;
 }
 
 export interface LanguageSelectorParams {
@@ -472,6 +473,8 @@ export interface Cart {
   delivery_price_with_discount: number;
   total: number;
   clearInactivityTimeout: any;
+  taxes: Array<any>;
+  fees: Array<any>;
 }
 
 export interface NoNetworkParams {

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,11 +48,83 @@ 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  NavBar from './src/components/NavBar';
+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 {
@@ -66,11 +141,13 @@ import {
 	OAlert,
 	OModal,
 	OBottomPopup,
-  	HeaderTitle
+	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,
@@ -93,6 +170,8 @@ export {
 	CartContent,
 	BusinessCart,
 	Checkout,
+	Favorite,
+	FavoriteList,
 	ForgotPasswordForm,
 	MomentOption,
 	OrdersOption,
@@ -106,11 +185,13 @@ export {
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,
-  	Messages,
+	Messages,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	MultiCheckout,
+	MultiOrdersDetails,
 	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
@@ -130,6 +211,89 @@ export {
 	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,
+	MyOrders,
+	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,
@@ -146,11 +310,12 @@ export {
 	OAlert,
 	OModal,
 	OBottomPopup,
- 	HeaderTitle,
+	HeaderTitle,
 
 	// layout
 	Container,
 	SafeAreaContainer,
+	FloatingBottomContainer,
 	NavBar,
 
 	// utils

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
-	},
-});