ordering-ui-react-native 0.16.89 → 0.16.90-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,4 +1,6 @@
-import React, { useState, useEffect } from 'react'
+
+
+import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,
   useUtils,
@@ -10,7 +12,8 @@ import {
   View,
   StyleSheet,
   I18nManager,
-  TouchableOpacity
+  TouchableOpacity,
+  Keyboard
 } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { ReviewCustomerParams } from '../../types'
@@ -38,7 +41,8 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     reviewState,
     setReviewState,
     actionState,
-    handleSendCustomerReview
+    handleSendCustomerReview,
+    handleCustomCustomerReview
   } = props
 
   const theme = useTheme()
@@ -52,12 +56,12 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   const { top, bottom } = useSafeAreaInsets()
   const [comments, setComments] = useState<Array<any>>([])
   const [extraComment, setExtraComment] = useState('')
-
+  const scrollref = useRef<any>()
   const styles = StyleSheet.create({
     photoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -84,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,
@@ -95,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')
@@ -142,6 +158,25 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
   }, [actionState.error])
 
+  useEffect(() => {
+    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
@@ -156,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"
@@ -179,6 +205,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       <Content
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: 30 }}
+        ref={scrollref}
       >
         <CustomerInfoContainer>
           <View
@@ -196,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
@@ -270,8 +297,8 @@ 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={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-              onClick={() => handleChangeComment(commentItem) }
+              imgRightStyle={{ right: 5, margin: 5 }}
+              onClick={() => handleChangeComment(commentItem)}
             />
           ))}
         </CommentsButtonGroup>
@@ -291,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%'}
@@ -299,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/shared/ODropDown.tsx

@@ -4,6 +4,7 @@ import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
 import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View } from 'react-native'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Text } from 'react-native-paper';
 
 interface Props {
@@ -16,7 +17,11 @@ interface Props {
   dropViewMaxHeight?: any,
   isModal?: any,
   bgcolor?: string,
-  textcolor?: string
+  textcolor?: string,
+  handleClear?: any,
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -70,7 +75,11 @@ const ODropDown = (props: Props) => {
     placeholder,
     onSelect,
     dropViewMaxHeight,
-    isModal
+    isModal,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -82,6 +91,7 @@ const ODropDown = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -91,12 +101,25 @@ const ODropDown = (props: Props) => {
     setIsOpen(false)
   }
 
+  const handleClearSearch = () => {
+    handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -110,11 +133,22 @@ const ODropDown = (props: Props) => {
         >
           {selectedOption?.content || selectedOption?.name || placeholder}
         </SelectedLabel>
-        <FeatherIcon
-          name='chevron-down'
-          color={props.textcolor}
-          size={24}
-        />
+        {selectedOption && handleClear ? (
+          <AntDesign
+            name={'close'}
+            size={20}
+            onPress={() => handleClearSearch()}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+          />
+        ) : (
+          <FeatherIcon
+            name='chevron-down'
+            color={props.textcolor}
+            size={24}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+
+          />
+        )}
       </Selected>
       {isOpen && options && (
         <DropView
@@ -154,7 +188,7 @@ const ODropDown = (props: Props) => {
               maxHeight: dropViewMaxHeight || null,
               paddingBottom: 15
             }}
-            nestedScrollEnabled={true}
+              nestedScrollEnabled={true}
             >
               {options.map((option: any, index: number) => (
                 <CustomTouchableOpacity

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import styled, { css, useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
@@ -24,6 +24,10 @@ interface Props {
   handleChangeDate?: any,
   rangeDate?: any,
   isCalendarAlwaysVisible?: boolean
+  handleClear?: any;
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -96,7 +100,11 @@ const ODropDownCalendar = (props: Props) => {
     isCalendar,
     handleChangeDate,
     rangeDate,
-    isCalendarAlwaysVisible
+    isCalendarAlwaysVisible,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -110,6 +118,7 @@ const ODropDownCalendar = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -122,7 +131,7 @@ const ODropDownCalendar = (props: Props) => {
   const onDateChange = (date: any, type: any) => {
     if (!date) return
     if (type === 'END_DATE') {
-      handleChangeDate(rangeDate.from, date.format('MM/DD/YY'))
+      handleChangeDate(rangeDate.from, new Date(date.format('MM/DD/YY')) === rangeDate.from ? '' : date.format('MM/DD/YY'))
     } else {
       handleChangeDate(date.format('MM/DD/YY'), '')
     }
@@ -142,12 +151,31 @@ const ODropDownCalendar = (props: Props) => {
     return (from || to) ? (from + (to ? end : '')) : placeholder
   }
 
+  const handleClearCalendar = () => {
+    handleClear && handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
+  useEffect(() => {
+    if (rangeDate.to && rangeDate.from) {
+      onSelect('calendar')
+    }
+  }, [rangeDate.to, rangeDate.from])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -165,10 +193,11 @@ const ODropDownCalendar = (props: Props) => {
               : `${selectedOption?.content || selectedOption?.name || placeholder}`
           }
         </SelectedLabel>
-        <FeatherIcon
-          name='calendar'
-          color={theme.colors.backArrow}
-          size={24}
+        <AntDesign
+          name={selectedOption && handleClear ? 'close' : 'calendar'}
+          size={20}
+          onPress={() => handleClearCalendar()}
+          style={{ position: 'absolute', right: 12, top: 13 }}
         />
       </Selected>
       {isOpen && options && (

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;