ordering-ui-react-native 0.17.36 → 0.17.37-release

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

@@ -33,8 +33,7 @@ export const NotificationIcon = styled.View`
 export const AcceptOrRejectOrder = styled.View`
   flex-direction: row;
   justify-content: space-between;
-  flex: 1;
-  margin: 10px;
+  margin: ${(props: any) => props.m ?? 10}px;
 `
 export const Timestatus = styled.View`
   position: relative;;
@@ -42,4 +41,33 @@ export const Timestatus = styled.View`
   height: 55px;
   border-radius: 20px;
   top: 5px;
-`
+`
+
+export const AccordionSection = styled.View`
+  background: #FFF;
+  padding-vertical: 10px;
+`
+
+export const Accordion = styled.TouchableOpacity`
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  paddingVertical: 0;
+  marginLeft: 3px;
+`
+
+export const ContentInfo = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow: hidden;
+`
+
+export const AccordionContent = styled.View`
+  overflow: hidden;
+`
+
+export const ProductOptionsList = styled.View`
+  margin-top: 20px;
+  margin-left: 20px;
+`

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

@@ -1,8 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { View, Animated } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, Animated, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useUtils, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 import {
   Accordion,
   AccordionSection,
@@ -34,8 +38,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ parsePrice }] = useUtils();
+  const [orientationState] = useDeviceOrientation();
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [isActive, setActiveState] = useState(false);
+  const [isReadMore, setIsReadMore] = useState(false);
+  const [lengthMore, setLengthMore] = useState(false);
 
   const productInfo = () => {
     if (isCartProduct) {
@@ -108,6 +116,10 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
     }
   }, []);
 
+  const onTextLayout = useCallback((e: any) => {
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
+  },[]);
+
   return (
     <AccordionSection>
       <Accordion
@@ -288,9 +300,21 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                   color={theme.colors.unselectText}>
                   {t('COMMENT', 'Comment')}
                 </OText>
-                <OText size={12} mLeft={10} color={theme.colors.unselectText}>
+                <OText
+                  size={12}
+                  style={{ width: '100%', paddingLeft: 10 }}
+                  color={theme.colors.unselectText}
+                  onTextLayout={onTextLayout}
+                  numberOfLines={isReadMore ? 15 : 2}
+                  ellipsizeMode="tail"
+                >
                   {product.comment}
                 </OText>
+                {lengthMore && (
+                  <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)} style={{ marginLeft: 10 }}>
+                    <OText size={10} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+                  </TouchableOpacity>
+                )}
               </ProductComment>
             )}
           </AccordionContent>

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

@@ -1,3 +1,5 @@
+
+
 import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,
@@ -39,7 +41,8 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     reviewState,
     setReviewState,
     actionState,
-    handleSendCustomerReview
+    handleSendCustomerReview,
+    handleCustomCustomerReview
   } = props
 
   const theme = useTheme()
@@ -58,7 +61,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     photoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -85,6 +88,18 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       marginBottom: 10,
       backgroundColor: theme.colors.lightGray
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 20
+    },
     inputTextArea: {
       borderColor: theme.colors.lightGray,
       borderRadius: 8,
@@ -96,11 +111,11 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   })
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('customer')
@@ -144,13 +159,24 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   }, [actionState.error])
 
   useEffect(() => {
-    if(scrollref?.current){
+    if (scrollref?.current) {
       Keyboard.addListener('keyboardDidShow', () => {
         scrollref.current.scrollToEnd()
       })
     }
   }, [scrollref?.current])
 
+  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
+
+  const handleReviewClick = () => {
+    handleCustomCustomerReview
+      ? handleCustomCustomerReview({
+        qualification: reviewState?.qualification,
+        comment: reviewState?.comment
+      })
+      : handleSendCustomerReview()
+  }
+
   return (
     <KeyboardAvoidingView
       enabled
@@ -165,18 +191,9 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       }}
     >
       <View>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          borderColor={theme.colors.clear}
-          iconStyle={{ width: 20, height: 16 }}
-          style={{
-            maxWidth: 40,
-            height: 20,
-            justifyContent: 'flex-end',
-            marginBottom: 20,
-          }}
-          onClick={() => closeModal()}
-        />
+        <TouchableOpacity onPress={() => closeModal()} style={styles.btnBackArrow}>
+          <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+        </TouchableOpacity>
         <OText
           size={20}
           weight="600"
@@ -206,20 +223,20 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               style={{ borderRadius: 7.6 }}
             />
           </View>
-          <OText
+          {!!customerName && <OText
             size={14}
             weight="500"
             style={{
               marginTop: 16
             }}
           >
-            {order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}
-          </OText>
+            {customerName}
+          </OText>}
         </CustomerInfoContainer>
         <OText
           size={12}
         >
-          {t('HOW_WAS_YOUR_CUSTOMER', 'How was your experience with _name_?').replace('_name_', `${order?.customer?.name} ${order?.customer?.middle_name} ${order?.customer?.lastname} ${order?.customer?.second_lastname}`)}
+          {customerName ? t('HOW_WAS_YOUR_CUSTOMER', 'How was your experience with _name_?').replace('_name_', customerName) : t('HOW_WAS_YOUR_NO_CUSTOMER', 'How was your experience?')}
         </OText>
         <RatingBarContainer>
           <LinearGradient
@@ -281,7 +298,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
               imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
               imgRightStyle={{ right: 5, margin: 5 }}
-              onClick={() => handleChangeComment(commentItem) }
+              onClick={() => handleChangeComment(commentItem)}
             />
           ))}
         </CommentsButtonGroup>
@@ -301,7 +318,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
       <ActionButtonWrapper>
         <FloatingButton
-          firstButtonClick={() => handleSendCustomerReview()}
+          firstButtonClick={() => handleReviewClick()}
           btnText={actionState.loading ? t('LOADING', 'Loading') : t('SEND_REVIEW', 'Send Review')}
           color={theme.colors.primary}
           widthButton={'100%'}
@@ -309,7 +326,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       </ActionButtonWrapper>
       <Alert
         open={alertState.open}
-        onAccept={() => setAlertState({  open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
         onClose={() => setAlertState({ open: false, content: [] })}
         content={alertState.content}
         title={t('ERROR', 'Error')}

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

@@ -149,10 +149,10 @@ const StoresListUI = (props: BusinessesListingParams) => {
             width={12}
             height={12}
             color={theme.colors.skyBlue}
-            style={{ marginRight: 5, marginTop: 3 }}
+            style={{ marginRight: 5 }}
           />
           <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to')}{' '}
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
           </OText>
           <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
             <OText size={12} color={theme.colors.skyBlue}>

package/themes/business/src/components/shared/OLink.tsx

@@ -12,10 +12,12 @@ interface Props {
   TextStyle?: TextStyle;
   type?: string;
   hasButton?: boolean;
+  numberOfLines?: number;
+  onTextLayout?: (e : any) => void;
 }
 
 const OLink = (props: Props): React.ReactElement => {
-  const { url, shorcut, color, PressStyle, TextStyle, type, hasButton } = props;
+  const { url, shorcut, color, PressStyle, TextStyle, type, hasButton, numberOfLines, onTextLayout } = props;
   const [, t] = useLanguage();
 
   const handleAlert = () =>
@@ -29,8 +31,19 @@ const OLink = (props: Props): React.ReactElement => {
       ],
     );
 
+  const handleInvalidNumberAlert = () =>
+    Alert.alert(
+      t('ERROR_OPENING_THE_LINK', 'Error opening the link'),
+      t('INVALID_NUMBER', 'Invalid number'),
+      [
+        {
+          text: t('OK', 'Ok'),
+        },
+      ],
+    );
+
   const handleOpenUrl = async (breakFunction = false) => {
-    if(breakFunction) {
+    if (breakFunction) {
       return
     }
     if (!url) {
@@ -40,8 +53,9 @@ const OLink = (props: Props): React.ReactElement => {
 
     try {
       const supported = await Linking.canOpenURL(url);
-
-      if (supported) {
+      if (url && url?.includes('tel:')) {
+        url?.includes('invalid') ? handleInvalidNumberAlert() : await Linking.openURL(url)
+      } else if (supported) {
         await Linking.openURL(url);
       } else {
         handleAlert();
@@ -57,20 +71,26 @@ const OLink = (props: Props): React.ReactElement => {
         <OButton
           onClick={() => handleOpenUrl()}
           text={shorcut} imgRightSrc=''
-          textStyle={{color: 'white'}}
-          style={{width: '100%', alignSelf: 'center', borderRadius: 10}}
+          textStyle={{ color: 'white' }}
+          style={{ width: '100%', alignSelf: 'center', borderRadius: 10 }}
         />
       ) : (
-      <OText
-        style={TextStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        color={color}>
-        {shorcut}
-      </OText>
+        <OText
+          style={TextStyle}
+          numberOfLines={numberOfLines ?? 1}
+          ellipsizeMode="tail"
+          color={color}
+          onTextLayout={onTextLayout}
+        >
+          {shorcut}
+        </OText>
       )}
     </Pressable>
   );
 };
 
+OLink.defaultProps = {
+  onTextLayout: (e: any) => {}
+};
+
 export default OLink;

package/themes/business/src/components/shared/OModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, StyleSheet, SafeAreaView, View } from 'react-native';
+import { Modal, StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import OIcon from './OIcon';
 import OText from './OText';
@@ -158,6 +158,18 @@ const OModal = (props: Props): React.ReactElement => {
       fontWeight: '600',
       textAlign: 'center',
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
+    },
   });
 
   return (
@@ -205,14 +217,9 @@ const OModal = (props: Props): React.ReactElement => {
             {!customClose && (
               <View style={styles.titleSection}>
                 <View style={styles.titleGroups}>
-                  <OIconButton
-                    icon={theme.images.general.arrow_left}
-                    iconStyle={{ width: 20, height: 20 }}
-                    borderColor={theme.colors.clear}
-                    style={styleCloseButton || styles.cancelBtn}
-                    onClick={onClose}
-                  />
-
+                  <TouchableOpacity onPress={() => onClose()} style={styles.btnBackArrow}>
+                    <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+                  </TouchableOpacity>
                   <OText
                     size={16}
                     style={styles.modalText}

package/themes/business/src/components/shared/OText.tsx

@@ -40,16 +40,22 @@ interface Props {
   numberOfLines?: number;
   ellipsizeMode?: string;
   adjustsFontSizeToFit?: boolean;
-  textDecorationLine?: string
+  textDecorationLine?: string;
+  lineHeight?: number;
+  onTextLayout?: (e : any) => void;
 }
 
 const OText = (props: Props): React.ReactElement => {
   return (
-    <SText {...props} style={props.style}>
+    <SText {...props} style={[props.style, { lineHeight: props.lineHeight }]} onTextLayout={props.onTextLayout}>
       {props.children}
       {props.space && ' '}
     </SText>
   );
 };
 
+OText.defaultProps = {
+  onTextLayout: (e: any) => {}
+};
+
 export default OText;

package/themes/business/src/types/index.tsx

@@ -23,6 +23,21 @@ export interface LoginParams {
   notificationState?: any;
   handleReCaptcha?: any;
   enableReCaptcha?: any;
+
+  otpType?: string,
+  setOtpType: (type: string) => void,
+  generateOtpCode: (values?: any) => void,
+  useLoginOtpEmail?: boolean,
+  useLoginOtpCellphone?: boolean,
+  useLoginOtp?: boolean
+}
+export interface otpParams {
+  willVerifyOtpState: boolean,
+  setWillVerifyOtpState: (val: boolean) => void,
+  onSubmit: () => void,
+  handleLoginOtp: (code: string) => void,
+  setAlertState: any,
+  formState?: any
 }
 export interface ProfileParams {
   navigation?: any;
@@ -297,6 +312,10 @@ export interface OrdersOptionParams {
   isLogisticActivated?: boolean;
   isAlsea?: boolean;
   checkNotification?: boolean;
+  ordersFormatted?: any;
+  handleChangeOrderStatus?: () => void;
+  handleSendCustomerReview?: () => void;
+  orderDetailsProps?: any;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -555,14 +574,17 @@ export interface AcceptOrRejectOrderParams {
   loading?: boolean;
   action: string;
   orderId?: number;
-  handleUpdateOrder?: (status: number, isAccept: any) => {};
+  handleUpdateOrder?: (p1: any, p2: any) => {};
   notShowCustomerPhone?: boolean | undefined;
-  actions?: actions;
+  actions?: any;
   titleAccept?: textTranslate;
   titleReject?: textTranslate;
   titleNotReady?: textTranslate;
   appTitle?: textTranslate;
   orderTitle?: any
+  isPage?: boolean
+  navigation?: any
+  route?: any
 }
 
 export interface MapViewParams {
@@ -584,8 +606,16 @@ export interface ReviewCustomerParams {
   actionState?: any,
   handleChangeQualification?: any,
   handleSendCustomerReview?: any,
+  handleCustomCustomerReview?: any,
 }
 
 export interface NoNetworkParams {
   image?: any;
 }
+
+export interface OrderDetailsLogisticParams {
+  navigation: any,
+  handleClickLogisticOrder: any,
+  orderAssingId: number,
+  order: any
+}

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

@@ -346,10 +346,53 @@ export const getOrderStatus = (s: string, t: any) => {
   return objectStatus && objectStatus;
 };
 
-export const transformDistance = (value : number, distanceUnit?: string) => {
+export const transformDistance = (value: number, distanceUnit?: string) => {
   return distanceUnit === 'mi'
     ? (value / 1.609).toFixed(2)
     : distanceUnit === 'ft'
       ? (value * 3280.84).toFixed(0)
       : (value).toFixed(2)
 }
+
+export const formatSeconds = (seconds: number) => {
+  // Hours, minutes and seconds
+  const hrs = Math.floor(seconds / 3600)
+  const mins = Math.floor((seconds % 3600) / 60)
+  const secs = Math.floor(seconds % 60)
+
+  // Output like '1:01' or '4:03:59' or '123:03:59'
+  let ret = ''
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+  }
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+  ret += '' + secs
+  return ret
+}
+
+export const calculateDistance = (
+  pointA: { lat: number; lng: number },
+  pointB: { latitude: number; longitude: number },
+) => {
+  const lat1 = pointA.lat;
+  const lon1 = pointA.lng;
+
+  const lat2 = pointB?.latitude;
+  const lon2 = pointB?.longitude;
+
+  const R = 6371e3;
+  const φ1 = lat1 * (Math.PI / 180);
+  const φ2 = lat2 * (Math.PI / 180);
+  const Δφ = (lat2 - lat1) * (Math.PI / 180);
+  const Δλ = (lon2 - lon1) * (Math.PI / 180);
+
+  const a =
+    Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+    Math.cos(φ1) * Math.cos(φ2) * (Math.sin(Δλ / 2) * Math.sin(Δλ / 2));
+
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  const distance = R * c;
+  const distanceInKm = distance / 1000;
+  return distanceInKm;
+};

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -20,6 +20,7 @@ const BusinessesListingUI = (props: any) => {
   const {
     navigation,
     businessesList,
+    paginationProps,
     handleBusinessClick,
   } = props;
 
@@ -78,7 +79,7 @@ const BusinessesListingUI = (props: any) => {
         </CardsContainer>
 
 
-        {!businessesList.loading && businessesList.businesses.length === 0 && (
+        {!businessesList.loading && businessesList.businesses.length === 0 && paginationProps.totalPages !== null && (
           <NotFoundSource
             content={t(
               'NOT_FOUND_BUSINESSES',

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

@@ -50,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions