ordering-ui-react-native 0.12.27 → 0.12.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.27",
+  "version": "0.12.31",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -84,6 +84,7 @@
     "react-native-lightbox": "^0.8.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",
+    "react-native-map-link": "^2.8.2",
     "react-native-maps": "^0.28.0",
     "react-native-modal-dropdown": "^1.0.1",
     "react-native-onesignal": "^4.1.1",

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/DriverMap/index.tsx

@@ -4,16 +4,15 @@ import MapView, {
   PROVIDER_GOOGLE,
   Marker
 } from 'react-native-maps';
-import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
 import { GoogleMapsParams } from '../../types';
 import Alert from '../../providers/AlertProvider';
-import { OIconButton, OIcon, OFab, OText, OLink } from '../shared';
+import { OIconButton, OIcon, OFab, OText, OButton } from '../shared';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
-// import MapViewDirections from 'react-native-maps-directions';
 import { FloatingButton } from '../FloatingButton';
+import { showLocation } from 'react-native-map-link';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
@@ -90,11 +89,11 @@ export const DriverMap = (props: GoogleMapsParams) => {
       content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION_TO')
         ? [t(errKey, mapErrors[errKey])]
         : [
-            `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
-              'METTERS',
-              'meters',
-            )}`,
-          ],
+          `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
+            'METTERS',
+            'meters',
+          )}`,
+        ],
       key: errKey,
     });
   };
@@ -322,6 +321,17 @@ export const DriverMap = (props: GoogleMapsParams) => {
     arrowDistance: {
       borderWidth: 0,
     },
+    buttonContainer: {
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 10,
+      paddingHorizontal: 80,
+    },
+    showButton: {
+      alignSelf: 'center',
+      borderRadius: 10,
+    }
   });
 
   return (
@@ -453,7 +463,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
               </OText>
             </View>
           </View>
-
           <View style={styles.facDistance}>
             <View
               style={{
@@ -475,22 +484,31 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 size={13}
                 numberOfLines={2}
                 adjustsFontSizeToFit>
-                {`${travelTime.toFixed(2)} - ${
-                  isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
-                } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
+                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
+                  } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
               </OText>
             </View>
           </View>
         </View>
-        <View>
-          <OLink
-            PressStyle={{paddingHorizontal: 80, paddingVertical: 10,bottom: showAcceptOrReject ? 80 : 0}}
-            hasButton
-            url={Platform.select({
-              ios: `maps:0,0?q=${destination.latitude},${destination.longitude}`,
-              android: `geo:0,0?q=${destination.latitude},${destination.longitude}`,
+        <View style={styles.buttonContainer}>
+          <OButton
+            imgRightSrc=''
+            textStyle={{ color: theme.colors.white }}
+            style={{
+              ...styles.showButton,
+              bottom: showAcceptOrReject ? 80 : 0
+            }}
+            onClick={() => showLocation({
+              latitude: destination.latitude,
+              longitude: destination.longitude,
+              sourceLatitude: userLocation.latitude,
+              sourceLongitude: userLocation.longitude,
+              naverCallerName: 'com.deliveryapp',
+              dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
+              dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+              cancelText: t('CANCEL', 'Cancel'),
             })}
-            shorcut={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
           />
         </View>
         {showAcceptOrReject && (

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

@@ -442,6 +442,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       style={{
                         backgroundColor: theme.colors.inputChat,
                         borderRadius: 7.5,
+                        marginBottom: 20
                       }}>
                       <CountryPicker
                         // @ts-ignore

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/OrderDetails/styles.tsx

@@ -5,7 +5,7 @@ export const OrderDetailsContainer = styled.ScrollView`
 `;
 
 export const Pickup = styled.View`
-  padding-vertical: 10px;
+  padding-vertical: 20px;
   margin-bottom: 20px;
 `;
 

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

@@ -309,25 +309,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
-      {isBusinessApp && (
-        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', maxHeight: 40 }}>
-          <OIcon
-            src={theme.images.general.information}
-            width={12}
-            height={12}
-            color={theme.colors.skyBlue}
-            style={{ marginRight: 5 }}
-          />
-          <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
-          </OText>
-          <TouchableOpacity onPress={() => { Linking.openURL('https://new-admin.tryordering.com/') }}>
-            <OText size={12} color={theme.colors.skyBlue}>
-              {t('LINK_MORE_SETTINGS_GO_TO', 'new-admin.ordering.co')}
-            </OText>
-          </TouchableOpacity>
-        </View>
-      )}
       <FiltersTab>
         <ScrollView
           ref={scrollRefTab}
@@ -524,85 +505,82 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       {/* </GestureRecognizer> */}
 
       <NewOrderNotification />
-      <OModal open={openModal} entireModal customClose>
-        <ModalContainer
-          nestedScrollEnabled={true}
-        >
-          <OIconButton
-            icon={theme.images.general.arrow_left}
-            borderColor={theme.colors.clear}
-            iconColor={theme.colors.backArrow}
-            iconStyle={{ width: 20, height: 13 }}
-            style={{
-              maxWidth: 40,
-              height: 35,
-              justifyContent: 'flex-end',
-              marginBottom: 30,
-              marginTop: 30
-            }}
-            onClick={() => setOpenModal(false)}
-          />
-          <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
-          <OInput
-            value={search.id}
-            onChange={(value: any) => setSearch({ ...search, id: value })}
-            style={styles.inputStyle}
-            placeholder={t('ORDER_NUMBER', 'Order number')}
-            autoCorrect={false}
-          />
-          <OrdersOptionDate
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          <OrdersOptionStatus
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          <OrdersOptionCity
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          <OrdersOptionBusiness
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          {isBusinessApp && (
-            <>
-              <OrdersOptionDelivery
-                {...props}
-                search={search}
-                onSearch={setSearch}
-              />
-              <OrdersOptionDriver
-                {...props}
-                search={search}
-                onSearch={setSearch}
-              />
-              <OrdersOptionPaymethod
-                {...props}
-                search={search}
-                onSearch={setSearch}
-              />
-            </>
-          )}
-          <OButton
-            text={t('SEARCH', 'Search')}
-            textStyle={{ color: theme.colors.white }}
-            imgRightSrc={null}
-            style={{
-              borderRadius: 7.6,
-              marginBottom: 70,
-              marginTop: 60,
-              zIndex: 12
-            }}
-            onClick={applyFilters}
-          />
-        </ModalContainer>
-      </OModal>
+      {openModal && (
+        <OModal open={openModal} entireModal customClose>
+          <ModalContainer
+            nestedScrollEnabled={true}
+          >
+            <OIconButton
+              icon={theme.images.general.arrow_left}
+              borderColor={theme.colors.clear}
+              iconColor={theme.colors.backArrow}
+              iconStyle={{ width: 20, height: 13 }}
+              style={{
+                maxWidth: 40,
+                height: 35,
+                justifyContent: 'flex-end',
+                marginBottom: 30,
+                marginTop: 30
+              }}
+              onClick={() => setOpenModal(false)}
+            />
+            <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
+            <OInput
+              value={search.id}
+              onChange={(value: any) => setSearch({ ...search, id: value })}
+              style={styles.inputStyle}
+              placeholder={t('ORDER_NUMBER', 'Order number')}
+              autoCorrect={false}
+            />
+            <OrdersOptionDate
+              {...props}
+              search={search}
+              onSearch={setSearch}
+            />
+            <OrdersOptionCity
+              {...props}
+              search={search}
+              onSearch={setSearch}
+            />
+            {isBusinessApp && (
+              <>
+                <OrdersOptionBusiness
+                  {...props}
+                  search={search}
+                  onSearch={setSearch}
+                />
+                <OrdersOptionDelivery
+                  {...props}
+                  search={search}
+                  onSearch={setSearch}
+                />
+                <OrdersOptionDriver
+                  {...props}
+                  search={search}
+                  onSearch={setSearch}
+                />
+                <OrdersOptionPaymethod
+                  {...props}
+                  search={search}
+                  onSearch={setSearch}
+                />
+              </>
+            )}
+            <OButton
+              text={t('SEARCH', 'Search')}
+              textStyle={{ color: theme.colors.white }}
+              imgRightSrc={null}
+              style={{
+                borderRadius: 7.6,
+                marginBottom: 70,
+                marginTop: 60,
+                zIndex: 12
+              }}
+              onClick={applyFilters}
+            />
+          </ModalContainer>
+        </OModal>
+      )}
     </>
   );
 };

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/StoresList/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
+import { View, StyleSheet, Dimensions, Linking } from 'react-native';
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NetInfo from '@react-native-community/netinfo';
 import { useTheme } from 'styled-components/native';
@@ -14,7 +14,7 @@ import {
 import { NotFoundSource } from '../NotFoundSource';
 import { SearchBar } from '../SearchBar';
 import { BusinessController } from '../BusinessController';
-import { OText } from '../shared';
+import { OIcon, OText } from '../shared';
 import { BusinessesListingParams } from '../../types';
 
 const StoresListUI = (props: BusinessesListingParams) => {
@@ -154,7 +154,23 @@ const StoresListUI = (props: BusinessesListingParams) => {
             conditioned={false}
           />
         )}
-
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', maxHeight: 40 }}>
+          <OIcon
+            src={theme.images.general.information}
+            width={12}
+            height={12}
+            color={theme.colors.skyBlue}
+            style={{ marginRight: 5 }}
+          />
+          <OText size={12}>
+            {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}>
+              {t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')}
+            </OText>
+          </TouchableOpacity>
+        </View>
         {!error &&
           businesses?.map((business: any) => (
             <BusinessController

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

@@ -556,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/business/src/types/react-native-map-link/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-map-link'