ordering-ui-react-native 0.23.65 → 0.23.67

package/package.json

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

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

@@ -65,7 +65,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
   const messagesReadIds = messagesReadList?.map((message: any) => message?.order_message_id)
 
   const filteredMessages = messagesReadList?.length > 0 ? messages?.messages?.filter((message: any) => !messagesReadIds?.includes(message?.id)) : messages?.messages
-  const cateringTypes = [7, 8]
+  const cateringTypes : any = [7, 8]
 
   const styles = StyleSheet.create({
     icons: {
@@ -154,17 +154,6 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     return paymethodsList.join(', ')
   }
 
-  const deliveryDate = () => {
-    const dateString = order?.delivery_datetime_utc ?? order?.delivery_datetime
-    const currentDate = new Date();
-    const receivedDate: any = new Date(order?.delivery_datetime);
-
-    const formattedDate = receivedDate <= currentDate
-      ? `${t('ASAP_ABBREVIATION', 'ASAP')}(${parseDate(dateString, { utc: !!order?.delivery_datetime_utc })})`
-      : parseDate(dateString, { utc: !!order?.delivery_datetime_utc })
-    return formattedDate
-  }
-
   return (
     <>
       {!props.isCustomView && (
@@ -231,7 +220,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
           <OText size={13} style={{ marginBottom: 5 }}>
             <>
               {cateringTypes.includes(order?.delivery_type) ? `${t('CREATED_AT', 'Created at')}: ${parseDate(order?.created_at)}\n` : ''}
-              {cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}: ` : ''}{deliveryDate()}
+              {order?.delivery_datetime_utc && (
+                <>{cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}:` : ''} {parseDate(order?.delivery_datetime_utc)}</>
+              )}
+              {order?.delivery_datetime && (
+                <>{'\n'}{cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}:` : ''} {parseDate(order?.delivery_datetime, { utc: false })}  {`(${t('BUSINESS_TIME', 'Business time')})`}</>
+              )}
             </>
           </OText>
         ) : (
@@ -239,7 +233,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             <OText size={13} style={{ marginBottom: 5 }}>
               <>
                 {cateringTypes.includes(order?.delivery_type) ? `${t('CREATED_AT', 'Created at')}: ${parseDate(order?.created_at)}\n` : ''}
-                {cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}: ` : ''}{deliveryDate()}
+                {order?.delivery_datetime_utc && (
+                  <>{cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}:` : ''} {parseDate(order?.delivery_datetime_utc)}</>
+                )}
+                {order?.delivery_datetime && (
+                  <>{'\n'}{cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}:` : ''} {parseDate(order?.delivery_datetime, { utc: false })}  {`(${t('BUSINESS_TIME', 'Business time')})`}</>
+                )}
               </>
             </OText>
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity } from 'react-native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity, Animated, Easing } from 'react-native';
 import { useLanguage, useUtils, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -139,6 +139,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const HEIGHT_SCREEN = orientationState?.dimensions?.height
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
   const showTagsList = !props.isAlsea && !props.isDriverApp && currentTabSelected !== 'logisticOrders'
+  const AnimatedFeatherIcon = Animated.createAnimatedComponent(FeatherIcon);
+  const spinValue = new Animated.Value(0);
 
   const preorderTypeList = [
     { key: null, name: t('SLA', 'SLA\'s') },
@@ -468,6 +470,25 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     }
   }, [isNetConnected, JSON.stringify(offlineActionsState.orders)]);
 
+
+  const handleInitAnimation = () => {
+    Animated.timing(
+      spinValue,
+      {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }
+    ).start()
+  }
+
+  useEffect(() => {
+    if (currentOrdersGroup?.loading || logisticOrders?.loading){
+      handleInitAnimation()
+    }
+  }, [currentOrdersGroup?.loading, logisticOrders?.loading])
+
   return (
     <>
       <View style={styles.header}>
@@ -477,12 +498,20 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             <WebsocketStatus />
           </View>
           {isNetConnected && (
-            <FeatherIcon
+            <AnimatedFeatherIcon
               name='refresh-cw'
               color={theme.colors.backgroundDark}
               size={24}
-              onPress={() => { currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true }) }}
-              style={{ marginRight: 20 }}
+              onPress={() => currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })}
+              style={{
+                marginRight: 20,
+                transform: [{
+                  rotate: spinValue.interpolate({
+                    inputRange: [0, 0.3],
+                    outputRange: ['0deg', '360deg'],
+                  })
+                }]
+              }}
             />
           )}
           <FontistoIcon