Added new award flow to challenges (#10512)

website/client/components/challenges/challengeMemberProgressModal.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
   b-modal#challenge-member-modal(title="User Progress", size='lg')
+    .row.award-row
+      .col-12.text-center
+        button.btn.btn-primary(v-once, @click='closeChallenge()') {{ $t('awardWinners') }}
     .row
       task-column.col-6(
         v-for="column in columns",
@@ -8,12 +11,19 @@
         :taskListOverride='tasksByType[column]')
 </template>
 
+<style scoped>
+  .award-row {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>
+
 <script>
 import axios from 'axios';
 import Column from '../tasks/column';
 
 export default {
-  props: ['challengeId', 'memberId'],
+  props: ['challengeId'],
   components: {
     TaskColumn: Column,
   },
@@ -26,8 +36,19 @@ export default {
         todo: [],
         reward: [],
       },
+      memberId: '',
     };
   },
+  mounted () {
+    this.$root.$on('habitica:challenge:member-progress', (data) => {
+      if (!data.progressMemberId) return;
+      this.memberId = data.progressMemberId;
+      this.$root.$emit('bv::show::modal', 'challenge-member-modal');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica:challenge:member-progress');
+  },
   watch: {
     async memberId (id) {
       if (!id) return;
@@ -45,5 +66,14 @@ export default {
       });
     },
   },
+  methods: {
+    async closeChallenge () {
+      this.challenge = await this.$store.dispatch('challenges:selectChallengeWinner', {
+        challengeId: this.challengeId,
+        winnerId: this.memberId,
+      });
+      this.$router.push('/challenges/myChallenges');
+    },
+  },
 };
 </script>