add adverttype to listing

helsingborg-stad · Jan 24, 2025 · d16b958 · d16b958
1 parent 1862da9
commit d16b958
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/src/adverts/components/listings/AdvertListItem.tsx b/src/adverts/components/listings/AdvertListItem.tsx
@@ -14,9 +14,9 @@ import { Category } from 'categories/types'
 import { TreeAdapter } from 'lib/types'
 import { PhraseContext } from 'phrases'
 import RecyclingIcon from '@mui/icons-material/Recycling'
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz'
 import { isValidString } from 'lib/string-utils'
 import { AdvertImageSettingsContext } from 'branding'
+import ScheduleIcon from '@mui/icons-material/Schedule'
 import { Advert } from '../../types'
 
 const join = (sep: string, ...parts: (string | number | undefined)[]) =>
@@ -115,7 +115,7 @@ export const AdvertListItem: FC<{
                             </Typography>
                         </Box>
                     </Grid>
-                    <Grid item sx={{ mx: 2, mb: 2 }}>
+                    <Grid item sx={{ mx: 2, mb: 3 }}>
                         <Typography
                             variant="caption"
                             color="text.disabled"
@@ -137,41 +137,60 @@ export const AdvertListItem: FC<{
                         {!canBook &&
                             returnInfo.map((info, index) => (
                                 <Typography
-                                    color="text.secondary"
+                                    variant="caption"
+                                    color="text.disabled"
                                     component="div"
                                     noWrap
-                                    sx={{ fontWeight: 'bolder' }}
                                     key={index}
+                                    position="absolute"
+                                    bottom="4px"
                                 >
                                     {phrase(
                                         'ADVERT_WILL_BE_RETURNED',
                                         'Åter {at}',
                                         { at: prettyDate(info.at) }
                                     )}
-                                    <SwapHorizIcon
+                                    <ScheduleIcon
                                         sx={{
                                             pl: 0.5,
-                                            fontSize: 22,
-                                            verticalAlign: 'middle',
+                                            fontSize: 18,
+                                            verticalAlign: 'top',
                                         }}
                                     />
                                 </Typography>
                             ))}
-                        {returnInfo.length === 0 && (
+                        {returnInfo.length === 0 && isLendingAdvert && (
                             <Typography
                                 variant="caption"
                                 color="text.disabled"
                                 component="div"
+                                position="absolute"
+                                bottom="4px"
                             >
-                                {phrase(
-                                    `ADVERT_TYPE_${advert.type.toUpperCase()}`,
-                                    'Återbruk'
-                                )}
+                                {phrase('ADVERT_TYPE_LENDING', 'Utlåning')}
+                                <ScheduleIcon
+                                    sx={{
+                                        pl: 0.5,
+                                        fontSize: 18,
+                                        verticalAlign: 'top',
+                                    }}
+                                />
+                            </Typography>
+                        )}
+                        {!isLendingAdvert && (
+                            <Typography
+                                variant="caption"
+                                color="text.disabled"
+                                component="div"
+                                position="absolute"
+                                bottom="4px"
+                            >
+                                {phrase('ADVERT_TYPE_RECYCLE', 'Återbruk')}
                                 <RecyclingIcon
                                     sx={{
                                         pl: 0.5,
                                         fontSize: 18,
-                                        verticalAlign: 'middle',
+                                        verticalAlign: 'top',
                                     }}
                                 />
                             </Typography>

diff --git a/src/phrases/default-phrases.ts b/src/phrases/default-phrases.ts
@@ -153,6 +153,7 @@ export const defaultPhrases: Omit<
     ADVERT_FIELD_ADDRESS_TITLE: 'Adress för avhämtning',
     ADVERT_FIELD_QUANTITY: 'Antal',
     ADVERT_TYPE_RECYCLE: 'Återbruk',
+    ADVERT_TYPE_LENDING: 'Utlåning',
     ADVERT_UPLOAD_IMAGE: 'Välj en fin bild',
     ADVERT_BUTTON_SYNCH_FROM_PROFILE: 'Hämta från min profil',
     ADVERT_BUTTON_SYNCH_TO_PROFILE: 'Uppdatera min profil',