ordering-ui-react-native 0.12.51 → 0.12.55

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

@@ -187,7 +187,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   };
 
   const getOrderStatus = (key: number) => {
-    return orderStatus.find((status: any) => status.key === key)?.text;
+    return orderStatus.find((status: any) => status?.key === key)?.text;
   };
 
   const applyFilters = () => {
@@ -454,7 +454,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             currentTabSelected !== 'logisticOrders' &&
             (
               <PreviousOrders
-                orders={currentOrdersGroup.orders}
+                orders={currentOrdersGroup?.orders}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
@@ -464,7 +464,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             logisticOrders?.orders?.length > 0 &&
             currentTabSelected === 'logisticOrders' && (
               <PreviousOrders
-                orders={logisticOrders.orders.filter((order: any) => !order?.expired).map((order: any) => ({ ...order, isLogistic: true }))}
+                orders={logisticOrders?.orders?.filter((order: any) => !order?.expired).map((order: any) => ({ ...order, isLogistic: true }))}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickLogisticOrder={handleClickLogisticOrder}
@@ -528,13 +528,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             (currentOrdersGroup?.error?.length ||
               currentOrdersGroup?.orders?.length === 0)) ||
             (currentTabSelected === 'logisticOrders' &&
-              (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0))
+              (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0 || !logisticOrders?.orders?.some(order => !order?.expired)))
           ) &&
             (
               <NotFoundSource
                 content={
                   ((currentTabSelected !== 'logisticOrders' && !currentOrdersGroup?.error?.length) ||
-                    (currentTabSelected === 'logisticOrders' && !logisticOrders?.error?.length))
+                    (currentTabSelected === 'logisticOrders' && (!logisticOrders?.error?.length || (logisticOrders?.orders?.length > 0 && !logisticOrders?.orders?.some(order => !order?.expired)))))
                     ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
                     : currentOrdersGroup?.error?.[0]?.message ||
                     currentOrdersGroup?.error?.[0] ||

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

@@ -85,9 +85,9 @@ export const PreviousOrders = (props: any) => {
     <>
       {orders && orders?.length > 0 &&
         orders
-          .filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
-          .map((_order: any) => {
-            const order = _order?.isLogistic && !_order?.order_group ? _order?.order : _order
+          ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
+          ?.map((_order: any) => {
+            const order = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
             return (
               <View
                 style={{
@@ -116,9 +116,9 @@ export const PreviousOrders = (props: any) => {
                         </Logo>
                       )}
                     <Information>
-                      {order?.order_group && order?.order_group_id && (
+                      {order?.order_group_id && (
                         <OText>
-                          <OText>{order?.order_group?.orders?.length} {t('ORDERS', 'Orders')}</OText>
+                          <OText>{(t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id)}</OText>
                         </OText>
                       )}
                       {order.business?.name && (
@@ -140,7 +140,7 @@ export const PreviousOrders = (props: any) => {
                         numberOfLines={1}
                         adjustsFontSizeToFit
                         size={20}>
-                        {(order?.order_group && order?.order_group_id ? (t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id) : (t('INVOICE_ORDER_NO', 'Order No.') + order.id)) + ' · '}
+                        {(order?.order_group_id && order?.order_group && isLogisticOrder ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}` : (t('INVOICE_ORDER_NO', 'Order No.') + order.id)) + ' · '}
                         {order?.delivery_datetime_utc
                           ? parseDate(order?.delivery_datetime_utc)
                           : parseDate(order?.delivery_datetime, { utc: false })}
@@ -171,26 +171,41 @@ export const PreviousOrders = (props: any) => {
                 </TouchableOpacity>
                 {isLogisticOrder && (
                   <AcceptOrRejectOrder>
-                    <OButton
-                      text={t('REJECT', 'Reject')}
-                      onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                      bgColor={theme.colors.danger}
-                      borderColor={theme.colors.danger}
-                      imgRightSrc={null}
-                      style={{ borderRadius: 7, height: 40 }}
-                      parentStyle={{ width: '45%' }}
-                      textStyle={{ color: theme.colors.dangerText }}
-                    />
-                    <OButton
-                      text={t('ACCEPT', 'Accept')}
-                      onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                      bgColor={theme.colors.successOrder}
-                      borderColor={theme.colors.successOrder}
-                      imgRightSrc={null}
-                      style={{ borderRadius: 7, height: 40 }}
-                      parentStyle={{ width: '45%' }}
-                      textStyle={{ color: theme.colors.successText }}
-                    />
+                    {order?.order_group_id && order?.order_group ? (
+                      <OButton
+                        text={t('VIEW_ORDER', 'View order')}
+                        onClick={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
+                        bgColor={theme.colors.blueLight}
+                        borderColor={theme.colors.blueLight}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '100%' }}
+                        textStyle={{ color: theme.colors.primary }}
+                      />
+                    ) : (
+                    <>
+                      <OButton
+                        text={t('REJECT', 'Reject')}
+                        onClick={() => handleClickLogisticOrder(2, _order?.id)}
+                        bgColor={theme.colors.danger}
+                        borderColor={theme.colors.danger}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.dangerText }}
+                      />
+                      <OButton
+                        text={t('ACCEPT', 'Accept')}
+                        onClick={() => handleClickLogisticOrder(1, _order?.id)}
+                        bgColor={theme.colors.successOrder}
+                        borderColor={theme.colors.successOrder}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.successText }}
+                      />
+                    </>
+                    )}
                   </AcceptOrRejectOrder>
                 )}
               </View>

package/themes/single-business/src/components/Cart/index.tsx

@@ -339,7 +339,7 @@ const CartUI = (props: any) => {
           onClose={() => setOpenTaxModal({ open: false, data: null })}
           entireModal
         >
-          <TaxInformation data={openTaxModal.data} products={cart.products} />
+          <TaxInformation data={openTaxModal.data} products={cart?.products} />
         </OModal>
       </Container>
     )

package/themes/single-business/src/components/PhoneInputNumber/index.tsx

@@ -1,127 +1,118 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PhoneInput from "react-native-phone-number-input";
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useLanguage, useConfig } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
+
 import { Wrapper } from './styles'
 
 import { PhoneInputParams } from '../../types';
-import { OIcon, OText } from '../shared';
-import { transformCountryCode } from '../../utils'
+import { OText } from '../shared';
+import {transformCountryCode} from '../../utils'
+import {I18nManager} from 'react-native'
+import { useTheme } from 'styled-components/native';
 
 export const PhoneInputNumber = (props: PhoneInputParams) => {
-	const {
-		data,
-		handleData,
-		defaultValue,
-		defaultCode,
-		forwardRef,
-		textInputProps,
-		boxStyle,
-		inputStyle,
-		textStyle,
-		flagStyle,
-		noDropIcon
-	} = props
-
-	const theme = useTheme();
-
+  const {
+    data,
+    handleData,
+    defaultValue,
+    defaultCode,
+    forwardRef,
+    textInputProps
+  } = props
 
-	const style = StyleSheet.create({
-		input: {
-			backgroundColor: theme.colors.white,
-			borderRadius: 7.6,
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			paddingBottom: 0,
-			paddingTop: 0,
-			flexGrow: 1,
-			flex: 1,
-			height: 50,
-		},
-		countryBtn: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-			marginEnd: 9,
-		}
-	})
+  const theme = useTheme();
 
+  const style = StyleSheet.create({
+    input: {
+      backgroundColor: theme.colors.white,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      paddingVertical: 0,
+      flexGrow: 1,
+      flex: 1,
+      height: 50,
+    },
+    countryBtn: {
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 8,
+      marginEnd: 9,
+    }
+  })
 
-	const [, t] = useLanguage()
-	const [{ configs }] = useConfig()
-	const phoneInput = useRef<PhoneInput>(null);
-	const [userphoneNumber, setUserphoneNumber] = useState('');
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const phoneInput = useRef<PhoneInput>(null);
+  const [userphoneNumber, setUserphoneNumber] = useState('');
 
-	const handleChangeNumber = (number: any) => {
-		setUserphoneNumber(number)
-	}
+  const handleChangeNumber = (number: any) => {
+    setUserphoneNumber(number)
+  }
 
-	useEffect(() => {
-		if ((defaultValue && userphoneNumber) || defaultValue === undefined || defaultValue === '') {
-			if (userphoneNumber) {
-				const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
-				const callingCode = phoneInput.current?.getCallingCode();
-				const formattedNumber = phoneInput.current?.getNumberAfterPossiblyEliminatingZero();
-				const regex = /^[0-9]*$/
-				const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
-				const validNumber = regex.test(cellphone)
-				if ((!checkValid && formattedNumber?.number) || !validNumber) {
-					handleData && handleData({
-						...data,
-						error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
-					})
-					return
-				}
-				handleData && handleData({
-					...data,
-					error: '',
-					phone: {
-						country_phone_code: callingCode,
-						cellphone: formattedNumber?.number
-					}
-				})
-			} else {
-				handleData && handleData({
-					...data,
-					error: '',
-					phone: {
-						country_phone_code: null,
-						cellphone: null
-					}
-				})
-			}
-		}
-	}, [userphoneNumber])
+  useEffect(() => {
+    if((defaultValue && userphoneNumber) || !defaultValue){
+     if (userphoneNumber === '') return;
+      if (userphoneNumber) {
+        const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
+        const callingCode = phoneInput.current?.getCallingCode();
+        const formattedNumber = phoneInput.current?.getNumberAfterPossiblyEliminatingZero();
+        const regex = /^[0-9]*$/
+        const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
+        const validNumber = regex.test(cellphone)
+        if ((!checkValid && formattedNumber?.number) || !validNumber) {
+          handleData && handleData({
+            ...data,
+            error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
+          })
+          return
+        }
+        handleData && handleData({
+          ...data,
+          error: '',
+          phone: {
+            country_phone_code: callingCode,
+            cellphone: formattedNumber?.number
+          }
+        })
+      } else {
+        handleData && handleData({
+          ...data,
+          error: '',
+          phone: {
+            country_phone_code: null,
+            cellphone: null
+          }
+        })
+      }
+    }
+  }, [userphoneNumber])
 
-	return (
-		<Wrapper>
-			<PhoneInput
-				ref={phoneInput}
-				defaultValue={userphoneNumber || defaultValue}
-				defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
-				onChangeFormattedText={(text: string) => handleChangeNumber(text)}
-				withDarkTheme
-				countryPickerProps={{ withAlphaFilter: true }}
-				textContainerStyle={{ ...style.input, ...inputStyle ? inputStyle : {} }}
-				textInputStyle={textStyle}
-				codeTextStyle={textStyle}
-				flagButtonStyle={flagStyle}
-				countryPickerButtonStyle={{ ...style.countryBtn, ...boxStyle ? boxStyle : {} }}
-				placeholder={t('PHONE_NUMBER', 'Phone Number')}
-				textInputProps={{ autoCompleteType: 'tel', ref: forwardRef, ...textInputProps }}
-				containerStyle={{ width: '100%' }}
-				renderDropdownImage={noDropIcon ? <View /> : <OIcon src={theme.images.general.arrow_down} width={13} color={'#B1BCCC'}></OIcon>}
-			/>
-			{!!data?.error && (
-				<OText
-					size={16}
-					color={theme.colors.error}
-					style={{ textAlign: 'center', marginTop: 5 }}
-				>
-					{data.error}
-				</OText>
-			)}
-		</Wrapper>
-	)
+  return (
+    <Wrapper>
+      <PhoneInput
+        ref={phoneInput}
+        defaultValue={userphoneNumber || defaultValue}
+        defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
+        onChangeFormattedText={(text : string) => handleChangeNumber(text)}
+        withDarkTheme
+        textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}
+        countryPickerProps={{withAlphaFilter:true}}
+        textContainerStyle={style.input}
+        placeholder={t('PHONE_NUMBER', 'Phone Number')}
+        countryPickerButtonStyle={{ ...style.countryBtn }}
+        textInputProps={{autoCompleteType: 'tel', ref: forwardRef, ...textInputProps}}
+      />
+      {!!data?.error && (
+        <OText
+          size={16}
+          color={theme.colors.error}
+          style={{ textAlign: 'center', marginTop: 5 }}
+          >
+          {data.error}
+        </OText>
+      )}
+    </Wrapper>
+  )
 }

package/themes/single-business/src/components/UserDetails/index.tsx

@@ -1,134 +1,130 @@
-import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useEffect } from 'react';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import { UDContainer, UDHeader, UDForm, UDInfo, EditBtn } from './styles';
+import { UDContainer, UDHeader, UDInfo, } from './styles';
 
 import {
-	UserFormDetails as UserFormController,
-	useLanguage,
-	useSession,
+  UserFormDetails as UserFormController,
+  useLanguage,
+  useSession
 } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
+
+import { OText } from '../shared';
 
 import { UserFormDetailsUI } from '../UserFormDetails';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native';
 
 const UserDetailsUI = (props: any) => {
-	const {
-		isEdit,
-		formState,
-		cleanFormState,
-		cartStatus,
-		toggleIsEdit,
-		validationFields,
-		isUserDetailsEdit,
-		phoneUpdate,
-		togglePhoneUpdate
-	} = props
-
-	const theme = useTheme();
+  const {
+    isEdit,
+    formState,
+    cleanFormState,
+    cartStatus,
+    toggleIsEdit,
+    validationFields,
+    isUserDetailsEdit,
+    phoneUpdate,
+    togglePhoneUpdate,
+    isCheckout
+  } = props
 
-	const [, t] = useLanguage()
-	const [{ user }] = useSession()
-	const userData = props.userData || (!formState.result.error && formState.result?.result) || user
+  const theme = useTheme();
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+  const userData = props.userData || (!formState.result.error && formState.result?.result) || user
 
 
-	useEffect(() => {
-		if (isUserDetailsEdit) {
-			!isEdit && toggleIsEdit()
-		}
-	}, [isUserDetailsEdit])
+  useEffect(() => {
+    if (isUserDetailsEdit) {
+      !isEdit && toggleIsEdit()
+    }
+  }, [isUserDetailsEdit])
 
-	const toggleEditState = () => {
-		toggleIsEdit()
-		cleanFormState({ changes: {} })
-	}
+  const toggleEditState = () => {
+    toggleIsEdit()
+    cleanFormState({ changes: {} })
+  }
 
-	useEffect(() => {
-		if (user?.cellphone && !user?.country_phone_code) {
-			togglePhoneUpdate(true)
-		} else {
-			togglePhoneUpdate(false)
-		}
-	}, [user?.country_phone_code])
+  useEffect(() => {
+    if (user?.cellphone && !user?.country_phone_code) {
+      togglePhoneUpdate(true)
+    } else {
+      togglePhoneUpdate(false)
+    }
+  }, [user?.country_phone_code])
 
-	return (
-		<>
-			{(validationFields.loading || formState.loading) && (
-				<Placeholder Animation={Fade}>
-					<PlaceholderLine height={20} width={70} />
-					<PlaceholderLine height={15} width={60} />
-					<PlaceholderLine height={15} width={60} />
-					<PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
-				</Placeholder>
-			)}
+  return (
+    <>
+      {(validationFields.loading || formState.loading) && (
+        <Placeholder Animation={Fade}>
+          <PlaceholderLine height={20} width={70} />
+          <PlaceholderLine height={15} width={60} />
+          <PlaceholderLine height={15} width={60} />
+          <PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
+        </Placeholder>
+      )}
 
-			{!(validationFields.loading || formState.loading) && (
-				<UDContainer>
-					<UDHeader>
-						<OText size={16} lineHeight={24} weight={'500'}>
-							{t('CUSTOMER_DETAILS', 'Customer Details')}
-						</OText>
-						{cartStatus !== 2 && (
-							!isEdit ? (
-								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
-									<OIcon
-										src={theme.images.general.pencil}
-										width={16}
-										height={16}
-										color={theme.colors.editColor}
-										style={{ marginBottom: 10, marginLeft: 5 }}
-									/>
-								</EditBtn>
-							) : (
-								<EditBtn onPress={() => toggleEditState()} activeOpacity={0.7}>
-									<OIcon
-										src={theme.images.general.close}
-										color={theme.colors.cancelColor}
-										width={16}
-										height={16}
-										style={{ marginBottom: 5, marginLeft: 5 }}
-									/>
-								</EditBtn>
-							)
-						)}
-					</UDHeader>
+      {!(validationFields.loading || formState.loading) && (
+        <UDContainer>
+          <UDHeader>
+            <OText size={16}>
+              {t('CUSTOMER_DETAILS', 'Customer Details')}
+            </OText>
+            {cartStatus !== 2 && (
+              !isEdit ? (
+                <MaterialIcon
+                  name='pencil-outline'
+                  size={22}
+                  color={theme.colors.editColor}
+                  style={{ marginBottom: 10, marginLeft: 5 }}
+                  onPress={() => toggleIsEdit()}
+                />
+              ) : (
+                <MaterialIcon
+                  name='cancel'
+                  color={theme.colors.cancelColor}
+                  size={20}
+                  style={{ marginBottom: 5, marginLeft: 5 }}
+                  onPress={() => toggleEditState()}
+                />
+              )
+            )}
+          </UDHeader>
 
-					{!isEdit ? (
-						<UDInfo>
-							<OText size={12} lineHeight={18} weight={'400'}>
-								{userData?.name} {userData?.middle_name} {userData?.lastname} {userData?.second_lastname}
-							</OText>
-							<OText size={12} lineHeight={18} weight={'400'}>
-								{userData?.email}
-							</OText>
-							{!!(userData?.cellphone || user?.cellphone) && (
-								<>
-									<OText size={12} lineHeight={18} weight={'400'}>
-										{(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.cellphone)}
-									</OText>
-									{!!phoneUpdate && (
-										<OText color={theme.colors.error} style={{ textAlign: 'center' }}>{t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number')}</OText>
-									)}
-								</>
-							)}
-						</UDInfo>
-					) : (
-						<UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} />
-					)}
-				</UDContainer>
-			)}
-		</>
-	)
+          {!isEdit ? (
+            <UDInfo>
+              <OText size={12}>
+                {userData?.name} {userData?.middle_name} {userData?.lastname} {userData?.second_lastname}
+              </OText>
+              <OText size={12} numberOfLines={1}>
+                {userData?.email}
+              </OText>
+              {!!(userData?.cellphone || user?.cellphone) && (
+                <>
+                  <OText size={12}>
+                    {(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.cellphone)}
+                  </OText>
+                  {!!phoneUpdate && (
+                    <OText color={theme.colors.error} style={{ textAlign: 'center', width: '100%'}}>{t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number')}</OText>
+                  )}
+                </>
+              )}
+            </UDInfo>
+          ) : (
+            <UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} isCheckout={isCheckout} />
+          )}
+        </UDContainer>
+      )}
+    </>
+  )
 }
 
 export const UserDetails = (props: any) => {
-	const userDetailsProps = {
-		...props,
-		UIComponent: UserDetailsUI
-	}
+  const userDetailsProps = {
+    ...props,
+    UIComponent: UserDetailsUI
+  }
 
-	return <UserFormController {...userDetailsProps} />
+  return <UserFormController {...userDetailsProps} />
 }

package/themes/single-business/src/components/UserDetails/styles.tsx

@@ -1,15 +1,15 @@
-import styled, { css } from 'styled-components/native';
+import styled from 'styled-components/native';
 
 export const UDContainer = styled.View``
 
 export const UDHeader = styled.View`
+  display: flex;
   flex-direction: row;
   align-items: center;
 `
 
 export const UDForm = styled.View`
   width: 100%;
-  /* margin-top: 25px; */
 `
 
 export const UDInfo = styled.View`
@@ -17,10 +17,5 @@ export const UDInfo = styled.View`
   flex-direction: column;
   width: 100%;
   text-align: left;
+  align-items: flex-start;
 `
-export const EditBtn = styled.TouchableOpacity`
-	align-items: center;
-	justify-content: center;
-	padding-top: 9px;
-	width: 40px;
-`;