ordering-ui-react-native 0.17.68 → 0.17.69-release

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

@@ -15,7 +15,6 @@ import { GoogleMap } from '../GoogleMap';
 export const PreviousOrders = (props: any) => {
   const {
     orders,
-    ordersGrouped,
     onNavigationRedirect,
     getOrderStatus,
     handleClickOrder,
@@ -40,6 +39,8 @@ export const PreviousOrders = (props: any) => {
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
   const viewMapStatus = [9, 18, 19, 23]
+  const deliveryPickupBtn = props.appTitle?.text?.includes('Delivery') && [3, 8, 18]
+  const deliveryStatusCompleteBtn = props.appTitle?.text?.includes('Delivery') && [9, 19, 23]
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -47,8 +48,13 @@ export const PreviousOrders = (props: any) => {
     if (props.handleClickEvent) {
       props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
     } else {
-      onNavigationRedirect &&
-        onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+      if (isLogisticOrder){
+        onNavigationRedirect &&
+        onNavigationRedirect('OrderDetailsLogistic', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+      } else {
+        onNavigationRedirect &&
+          onNavigationRedirect('OrderDetails', { order });
+      }
     }
   };
 
@@ -80,29 +86,29 @@ export const PreviousOrders = (props: any) => {
                 imgRightSrc={null}
                 style={{ borderRadius: 7, height: 40 }}
                 parentStyle={{ width: '100%' }}
-                textStyle={{ color: theme.colors.primary }}
+                textStyle={{ color: theme?.colors?.white }}
               />
             ) : (
               <>
                 <OButton
                   text={t('REJECT', 'Reject')}
                   onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                  bgColor={theme.colors.danger}
-                  borderColor={theme.colors.danger}
+                  bgColor={theme.colors.red}
+                  borderColor={theme.colors.red}
                   imgRightSrc={null}
                   style={{ borderRadius: 7, height: 40 }}
                   parentStyle={{ width: '45%' }}
-                  textStyle={{ color: theme.colors.dangerText }}
+                  textStyle={{ color: theme.colors.white }}
                 />
                 <OButton
                   text={t('ACCEPT', 'Accept')}
                   onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                  bgColor={theme.colors.successOrder}
-                  borderColor={theme.colors.successOrder}
+                  bgColor={theme.colors.green}
+                  borderColor={theme.colors.green}
                   imgRightSrc={null}
                   style={{ borderRadius: 7, height: 40 }}
                   parentStyle={{ width: '45%' }}
-                  textStyle={{ color: theme.colors.successText }}
+                  textStyle={{ color: theme.colors.white }}
                 />
               </>
             )}
@@ -186,153 +192,259 @@ export const PreviousOrders = (props: any) => {
 
   return (
     <>
-      {Object.keys(ordersGrouped)?.length > 0 && (
-        <View style={{ marginBottom: 10 }}>
-          {Object.keys(ordersGrouped).map(k => (
-            <OrdersGroupedItem
-              key={k}
-              groupId={k}
-              orders={ordersGrouped[k]}
-            >
-              {ordersGrouped[k]?.length > 0 &&
-                ordersGrouped[k]
-                  ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
-                  ?.map((_order: any) => {
-                    const order = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
-                    return (
-                      <OrdersList key={order.id} order={order} _order={_order} hideBtns />
+      {orders && orders?.length > 0 && orders.map((_order: any) => {
+        const order = !Array.isArray(_order) && (_order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order)
+        const _ordersGrouped = Array.isArray(_order) && Object.fromEntries(_order)
+        return (
+          _ordersGrouped ? (
+            <View key={_order[0]} style={{ marginBottom: 10 }}>
+              {Object.keys(_ordersGrouped).map((k, idx) => (
+                <OrdersGroupedItem
+                  key={`${k}_${idx}`}
+                  groupId={k}
+                  orders={_ordersGrouped[k]}
+                >
+                  {_ordersGrouped[k]?.length > 0 &&
+                    _ordersGrouped[k]
+                      ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
+                      ?.map((_order: any) => {
+                        const order_ = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
+                        return (
+                          <OrdersList key={order_.id} order={order_} _order={_order} hideBtns />
+                        )
+                      }
                     )
                   }
-                )
-              }
-              {ordersGrouped[k][0]?.status === 0 && (
-                <AcceptOrRejectOrderStyle>
-                  <OButton
-                    text={t('REJECT_ALL', 'Reject all')}
-                    bgColor={theme.colors.danger100}
-                    borderColor={theme.colors.danger100}
-                    imgRightSrc={null}
-                    style={{ borderRadius: 7, height: 40 }}
-                    parentStyle={{ width: '45%' }}
-                    textStyle={{ color: theme.colors.danger500, fontSize: 12 }}
-                    onClick={() => ordersGroupAction('', '', {
-                      action: 'reject',
-                      order: ordersGrouped[k][0],
-                      ids: ordersGrouped[k].map((o: any) => o.id)
-                    })}
-                  />
-                  <OButton
-                    text={t('ACCEPT_ALL', 'Accept all')}
-                    bgColor={theme.colors.success100}
-                    borderColor={theme.colors.success100}
-                    imgRightSrc={null}
-                    style={{ borderRadius: 7, height: 40 }}
-                    parentStyle={{ width: '45%' }}
-                    textStyle={{ color: theme.colors.success500, fontSize: 12 }}
-                    onClick={() => ordersGroupAction('', '', {
-                      action: 'accept',
-                      order: ordersGrouped[k][0],
-                      ids: ordersGrouped[k].map((o: any) => o.id)
-                    })}
-                  />
-                </AcceptOrRejectOrderStyle>
-              )}
-              <View>
-                {ordersGrouped[k][0]?.status === 7 && (
-                  <OButton
-                    text={t('READY_FOR_PICKUP', 'Ready for pickup')}
-                    bgColor={theme.colors.primaryLight}
-                    borderColor={theme.colors.primaryLight}
-                    imgRightSrc={null}
-                    style={{ borderRadius: 7, height: 40 }}
-                    parentStyle={{ width: '100%' }}
-                    textStyle={{ color: theme.colors.primary, fontSize: 12 }}
-                    onClick={() => handleChangeOrderStatus(
-                      4,
-                      ordersGrouped[k].map((o: any) => o.id),
-                    )}
-                  />
-                )}
-              </View>
-              <View>
-                {viewMapStatus.includes(ordersGrouped[k][0]?.status) && (
-                  <OButton
-                    text={t('TRACK_REAL_TIME_POSITION', 'Track real time position')}
-                    bgColor={theme.colors.primaryLight}
-                    borderColor={theme.colors.primaryLight}
-                    imgRightSrc={null}
-                    style={{ borderRadius: 7, height: 40 }}
-                    parentStyle={{ width: '100%' }}
-                    textStyle={{ color: theme.colors.primary, fontSize: 12 }}
-                    onClick={() => handleOpenMapView({ orders: ordersGrouped[k] })}
-                  />
-                )}
-              </View>
-              {ordersGrouped[k][0]?.status === 4 &&
-                ![1].includes(ordersGrouped[k][0]?.delivery_type) &&
-              (
-                <AcceptOrRejectOrderStyle>
-                  <OButton
-                    text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
-                    bgColor={theme.colors.danger100}
-                    borderColor={theme.colors.danger100}
-                    imgRightSrc={null}
-                    style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                    parentStyle={{ width: '45%' }}
-                    textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                    onClick={() => handleChangeOrderStatus(
-                      17,
-                      ordersGrouped[k].map((o: any) => o.id),
-                    )}
-                  />
-                  <OButton
-                    text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
-                    bgColor={theme.colors.success100}
-                    borderColor={theme.colors.success100}
-                    imgRightSrc={null}
-                    style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                    parentStyle={{ width: '45%' }}
-                    textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
-                    onClick={() => handleChangeOrderStatus(
-                      15,
-                      ordersGrouped[k].map((o: any) => o.id),
-                    )}
-                  />
-                </AcceptOrRejectOrderStyle>
-              )}
-              {!ordersGrouped[k][0]?.user_review &&
-                pastOrderStatuses.includes(ordersGrouped[k][0]?.status) &&
-              (
-                <OButton
-                  text={t('REVIEW_CUSTOMER', 'Review customer')}
-                  bgColor={theme.colors.primary}
-                  borderColor={theme.colors.primary}
-                  imgRightSrc={null}
-                  style={{ borderRadius: 8, height: 40 }}
-                  parentStyle={{ width: '100%' }}
-                  textStyle={{ color: theme.colors.white }}
-                  onClick={() => setOpenReviewModal({
-                    order: ordersGrouped[k][0],
-                    customerId: ordersGrouped[k][0]?.customer_id,
-                    ids: ordersGrouped[k].map((o: any) => o.id)
-                  })}
-                />
-              )}
-            </OrdersGroupedItem>
-          ))}
-        </View>
-      )}
-      {orders?.length > 0 &&
-        orders
-          ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
-          ?.map((_order: any) => {
-            const order = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
-            return (
-              <OrdersList key={order.id} order={order} _order={_order} />
-            )
-          }
+                  {_ordersGrouped[k][0]?.status === 0 && (
+                    <AcceptOrRejectOrderStyle>
+                      <OButton
+                        text={t('REJECT_ALL', 'Reject all')}
+                        bgColor={theme.colors.danger100}
+                        borderColor={theme.colors.danger100}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.danger500, fontSize: 12 }}
+                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                          action: 'reject',
+                          order: _ordersGrouped[k][0],
+                          ids: _ordersGrouped[k].map((o: any) => o.id),
+                          handleChangeOrderStatus
+                        })}
+                      />
+                      <OButton
+                        text={t('ACCEPT_ALL', 'Accept all')}
+                        bgColor={theme.colors.success100}
+                        borderColor={theme.colors.success100}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.success500, fontSize: 12 }}
+                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                          action: 'accept',
+                          order: _ordersGrouped[k][0],
+                          ids: _ordersGrouped[k].map((o: any) => o.id),
+                          handleChangeOrderStatus
+                        })}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                  {_ordersGrouped[k][0]?.status === 7 && (
+                    <View>
+                      <OButton
+                        text={t('READY_FOR_PICKUP', 'Ready for pickup')}
+                        bgColor={theme.colors.primaryLight}
+                        borderColor={theme.colors.primaryLight}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '100%' }}
+                        textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+                        onClick={() => handleChangeOrderStatus(
+                          4,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                    </View>
+                  )}
+                  {(_ordersGrouped[k][0]?.status === 8 || _ordersGrouped[k][0]?.status === 18) &&
+                    _ordersGrouped[k][0]?.delivery_type === 1 &&
+                  (
+                    <AcceptOrRejectOrderStyle>
+                      <OButton
+                        text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
+                        bgColor={theme.colors.btnBGWhite}
+                        borderColor={theme.colors.btnBGWhite}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '100%' }}
+                        textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+                        onClick={() => handleChangeOrderStatus(
+                          3,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 &&
+                  (
+                    <AcceptOrRejectOrderStyle>
+                      <OButton
+                        text={t('ORDER_NOT_READY', 'Order not ready')}
+                        bgColor={theme.colors.red}
+                        borderColor={theme.colors.red}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '100%' }}
+                        textStyle={{ color: theme.colors.white, fontSize: 12 }}
+                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                          action: 'notReady',
+                          order: _ordersGrouped[k][0],
+                          ids: _ordersGrouped[k].map((o: any) => o.id),
+                          handleChangeOrderStatus
+                        })}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                  {viewMapStatus.includes(_ordersGrouped[k][0]?.status) &&
+                    props.appTitle?.text?.includes('Business') &&
+                  (
+                    <View>
+                      <OButton
+                        text={t('TRACK_REAL_TIME_POSITION', 'Track real time position')}
+                        bgColor={theme.colors.primaryLight}
+                        borderColor={theme.colors.primaryLight}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '100%' }}
+                        textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+                        onClick={() => handleOpenMapView({ orders: _ordersGrouped[k] })}
+                      />
+                    </View>
+                  )}
+                  {_ordersGrouped[k][0]?.status === 4 &&
+                    ![1].includes(_ordersGrouped[k][0]?.delivery_type) &&
+                  (
+                    <AcceptOrRejectOrderStyle>
+                      <OButton
+                        text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
+                        bgColor={theme.colors.danger100}
+                        borderColor={theme.colors.danger100}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                        onClick={() => handleChangeOrderStatus(
+                          17,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                      <OButton
+                        text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
+                        bgColor={theme.colors.success100}
+                        borderColor={theme.colors.success100}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
+                        onClick={() => handleChangeOrderStatus(
+                          15,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                  {!_ordersGrouped[k][0]?.user_review &&
+                    pastOrderStatuses.includes(_ordersGrouped[k][0]?.status) &&
+                  (
+                    <OButton
+                      text={t('REVIEW_CUSTOMER', 'Review customer')}
+                      bgColor={theme.colors.primary}
+                      borderColor={theme.colors.primary}
+                      imgRightSrc={null}
+                      style={{ borderRadius: 8, height: 40 }}
+                      parentStyle={{ width: '100%' }}
+                      textStyle={{ color: theme.colors.white }}
+                      onClick={() => setOpenReviewModal({
+                        order: _ordersGrouped[k][0],
+                        customerId: _ordersGrouped[k][0]?.customer_id,
+                        ids: _ordersGrouped[k].map((o: any) => o.id)
+                      })}
+                    />
+                  )}
+                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
+                    <AcceptOrRejectOrderStyle>
+                      <OButton
+                        text={t('PICKUP_FAILED', 'Pickup failed')}
+                        bgColor={theme.colors.danger100}
+                        borderColor={theme.colors.danger100}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                          action: 'pickupFailed',
+                          order: _ordersGrouped[k][0],
+                          ids: _ordersGrouped[k].map((o: any) => o.id),
+                          handleChangeOrderStatus
+                        })}
+                      />
+                      <OButton
+                        text={t('PICKUP_COMPLETE', 'Pickup complete')}
+                        bgColor={theme.colors.success100}
+                        borderColor={theme.colors.success100}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
+                        onClick={() => handleChangeOrderStatus(
+                          9,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                  {!!deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) && (
+                    <AcceptOrRejectOrderStyle>
+                      <OButton
+                        text={t('DELIVERY_FAILED', 'Delivery Failed')}
+                        bgColor={theme.colors.danger100}
+                        borderColor={theme.colors.danger100}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                          action: 'deliveryFailed',
+                          order: _ordersGrouped[k][0],
+                          ids: _ordersGrouped[k].map((o: any) => o.id),
+                          handleChangeOrderStatus
+                        })}
+                      />
+                      <OButton
+                        text={t('DELIVERY_COMPLETE', 'Delivery complete')}
+                        bgColor={theme.colors.success100}
+                        borderColor={theme.colors.success100}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
+                        onClick={() => handleChangeOrderStatus(
+                          11,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                </OrdersGroupedItem>
+              ))}
+            </View>
+          ) : (
+            <View key={order.id}>
+              <OrdersList order={order} _order={_order} />
+            </View>
+          )
         )
-      }
+      })}
 
       <OModal
         open={openModal}

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

@@ -33,7 +33,7 @@ export const NotificationIcon = styled.View`
 export const AcceptOrRejectOrder = styled.View`
   flex-direction: row;
   justify-content: space-between;
-  margin: 10px;
+  margin: ${(props: any) => props.m ?? 10}px;
 `
 export const Timestatus = styled.View`
   position: relative;;

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

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

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

@@ -1,3 +1,5 @@
+
+
 import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,
@@ -86,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,
@@ -147,7 +161,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   useEffect(() => {
     if (scrollref?.current) {
       Keyboard.addListener('keyboardDidShow', () => {
-        scrollref.current.scrollToEnd()
+        scrollref?.current?.scrollToEnd && scrollref.current.scrollToEnd()
       })
     }
   }, [scrollref?.current])
@@ -177,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"

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Dimensions, Linking } from 'react-native';
-import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
+import { View, StyleSheet, Dimensions, Linking, ScrollView, TouchableOpacity } from 'react-native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NetInfo from '@react-native-community/netinfo';
 import { useTheme } from 'styled-components/native';
@@ -149,10 +148,10 @@ const StoresListUI = (props: BusinessesListingParams) => {
             width={12}
             height={12}
             color={theme.colors.skyBlue}
-            style={{ marginRight: 5, marginTop: 3 }}
+            style={{ marginRight: 5 }}
           />
           <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to')}{' '}
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
           </OText>
           <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
             <OText size={12} color={theme.colors.skyBlue}>