refactor: set favorites mode feature flag in store #408

components/Home/Embedded.vue

@@ -183,7 +183,6 @@ function toggleExploreAroundSelectedPoi() {
       <PoiCardContent
         :details-is-external="true"
         :poi="selectedFeature"
-        :favorites-mode-enabled="false"
         @explore-click="toggleExploreAroundSelectedPoi"
         @zoom-click="goToSelectedFeature"
       />

components/Home/Home.vue

@@ -47,7 +47,9 @@ const menuStore = useMenuStore()
 const { apiMenuCategory, features, selectedCategoryIds } = storeToRefs(menuStore)
 const favoriteStore = useFavoriteStore()
 const { favoritesIds, favoriteAddresses, favoriteFeatures, favoriteCount } = storeToRefs(favoriteStore)
-const { config, settings, contents } = useSiteStore()
+const siteStore = useSiteStore()
+const { config, settings, contents } = siteStore
+const { favoritesModeEnabled } = storeToRefs(siteStore)
 const { $tracking } = useNuxtApp()
 const route = useRoute()
 const router = useRouter()
@@ -141,10 +143,6 @@ onMounted(async () => {
 //
 // Computed
 //
-const favoritesModeEnabled = computed(() => {
-  return settings!.themes[0]?.favorites_mode ?? true
-})
-
 const isBottomMenuOpened = computed(() => {
   return ((device.value.smallScreen && isPoiCardShown.value) || isMenuItemOpen.value)
 })
@@ -622,7 +620,6 @@ function handlePoiCardClose() {
           "
           :poi="selectedFeature"
           class="tw-grow-0"
-          :favorites-mode-enabled="favoritesModeEnabled"
           @explore-click="toggleExploreAroundSelectedPoi(undefined)"
           @favorite-click="toggleFavorite"
           @zoom-click="goToSelectedFeature"
@@ -652,7 +649,6 @@ function handlePoiCardClose() {
             "
             :poi="selectedFeature"
             class="tw-grow-0 tw-text-left tw-h-full"
-            :favorites-mode-enabled="favoritesModeEnabled"
             @explore-click="toggleExploreAroundSelectedPoi(undefined)"
             @favorite-click="toggleFavorite"
             @zoom-click="goToSelectedFeature"

components/MainMap/FavoriteNoteBook.vue

@@ -127,7 +127,6 @@ function removeFavorites() {
     <PoisDeck
       :pois="favoriteFeatures"
       :is-card-light="false"
-      :favorites-mode-enabled="true"
       class="tw-pb-4"
       @explore-click="$emit('exploreClick', $event)"
       @favorite-click="$emit('favoriteClick', $event)"

components/PoisCard/PoiCard.stories.ts

@@ -11,7 +11,6 @@ export default {
 
 const defaultProps = {
   poi,
-  favoritesModeEnabled: false,
 }
 
 export const Default = bind(PoiCard, {

components/PoisCard/PoiCard.story.vue

@@ -5,7 +5,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 
 const defaultProps = {
   poi: poi as ApiPoi,
-  favoritesModeEnabled: false,
 }
 
 const props = {

components/PoisCard/PoiCard.vue

@@ -11,7 +11,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 withDefaults(defineProps<{
   canClose?: boolean
   poi: ApiPoi
-  favoritesModeEnabled: boolean
   showImage?: boolean
 }>(), {
   canClose: true,
@@ -84,7 +83,6 @@ const closeBtnStyles = reactive({
 
     <PoiCardContent
       :poi="poi"
-      :favorites-mode-enabled="favoritesModeEnabled"
       class="tw-px-4 tw-py-5 tw-flex tw-flex-col md:tw-overflow-y-auto tw-flex-grow md:tw-max-h-full tw-box-border tw-w-full md:tw-h-80 md:tw-w-96"
       @explore-click="$emit('exploreClick', $event)"
       @favorite-click="$emit('favoriteClick', $event)"

components/PoisCard/PoiCardContent.vue

@@ -18,7 +18,6 @@ import IsochroneTrigger from '~/components/Isochrone/IsochroneTrigger.vue'
 //
 const props = withDefaults(defineProps<{
   detailsIsExternal?: boolean
-  favoritesModeEnabled: boolean
   poi: ApiPoi
 }>(), {
   detailsIsExternal: false,
@@ -43,7 +42,7 @@ const { contribMode, isContribEligible, getContributorFields } = useContrib()
 const { isModeExplorer } = storeToRefs(useMapStore())
 const device = useDevice()
 const { enabled: isochroneEnabled } = useIsochrone()
-const { explorerModeEnabled } = storeToRefs(useSiteStore())
+const { explorerModeEnabled, favoritesModeEnabled } = storeToRefs(useSiteStore())
 
 //
 // Data

components/PoisCard/PoisDeck.stories.ts

@@ -25,7 +25,6 @@ const defaultProps = {
     ),
   ),
   selectedPoiIds: points.map(feature => feature.properties.id),
-  favoritesModeEnabled: false,
 }
 
 export const Default = bind(PoisDeck, {

components/PoisCard/PoisDeck.story.vue

@@ -18,7 +18,6 @@ const defaultProps = {
     ),
   ),
   selectedPoiIds: points.map(feature => feature.properties.id as ApiPoiId),
-  favoritesModeEnabled: false,
   isCardLight: true,
 }
 

components/PoisCard/PoisDeck.vue

@@ -3,13 +3,10 @@ import type { ApiPoi } from '~/lib/apiPois'
 import PoiCard from '~/components/PoisCard/PoiCard.vue'
 import PoiCardLight from '~/components/PoisCard/PoiCardLight.vue'
 
-withDefaults(defineProps<{
-  favoritesModeEnabled?: boolean
+defineProps<{
   pois: ApiPoi[]
   isCardLight: boolean
-}>(), {
-  favoritesModeEnabled: false,
-})
+}>()
 
 defineEmits<{
   (e: 'exploreClick', poi: ApiPoi): void
@@ -36,7 +33,6 @@ defineEmits<{
       :can-close="false"
       :poi="item"
       class="tw-grow-1 poi-deck"
-      :favorites-mode-enabled="favoritesModeEnabled"
       @explore-click="$emit('exploreClick', $event)"
       @favorite-click="$emit('favoriteClick', $event)"
       @zoom-click="$emit('zoomClick', $event)"

components/PoisDetails/PoiDetails.vue

@@ -86,10 +86,6 @@ export default defineNuxtComponent({
       return PropertyTranslationsContextEnum.Details
     },
 
-    favoritesModeEnabled(): boolean {
-      return this.settings.themes[0]?.favorites_mode ?? true
-    },
-
     properties(): ApiPoi['properties'] {
       if (!this.isLargeLayeout) {
         return this.poi.properties
@@ -306,7 +302,6 @@ export default defineNuxtComponent({
         :route="poiDeps"
         :color-fill="colorFill"
         :color-line="colorLine"
-        :favorites-mode-enabled="favoritesModeEnabled"
       />
     </template>
 

components/PoisDetails/Route/RouteMap.vue

@@ -43,10 +43,6 @@ export default defineNuxtComponent({
       type: String as PropType<string>,
       required: true,
     },
-    favoritesModeEnabled: {
-      type: Boolean,
-      required: true,
-    },
   },
 
   data(): {

pages/embedded.vue

@@ -10,10 +10,11 @@ import { mapStore as useMapStore } from '~/stores/map'
 // Composables
 //
 const { params, query, path } = useRoute()
-const siteStore = useSiteStore()
 const mapStore = useMapStore()
-const { config, settings } = storeToRefs(siteStore)
-const { API_ENDPOINT, API_PROJECT, API_THEME } = config.value!
+const siteStore = useSiteStore()
+const { config, settings } = siteStore
+const { favoritesModeEnabled } = storeToRefs(siteStore)
+const { API_ENDPOINT, API_PROJECT, API_THEME } = config!
 const { $trackingInit } = useNuxtApp()
 
 //
@@ -28,12 +29,12 @@ const categoryIds = ref<number[]>()
 // Hooks
 //
 onBeforeMount(() => {
-  $trackingInit(config.value!)
+  $trackingInit(config!)
 })
 
 const { boundary } = query
-if (boundary && typeof boundary === 'string' && settings.value!.polygons_extra) {
-  const boundaryObject = settings.value!.polygons_extra[boundary]
+if (boundary && typeof boundary === 'string' && settings!.polygons_extra) {
+  const boundaryObject = settings!.polygons_extra[boundary]
   if (boundaryObject) {
     if (typeof boundaryObject.data === 'string') {
       const geojson = (await (await fetch(boundaryObject.data)).json()) as GeoJSON
@@ -78,6 +79,9 @@ if (categoryIds.value && poiId.value) {
 
   mapStore.setSelectedFeature(data.value!)
 }
+
+// Disable Favorite Mode
+favoritesModeEnabled.value = false
 </script>
 
 <template>

stores/site.ts

@@ -9,6 +9,7 @@ interface State {
   locale: string | null
   config: VidoConfig | undefined
   explorerModeEnabled: boolean
+  favoritesModeEnabled: boolean
   settings: Settings | undefined
   contents: ContentEntry[] | undefined
   translations: PropertyTranslations | undefined
@@ -19,6 +20,7 @@ export const siteStore = defineStore('site', {
     locale: null,
     config: undefined,
     explorerModeEnabled: false,
+    favoritesModeEnabled: false,
     settings: undefined,
     contents: undefined,
     translations: undefined,
@@ -28,6 +30,7 @@ export const siteStore = defineStore('site', {
       this.config = vidoConfig(headers)
       this.settings = await getSettings(this.config)
       this.explorerModeEnabled = this.settings?.themes[0]?.explorer_mode || true
+      this.favoritesModeEnabled = this.settings?.themes[0]?.favorites_mode || true
       this.contents = await getContents(this.config)
       this.translations = await getPropertyTranslations(this.config)
     },