From 5a48436eff3dcc9740e7f0df9b2900838918a875 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Wed, 14 Feb 2024 17:49:26 -0600
Subject: [PATCH] WIP(shops): customizations route

---
 .../components/shops/customizations/index.vue | 71 +++++++++++++++++++
 website/client/src/components/shops/index.vue | 14 ++--
 website/client/src/router/index.js            |  2 +
 website/common/locales/en/generic.json        |  4 +-
 4 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 website/client/src/components/shops/customizations/index.vue

diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue
new file mode 100644
index 0000000000..bacdd1ddf2
--- /dev/null
+++ b/website/client/src/components/shops/customizations/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="row market">
+    <div class="standard-sidebar">
+      <filter-sidebar>
+        <filter-group />
+      </filter-sidebar>
+    </div>
+    <div class="standard-page p-0">
+      <div
+        class="background"
+        :style="{'background-image': imageURLs.background}"
+      >
+        <div
+          class="npc"
+          :style="{'background-image': imageURLs.npc}"
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .background, .npc {
+    height: 216px;
+  }
+
+  .npc {
+    background-repeat: no-repeat;
+  }
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+
+import FilterSidebar from '@/components/ui/filterSidebar';
+import FilterGroup from '@/components/ui/filterGroup';
+
+export default {
+  components: {
+    FilterGroup,
+    FilterSidebar,
+  },
+  computed: {
+    ...mapState({
+      // content: 'content',
+      // user: 'user.data',
+      currentEventList: 'worldState.data.currentEventList',
+    }),
+    imageURLs () {
+      const currentEvent = this.currentEventList.find(event => Boolean(event.season));
+      if (!currentEvent) {
+        return {
+          background: 'url(/static/npc/normal/market_background.png)',
+          npc: 'url(/static/npc/normal/market_npc.png)',
+        };
+      }
+      return {
+        background: `url(/static/npc/${currentEvent.season}/market_background.png)`,
+        npc: `url(/static/npc/${currentEvent.season}/market_banner_npc.png)`,
+      };
+    },
+  },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('customizations'),
+      section: this.$t('shops'),
+    });
+  },
+};
+</script>
diff --git a/website/client/src/components/shops/index.vue b/website/client/src/components/shops/index.vue
index d12a19c46e..b6d4e3386a 100644
--- a/website/client/src/components/shops/index.vue
+++ b/website/client/src/components/shops/index.vue
@@ -3,26 +3,32 @@
     <secondary-menu class="col-12">
       <router-link
         class="nav-link"
-        :to="{name: 'market'}"
+        :to="{ name: 'market' }"
         exact="exact"
       >
         {{ $t('market') }}
       </router-link>
       <router-link
         class="nav-link"
-        :to="{name: 'quests'}"
+        :to="{ name: 'quests' }"
       >
         {{ $t('quests') }}
       </router-link>
       <router-link
         class="nav-link"
-        :to="{name: 'seasonal'}"
+        :to="{ name: 'customizations' }"
+      >
+        {{ $t('customizations') }}
+      </router-link>
+      <router-link
+        class="nav-link"
+        :to="{ name: 'seasonal' }"
       >
         {{ $t('titleSeasonalShop') }}
       </router-link>
       <router-link
         class="nav-link"
-        :to="{name: 'time'}"
+        :to="{ name: 'time' }"
       >
         {{ $t('titleTimeTravelers') }}
       </router-link>
diff --git a/website/client/src/router/index.js b/website/client/src/router/index.js
index f3e87d4584..5e51cff9fc 100644
--- a/website/client/src/router/index.js
+++ b/website/client/src/router/index.js
@@ -60,6 +60,7 @@ const ChallengeDetail = () => import(/* webpackChunkName: "challenges" */ '@/com
 const ShopsContainer = () => import(/* webpackChunkName: "shops" */'@/components/shops/index');
 const MarketPage = () => import(/* webpackChunkName: "shops-market" */'@/components/shops/market/index');
 const QuestsPage = () => import(/* webpackChunkName: "shops-quest" */'@/components/shops/quests/index');
+const CustomizationsPage = () => import(/* webpackChunkName: "shops-customizations" */'@/components/shops/customizations/index');
 const SeasonalPage = () => import(/* webpackChunkName: "shops-seasonal" */'@/components/shops/seasonal/index');
 const TimeTravelersPage = () => import(/* webpackChunkName: "shops-timetravelers" */'@/components/shops/timeTravelers/index');
 
@@ -111,6 +112,7 @@ const router = new VueRouter({
       children: [
         { name: 'market', path: 'market', component: MarketPage },
         { name: 'quests', path: 'quests', component: QuestsPage },
+        { name: 'customizations', path: 'customizations', component: CustomizationsPage },
         { name: 'seasonal', path: 'seasonal', component: SeasonalPage },
         { name: 'time', path: 'time', component: TimeTravelersPage },
       ],
diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json
index bfaa238727..3c06a7a895 100644
--- a/website/common/locales/en/generic.json
+++ b/website/common/locales/en/generic.json
@@ -235,8 +235,8 @@
   "questionDescriptionText": "It's okay to ask your questions in your primary language if you aren't comfortable speaking in English.",
   "questionPlaceholder": "Ask your question here",
   "submitQuestion": "Submit Question",
-  "reportPlayer": "Report Player",
   "whyReportingPlayer": "Why are you reporting this player?",
   "whyReportingPlayerPlaceholder": "Reason for report",
-  "playerReportModalBody": "You should only report a player who violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Submitting a false report is a violation of Habitica’s Community Guidelines."
+  "playerReportModalBody": "You should only report a player who violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Submitting a false report is a violation of Habitica’s Community Guidelines.",
+  "customizations": "Customizations"
 }