From 90a1d38271b6743bd9ef3fa4869a648dac9e08b2 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Thu, 14 Apr 2022 16:27:32 -0700
Subject: [PATCH] giornata di lavoro

---
 src/components/Board/MiniBoard.vue      |   7 +-
 src/components/Game/GameDescription.vue |   1 -
 src/components/GameBoards.vue           |   9 +-
 src/components/GameNote.vue             |   3 +
 src/components/PageHeader.vue           |   3 +-
 src/components/PageTitle.vue            |  20 +-
 src/pages/BoardPage.vue                 |   2 +-
 src/pages/DashboardPage.vue             |  13 +-
 src/pages/NotesPage.vue                 |   2 +-
 src/pages/PublicProfilePage.vue         |  13 +-
 src/pages/SearchPage.vue                |   4 +
 src/pages/UpgradePage.vue               | 325 ++++++++++++++++++++++--
 src/routes.js                           |  18 +-
 src/store/getters.js                    |   6 +
 14 files changed, 380 insertions(+), 46 deletions(-)

diff --git a/src/components/Board/MiniBoard.vue b/src/components/Board/MiniBoard.vue
index 2b5499f7..ce3591c5 100644
--- a/src/components/Board/MiniBoard.vue
+++ b/src/components/Board/MiniBoard.vue
@@ -1,11 +1,10 @@
 <!-- TODO: fix background hex not rendering -->
 <template lang="html">
   <div
-    class="mini-board overflow-hidden p-1 rounded cursor-pointer bg-secondary"
+    :class="['mini-board overflow-hidden p-1 rounded cursor-pointer', { 'bg-secondary': !board.backgroundColor }]"
     :style="miniBoardStyles"
     @click="$emit('view-board', board.id)"
   >
-    <pre>{{ backgroundImage }}</pre>
     <header class="text-small d-flex align-items-center">
       <span class="mr-1">{{ board.name }}</span>
 
@@ -53,9 +52,7 @@ export default {
 
   computed: {
     miniBoardStyles() {
-      if (this.backgroundImage) {
-        return `background-image: url(${this.backgroundImage});`;
-      }
+      if (this.backgroundImage) return `background-image: url(${this.backgroundImage});`
 
       return this.board?.backgroundColor
         ? `background-color: ${this.board.backgroundColor};`
diff --git a/src/components/Game/GameDescription.vue b/src/components/Game/GameDescription.vue
index 42a0fd86..83e94cd5 100644
--- a/src/components/Game/GameDescription.vue
+++ b/src/components/Game/GameDescription.vue
@@ -1,5 +1,4 @@
 <template lang="html">
-  <!-- TODO: break up wikipedia description into chunks -->
   <div class="game-description">
     <div v-if="loading" class="mb-4">
       <b-skeleton
diff --git a/src/components/GameBoards.vue b/src/components/GameBoards.vue
index 442031b1..2e7507a9 100644
--- a/src/components/GameBoards.vue
+++ b/src/components/GameBoards.vue
@@ -30,8 +30,8 @@
       >
         <b-button
           size="sm"
-          variant="secondary"
-          @click.stop="editBoard(board)"
+          variant="transparent"
+          @click.stop="editBoard(board.id)"
         >
           <i class="fas fa-pencil-alt fa-fw" aria-hidden />
         </b-button>
@@ -110,9 +110,8 @@ export default {
       }
     },
 
-    editBoard(board) {
-      this.$store.commit('SET_ACTIVE_BOARD', board);
-      this.$bvModal.show('edit-board');
+    editBoard(id) {
+      this.$router.push({ name: 'edit-board', params: { id } });
     },
 
     getWallpaperUrl(url) {
diff --git a/src/components/GameNote.vue b/src/components/GameNote.vue
index 20a59045..a9351265 100644
--- a/src/components/GameNote.vue
+++ b/src/components/GameNote.vue
@@ -21,6 +21,7 @@
 
 <script>
 import { marked } from 'marked';
+import { mapGetters } from 'vuex';
 
 export default {
   props: {
@@ -28,6 +29,8 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['gameCoverUrl']),
+
     formattedNote() {
       return marked(this.note?.note || this.note);
     },
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index a753a218..8fdd9e71 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -12,11 +12,12 @@
         <i class="fas fa-arrow-left fa-fw" aria-hidden />
       </b-button>
 
+      <portal-target name="pageTitle" />
+
       <span v-if="$route.meta.title">
         {{ $route.meta.title }}
       </span>
 
-      <portal-target v-else name="pageTitle" />
 
       <span v-if="showBoardName">
         {{ board.name }}
diff --git a/src/components/PageTitle.vue b/src/components/PageTitle.vue
index 1d4b9992..218b053c 100644
--- a/src/components/PageTitle.vue
+++ b/src/components/PageTitle.vue
@@ -1,14 +1,18 @@
 <template lang="html">
-  <header class="my-3 d-flex align-items-center justify-content-between">
+  <header class="mb-2 d-flex align-items-center justify-content-between">
     <h5 class="m-0">{{ title }}</h5>
 
-    <b-button
-      v-if="actionText"
-      variant="primary"
-      @click="$emit('action')"
-    >
-      {{ actionText }}
-    </b-button>
+    <div v-if="$slots.default || actionText">
+      <slot />
+
+      <b-button
+        v-if="actionText"
+        variant="primary"
+        @click="$emit('action')"
+      >
+        {{ actionText }}
+      </b-button>
+    </div>
   </header>
 </template>
 
diff --git a/src/pages/BoardPage.vue b/src/pages/BoardPage.vue
index 967978e5..d63cbbad 100755
--- a/src/pages/BoardPage.vue
+++ b/src/pages/BoardPage.vue
@@ -10,7 +10,7 @@
     <portal v-if="isBoardPage" to="headerActions">
       <b-button
         v-if="user && user.uid && user.uid === board.owner"
-        variant="light"
+        variant="primary"
         class="mr-2"
         :to="{ name: 'edit-board', params: { id: board.id } }"
       >
diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
index 7bcf16d5..e86d95f0 100644
--- a/src/pages/DashboardPage.vue
+++ b/src/pages/DashboardPage.vue
@@ -8,12 +8,17 @@
       />
     </portal>
 
+    <portal to="headerActions">
+      <b-button
+        variant="primary"
+        class="mr-2"
+        @click="$router.push({ name: 'create-board' })"
+      >
+        Create board
+      </b-button>
+    </portal>
 
     <div v-if="boards.length">
-      Boards
-
-      <b-button @click="$router.push({ name: 'create-board' })">Create board</b-button>
-
       <game-boards class="mb-3" />
     </div>
 
diff --git a/src/pages/NotesPage.vue b/src/pages/NotesPage.vue
index 708c2013..5759746b 100644
--- a/src/pages/NotesPage.vue
+++ b/src/pages/NotesPage.vue
@@ -1,6 +1,6 @@
 <!-- TODO: pagination? -->
 <template lang="html">
-  <b-container>
+  <b-container fluid>
     <page-title
       title="Notes"
     >
diff --git a/src/pages/PublicProfilePage.vue b/src/pages/PublicProfilePage.vue
index b52980fb..08728e23 100644
--- a/src/pages/PublicProfilePage.vue
+++ b/src/pages/PublicProfilePage.vue
@@ -1,12 +1,17 @@
 <template lang="html">
-  <b-container>
+  <b-container fluid>
     <div v-if="loading">
       Loading...
     </div>
 
     <template v-else-if="profile">
       <div>
-        <img :src="profile.profileImage" :alt="userName" class="rounded" />
+        <img
+          v-if="avatar"
+          :src="avatar"
+          :alt="userName"
+          class="rounded"
+        />
 
         <h2>{{ profile.userName }}</h2>
 
@@ -78,6 +83,10 @@ export default {
     userName() {
       return this.$route.params.userName;
     },
+
+    avatar() {
+      return this.profile?.profilePic || this.user?.photoURL || null;
+    },
   },
 
   watch: {
diff --git a/src/pages/SearchPage.vue b/src/pages/SearchPage.vue
index 980327cb..4229617f 100644
--- a/src/pages/SearchPage.vue
+++ b/src/pages/SearchPage.vue
@@ -2,6 +2,10 @@
   <div class="search-page bg-white p-2">
     <search-box class="d-md-none mb-2" />
 
+    <b-alert show variant="success">
+      Custom search controls go here!
+    </b-alert>
+
     <b-skeleton v-if="loading" />
 
     <b-card-group columns v-else-if="searchResults.length > 0">
diff --git a/src/pages/UpgradePage.vue b/src/pages/UpgradePage.vue
index b01094bf..4c39a597 100644
--- a/src/pages/UpgradePage.vue
+++ b/src/pages/UpgradePage.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div>
+  <b-container fluid>
     <stripe-checkout
       ref="checkoutRef"
       mode="subscription"
@@ -10,13 +10,296 @@
       @loading="load"
     />
 
-    <pre>{{ lineItems }}</pre>
-    <pre>{{ loading }}</pre>
     <!-- TODO: finish UI, set loading spinner -->
+    <b-card class="text-center">
+      <h2>Level up your video game collection!</h2>
+      <p class="lead-text">
+        Organize your video game collection with Gamebrary.
+      </p>
 
-    <b-button @click="planSelected = 'monthly'">Monthly</b-button>
-    <b-button @click="planSelected = 'yearly'">Yearly</b-button>
-  </div>
+      <b-button-group>
+        <b-button
+          :variant="planSelected === 'monthly' ? 'info' : 'light'"
+          @click="planSelected = 'monthly'"
+        >
+          Monthly billing
+        </b-button>
+        <b-button
+          :variant="planSelected === 'yearly' ? 'info' : 'light'"
+          v-b-tooltip.top="'2 Months free'"
+          @click="planSelected = 'yearly'"
+        >
+          Yearly billing
+        </b-button>
+      </b-button-group>
+
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th scope="col"></th>
+            <th scope="col" class="text-muted">
+              Gamebrary Free
+              <br />
+              <h2 class="price">
+                $0{{ pricingLabel }}
+              </h2>
+            </th>
+            <th scope="col" class="text-success">
+              Gamebrary Pro
+              <br />
+              <h2 class="price">
+                ${{ `${amountToPay}${pricingLabel}` }}
+              </h2>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              Unlimited game boards
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Search
+            </td>
+            <td class="text-muted">
+              Basic
+            </td>
+            <td class="text-success">
+              Advanced
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Board filters
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Customizations
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Speedruns
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Steam integration
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Tags
+            </td>
+            <td>
+              5
+            </td>
+            <td>
+              Unlimited
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Notes
+            </td>
+            <td>
+              Plain text
+            </td>
+            <td>
+              Custom notes, rich text.
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Custom URL
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Progress tracking
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Keyboard shortcuts
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Feature
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              List sorting
+            </td>
+            <td>
+              Basic
+            </td>
+            <td>
+              Advanced
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Multiple list views
+            </td>
+            <td>
+              Basic
+            </td>
+            <td>
+              Multiple
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Dock
+              (Quickly access all your boards, pin them, organize them, group them, etc...)
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Import/Export
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Public profile
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>Shared feature</td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Customer support
+            </td>
+            <td>
+              <i class="fa-solid fa-times text-muted" />
+            </td>
+            <td>
+              <i class="fa-solid fa-check text-success" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <b-button size="lg" variant="success" @click="checkout">
+        Go Pro!
+      </b-button>
+    </b-card>
+
+    <b-alert show class="mt-3">
+      Students and Developers get Pro for free!
+    </b-alert>
+
+    <b-alert show class="mt-3">
+      F.A.Q.
+
+      NO REFUNDS
+      We use stripe for payments
+
+    </b-alert>
+  </b-container>
 </template>
 
 <script>
@@ -30,7 +313,7 @@ export default {
   data() {
     return {
       loading: false,
-      planSelected: null,
+      planSelected: 'monthly',
       monthlyPlan: {
         price: 'price_1KjFY4GpsgtQXdlaWZa44Gbj',
         quantity: 1,
@@ -44,16 +327,21 @@ export default {
 
   computed: {
     lineItems() {
-      if (this.planSelected === 'monthly') return [this.monthlyPlan];
-      if (this.planSelected === 'yearly') return [this.yearlyPlan];
-
-      return [{}];
+      return this.planSelected === 'yearly'
+        ? [this.yearlyPlan]
+        : [this.monthlyPlan];
     },
-  },
 
-  watch: {
-    planSelected() {
-      this.$refs.checkoutRef.redirectToCheckout();
+    pricingLabel() {
+      return this.planSelected === 'yearly'
+        ? '/year'
+        : '/month';
+    },
+
+    amountToPay() {
+      return this.planSelected === 'yearly'
+        ? '50'
+        : '5';
     },
   },
 
@@ -61,10 +349,17 @@ export default {
     load(value) {
       this.loading = value;
     },
+
+    checkout() {
+      this.$refs.checkoutRef.redirectToCheckout();
+    }
   },
 };
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
+.price {
+  font-family: 'Gochi Hand', cursive;
+}
 </style>
 
diff --git a/src/routes.js b/src/routes.js
index dd5ed1aa..89c27807 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -76,16 +76,25 @@ const routes = [
         name: 'account-settings',
         path: 'account',
         component: AccountSettingsPage,
+        meta: {
+          title: "Account",
+        },
       },
       {
         name: 'steam-settings',
         path: 'steam',
         component: SteamSettingsPage,
+        meta: {
+          title: "Steam",
+        },
       },
       {
         name: 'general-settings',
         path: '',
         component: GeneralSettingsPage,
+        meta: {
+          title: 'Settings',
+        }
       },
       {
         name: 'tags-settings',
@@ -108,7 +117,7 @@ const routes = [
         path: 'notes',
         component: NotesPage,
         meta: {
-          title: 'Tags',
+          title: 'Notes',
         },
       },
       {
@@ -181,7 +190,7 @@ const routes = [
     path: '/upgrade',
     component: UpgradePage,
     meta: {
-      title: 'Upgrade to PRO!',
+      title: 'Upgrade',
     },
   },
   {
@@ -212,6 +221,9 @@ const routes = [
     path: '/board/create',
     name: 'create-board',
     component: CreateBoardPage,
+    meta: {
+      title: 'Create board',
+    }
   },
   {
     path: '/board/:id',
@@ -260,7 +272,7 @@ const routes = [
     path: '/',
     component: HomePage,
     meta: {
-      title: 'Home',
+      title: 'Dashboard',
       public: true,
     },
   },
diff --git a/src/store/getters.js b/src/store/getters.js
index cdf5c6ae..d5d69113 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -14,6 +14,12 @@ export default {
       : '/no-image.jpg';
   },
 
+  gameCoverUrl: ({ game }) => {
+    return game?.cover?.image_id
+      ? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${game.cover.image_id}.jpg`
+      : '/no-image.jpg';
+  },
+
   isBoardOwner: ({ board, user }) => {
     const boardOwner = board && board.owner;
     const userId = user && user.uid;