ordering-ui-react-native 0.15.67 → 0.15.68-release

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

@@ -9,7 +9,7 @@ import {
 import {
 	PaymentOptions as PaymentOptionsController,
 	useLanguage,
-  ToastType,
+	ToastType,
 	useToast,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -30,6 +30,7 @@ import {
 	PMCardItemContent
 } from './styles'
 import { getIconCard, flatArray } from '../../utils';
+import { useApplePay } from '@stripe/stripe-react-native';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 const methodsPay = ['google_pay', 'apple_pay']
@@ -62,7 +63,8 @@ const PaymentOptionsUI = (props: any) => {
 	} = props
 
 	const theme = useTheme();
-  const [, { showToast }] = useToast();
+	const [, { showToast }] = useToast();
+	const { confirmApplePayPayment } = useApplePay()
 
 	const getPayIcon = (method: string) => {
 		switch (method) {
@@ -80,6 +82,8 @@ const PaymentOptionsUI = (props: any) => {
 				return theme.images.general.stripes
 			case 'stripe_redirect':
 				return theme.images.general.stripesb
+			case 'apple_pay':
+				return theme.images.general.applePayMark
 			default:
 				return theme.images.general.creditCard
 		}
@@ -98,18 +102,18 @@ const PaymentOptionsUI = (props: any) => {
 	// ]
 
 	const handlePaymentMethodClick = (paymethod: any) => {
-    if (cart?.balance > 0) {
-      const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
-      if (webViewPaymentGateway.includes(paymethod?.gateway)) {
-        handlePaymentMethodClickCustom(paymethod)
-      }
-      handlePaymethodClick(paymethod, isPopupMethod)
-      return
-    }
-    showToast(
+		if (cart?.balance > 0) {
+			const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+			if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+				handlePaymentMethodClickCustom(paymethod)
+			}
+			handlePaymethodClick(paymethod, isPopupMethod)
+			return
+		}
+		showToast(
 			ToastType.Error,
 			t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method'))
-		;
+			;
 	}
 
 	useEffect(() => {
@@ -134,39 +138,56 @@ const PaymentOptionsUI = (props: any) => {
 
 	useEffect(() => {
 		if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-		  handlePlaceOrder()
+			handlePlaceOrder(confirmApplePayPayment)
 		}
 	}, [paymethodData, paymethodSelected])
 
 	const renderPaymethods = ({ item }: any) => {
 		return (
-			<TouchableOpacity
-				onPress={() => handlePaymentMethodClick(item)}
-			>
-				<PMItem
-					key={item.id}
-					isDisabled={isDisabled}
-					isActive={paymethodSelected?.id === item.id}
-				>
-					<OIcon
-						src={getPayIcon(item.gateway)}
-						width={20}
-						height={20}
-						color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
-					/>
-					<OText
-						size={10}
-						style={{ margin: 0, marginTop: 4 }}
-						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+			<>
+				{item?.gateway === 'apple_pay' ? (
+					<TouchableOpacity
+						onPress={() => handlePaymentMethodClick(item)}
 					>
-						{t(item.gateway.toUpperCase(), item.name)}
-					</OText>
-				</PMItem>
-			</TouchableOpacity>
+						<OIcon
+							src={getPayIcon(item.gateway)}
+							width={70}
+							height={70}
+							style={{ marginRight: 10 }}
+						/>
+					</TouchableOpacity>
+				) : (
+					<TouchableOpacity
+						onPress={() => handlePaymentMethodClick(item)}
+					>
+						{console.log(item?.gateway)}
+						<PMItem
+							key={item.id}
+							isDisabled={isDisabled}
+							isActive={paymethodSelected?.id === item.id}
+						>
+							<OIcon
+								src={getPayIcon(item.gateway)}
+								width={20}
+								height={20}
+								color={item?.gateway === 'apple_pay' ? '' : paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+							/>
+							<OText
+								size={10}
+								style={{ margin: 0, marginTop: 4 }}
+								color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+							>
+								{t(item.gateway.toUpperCase(), item.name)}
+							</OText>
+						</PMItem>
+					</TouchableOpacity>
+				)}
+			</>
+
 		)
 	}
 
-	const excludeIds: any = [32]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>
@@ -214,7 +235,7 @@ const PaymentOptionsUI = (props: any) => {
 
 			{paymethodSelected?.gateway === 'cash' && (
 				<PaymentOptionCash
-					orderTotal={cart.total}
+					orderTotal={cart.balance ?? cart.total}
 					defaultValue={paymethodSelected?.data?.cash}
 					onChangeData={handlePaymethodDataChange}
 					setErrorCash={props.setErrorCash}

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

@@ -22,9 +22,8 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		textStyle,
 		flagStyle,
 		noDropIcon,
-		isDisabled,
-		isStartValidation,
-		changeCountry
+    isDisabled,
+		isStartValidation
 	} = props
 
 	const theme = useTheme();
@@ -59,7 +58,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 	}
 
 	useEffect(() => {
-		if ((defaultValue && userphoneNumber) || defaultValue === undefined || defaultValue === '') {
+		if ((defaultValue && userphoneNumber) || !defaultValue) {
 			if (userphoneNumber) {
 				const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
 				const callingCode = phoneInput.current?.getCallingCode();
@@ -107,16 +106,11 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 			)}
 			<PhoneInput
 				ref={phoneInput}
-				disabled={isDisabled}
+        disabled={isDisabled}
 				defaultValue={userphoneNumber || defaultValue}
-				defaultCode={defaultCode ?
-					!isNaN(defaultCode)
-						? transformCountryCode(defaultCode)
-						: defaultCode
-					: configs?.default_country_code?.value}
+				defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
 				onChangeFormattedText={(text: string) => handleChangeNumber(text)}
 				withDarkTheme
-				onChangeCountry={(country) => changeCountry?.(country)}
 				countryPickerProps={{ withAlphaFilter: true }}
 				textContainerStyle={{ ...style.input, ...inputStyle ? inputStyle : {} }}
 				textInputStyle={textStyle}

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

@@ -1,18 +1,13 @@
-import React, { useState } from 'react';
-import { useLanguage, useUtils } from 'ordering-components/native';
+import React from 'react';
+import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, TouchableOpacity, ScrollView, View } from 'react-native';
-import { OButton, OIcon, OText } from '../shared';
+import { View } from 'react-native';
+import { OButton } from '../shared';
 import {
-	Card,
-	Logo,
-	Information,
-	MyOrderOptions,
-	Status,
 	WrappButton,
 } from './styles';
 import { PreviousOrdersParams } from '../../types';
-import moment from 'moment';
+import { SingleOrderCard } from '../SingleOrderCard';
 
 export const PreviousOrders = (props: PreviousOrdersParams) => {
 	const {
@@ -24,152 +19,28 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 		handleReorder,
 		reorderLoading,
 		orderID,
+		handleUpdateOrderList
 	} = props;
 
 	const theme = useTheme();
 
-
-	const styles = StyleSheet.create({
-		logo: {
-			borderRadius: 10,
-			width: 64,
-			height: 64,
-		},
-		reorderbutton: {
-			height: 23,
-			paddingLeft: 10,
-			paddingRight: 10,
-			borderRadius: 23,
-			shadowOpacity: 0,
-			backgroundColor: theme.colors.primaryContrast,
-			borderWidth: 0,
-		},
-		reorderLoading: {
-			width: 80,
-			height: 40,
-			borderRadius: 10,
-		},
-		reviewButton: {
-			height: 23,
-			maxHeight: 23,
-			backgroundColor: theme.colors.white,
-			alignItems: 'center',
-			justifyContent: 'center',
-			paddingHorizontal: 10,
-			borderRadius: 23,
-			borderWidth: 1,
-			borderColor: theme.colors.primaryContrast,
-		},
-		buttonText: {
-			color: theme.colors.primary,
-			fontSize: 10,
-			marginLeft: 2,
-			marginRight: 2,
-		},
-	});
-
-
 	const [, t] = useLanguage();
-	const [reorderSelected, setReorderSelected] = useState<number | null>(null);
-	const [{ parseDate, optimizeImage }] = useUtils();
-	const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
-
-	const handleClickViewOrder = (uuid: string) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const handleClickOrderReview = (order: any) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('ReviewOrder', {
-				order: {
-					id: order?.id,
-					business_id: order?.business_id,
-					logo: order?.business?.logo,
-					driver: order?.driver,
-					products: order?.products,
-					review: order?.review,
-					user_review: order?.user_review
-				},
-			});
-	};
-
-	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 handleReorderClick = (id: number) => {
-		setReorderSelected(id);
-		handleReorder(id);
-	};
+  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
 	return (
 		<View style={{ marginBottom: 30 }}>
-			{orders.map((order: any) => (
-				<TouchableOpacity
-					onPress={() => handleClickViewOrder(order?.uuid)}
-					activeOpacity={0.7}
-					style={{ flexDirection: 'row' }}
-					key={order.id}>
-					<Card>
-						{!!order.business?.logo && (
-							<Logo>
-								<OIcon
-									url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-									style={styles.logo}
-								/>
-							</Logo>
-						)}
-						<Information>
-							<OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-								{order.business?.name}
-							</OText>
-							<OText
-								size={10}
-								lineHeight={15}
-								color={theme.colors.textSecondary}
-								style={{ marginVertical: 3 }}
-								numberOfLines={1}>
-								{order?.delivery_datetime_utc
-									? formatDate(order?.delivery_datetime_utc)
-									: formatDate(order?.delivery_datetime, { utc: false })}
-							</OText>
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								numberOfLines={1}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-						</Information>
-						<Status>
-							{order.cart && (
-								<OButton
-									text={t('REORDER', 'Reorder')}
-									imgRightSrc={''}
-									textStyle={styles.buttonText}
-									style={
-										reorderLoading && order.id === reorderSelected
-											? styles.reorderLoading
-											: styles.reorderbutton
-									}
-									onClick={() => handleReorderClick(order.id)}
-									isLoading={reorderLoading && order.id === reorderSelected}
-								/>
-							)}
-							{allowedOrderStatus.includes(parseInt(order?.status)) &&
-								!order.review && (
-									<TouchableOpacity
-										onPress={() => handleClickOrderReview(order)}
-										style={styles.reviewButton}>
-										<OText size={10} color={theme.colors.primary} numberOfLines={1}>
-											{t('REVIEW', 'Review')}
-										</OText>
-									</TouchableOpacity>
-								)}
-						</Status>
-					</Card>
-				</TouchableOpacity>
+			{orders.map((order: any, i: number) => (
+				<SingleOrderCard
+					key={i}
+					order={order}
+					reorderLoading={reorderLoading}
+					handleReorder={handleReorder}
+					onNavigationRedirect={onNavigationRedirect}
+					getOrderStatus={getOrderStatus}
+					pastOrders={pastOrders.includes(order?.status)}
+					handleUpdateOrderList={handleUpdateOrderList}
+				/>
 			))}
 			{pagination.totalPages && pagination.currentPage < pagination.totalPages && (
 				<WrappButton>