ordering-ui-react-native 0.21.63-release → 0.21.64-release

package/package.json

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

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

@@ -428,13 +428,15 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             {action === 'accept' && (
               <View style={{ height: 300, justifyContent: 'center' }}>
                 <Timer onPress={() => openTimerIOnput()}>
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
+                  <OText weight="600" size={55}>
                     {hour}
                   </OText>
-                  {hour.length > 0 && <OText size={55}>:</OText>}
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
+                  {hour.length > 0 && <OText size={55} style={{ marginBottom: 10 }}>:</OText>}
+                  <OText weight="600" size={55}>
                     {min}
                   </OText>
+                  {time?.length > 2 && <OText style={{ position: 'absolute', bottom: 60, left: 55 }}>{t('HOURS', 'Hours')}</OText>}
+                  <OText style={{ position: 'absolute', bottom: 60, right: time?.length > 2 ? 55 : 95 }}>{t('MINUTES', 'Minutes')}</OText>
                 </Timer>
               </View>
             )}

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

@@ -10,6 +10,7 @@ export const TopActions = styled.View`
 `
 
 export const Timer = styled.TouchableOpacity`
+  position: relative;
   padding: 40px;
   justify-content: center;
   flex-direction: row;

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

@@ -53,6 +53,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     actions,
     orderTitle,
     appTitle,
+    loadMessages
   } = props;
 
   const theme = useTheme();
@@ -77,7 +78,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [printerSettings, setPrinterSettings] = useState<any>('')
   const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
 
-  const orderToComplete = [4,20,21]
+  const orderToComplete = [4, 20, 21]
+  const orderToReady = [7, 14]
 
   if (order?.status === 7 || order?.status === 4) {
     if (drivers?.length > 0 && drivers) {
@@ -297,7 +299,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const handleOpenMessagesForBusiness = () => {
     setOpenModalForBusiness(true);
-    readMessages && readMessages();
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setUnreadAlert({ ...unreadAlert, business: false });
   };
 
@@ -339,6 +342,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleCloseModal = () => {
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setOpenModalForBusiness(false);
   };
 
@@ -379,7 +384,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     },
     {
       ...order?.customer?.location,
-      title: order?.customer?.name ??  t('CUSTOMER', 'Customer'),
+      title: order?.customer?.name ?? t('CUSTOMER', 'Customer'),
       address: {
         addressName: order?.customer?.address,
         zipcode: order?.customer?.zipcode
@@ -413,7 +418,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     const getStorageData = async () => {
-    const printers = await _retrieveStoreData('printers')
+      const printers = await _retrieveStoreData('printers')
       const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
       setPrinterSettings(printers?.length && printers)
       setAutoPrintEnabled(!!autoPrint)
@@ -482,6 +487,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             handleCopyClipboard={handleCopyClipboard}
             handleArrowBack={handleArrowBack}
             isCustomView={props.isCustomView}
+            messages={messages}
+            messagesReadList={messagesReadList}
           />
           <OrderDetailsContainer
             keyboardShouldPersistTaps="handled"
@@ -630,7 +637,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             </>
             <View style={{ height: 30 }} />
           </OrderDetailsContainer>
-
           {order &&
             Object.keys(order).length > 0 &&
             getOrderStatus(order?.status, t)?.value ===
@@ -647,7 +653,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 widthButton={'45%'}
               />
             )}
-          {order?.status === 7 && (
+          {orderToReady.includes(order?.status) && (
             <FloatingButton
               btnText={t('READY_FOR_PICKUP', 'Ready for pickup')}
               colorTxt1={theme.colors.primary}
@@ -668,7 +674,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               secondButtonClick={() => handleChangeOrderStatus?.(15)}
               firstButtonClick={() => handleChangeOrderStatus?.(17)}
               secondBtnText={t(
-                'PICKUP_COMPLETED_BY_CUSTOMER',
+                'ORDER_PICKUP_COMPLETED_BY_CUSTOMER',
                 'Pickup completed by customer',
               )}
               secondButton={true}

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

@@ -13,6 +13,7 @@ import {
   OrderBill,
   Total,
   OSRow,
+  OrderVehicle,
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -449,7 +450,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           ))}
       </OrderProducts>
 
-      <OrderBill>
+      <OrderBill vehicleExists={!!order?.vehicle}>
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
@@ -659,7 +660,51 @@ export const OrderContentComponent = (props: OrderContent) => {
             </View>
           </View>
         )}
+
       </OrderBill >
+      {!!order?.vehicle && (
+        <OrderVehicle>
+          <OText
+            style={{ marginBottom: 5 }}
+            size={16}
+            weight="600"
+            color={theme.colors.textGray}>
+            {t('VEHICLE', 'Vehicle')}
+          </OText>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('CAR_REGISTRATION', 'Car registration')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.vehicle?.car_registration}
+            </OText>
+          </Table>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('COLOR', 'Color')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.vehicle?.color}
+            </OText>
+          </Table>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('MODEL', 'Model')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.vehicle?.model}
+            </OText>
+          </Table>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('TYPE', 'Type')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.vehicle?.type}
+            </OText>
+          </Table>
+        </OrderVehicle>
+      )}
       <OModal
         open={openReviewModal}
         onClose={() => setOpenReviewModal(false)}

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

@@ -3,7 +3,9 @@ import React from 'react';
 //Styles
 import {
   Actions,
+  Dot,
   Header,
+  Messages,
   OrderHeader,
 } from './styles';
 
@@ -22,7 +24,8 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import {
   useLanguage,
   useUtils,
-  useConfig
+  useConfig,
+  useSession
 } from 'ordering-components/native';
 
 interface OrderHeader {
@@ -35,6 +38,8 @@ interface OrderHeader {
   handleViewSummaryOrder?: any;
   handleCopyClipboard?: any
   isCustomView?: any
+  messages?: any
+  messagesReadList?: any
 }
 
 export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -46,14 +51,20 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     getOrderStatus,
     logisticOrderStatus,
     handleViewSummaryOrder,
-    handleCopyClipboard
+    handleCopyClipboard,
+    messages,
+    messagesReadList
   } = props
   const theme = useTheme();
   const [, t] = useLanguage();
   const [configState] = useConfig()
+  const [{ user }] = useSession()
   const [{ parseDate, parsePrice }] = useUtils();
   const paymethodsLength = order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
   const showExternalId = configState?.configs?.change_order_id?.value === '1'
+  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 styles = StyleSheet.create({
     icons: {
@@ -191,18 +202,20 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 style={styles.icons}
                 onClick={() => handleOpenMapView()}
               />
-
-              <OIconButton
-                icon={theme.images.general.messages}
-                iconStyle={{
-                  width: 20,
-                  height: 20,
-                  tintColor: theme.colors.textGray,
-                }}
-                borderColor={theme.colors.clear}
-                style={styles.icons}
-                onClick={() => handleOpenMessagesForBusiness()}
-              />
+              <Messages>
+                {filteredMessages?.filter((message: any) => message?.author_id !== user?.id && !message?.read)?.length > 0 && <Dot />}
+                <OIconButton
+                  icon={theme.images.general.messages}
+                  iconStyle={{
+                    width: 20,
+                    height: 20,
+                    tintColor: theme.colors.textGray,
+                  }}
+                  borderColor={theme.colors.clear}
+                  style={styles.icons}
+                  onClick={() => handleOpenMessagesForBusiness()}
+                />
+              </Messages>
             </Actions>
           )}
         </Header>
@@ -254,7 +267,6 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   style={styles.icons}
                   onClick={() => handleOpenMapView()}
                 />
-
                 <OIconButton
                   icon={theme.images.general.messages}
                   iconStyle={{

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

@@ -25,13 +25,13 @@ export const Logo = styled.View`
 
 export const OrderContent = styled.View`
   flex: 1;
-  ${(props : any) => props.isOrderGroup && css`
+  ${(props: any) => props.isOrderGroup && css`
     border-color: rgba(0, 0, 0, 0.2);
     border-width: 1px;
     padding: 10px;
   `
   }
-  ${(props : any) => props.lastOrder && css`
+  ${(props: any) => props.lastOrder && css`
     margin-bottom: 50px;
   `}
 `;
@@ -68,7 +68,18 @@ export const Table = styled.View`
 
 export const OrderBill = styled.View`
   padding-vertical: 20px;
-  padding-bottom: 30px;
+  ${(props: any) => !props.vehicleExists && css`
+    padding-bottom: 50px;
+  `
+  }
+  flex: 1;
+`;
+
+export const OrderVehicle = styled.View`
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.borderTops};
+  padding-vertical: 20px;
+  padding-bottom: 50px;
   flex: 1;
 `;
 
@@ -98,3 +109,18 @@ export const OSRow = styled.View`
   width: 70%;
   flex-wrap: wrap;
 `
+
+export const Messages = styled.View`
+position: relative;
+`;
+
+export const Dot = styled.View`
+position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: ${(props: any) => props.theme.colors.red};
+  top: 10;
+  right: 10;
+  z-index: 99;
+`;

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

@@ -415,6 +415,7 @@ export interface OrderDetailsParams {
   orderTitle?: any;
   forceUpdate?: number;
   getPermissions?: any
+  loadMessages?: any
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;