ordering-ui-react-native 0.14.70 → 0.14.73

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

@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
-import { OText } from '../shared'
+import { OText, OButton } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 
-import { OptionTitle } from './styles'
+import { OptionTitle, NoOrdersWrapper } from './styles'
 import { OrdersOptionParams } from '../../types'
 
 import {
@@ -32,6 +32,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadMoreStatus,
 		loadMoreOrders,
 		loadOrders,
+		setOrdersLength,
+		ordersLength
 	} = props
 
 	const theme = useTheme();
@@ -112,28 +114,50 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		}
 	}, [loadMoreStatus, loading, pagination])
 
+	useEffect(() => {
+		if (loading) return
+
+		const updateOrders = orders.filter((order: any) => orderStatus.includes(order.status))
+
+		if (activeOrders) {
+			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
+		} else if (!preOrders) {
+			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
+		}
+	}, [orders?.length])
+
 	return (
 		<>
-			{(orders.length > 0) && (
-				<>
-					<OptionTitle>
-						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-							{titleContent || (activeOrders
-								? t('ACTIVE', 'Active')
-								: preOrders
-									? t('PREORDERS', 'Preorders')
-									: t('PAST', 'Past'))}
-						</OText>
-					</OptionTitle>
-				</>
-			)}
-			{!loading && orders.length === 0 && (
+			<OptionTitle>
+				<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+					{titleContent || (activeOrders
+						? t('ACTIVE', 'Active')
+						: preOrders
+							? t('PREORDERS', 'Preorders')
+							: t('PAST', 'Past'))}
+				</OText>
+			</OptionTitle>
+			{!(activeOrders && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) && !loading && orders.length === 0 && (
 				<NotFoundSource
 					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
 					image={imageFails}
 					conditioned
 				/>
 			)}
+			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && activeOrders && (
+				<NoOrdersWrapper>
+					<OText size={14} numberOfLines={1}>
+						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
+					</OText>
+					<OButton
+						text={t('ORDER_NOW', 'Order now')}
+						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
+						textStyle={{ color: 'white', fontSize: 14 }}
+						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
+					/>
+					
+				</NoOrdersWrapper>
+			)}
 			{loading && (
 				<>
 					{!activeOrders ? (

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

@@ -3,3 +3,8 @@ import styled from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 `
+
+export const NoOrdersWrapper = styled.View`
+	flex-direction: column;
+	align-items: center;
+`

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

@@ -96,7 +96,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 	}, [userphoneNumber])
 
 	return (
-		<Wrapper>
+		<Wrapper onPress={() => forwardRef?.current?.focus?.()}>
 			<PhoneInput
 				ref={phoneInput}
         disabled={isDisabled}

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

@@ -1,3 +1,3 @@
 import styled from 'styled-components/native';
 
-export const Wrapper = styled.View``
+export const Wrapper = styled.Pressable``

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

@@ -4,7 +4,9 @@ import {
 	useSession,
 	useLanguage,
 	useOrder,
-	useUtils
+	useUtils,
+	ToastType,
+	useToast
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
@@ -13,11 +15,12 @@ import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import YoutubePlayer from "react-native-youtube-iframe"
+import { TextInput } from 'react-native'
 import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Button, Alert } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Platform, Button } from 'react-native';
 
 import {
 	WrapHeader,
@@ -54,6 +57,7 @@ export const ProductOptionsUI = (props: any) => {
 		productCart,
 		increment,
 		decrement,
+		handleChangeProductCartQuantity,
 		showOption,
 		maxProductQuantity,
 		errors,
@@ -65,6 +69,7 @@ export const ProductOptionsUI = (props: any) => {
 	} = props;
 
 	const theme = useTheme();
+	const [, { showToast }] = useToast()
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -236,6 +241,14 @@ export const ProductOptionsUI = (props: any) => {
 		setPlaying((prev) => !prev);
 	}, []);
 
+	const onChangeProductCartQuantity = (quantity: number) => {
+		if (quantity >= maxProductQuantity) {
+			showToast(ToastType.Error, t('MAX_QUANTITY', 'The max quantity is _number_').replace('_number_', maxProductQuantity))
+			return
+		}
+		handleChangeProductCartQuantity(quantity)
+	}
+
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
@@ -816,7 +829,7 @@ export const ProductOptionsUI = (props: any) => {
 				)}
 			</ScrollView>
 			{!loading && !error && product && (
-				<ProductActions>
+				<ProductActions ios={Platform?.OS === 'ios'}>
 					<OText size={16} lineHeight={24} weight={'600'}>
 						{productCart.total ? parsePrice(productCart?.total) : ''}
 					</OText>
@@ -835,14 +848,32 @@ export const ProductOptionsUI = (props: any) => {
 									}
 								/>
 							</TouchableOpacity>
-							<OText
-								size={12}
-								lineHeight={18}
-								style={{ minWidth: 40, textAlign: 'center' }}
-							>
-								{qtyBy?.pieces && productCart.quantity}
-								{qtyBy?.weight_unit && productCart.quantity * product?.weight}
-							</OText>
+							{qtyBy?.pieces && (
+								<TextInput
+									keyboardType='numeric'
+									value={`${productCart.quantity}` || ''}
+									onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
+									editable={!orderState.loading}
+									style={{
+										borderWidth: 1,
+										textAlign: 'center',
+										minWidth: 60,
+										borderRadius: 8,
+										borderColor: theme.colors.inputBorderColor,
+										height: 44,
+										marginHorizontal: 10
+									}}
+								/>
+							)}
+							{qtyBy?.weight_unit && (
+								<OText
+									size={12}
+									lineHeight={18}
+									style={{ minWidth: 40, textAlign: 'center' }}
+								>
+									{productCart.quantity * product?.weight}
+								</OText>
+							)}
 							<TouchableOpacity
 								onPress={increment}
 								disabled={

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

@@ -71,7 +71,7 @@ export const ProductActions = styled.View`
   position: absolute;
   bottom: 0px;
 	min-height: 70px;
-  padding-top: 12px;
+  padding-top: ${(props : any) => props.ios ? '20px' : '0'};
   padding-horizontal: 40px;
   width: 100%;
   flex-direction: row;

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

@@ -52,7 +52,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 	return (
-		<Container>
+		<Container onPress={() => handleSuboptionClick()}>
 			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 				{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 					state?.selected ? (

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
-export const Container = styled.View`
+export const Container = styled.TouchableOpacity`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;

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

@@ -135,14 +135,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			<FastImage
-				style={styles.productStyle}
-				source={{
-					uri: optimizeImage(product?.images, 'h_75,c_limit'),
-					priority: FastImage.priority.normal,
-				}}
-				resizeMode={FastImage.resizeMode.cover}
-			/>
+			{product?.images ? (
+				<FastImage
+					style={styles.productStyle}
+					source={{
+						uri: optimizeImage(product?.images, 'h_75,c_limit'),
+						priority: FastImage.priority.normal,
+					}}
+					resizeMode={FastImage.resizeMode.cover}
+				/>
+			) : (
+				<OIcon
+					src={theme?.images?.dummies?.product}
+					style={styles.productStyle}
+				/>
+			)}
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>

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

@@ -155,9 +155,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
           <TopActions onPress={() => onGoBack()}>
             <OIcon src={theme.images.general.arrow_left} width={15} />
           </TopActions>
-          <TopActions style={styles.cancelBtn} onPress={() => handleUpsellingPage()}>
-            <OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
-          </TopActions>
         </TopBar>
         <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
           <View style={{ paddingHorizontal: 40 }}>
@@ -178,7 +175,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
         <View
           style={{
             alignItems: 'center',
-            bottom: props.isPage ? 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
+            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
           }}
         >
           <OButton

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

@@ -5,7 +5,7 @@ import {
 	useLanguage,
 	ToastType,
 	useToast,
-  useConfig
+	useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm } from 'react-hook-form';
@@ -85,7 +85,7 @@ const ProfileListUI = (props: ProfileParams) => {
 		messageIconStyle: {
 			fontSize: 18,
 			fontWeight: 'bold',
-            marginEnd: 14
+			marginEnd: 14
 		}
 	});
 
@@ -99,7 +99,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
-  const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
@@ -136,7 +136,9 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	return (
 		<View style={{ flex: 1, height: height - top - bottom - 62 }}>
-			<OText size={24} color={theme.colors.textNormal} lineHeight={36} weight={Platform.OS === 'ios' ? '600' : 'bold'} style={{ marginTop: 14, marginBottom: 24, ...styles.pagePadding }}>{t('PROFILE', 'Profile')}</OText>
+			<OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
+				{t('PROFILE', 'Profile')}
+			</OText>
 			<CenterView style={styles.pagePadding}>
 				<View style={styles.photo}>
 					<OIcon
@@ -147,7 +149,7 @@ const ProfileListUI = (props: ProfileParams) => {
 					/>
 				</View>
 				<View style={{ flexBasis: '70%' }}>
-					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{`${user?.name} ${user?.lastname}`}</OText>
+					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{user?.name} {user?.lastname}</OText>
 					<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
 						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
 					</TouchableOpacity>
@@ -165,12 +167,12 @@ const ProfileListUI = (props: ProfileParams) => {
 						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MESSAGES', 'Messages')}</OText>
 					</ListItem>
-          {!isWalletEnabled && (
-            <ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
-              <Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
-              <OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
-            </ListItem>
-          )}
+					{isWalletEnabled && (
+						<ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+							<Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
+						</ListItem>
+					)}
 					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>

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

@@ -22,10 +22,10 @@ export const WalletTransactionItem = (props: any) => {
   const [{ parsePrice, parseDate }] = useUtils()
   const [, t] = useLanguage()
 
-  const LANG_EVENT_KEY = `WALLET_${type.toUpperCase()}_${item?.event.toUpperCase()}_${item?.event_type.toUpperCase()}_${item?.amount >= 0 ? 'POSITIVE': 'NEGATIVE'}`
+  const LANG_EVENT_KEY = `WALLET_${type.toUpperCase()}_${item?.event.toUpperCase()}_${item?.event_type.toUpperCase()}_${item?.amount >= 0 ? 'POSITIVE' : 'NEGATIVE'}`
   const lang_event_text = !!item?.event?.order_id
-    ? `:author ${item?.amount >= 0 ? 'add' : 'reduce'} money in Order No. :order_id`
-    : `:author ${item?.amount >= 0 ? 'add' : 'reduce'} money`
+    ? `:author${item?.amount >= 0 ? 'Add' : 'Reduce'} money in Order No. :order_id`
+    : `:author${item?.amount >= 0 ? 'Add' : 'Reduce'} money`
 
   return (
     <Container>
@@ -44,8 +44,8 @@ export const WalletTransactionItem = (props: any) => {
       <MessageBlock>
         <OText>
           {t(LANG_EVENT_KEY, lang_event_text)
-            .replace(':author', item?.event?.author?.name ?? '')
-            .replace(':order_id', item?.event?.order_id ?? '')}
+            .replace(':author', item?.event?.author?.name ? item?.event?.author?.name + ' ' : '')
+            .replace(':order_id', item?.event?.order_id ? item?.event?.order_id + ' ' : '')}
         </OText>
       </MessageBlock>
       {!!item?.description && (

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

@@ -27,7 +27,7 @@ export const BalanceElement = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: flex-end;
+  align-items: center;
   background-color: ${(props: any) => props.theme.colors.backgroundGray100};
   border-radius: 8px;
 `

package/themes/original/src/components/shared/OInput.tsx

@@ -37,9 +37,10 @@ interface Props extends TextInputProps {
 	vectorIconColor?: string;
 	forwardRef?: any;
 	inputStyle?: TextStyle;
+	wrapperRef?: any;
 }
 
-const Wrapper = styled.View`
+const Wrapper = styled.Pressable`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
 	border-radius: 25px;
 	border-width: 1px;
@@ -54,6 +55,7 @@ const Wrapper = styled.View`
 const OInput = (props: Props): React.ReactElement => {
 	return (
 		<Wrapper
+			onPress={() => props.forwardRef?.current?.focus?.()}
 			style={{
 				backgroundColor: props.bgColor,
 				borderColor: props.borderColor,
@@ -87,7 +89,9 @@ const OInput = (props: Props): React.ReactElement => {
 				returnKeyType={props.returnKeyType}
 				onSubmitEditing={props.onSubmitEditing}
 				blurOnSubmit={props.blurOnSubmit}
-				ref={props.forwardRef}
+				ref={(e : any) => {
+					props.forwardRef.current = e
+				}}
 				style={props?.inputStyle}
 			/>
 			{props.iconRight && (

package/themes/original/src/utils/index.tsx

@@ -195,4 +195,11 @@ export const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
   const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
   return R * c
+}
+
+export const formatUrlVideo = (url : string) => {
+  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/
+  const match = url.match(regExp)
+  const id = (match && match[7].length === 11) ? match[7] : false
+  return `https://www.youtube-nocookie.com/embed/${id}`
 }