ordering-ui-react-native 0.12.24 → 0.12.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.24",
+  "version": "0.12.28",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/ProductForm/index.tsx

@@ -131,22 +131,29 @@ export const ProductOptionsUI = (props: any) => {
                   </Placeholder>
                 ) : (
                   <>
-                    <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1 }}>{product?.name || productCart.name}</OText>
-                    <OText size={20} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+                    <View style={{ flexDirection: 'column', width: '100%' }}>
+                      <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{'price'}</OText>
+                      <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 }}>
+                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+                        <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>
+                          {
+                            ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+                            && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+                          }
+                          {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+                            <>&nbsp;&#183;&nbsp;</>
+                          )}
+                          {product?.estimated_person
+                            && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+                          }
+                        </OText>
+                      </View>
+                    </View>
                   </>
                 )}
               </ProductTitle>
               <ProductDescription>
                 <OText>{product?.description || productCart?.description}</OText>
-                {(
-                  (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-                  (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-                ) && (
-                    <>
-                      <OText size={20}>{t('SKU', 'Sku')}</OText>
-                      <OText>{product?.sku || productCart?.sku}</OText>
-                    </>
-                  )}
               </ProductDescription>
               {loading && !product ? (
                 <>

package/themes/business/index.tsx

@@ -27,6 +27,7 @@ import { PhoneInputNumber } from './src/components/PhoneInputNumber';
 import { PreviousMessages } from './src/components/PreviousMessages';
 import { PreviousOrders } from './src/components/PreviousOrders';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
+import { ReviewCustomer } from './src/components/ReviewCustomer'
 import { SearchBar } from './src/components/SearchBar';
 import { SignupForm } from './src/components/SignupForm';
 import { StoresList } from './src/components/StoresList';
@@ -91,6 +92,7 @@ export {
   PreviousMessages,
   PreviousOrders,
   ProductItemAccordion,
+  ReviewCustomer,
   SafeAreaContainerLayout,
   SearchBar,
   SignupForm,

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

@@ -25,9 +25,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     closeModal,
     orderId,
     notShowCustomerPhone,
-    titleAccept,
-    titleReject,
-    titleNotReady,
+    orderTitle,
     appTitle,
   } = props;
 
@@ -45,7 +43,9 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const phoneNumber = customerCellphone;
   let codeNumberPhone, numberPhone, numberToShow;
   const { top, bottom } = useSafeAreaInsets()
-
+  const titleOrder = t(orderTitle[action].key, orderTitle[action].text)
+  const buttonText = t(orderTitle[action].btnKey, orderTitle[action].btnText)
+  const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady'].includes(action)
   const handleFocus = () => {
     viewRef?.current?.measure((x: any, y: any) => {
       scrollViewRef?.current?.scrollTo({ x: 0, y });
@@ -112,7 +112,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
       openTimerIOnput();
     }
 
-    if (actions && (action === 'reject' || action === 'failed' || action === 'notReady')) {
+    if (actions && showTextArea) {
       openTextTareaOInput();
     }
   }, []);
@@ -179,7 +179,11 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         comment: comments,
         status: 6,
       },
-      failedByDriver: {
+      pickupFailedByDriver: {
+        comment: comments,
+        status: 10
+      },
+      deliveryFailedByDriver: {
         comment: comments,
         status: 12
       },
@@ -195,8 +199,11 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     if (actions && action === 'reject') {
       bodyToSend = orderStatus[actions.reject];
     }
-    if (actions && action === 'failed') {
-      bodyToSend = orderStatus[actions.failed]
+    if (actions && action === 'pickupFailed') {
+      bodyToSend = orderStatus[actions.pickupFailed]
+    }
+    if (actions && action === 'deliveryFailed') {
+      bodyToSend = orderStatus[actions.deliveryFailed]
     }
     if (actions && action === 'notReady') {
       bodyToSend = orderStatus[actions.notReady]
@@ -233,11 +240,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             fontStyle: 'normal',
           }}
           weight="600">
-          {action === 'accept'
-            ? `${t(titleAccept?.key, titleAccept?.text)}:`
-            : action === 'notReady'
-              ? t(titleNotReady?.key, titleNotReady?.text)
-              : t(titleReject?.key, titleReject?.text)}
+          {titleOrder}
         </OText>
       </View>
       <Content showsVerticalScrollIndicator={false} ref={scrollViewRef}>
@@ -362,11 +365,11 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           onEndEditing={handleFixTime}
         />
 
-        {(['failed', 'reject', 'notReady']?.includes(action)) && (
+        {showTextArea && (
           <Comments ref={viewRef}>
             <OTextarea
               textTareaRef={textTareaRef}
-              autoFocus={actions && (action === 'reject' || action === 'failed' || action === 'notReady')}
+              autoFocus
               onFocus={handleFocus}
               placeholder={t(
                 'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',
@@ -385,13 +388,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           firstButtonClick={() => {
             handleAcceptOrReject();
           }}
-          btnText={
-            action === 'accept'
-              ? t('ACCEPT', 'Accept')
-              : action === 'notReady'
-                ? t('ORDER_NOT_READY', 'Order not ready')
-                : t('REJECT', 'Reject')
-          }
+          btnText={buttonText}
           color={action === 'accept' ? theme.colors.green : theme.colors.red}
           widthButton={'100%'}
         />

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

@@ -574,6 +574,7 @@ const LoginFormUI = (props: LoginParams) => {
                 forwardRef={inputRef}
                 onChange={(val: any) => onChange(val)}
                 returnKeyType="done"
+                onSubmitEditing={() => handleLogin()}
                 blurOnSubmit
               />
             )}

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -48,9 +48,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     updateDriverPosition,
     driverUpdateLocation,
     setDriverUpdateLocation,
-    titleAccept,
-    titleReject,
-    titleNotReady,
+    orderTitle,
     appTitle,
   } = props;
 
@@ -343,9 +341,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 orderId={order?.id}
                 notShowCustomerPhone
                 actions={actions}
-                titleAccept={titleAccept}
-                titleReject={titleReject}
-                titleNotReady={titleNotReady}
+                orderTitle={orderTitle}
                 appTitle={appTitle}
               />
             </OModal>
@@ -391,7 +387,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 handleChangeOrderStatus && handleChangeOrderStatus(9)
               }
               firstButtonClick={() =>
-                handleViewActionOrder && handleViewActionOrder('failed')
+                handleViewActionOrder && handleViewActionOrder('pickupFailed')
               }
               secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
               secondButton={true}
@@ -410,7 +406,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   handleChangeOrderStatus && handleChangeOrderStatus(11)
                 }
                 firstButtonClick={() =>
-                  handleViewActionOrder && handleViewActionOrder('failed')
+                  handleViewActionOrder && handleViewActionOrder('deliveryFailed')
                 }
                 secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
                 secondButton={true}

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Platform, StyleSheet, View } from 'react-native';
 
-import { OText, OLink } from '../shared'
+import { OButton, OText, OLink, OModal } from '../shared'
 import {
     OrderContent,
     OrderBusiness,
@@ -23,7 +23,7 @@ import {
     useConfig,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-
+import { ReviewCustomer } from '../ReviewCustomer'
 
 interface OrderContent {
     order: any
@@ -37,6 +37,10 @@ export const OrderContentComponent = (props: OrderContent) => {
 
     const [{ parsePrice, parseNumber }] = useUtils();
     const [{ configs }] = useConfig();
+    const [openReviewModal, setOpenReviewModal] = useState(false)
+    const [isCustomerReviewed, setIsCustomerReviewed] = useState(false)
+
+    const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
     const styles = StyleSheet.create({
         linkWithIcons: {
@@ -51,8 +55,18 @@ export const OrderContentComponent = (props: OrderContent) => {
         },
         textLink: {
           color: '#365CC7'
+        },
+        btnReview: {
+          borderWidth: 0,
+          backgroundColor: theme.colors.primary,
+          borderRadius: 8,
         }
     })
+
+    const handleSuccessReviewed = () => {
+      setOpenReviewModal(false)
+      setIsCustomerReviewed(true)
+    }
     return (
         <OrderContent>
         <OrderBusiness>
@@ -232,6 +246,16 @@ export const OrderContentComponent = (props: OrderContent) => {
               {order?.customer?.zipcode}
             </OText>
           )}
+
+          {!order?.user_review && pastOrderStatuses.includes(order?.status) && !isCustomerReviewed && (
+            <OButton
+              style={styles.btnReview}
+              textStyle={{ color: theme.colors.white }}
+              text={t('REVIEW_CUSTOMER', 'Review customer')}
+              imgRightSrc={false}
+              onClick={() => setOpenReviewModal(true)}
+            />
+          )}
         </OrderCustomer>
 
         <OrderProducts>
@@ -386,6 +410,19 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           </Total>
         </OrderBill>
+
+        <OModal
+          open={openReviewModal}
+          onClose={() => setOpenReviewModal(false)}
+          entireModal
+          customClose
+        >
+          <ReviewCustomer
+            order={order}
+            closeModal={() => setOpenReviewModal(false)}
+            onClose={() => handleSuccessReviewed()}
+          />
+        </OModal>
       </OrderContent>
     )
 }

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

@@ -42,10 +42,11 @@ export const OrdersOptionDate = (props: any) => {
         bgcolor={theme.colors.inputDisabled}
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_DATE', 'Select Date')}
-        dropViewMaxHeight={500}
+        dropViewMaxHeight={220}
         isCalendar
         rangeDate={search.date}
         handleChangeDate={handleChangeDate}
+        isCalendarAlwaysVisible
       />
     </Container>
   );

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

@@ -0,0 +1,314 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  useUtils,
+  ReviewCustomer as ReviewCustomerController
+} from 'ordering-components/native'
+import {
+  KeyboardAvoidingView,
+  Platform,
+  View,
+  StyleSheet,
+  I18nManager,
+  TouchableOpacity
+} from 'react-native'
+import { useTheme } from 'styled-components/native'
+import { ReviewCustomerParams } from '../../types'
+import { OButton, OText, OIconButton, OIcon, OInput } from '../shared'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { FloatingButton } from '../FloatingButton'
+import LinearGradient from 'react-native-linear-gradient'
+import Alert from '../../providers/AlertProvider'
+
+import {
+  Content,
+  ActionButtonWrapper,
+  CustomerInfoContainer,
+  RatingBarContainer,
+  RatingTextContainer,
+  CommentsButtonGroup
+} from './styles'
+
+const ReviewCustomerUI = (props: ReviewCustomerParams) => {
+  const {
+    order,
+    closeModal,
+    reviewState,
+    setReviewState,
+    actionState,
+    handleChangeQualification,
+    handleSendCustomerReview
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [alertState, setAlertState] = useState<{
+    open: boolean;
+    content: Array<string>;
+    key?: string | null;
+  }>({ open: false, content: [] })
+  const { top, bottom } = useSafeAreaInsets()
+  const [comments, setComments] = useState<Array<any>>([])
+  const [extraComment, setExtraComment] = useState('')
+
+  const styles = StyleSheet.create({
+    photoWrapper: {
+      shadowColor: theme.colors.black,
+      shadowRadius: 3,
+      shadowOffset: {width: 1, height: 4},
+      elevation: 3,
+      borderRadius: 8,
+      shadowOpacity: 0.1,
+      overflow: 'hidden'
+    },
+    statusBar: {
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+      height: 8,
+      borderRadius: 5,
+      marginTop: 5
+    },
+    ratingItemContainer: {
+      position: 'absolute',
+      top: -18
+    },
+    ratingItem: {
+      left: '-50%',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    ratingLineStyle: {
+      height: 8,
+      width: 1,
+      marginBottom: 10,
+      backgroundColor: theme.colors.lightGray
+    },
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    }
+  })
+
+  const qualificationList = [
+    { 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 }
+  ]
+
+  const commentsList = [
+    { key: 0, content: t('RESPECTFUL', 'Respectful') },
+    { key: 1, content: t('EXCELLENT_COMMUNICATION', "Excellent communication") },
+    { key: 2, content: t('CORDIAL_SERVICE', 'Cordial service') }
+  ]
+  const isSelectedComment = (commentKey: number) => {
+    const found = comments.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleChangeComment = (commentItem: any) => {
+    const found = comments.find((comment: any) => comment?.key === commentItem.key)
+    if (found) {
+      const _comments = comments.filter((comment: any) => comment?.key !== commentItem.key)
+      setComments(_comments)
+    } else {
+      setComments([...comments, commentItem])
+    }
+  }
+
+  useEffect(() => {
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map((comment: any) => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    setReviewState({ ...reviewState, comment: _comment })
+  }, [comments, extraComment])
+
+  useEffect(() => {
+    if (!actionState.error) return
+    setAlertState({
+      open: true,
+      content: actionState.error
+    })
+
+  }, [actionState.error])
+
+  return (
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{
+        flex: 1,
+        paddingHorizontal: 30,
+        paddingTop: 28,
+        marginTop: top,
+        marginBottom: bottom,
+        justifyContent: 'space-between'
+      }}
+    >
+      <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()}
+        />
+        <OText
+          size={20}
+          weight="600"
+        >
+          {t('REVIEW_CUSTOMER', 'Review customer')}
+        </OText>
+      </View>
+
+      <Content
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: 30 }}
+      >
+        <CustomerInfoContainer>
+          <View
+            style={{
+              ...styles.photoWrapper,
+              backgroundColor: theme.colors.white,
+              padding: !order?.customer?.photo ? 5 : 0
+            }}
+          >
+            <OIcon
+              url={optimizeImage(order?.customer?.photo, 'h_100,c_limit')}
+              src={!order?.customer?.photo && theme.images.general.user}
+              width={72}
+              height={72}
+              style={{ borderRadius: 7.6 }}
+            />
+          </View>
+          <OText
+            size={14}
+            weight="500"
+            style={{
+              marginTop: 16
+            }}
+          >
+            {order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}
+          </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}`)}
+        </OText>
+        <RatingBarContainer>
+          <LinearGradient
+            start={{ x: 0.0, y: 0.0 }}
+            end={{ x: qualificationList[reviewState?.qualification - 1]?.percent || 0, y: 0 }}
+            locations={[.9999, .9999]}
+            colors={[theme.colors.primary, theme.colors.tabBar]}
+            style={styles.statusBar}
+          />
+          <RatingTextContainer>
+            {qualificationList.map((qualification: any) => (
+              <View
+                key={qualification.key}
+                style={{ ...qualification.parentStyle, ...styles.ratingItemContainer }}
+              >
+                <TouchableOpacity
+                  style={qualification.isInnerStyle && styles.ratingItem}
+                  onPress={() => handleChangeQualification(qualification.key)}
+                >
+                  <View
+                    style={{
+                      ...styles.ratingLineStyle,
+                      backgroundColor: (qualification.pointerColor && !(reviewState?.qualification >= qualification.key)) ? theme.colors.dusk : 'transparent'
+                    }}
+                  />
+                  <OText
+                    size={12}
+                    color={
+                      reviewState?.qualification === qualification.key
+                        ? theme.colors.darkText
+                        : theme.colors.lightGray
+                    }
+                  >
+                    {qualification.text}
+                  </OText>
+                </TouchableOpacity>
+              </View>
+            ))}
+          </RatingTextContainer>
+        </RatingBarContainer>
+        <OText
+          size={12}
+          style={{ marginTop: 30 }}
+        >
+          {t('COMMENTS', 'Comments')}
+        </OText>
+        <CommentsButtonGroup>
+          {commentsList.map(commentItem => (
+            <OButton
+              key={commentItem.key}
+              text={commentItem.content}
+              bgColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.tabBar}
+              borderColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.tabBar}
+              textStyle={{
+                color: isSelectedComment(commentItem.key) ? theme.colors.white : theme.colors.darkText,
+                fontSize: 12,
+                paddingRight: isSelectedComment(commentItem.key) ? 15 : 0
+              }}
+              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) }
+            />
+          ))}
+        </CommentsButtonGroup>
+        <OText
+          size={12}
+          style={{ marginTop: 30 }}
+        >
+          {t('REVIEW_COMMENT_QUESTION', 'Do you want to add something?')}
+        </OText>
+        <OInput
+          name='comments'
+          onChange={(val: any) => setExtraComment(val.target.value)}
+          style={styles.inputTextArea}
+          multiline
+        />
+      </Content>
+
+      <ActionButtonWrapper>
+        <FloatingButton
+          firstButtonClick={() => handleSendCustomerReview()}
+          btnText={actionState.loading ? t('LOADING', 'Loading') : t('SEND_REVIEW', 'Send Review')}
+          color={theme.colors.primary}
+          widthButton={'100%'}
+        />
+      </ActionButtonWrapper>
+      <Alert
+        open={alertState.open}
+        onAccept={() => setAlertState({  open: false, content: [] })}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        content={alertState.content}
+        title={t('ERROR', 'Error')}
+      />
+    </KeyboardAvoidingView>
+  )
+}
+
+export const ReviewCustomer = (props: any) => {
+  const reviewCustomerProps = {
+    ...props,
+    UIComponent: ReviewCustomerUI
+  }
+  return <ReviewCustomerController {...reviewCustomerProps} />
+}

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const Content = styled.ScrollView`
+  background-color: ${(props: any) => props.theme.colors.white};
+  margin-bottom: 30px;
+`;
+export const ActionButtonWrapper = styled.View`
+  margin-bottom: 10px;
+`
+export const CustomerInfoContainer = styled.View`
+  flex-direction: column;
+  align-items: center;
+  margin: 25px 0;
+`
+export const RatingBarContainer = styled.View`
+  margin-top: 13px;
+  margin-bottom: 25px;
+`
+export const RatingTextContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+`
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+`

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

@@ -22,7 +22,8 @@ interface Props {
   textcolor?: string,
   isCalendar?: boolean,
   handleChangeDate?: any,
-  rangeDate?: any
+  rangeDate?: any,
+  isCalendarAlwaysVisible?: boolean
 }
 
 const Wrapper = styled.View`
@@ -94,7 +95,8 @@ const ODropDownCalendar = (props: Props) => {
     isModal,
     isCalendar,
     handleChangeDate,
-    rangeDate
+    rangeDate,
+    isCalendarAlwaysVisible
   } = props
 
   const theme = useTheme();
@@ -127,13 +129,13 @@ const ODropDownCalendar = (props: Props) => {
   }
 
   const customDayHeaderStylesCallback = () => {
-		return {
-			textStyle: {
-				color: theme.colors.unselectText,
-				fontSize: 12,
-			},
-		};
-	};
+    return {
+      textStyle: {
+        color: theme.colors.unselectText,
+        fontSize: 12,
+      },
+    };
+  };
 
   const calendarText = (from: any, to: any, placeholder: any) => {
     const end = ` ~ ${to}`
@@ -204,9 +206,9 @@ const ODropDownCalendar = (props: Props) => {
             </ScrollView>
           ) : (
             <CustomScrollView style={{
-              maxHeight: dropViewMaxHeight || null
+              maxHeight: dropViewMaxHeight || null,
             }}
-            nestedScrollEnabled={true}
+              nestedScrollEnabled={true}
             >
               {options.map((option: any, index: number) => (
                 <CustomTouchableOpacity
@@ -243,8 +245,8 @@ const ODropDownCalendar = (props: Props) => {
                     alignItems: 'center',
                     marginTop: 10
                   }}>
-                    <View style={{marginRight: 10, flex: 1, marginBottom: 15}}>
-                      <Text style={{marginBottom: 5}}>{t('FROM', 'From')}</Text>
+                    <View style={{ marginRight: 10, flex: 1, marginBottom: 15 }}>
+                      <Text style={{ marginBottom: 5 }}>{t('FROM', 'From')}</Text>
                       <DateInput
                         value={rangeDate.from}
                         placeholder={t('FROM', 'From')}
@@ -259,12 +261,12 @@ const ODropDownCalendar = (props: Props) => {
                         name='close'
                         color={theme.colors.disabled}
                         size={20}
-                        style={{position: 'absolute', bottom: 13, right: 10}}
+                        style={{ position: 'absolute', bottom: 13, right: 10 }}
                         onPress={() => handleChangeDate('', rangeDate.to)}
                       />
                     </View>
-                    <View style={{marginLeft: 10, flex: 1, marginBottom: 15}}>
-                      <Text style={{marginBottom: 5}}>{t('TO', 'To')}</Text>
+                    <View style={{ marginLeft: 10, flex: 1, marginBottom: 15 }}>
+                      <Text style={{ marginBottom: 5 }}>{t('TO', 'To')}</Text>
                       <DateInput
                         value={rangeDate.to}
                         placeholder={t('TO', 'To')}
@@ -279,13 +281,13 @@ const ODropDownCalendar = (props: Props) => {
                         name='close'
                         color={theme.colors.disabled}
                         size={20}
-                        style={{position: 'absolute', bottom: 13, right: 10}}
+                        style={{ position: 'absolute', bottom: 13, right: 10 }}
                         onPress={() => handleChangeDate(rangeDate.from, '')}
                       />
                     </View>
                   </View>
                   {
-                    defaultValue === 'calendar' && (
+                    (defaultValue === 'calendar' || isCalendarAlwaysVisible) && (
                       <CalendarPicker
                         previousComponent={
                           <FeatherIcon

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

@@ -365,6 +365,7 @@ export interface OrderDetailsParams {
   updateDriverPosition?: any;
   driverUpdateLocation?: any;
   setDriverUpdateLocation?: any;
+  orderTitle?: any
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -520,7 +521,8 @@ export interface TagsParams {
 interface actions {
   accept: string;
   reject: string;
-  failed: string;
+  pickupFailed: string;
+  deliveryFailed: string;
   notReady: string;
 }
 
@@ -542,6 +544,7 @@ export interface AcceptOrRejectOrderParams {
   titleReject?: textTranslate;
   titleNotReady?: textTranslate;
   appTitle?: textTranslate;
+  orderTitle?: any
 }
 
 export interface MapViewParams {
@@ -553,3 +556,13 @@ export interface MapViewParams {
   alertState: { open: boolean, content: Array<string>, key?: string | null },
   setAlertState: ({open, content, key} : { open: boolean, content: Array<string>, key?: string | null }) => void
 }
+
+export interface ReviewCustomerParams {
+  order?: any,
+  closeModal?: any,
+  reviewState?: any,
+  setReviewState?: any,
+  actionState?: any,
+  handleChangeQualification?: any,
+  handleSendCustomerReview?: any,
+}

package/themes/single-business/index.tsx

@@ -45,6 +45,8 @@ import { OrderDetails } from './src/components/OrderDetails';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderSummary } from './src/components/OrderSummary';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { OrdersListing } from './src/components/OrdersListing';
+import { OrderListOption } from './src/components/OrderListOption';
 import { PaymentOptionCash } from './src/components/PaymentOptionCash';
 import { PaymentOptions } from './src/components/PaymentOptions';
 import { PaymentOptionStripe } from './src/components/PaymentOptionStripe';
@@ -125,6 +127,8 @@ export {
 	HelpOrder,
 	HelpAccountAndPayment,
 	OrderTypeSelector,
+	OrdersListing,
+	OrderListOption,
 	Notifications,
   BottomWrapper,
   BusinessBasicInformation,

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

@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useLanguage, useUtils } from 'ordering-components/native';
+import {
+  OrdersContainer,
+  Card,
+  Information,
+  OrderInformation,
+  BusinessInformation,
+  Price,
+  OptionTitle,
+  Status,
+} from './styles';
+
+import { useTheme } from 'styled-components/native';
+import { getTextOrderStatus } from '../../utils';
+import { OButton, OText } from '../shared'
+
+export const OrderListOption = (props: any) => {
+  const {
+    orders,
+    titleContent,
+    typeStyle,
+    allowedOrderStatus,
+    isLoadingReorder,
+    handleReorder,
+    onNavigationRedirect,
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ parseDate, parsePrice }] = useUtils();
+
+  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+  const [isReviewedOrders, setIsReviewedOrders] = useState<Array<any>>([])
+
+  const handleClickCard = (uuid: string) => {
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { orderId: uuid });
+  };
+
+  const handleReviewState = (orderId: any) => {
+    if (!orderId || isReviewedOrders.includes(orderId)) return
+    setIsReviewedOrders([...isReviewedOrders, orderId])
+  }
+
+  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
+        },
+        handleReviewState: handleReviewState
+      });
+  };
+
+  const handleReorderClick = (id: number) => {
+    setReorderSelected(id);
+    handleReorder(id);
+  };
+
+  const styles = StyleSheet.create({
+    reorderbutton: {
+      height: 23,
+      paddingLeft: 10,
+      paddingRight: 10,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primaryContrast,
+      borderWidth: 0,
+      width: 80
+    },
+    reorderLoading: {
+      width: 80,
+      height: 23,
+      borderRadius: 23,
+      paddingHorizontal: 10,
+    },
+    reviewButton: {
+      width: 80,
+      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 OrderStyleOne = ({ order }: any) => (
+    <Card
+      activeOpacity={1}
+      onPress={() => handleClickCard(order?.uuid)}
+    >
+      <Information>
+        <OrderInformation>
+          <BusinessInformation>
+            <OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
+              {`${t('ORDER_NO', 'Order No')}.${order.id}`}
+            </OText>
+            <OText size={10} lineHeight={21} color={theme.colors.textSecondary}>
+              {order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc)
+                : parseDate(order?.delivery_datetime, { utc: false })}
+            </OText>
+            <OText
+              color={theme.colors.primary}
+              size={10}
+              lineHeight={15}
+              weight={400}
+              numberOfLines={2}>
+              {getTextOrderStatus(order.status, t)?.value}
+            </OText>
+          </BusinessInformation>
+          <Price>
+            <OText size={12} lineHeight={18}>
+              {parsePrice(order?.summary?.total || order?.total)}
+            </OText>
+          </Price>
+        </OrderInformation>
+      </Information>
+    </Card>
+  );
+
+  const OrderStyleTwo = ({ order }: any) => (
+    <TouchableOpacity
+      onPress={() => handleClickCard(order?.uuid)}
+      activeOpacity={1}
+      style={{ flexDirection: 'row' }}
+    >
+      <Card themetwo>
+        <Information themetwo>
+          <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+            {`${t('ORDER_NO', 'Order No')}.${order.id}`}
+          </OText>
+          <OText
+            size={10}
+            lineHeight={21}
+            color={theme.colors.textSecondary}
+            style={{ marginVertical: 3 }}
+            numberOfLines={1}>
+            {order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}
+          </OText>
+          <OText
+            color={theme.colors.primary}
+            size={10}
+            lineHeight={15}
+            numberOfLines={1}>
+            {getTextOrderStatus(order.status, t)?.value}
+          </OText>
+        </Information>
+        <Status>
+          <OButton
+            text={t('REORDER', 'Reorder')}
+            imgRightSrc={''}
+            textStyle={styles.buttonText}
+            style={
+              isLoadingReorder && order.id === reorderSelected
+                ? styles.reorderLoading
+                : styles.reorderbutton
+            }
+            onClick={() => handleReorderClick(order.id)}
+            isLoading={isLoadingReorder && order.id === reorderSelected}
+          />
+          {allowedOrderStatus.includes(parseInt(order?.status)) &&
+            !order.review && !isReviewedOrders.includes(order?.id) &&
+            (
+              <TouchableOpacity
+                onPress={() => handleClickOrderReview(order)}
+                style={styles.reviewButton}>
+                <OText size={10} color={theme.colors.primary} numberOfLines={1}>
+                  {t('REVIEW', 'Review')}
+                </OText>
+              </TouchableOpacity>
+            )}
+        </Status>
+      </Card>
+    </TouchableOpacity>
+  )
+
+  return (
+    <>
+      <OptionTitle>
+        <OText
+          size={16}
+          color={theme.colors.textPrimary}
+          mBottom={10}
+        >
+          {titleContent}
+        </OText>
+      </OptionTitle>
+      <OrdersContainer>
+        {orders.length > 0 &&
+          orders.map((order: any, index: any) => (
+            <React.Fragment key={order?.id || order?.uuid}>
+              {typeStyle === 1 && (
+                <OrderStyleOne order={order} />
+              )}
+              {typeStyle === 2 && (
+                <OrderStyleTwo order={order} />
+              )}
+            </React.Fragment>
+          ))}
+      </OrdersContainer>
+      <View
+        style={{
+          height: 8,
+          backgroundColor: theme.colors.backgroundGray100,
+          marginBottom: 10
+        }}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components/native'
+
+export const OrdersContainer = styled.View`
+  margin-bottom: 10px;
+`
+
+export const Card = styled.TouchableOpacity`
+  ${(props: any) => props.themetwo ? css`
+    padding-vertical: 5px;
+    margin-bottom: 12px;
+    flex-direction: row;
+    width: 100%;
+  ` : css`
+    flex: 1;
+  `};
+`
+
+export const Map = styled.View`
+  flex: 1;
+  height: 125px;
+  margin-bottom: 22px;
+`
+
+export const Information = styled.View`
+  ${(props: any) => props.themetwo ? css`
+    justify-content: center;
+    align-items: flex-start;
+    margin-end: 7px;
+    flex: 1;
+  ` : css`
+    flex-direction: row;
+    align-items: center;
+    padding-vertical: 5px;
+    margin-bottom: 12px;
+  `};
+`
+
+export const OrderInformation = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  flex: 1;
+`
+
+export const BusinessInformation = styled.View`
+	flex-basis: 65%;
+`
+
+export const Price = styled.View`
+  justify-content: flex-start;
+  align-items: flex-end;
+  margin-left: 10px;
+  width: 30%;
+`
+
+export const OptionTitle = styled.View`
+  margin-top: 10px;
+`
+
+export const Status = styled.View`
+  align-items: center;
+  justify-content: space-between;
+`

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

@@ -0,0 +1,112 @@
+import React from 'react'
+import { View, useWindowDimensions } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import { useLanguage, OrderVerticalList } from 'ordering-components/native'
+import { Placeholder, PlaceholderLine, Fade } from "rn-placeholder";
+import { OButton, OText } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
+import { OrderListOption } from '../OrderListOption'
+
+const OrdersListingUI = (props: any) => {
+  const {
+    ordersGroup,
+    reorderLoading,
+    loadMoreOrders,
+    handleReorder,
+    onNavigationRedirect,
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { height } = useWindowDimensions()
+
+  const imageFails = theme.images.general.emptyActiveOrders
+
+  return (
+    <>
+      <OText size={20} style={{ marginTop: 20 }}>
+        {t('MY_ORDERS', 'My Orders')}
+      </OText>
+
+      {!ordersGroup.error && ordersGroup.all?.orders?.length > 0 && (
+        <>
+          {ordersGroup.upcoming?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('UPCOMING', 'Upcoming')}
+              typeStyle={1}
+              orders={ordersGroup.upcoming?.orders}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {ordersGroup.active?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('ACTIVE', 'Active')}
+              typeStyle={1}
+              orders={ordersGroup.active?.orders}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {ordersGroup.past?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('PAST', 'Past')}
+              typeStyle={2}
+              orders={ordersGroup.past?.orders}
+              allowedOrderStatus={[1, 2, 5, 6, 10, 11, 12]}
+              isLoadingReorder={reorderLoading}
+              handleReorder={handleReorder}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {!ordersGroup.loading &&
+            ordersGroup?.pagination?.totalPages &&
+            ordersGroup?.pagination?.currentPage < ordersGroup?.pagination?.totalPages &&
+          (
+            <View>
+              <OButton
+                text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+                imgRightSrc={null}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, shadowOpacity: 0, marginTop: 20 }}
+                onClick={loadMoreOrders}
+              />
+            </View>
+          )}
+        </>
+      )}
+
+      {ordersGroup.loading && (
+        <View style={{ marginTop: 20 }}>
+          {[...Array(6)].map((_, i) => (
+            <Placeholder key={i} Animation={Fade}>
+              <View style={{ width: '100%', flexDirection: 'row' }}>
+                <PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
+                <Placeholder>
+                  <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                  <PlaceholderLine width={50} />
+                  <PlaceholderLine width={20} />
+                </Placeholder>
+              </View>
+            </Placeholder>
+          ))}
+        </View>
+      )}
+
+      {!ordersGroup.loading && ordersGroup.all?.orders?.length === 0 && (
+        <View style={{ height: height * 0.7, justifyContent: 'center' }}>
+          <NotFoundSource
+            content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+            image={imageFails}
+          />
+        </View>
+      )}
+    </>
+  )
+}
+
+export const OrdersListing = (props: any) => {
+  const ordersProps = {
+    ...props,
+    UIComponent: OrdersListingUI,
+  }
+  return <OrderVerticalList {...ordersProps} />
+}

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

@@ -123,6 +123,12 @@ const ProfileListUI = (props: ProfileParams) => {
 		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params)
 	}
 
+  const getName = () => {
+    return user?.lastname
+      ? `${user?.name} ${user?.lastname}`
+      : user?.name
+  }
+
 	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>
@@ -136,7 +142,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}>{getName()}</OText>
 					<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
 						<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
 					</TouchableOpacity>

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

@@ -219,4 +219,35 @@ export const getOrderStatus = (status: number) => {
     default:
       return status
   }
-}
+}
+
+export const getTextOrderStatus = (s: string, t: any) => {
+  const status = parseInt(s)
+  const orderStatus = [
+    { key: 0, value: t('PENDING', 'Pending') },
+    { key: 1, value: t('COMPLETED', 'Completed') },
+    { key: 2, value: t('REJECTED', 'Rejected') },
+    { key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
+    { key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
+    { key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
+    { key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
+    { key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
+    { key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
+    { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
+    { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
+    { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
+    { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
+    { key: 13, value: t('PREORDER', 'PreOrder') },
+    { key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
+    { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
+    { key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
+    { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
+    { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
+    { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
+    { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
+    { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
+  ]
+
+  const objectStatus = orderStatus.find((o) => o.key === status)
+  return objectStatus && objectStatus
+}