Show amazon affiliate links in game modal

functions/index.js

@@ -222,6 +222,7 @@ exports.game = functions.https.onRequest((req, res) => {
   alternative_names.*,
   age_ratings.*,
   videos.video_id,
+  external_games.*,
   rating,
   genres.name,
   platforms.name,

src/components/Game/AmazonLinks.vue

@@ -0,0 +1,66 @@
+<template lang="html">
+  <div>
+    <b-button
+      v-b-modal.amazon
+      variant="warning"
+      class="mt-2"
+      v-if="amazonLinks.length"
+    >
+      <i class="fab fa-amazon fa-fw" aria-hidden />
+      Available on Amazon
+    </b-button>
+
+    <b-modal
+      id="amazon"
+      hide-footer
+    >
+      <template v-slot:modal-header="{ close }">
+        <modal-header
+          :title="`Find ${game.name} on Amazon`"
+          @close="close"
+        />
+      </template>
+
+      <p>Support Gamebrary by using these affiliate links to purchase games from Amazon.</p>
+
+      <div class="links">
+        <a
+          v-if="link.uid && link.url"
+          v-for="link in amazonLinks"
+          :key="link.url"
+          :href="`https://amazon.com/dp/${link.uid}?tag=gamebrary0e-20`"
+          target="_blank"
+        >
+          <b-img
+            :src="`http://images.amazon.com/images/P/${link.uid}.01._SCMZZZZZZZ_.jpg`"
+            thumbnail
+          />
+        </a>
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    game: Object,
+  },
+
+  computed: {
+    amazonLinks() {
+      return this.game && this.game.external_games
+        ? this.game.external_games.filter(({ category }) => category === 20)
+        : [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.links {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1rem;
+}
+</style>

src/components/Game/GameModal.vue

@@ -41,6 +41,7 @@
         <b-dropdown
           right
           no-caret
+          :variant="nightMode ? 'dark' : 'light'"
         >
           <template v-slot:button-content>
             <i class="fas fa-ellipsis-h fa-fw" aria-hidden></i>
@@ -118,6 +119,8 @@
             no-border
           />
 
+          <amazon-links :game="game" />
+
           <br />
 
           <b-badge
@@ -166,6 +169,7 @@ import { mapState, mapGetters } from 'vuex';
 import GameDetails from '@/components/Game/GameDetails';
 import GameNotes from '@/components/Game/GameNotes';
 import GameScreenshots from '@/components/Game/GameScreenshots';
+import AmazonLinks from '@/components/Game/AmazonLinks';
 import GameVideos from '@/components/Game/GameVideos';
 import GameWebsites from '@/components/Game/GameWebsites';
 import GameNotesModal from '@/components/Game/GameNotesModal';
@@ -181,6 +185,7 @@ export default {
     GameDetails,
     GameNotes,
     GameScreenshots,
+    AmazonLinks,
     GameVideos,
     GameWebsites,
     GameNotesModal,