ordering-ui-react-native 0.21.86 → 0.21.87-release

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

@@ -13,6 +13,8 @@ import {
   OrderBill,
   Total,
   OSRow,
+  OrderVehicle,
+  OrderSpot,
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -66,6 +68,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   })
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const deliveryTypes = [1, 7]
 
   const walletName: any = {
     cash: {
@@ -97,19 +100,21 @@ export const OrderContentComponent = (props: OrderContent) => {
     }
   })
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     if (!order?.taxes) return 0
     if (order?.taxes?.length === 0) {
       return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
     } else {
       return order?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+        return taxIncluded +
+          (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') ||
+            (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
       }, 0)
     }
   }
 
   const getIncludedTaxesDiscounts = () => {
-    return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+    return order?.taxes?.filter((tax: any) => tax?.type === 1 && tax?.target === 'product')?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const containsOnlyNumbers = (str: string) => {
@@ -219,8 +224,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}
@@ -230,7 +235,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 && (
@@ -239,8 +244,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}
@@ -360,8 +365,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}
@@ -408,26 +413,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 && deliveryTypes.includes(order?.delivery_type)) && (
           <View style={{ marginTop: 10 }}>
-            {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+            {order?.delivery_option !== undefined && deliveryTypes.includes(order?.delivery_type) && (
               <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 }}
@@ -439,10 +434,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
@@ -453,7 +454,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           ))}
       </OrderProducts>
 
-      <OrderBill>
+      <OrderBill vehicleExists={!!order?.vehicle}>
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
@@ -478,7 +479,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>
                   )}
@@ -520,11 +521,11 @@ export const OrderContentComponent = (props: OrderContent) => {
           )
         }
         {
-          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any) => (
             <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>
@@ -537,7 +538,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>
@@ -550,7 +551,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>
                   )}
@@ -561,24 +562,37 @@ 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')}
               </OText>
 
               <OText mBottom={4}>
-                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}
+                {parsePrice(order?.summary?.delivery_price + getIncludedTaxes(true), { currency: order?.currency })}
               </OText>
             </Table>
           )
         }
+        {
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+            <Table key={`${tax.description}_${i}`}>
+              <OSRow>
+                <OText mBottom={4}>
+                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+            </Table>
+          ))
+        }
         {
           order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
             <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>
                   )}
@@ -588,7 +602,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')}
@@ -646,13 +660,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)
@@ -664,7 +677,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,12 +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: {
@@ -88,6 +102,11 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     19: theme.colors.statusOrderBlue,
     20: theme.colors.statusOrderBlue,
     21: theme.colors.statusOrderBlue,
+    22: theme.colors.statusOrderBlue,
+    23: theme.colors.statusOrderBlue,
+    24: theme.colors.statusOrderBlue,
+    25: theme.colors.statusOrderBlue,
+    26: theme.colors.statusOrderBlue,
     //GREEN
     1: theme.colors.statusOrderGreen,
     11: theme.colors.statusOrderGreen,
@@ -125,11 +144,26 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     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
-        : t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.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 && (
@@ -173,18 +207,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>
@@ -192,16 +228,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)) && (
@@ -240,7 +272,6 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   style={styles.icons}
                   onClick={() => handleOpenMapView()}
                 />
-
                 <OIconButton
                   icon={theme.images.general.messages}
                   iconStyle={{
@@ -259,7 +290,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')}{' '}
@@ -273,7 +304,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}

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: 10px;
+  right: 10px;
+  z-index: 99;
+`;