---
# System prepended metadata

title: '[BUY-2503 Authenticated buyers can manage favorites on desktop](https://casavo.atlassian.net/browse/BUY-2503)'

---

# [BUY-2503 Authenticated buyers can manage favorites on desktop](https://casavo.atlassian.net/browse/BUY-2503)

[figma](https://www.figma.com/file/1UMyommiSZVNDQ3ZJF41nn/%F0%9F%9A%A7-Listing-Platform---WIP?node-id=14758%3A81429&t=9C4XITwWop0wtVKw-0)

- [x] update all favourite touch point
    - [x] listingCard
    - [x] listingCard Map
    - [x] listing detail (check with Bro): do we need to show the header, or just in dropdown profile menu?
    - [x] navMenu enabled only for `it` and `en`
    - [x] add favourites touchpoint in drop down menu
        - [x] create new translation key for dropdown touch point
- [x] nav menu header
    - [x] add new translation keys (bro is on it)
    - [x] when clicking on menu item "Preferiti" navigate to /profile/favourites
    - [x] nav menu header only for it/en
    - [x] styling menu header nav
    - [x] button "search" check all redirect
        - [next iteration] in listings page: anchor to top of the list
        - [x] in listings detail page: bring back to listings page of city
            - [x] when checking route, take in consideration `params` when determining the page
- [x] create page `profile/favorites`
    - [x] create page layout for it/profile/favorites
        - [x] show grid view of favourite listings
        - [x] add page subtitle (use existing mobile translation)
    - [x] create empty state when theres no favs and user is not logged in
    - [x] better handle refresh of favourites after removing a favourite
    - [next iteration] handle error when retrieving favorites
    - [x] fix layout issue when favorites are loaded and removed
- [x] show the favourite button in listing detail
    - [x] https://www.figma.com/file/1UMyommiSZVNDQ3ZJF41nn/%F0%9F%9A%A7-Listing-Platform---WIP?node-id=15762%3A56880&t=YRPARzPJOHXjgYrX-4
- [x] update FavouriteButton Component (if is "unauthorized" from desktop has to open login modal)
    - [x] add listing to favourites after login in
- [x] redirect to /profile/favorites after successful login when clicked on "Preferiti" in navMenu
    - [x] check also after other interactions
- [x] tracking of favourite listing
    - [x] in src/components/FavouriteButton/index.tsx
        - [x] add more options to union type
            - [x] ListingDetail
            - [x] ListingPage
- [x] verify edited ListingVarticalCard old behavior in SimilarListing and ListingNotFound Page
    - [x] check url brings to listing detail (old bevaviour)
    - [x] check "add favorite" is not present (old behaviour)
    - [x] on title click in ListingVerticalCard (when favouriteEnabled) brings to listing detail
- [x] check localize translations
- [x] add data-testid to login modal
    - [x] update cypress tests
- [x] add dedicated card for unpublished listing still in favorites
- [x] SEO check with LucaF for page /profile/favorites (see also Profile page)
- [x] (dropdown menu) il dropdown dell'ordinamento si sovrappone con drop down menu utente
- [x] aggiornare test unitari su FavoritesProvider
- [x] show & tell to Cristina footer
- [ ] rebase

### create new increments

- [ ] styling ListingVerticalCard in favourites mode
    - [ ] is it ok to show it everywhere (e.g. similar listings)
    - [x] remember to update src/components/FavouriteButton/index.tsx
        - [x] ListingSimilar
        - [x] NotFound
        - [x] FavouritesList
    - [ ] track "Preferiti" in navMenu
    - [ ] track "Preferiti" in dropdown menu
- [x] improvements for card layout in /profile/favorites
    - [x] use flex box to make card of equal height and push the price and favorite icon to the bottom
- [ ] update translations for cities
    - [ ] add translations for cities that don't have all locale translations
    - this affects listings of a different locale (e.g. /it/profile/favorites with spanish listings)


### to check with bro
- [x] listing detail (check with Bro): do we need to show the header, or just in dropdown profile menu?
- [x] card mobile vs desktop cta rimozione preferito

### refactor & nice to have

- [ ] rename `favorites` into `favourites`


### remember

- unify experience for adding/removing favourites (e.g. mobile confirmation, mobile trash icon)
- think about adding the favourite icon to similar listing card on mobile
    - outcome: more favs, more opportunities to ask user to login


~~~~### Problema glitch rimozione preferito nella pagina `profile/favorites`
Ho fatto qualche pensata su questo problema, probabilmente è dovuto al fatto che la visualizzazione del preferito (card) è legata allo stato di preferito nel salvato nello stato del provider con a cui accediamo attraverso l'hook...
un primo workaround potrebbe essere quello di calcolare "sganciare" gli id dei preferiti visualizzati nella pagina dallo stato che è in mano all'hook in modo che possiamo rimuoverli visivamente senza triggerare un'aggiornamento dello stato centralizzato a lvl visivo...
invece per la rimozione potrebbe essere che manteniamo il click sul `FavoriteButton` per triggerare la rimozione backend e anche aggiornare lo stato nel provider, ma aggiungere anche una callback ad esso per rimuovere dallo stato che gestisce la presenza nella pagina...
(non so se sono stato chiaro, male che vada ne parliamo lunedì)
giusto per memo per sganciare la lista dei favourites proverei a renderli "statici" con una `react.useRef()` e poi passarli come proprs al componente `Favourites` per poi usarli con uno useState della pagina. (é solo un'idea)

Grazie per la spiegazione e gli spunti Pietro!

Ho fatto una prova con useRef, ma mi manteneva il valore sempre ad Array vuoto [] , ne parliamo lunedì, sono curioso di vedere come faresti!