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

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

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react'
 
 import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -12,6 +13,8 @@ import {
   OrderBill,
   Total,
   OSRow,
+  OrderVehicle,
+  OrderSpot,
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -53,6 +56,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [openReviewModal, setOpenReviewModal] = useState(false)
+  const [showCustomFields, setShowCustomFields] = useState<boolean>(false);
 
   const [isReadMore, setIsReadMore] = useState({
     customerAddress: false,
@@ -134,27 +138,36 @@ export const OrderContentComponent = (props: OrderContent) => {
 
       {order?.metafields?.length > 0 && (
         <OrderBusiness>
-          <OText style={{ marginBottom: 5 }} size={16} weight="600">
-            {t('CUSTOM_FIELDS', 'Custom fields')}
-          </OText>
-
-          {order.metafields.map((field: any) => (
-            <View
-              key={field.id}
-              style={{
-                width: '100%',
-                flexDirection: 'row',
-                marginBottom: 5
-              }}
-            >
-              <OText style={{ width: '50%' }}>
-                {field.key}
-              </OText>
-              <OText style={{ width: '45%', textAlign: 'right' }}>
-                {field.value}
-              </OText>
-            </View>
-          ))}
+          <TouchableOpacity onPress={() => setShowCustomFields((prev: boolean) => !prev)} style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <OText style={{ marginBottom: 5 }} size={16} weight="600">
+              {t('CUSTOM_FIELDS', 'Custom fields')}
+            </OText>
+            <AntDesignIcon
+              name={showCustomFields ? 'up' : 'down'}
+              size={14}
+            />
+          </TouchableOpacity>
+          {showCustomFields && (
+            <>
+              {order.metafields.map((field: any) => (
+                <View
+                  key={field.id}
+                  style={{
+                    width: '100%',
+                    flexDirection: 'row',
+                    marginBottom: 5
+                  }}
+                >
+                  <OText style={{ width: '50%' }}>
+                    {field.key}
+                  </OText>
+                  <OText style={{ width: '45%', textAlign: 'right' }}>
+                    {field.value}
+                  </OText>
+                </View>
+              ))}
+            </>
+          )}
         </OrderBusiness>
       )}
 
@@ -208,8 +221,8 @@ export const OrderContentComponent = (props: OrderContent) => {
             <OLink
               PressStyle={styles.linkWithIcons}
               url={Platform.select({
-                ios: `maps:0,0?q=${order?.business?.address}`,
-                android: `geo:0,0?q=${order?.business?.address}`,
+                ios: `maps:0,0?q=${order?.business?.address}@${order?.business?.location?.lat},${order?.business?.location?.lng}`,
+                android: `geo:0,0?q=${order?.business?.address}@${order?.business?.location?.lat},${order?.business?.location?.lng}`,
               })}
               numberOfLines={2}
               shorcut={order?.business?.address}
@@ -219,7 +232,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         )}
         {!!order?.business?.location && order?.customer?.location && (
           <OText>
-            {t('DISTANCE_TO_THE_BUSINESS', 'Distance to the business')}: {transformDistance(calculateDistance(order?.business?.location, { latitude: order?.customer?.location?.lat, longitude: order?.customer?.location?.lng }), distanceUnit)} {t(distanceUnit.toUpperCase(), distanceUnit)}
+            {t('DISTANCE_TO_THE_BUSINESS', 'Distance to the business')}: {transformDistance(calculateDistance(order?.business?.location, { latitude: order?.customer?.location?.lat, longitude: order?.customer?.location?.lng }), distanceUnit)} {t(distanceUnit?.toUpperCase?.(), distanceUnit)}
           </OText>
         )}
         {!!order?.business?.address_notes && (
@@ -228,8 +241,8 @@ export const OrderContentComponent = (props: OrderContent) => {
               <OLink
                 PressStyle={styles.linkWithIcons}
                 url={Platform.select({
-                  ios: `maps:0,0?q=${order?.business?.address_notes}`,
-                  android: `geo:0,0?q=${order?.business?.address_notes}`,
+                  ios: `maps:0,0?q=${order?.business?.address_notes}@${order?.business?.location?.lat},${order?.business?.location?.lng}`,
+                  android: `geo:0,0?q=${order?.business?.address_notes}@${order?.business?.location?.lat},${order?.business?.location?.lng}`,
                 })}
                 shorcut={order?.business?.address_notes}
                 TextStyle={styles.textLink}
@@ -349,8 +362,8 @@ export const OrderContentComponent = (props: OrderContent) => {
               <OLink
                 PressStyle={{ ...styles.linkWithIcons, marginBottom: 0 }}
                 url={Platform.select({
-                  ios: `maps:0,0?q=${order?.customer?.address}`,
-                  android: `geo:0,0?q=${order?.customer?.address}`,
+                  ios: `maps:0,0?q=${order?.customer?.address}@${order?.customer?.location?.lat},${order?.customer?.location?.lng}`,
+                  android: `geo:0,0?q=${order?.customer?.address}@${order?.customer?.location?.lat},${order?.customer?.location?.lng}`,
                 })}
                 onTextLayout={e => onTextLayout(e, 'customerAddress')}
                 numberOfLines={isReadMore.customerAddress ? 20 : 2}
@@ -397,26 +410,16 @@ export const OrderContentComponent = (props: OrderContent) => {
             {t('ON_BEHALF_OF', 'On behalf of')}{': '} {order?.on_behalf_of}
           </OText>
         )}
-        {((order?.delivery_option !== undefined && order?.delivery_type === 1) || !!order?.comment) && (
+        {(order?.delivery_option !== undefined && order?.delivery_type === 1) && (
           <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
-                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
+                {t(order?.delivery_option?.name?.toUpperCase?.()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
-            {!!order?.comment && (
-              <>
-                <OText weight='500' style={{ marginBottom: 5 }}>
-                  {t('ORDER_COMMENT', 'Order Comment')}
-                </OText>
-                <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 20 }}>
-                  {order?.comment}
-                </OText>
-              </>
-            )}
           </View>
         )}
-        {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
+        {!order?.user_review && pastOrderStatuses.includes(order?.status) && order?.customer_id && (
           <OButton
             style={styles.btnReview}
             textStyle={{ color: theme.colors.white }}
@@ -428,10 +431,16 @@ export const OrderContentComponent = (props: OrderContent) => {
       </OrderCustomer>
 
       <OrderProducts>
-        <OText style={{ marginBottom: 5 }} size={16} weight="600">
+        <OText style={{ marginBottom: 10 }} size={16} weight="600">
           {t('ORDER_DETAILS', 'Order Details')}
         </OText>
 
+        {!!order?.comment && (
+          <OText>
+            {`${t('ORDER_COMMENT', 'Order Comment')}: ${order?.comment}`}
+          </OText>
+        )}
+
         {order?.products?.length > 0 &&
           order?.products.map((product: any, i: number) => (
             <ProductItemAccordion
@@ -442,7 +451,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           ))}
       </OrderProducts>
 
-      <OrderBill>
+      <OrderBill vehicleExists={!!order?.vehicle}>
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
@@ -467,7 +476,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
+                  {t(offer.name?.toUpperCase?.()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
@@ -513,7 +522,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={tax.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase?.()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                 </OText>
               </OSRow>
@@ -526,7 +535,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={fee.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(fee?.name?.toUpperCase()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(fee?.name?.toUpperCase?.()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency })} + `}{fee.percentage}%){' '}
                 </OText>
               </OSRow>
@@ -539,7 +548,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
+                  {t(offer.name?.toUpperCase?.()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
@@ -550,7 +559,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           ))
         }
         {
-          typeof order?.summary?.delivery_price === 'number' && (
+          typeof order?.summary?.delivery_price === 'number' && order.delivery_type !== 2 && (
             <Table>
               <OText mBottom={4}>
                 {t('DELIVERY_FEE', 'Delivery Fee')}
@@ -567,7 +576,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
+                  {t(offer.name?.toUpperCase?.()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
@@ -577,7 +586,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           ))
         }
-        {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && (
+        {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && order.delivery_type !== 2 && (
           <Table>
             <OText mBottom={4}>
               {t('DRIVER_TIP', 'Driver tip')}
@@ -635,13 +644,12 @@ export const OrderContentComponent = (props: OrderContent) => {
                     <OText>
                       {event?.wallet_event
                         ? walletName[event?.wallet_event?.wallet?.type]?.name
-                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
+                        : event?.paymethod?.gateway
+                          ? t(event?.paymethod?.gateway?.toUpperCase?.(), event?.paymethod?.name)
+                          : order?.paymethod?.id === event?.paymethod_id
+                            ? t(order?.paymethod?.gateway?.toUpperCase?.(), order?.paymethod?.name)
+                            : ''}
                     </OText>
-                    {/* {event?.data?.charge_id && (
-                      <OText>
-                        {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
-                      </OText>
-                    )} */}
                   </View>
                   <OText>
                     {(event?.paymethod?.gateway === 'cash' && order?.cash)
@@ -653,7 +661,65 @@ export const OrderContentComponent = (props: OrderContent) => {
             </View>
           </View>
         )}
+
       </OrderBill >
+
+      {!!order?.spot_number && (
+        <OrderSpot vehicleExists={!!order?.vehicle}>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('SPOT_NUMBER', 'Spot number')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.spot_number}
+            </OText>
+          </Table>
+        </OrderSpot>
+      )}
+
+      {!!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,6 +24,8 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import {
   useLanguage,
   useUtils,
+  useConfig,
+  useSession
 } from 'ordering-components/native';
 
 interface OrderHeader {
@@ -34,6 +38,8 @@ interface OrderHeader {
   handleViewSummaryOrder?: any;
   handleCopyClipboard?: any
   isCustomView?: any
+  messages?: any
+  messagesReadList?: any
 }
 
 export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -45,11 +51,20 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     getOrderStatus,
     logisticOrderStatus,
     handleViewSummaryOrder,
-    handleCopyClipboard
+    handleCopyClipboard,
+    messages,
+    messagesReadList
   } = props
   const theme = useTheme();
   const [, t] = useLanguage();
-  const [{ parseDate }] = useUtils();
+  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: {
@@ -120,6 +135,30 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
           ? t('CURBSIDE', 'Curbside')
           : t('DRIVER_THRU', 'Driver thru')
 
+  const handlePaymethodsListString = () => {
+    const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
+      return paymethod?.wallet_event
+        ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
+        : paymethod?.paymethod?.gateway && paymethod?.paymethod?.gateway === 'cash' && order?.cash > 0
+          ? `${t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)} (${t('CASH_CHANGE_OF', 'Change of :amount:').replace(':amount:', parsePrice(order?.cash))})`
+          : paymethod?.paymethod?.gateway
+            ? t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+            : t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)
+    })
+    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 && (
@@ -163,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>
@@ -182,16 +223,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
       <OrderHeader>
         {!props.isCustomView ? (
           <OText size={13} style={{ marginBottom: 5 }}>
-            {order?.delivery_datetime_utc
-              ? parseDate(order?.delivery_datetime_utc)
-              : parseDate(order?.delivery_datetime, { utc: false })}
+            {deliveryDate()}
           </OText>
         ) : (
           <Header style={{ alignItems: 'center' }}>
             <OText size={13} style={{ marginBottom: 5 }}>
-              {order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}
+              {deliveryDate()}
             </OText>
 
             {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
@@ -230,7 +267,6 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   style={styles.icons}
                   onClick={() => handleOpenMapView()}
                 />
-
                 <OIconButton
                   icon={theme.images.general.messages}
                   iconStyle={{
@@ -249,7 +285,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
 
         <OText numberOfLines={2} size={20} weight="600">
           <>
-            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id} `}
+            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${showExternalId ? order?.external_id || order?.id : order?.id} `}
             {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
               <>
                 {t('IS', 'is')}{' '}
@@ -263,7 +299,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
-        {order?.external_id && (
+        {order?.external_id && !showExternalId && (
           <OText size={13}>
             <OText size={13} weight='bold'>{`${t('EXTERNAL_ID', 'External ID :')} `}</OText>
             {order?.external_id}
@@ -283,20 +319,10 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
             <OText>
               <OText size={13} weight='bold'>
-                {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+                {`${t(paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD', paymethodsLength > 1 ? 'Payment methods' : 'Payment method')}: `}
               </OText>
               {order?.payment_events?.length > 0 ? (
-                <OText size={13}>
-                  {order?.payment_events?.map((event: any, idx: number) => {
-                    return event?.wallet_event
-                      ? idx < order?.payment_events?.length - 1
-                        ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
-                        : walletName[event?.wallet_event?.wallet?.type]?.name
-                      : idx < order?.payment_events?.length - 1
-                        ? `${t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)} - `
-                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
-                  })}
-                </OText>
+                <OText size={13}>{`${handlePaymethodsListString()}`}</OText>
               ) : (
                 <OText size={13}>{t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}</OText>
               )}

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,28 @@ 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;
+`;
+
+export const OrderSpot = styled.View`
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.borderTops};
+  padding-vertical: 20px;
+  ${(props: any) => !props.vehicleExists && css`
+    padding-bottom: 50px;
+  `}
   flex: 1;
 `;
 
@@ -98,3 +119,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;
+`;