From eb43f83c714fb3faa85b156683f21a510a0102c3 Mon Sep 17 00:00:00 2001
From: Keith Holliday <krh121791@yahoo.com>
Date: Mon, 14 Aug 2017 13:19:41 -0600
Subject: [PATCH] New client group plan (#8948)

* Added stripe payment for group plan

* Began adding amazon

* Added amazon payments for group

* Added get group plans route

* Added group plan nav

* Added initial task page

* Added create and edit group plans

* Added initial approval header and footer

* Added assignment and approved requirement

* Added minor text fixes

* Added inital approval flow

* Added approval modal

* Removed always true

* Added more styles for filters

* Added search

* Added env vars

* Fixed router issues

* Added env to social login

* Fixed merge conflict
---
 .../groups/GET-group-plans.test.js            |  32 ++
 webpack/config/prod.env.js                    |  45 +-
 website/client/components/appMenu.vue         |  17 +-
 .../client/components/auth/registerLogin.vue  |   4 +-
 .../client/components/group-plans/index.vue   |  22 +
 .../group-plans/taskInformation.vue           | 411 ++++++++++++++++
 .../client/components/groups/groupPlan.vue    |  43 +-
 .../components/payments/amazonModal.vue       | 218 +++++---
 .../components/settings/subscription.vue      |  91 +---
 .../components/tasks/approvalFooter.vue       |  99 ++++
 .../components/tasks/approvalHeader.vue       |  38 ++
 .../client/components/tasks/approvalModal.vue |  44 ++
 website/client/components/tasks/column.vue    |   6 +-
 website/client/components/tasks/task.vue      | 464 +++++++++---------
 website/client/components/tasks/taskModal.vue | 310 +++++++-----
 website/client/mixins/payments.js             | 105 ++++
 website/client/router.js                      |  24 +
 website/client/store/actions/guilds.js        |   5 +
 website/client/store/actions/tasks.js         |  30 ++
 website/server/controllers/api-v3/groups.js   |  37 ++
 website/server/controllers/api-v3/tasks.js    |   1 +
 21 files changed, 1522 insertions(+), 524 deletions(-)
 create mode 100644 test/api/v3/integration/groups/GET-group-plans.test.js
 create mode 100644 website/client/components/group-plans/index.vue
 create mode 100644 website/client/components/group-plans/taskInformation.vue
 create mode 100644 website/client/components/tasks/approvalFooter.vue
 create mode 100644 website/client/components/tasks/approvalHeader.vue
 create mode 100644 website/client/components/tasks/approvalModal.vue
 create mode 100644 website/client/mixins/payments.js

diff --git a/test/api/v3/integration/groups/GET-group-plans.test.js b/test/api/v3/integration/groups/GET-group-plans.test.js
new file mode 100644
index 0000000000..353a591d4e
--- /dev/null
+++ b/test/api/v3/integration/groups/GET-group-plans.test.js
@@ -0,0 +1,32 @@
+import {
+  generateUser,
+  generateGroup,
+} from '../../../../helpers/api-v3-integration.helper';
+
+describe('GET /group-plans', () => {
+  let user;
+  let groupPlan;
+
+  before(async () => {
+    user = await generateUser({balance: 4});
+    groupPlan = await generateGroup(user,
+      {
+        name: 'public guild - is member',
+        type: 'guild',
+        privacy: 'public',
+      },
+      {
+        purchased: {
+          plan: {
+            customerId: 'existings',
+          },
+        },
+      });
+  });
+
+  it('returns group plans for the user', async () => {
+    let groupPlans = await user.get('/group-plans');
+
+    expect(groupPlans[0]._id).to.eql(groupPlan._id);
+  });
+});
diff --git a/webpack/config/prod.env.js b/webpack/config/prod.env.js
index 4da1052a0c..b5dc59b6b0 100644
--- a/webpack/config/prod.env.js
+++ b/webpack/config/prod.env.js
@@ -1,3 +1,46 @@
-module.exports = {
+const nconf = require('nconf');
+const { join, resolve } = require('path');
+
+const PATH_TO_CONFIG = join(resolve(__dirname, '../../config.json'));
+let configFile = PATH_TO_CONFIG;
+
+nconf
+  .argv()
+  .env()
+  .file('user', configFile);
+
+nconf.set('IS_PROD', nconf.get('NODE_ENV') === 'production');
+nconf.set('IS_DEV', nconf.get('NODE_ENV') === 'development');
+nconf.set('IS_TEST', nconf.get('NODE_ENV') === 'test');
+
+// @TODO: Check if we can import from client. Items like admin emails can be imported
+// and that should be prefered
+
+// To avoid stringifying more data then we need,
+// items from `env` used on the client will have to be specified in this array
+// @TODO: Do we need? const CLIENT_VARS = ['language', 'isStaticPage', 'availableLanguages', 'translations',
+//                      'FACEBOOK_KEY', 'GOOGLE_CLIENT_ID', 'NODE_ENV', 'BASE_URL', 'GA_ID',
+//                      'AMAZON_PAYMENTS', 'STRIPE_PUB_KEY', 'AMPLITUDE_KEY',
+//                      'worldDmg', 'mods', 'IS_MOBILE', 'PUSHER:KEY', 'PUSHER:ENABLED'];
+
+let env = {
   NODE_ENV: '"production"',
+  // clientVars: CLIENT_VARS,
+  AMAZON_PAYMENTS: {
+    SELLER_ID: `"${nconf.get('AMAZON_PAYMENTS:SELLER_ID')}"`,
+    CLIENT_ID: `"${nconf.get('AMAZON_PAYMENTS:CLIENT_ID')}"`,
+  },
+  EMAILS: {
+    COMMUNITY_MANAGER_EMAIL: `"${nconf.get('EMAILS:COMMUNITY_MANAGER_EMAIL')}"`,
+    TECH_ASSISTANCE_EMAIL: `"${nconf.get('EMAILS:TECH_ASSISTANCE_EMAIL')}"`,
+    PRESS_ENQUIRY_EMAIL: `"${nconf.get('EMAILS:PRESS_ENQUIRY_EMAIL')}"`,
+  },
 };
+
+'NODE_ENV BASE_URL GA_ID STRIPE_PUB_KEY FACEBOOK_KEY GOOGLE_CLIENT_ID AMPLITUDE_KEY PUSHER:KEY PUSHER:ENABLED'
+  .split(' ')
+  .forEach(key => {
+    env[key] = `"${nconf.get(key)}"`;
+  });
+
+module.exports = env;
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index 0bb0b53aa5..47e07a4647 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -30,8 +30,16 @@ div
             router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
             router-link.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
             router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
-        router-link.nav-item.dropdown(tag="li", :to="{name: 'groupPlan'}", :class="{'active': $route.path.startsWith('/group-plan')}")
+        router-link.nav-item.dropdown(
+          v-if='groupPlans.length === 0',
+          tag="li",
+          :to="{name: 'groupPlan'}",
+          :class="{'active': $route.path.startsWith('/group-plan')}")
+            a.nav-link(v-once) {{ $t('group') }}
+        .nav-item.dropdown(v-if='groupPlans.length > 0', :class="{'active': $route.path.startsWith('/group-plans')}")
           a.nav-link(v-once) {{ $t('group') }}
+          .dropdown-menu
+            router-link.dropdown-item(v-for='group in groupPlans', :key='group._id', :to="{name: 'groupPlanDetailTaskInformation', params: {groupId: group._id}}") {{ group.name }}
         router-link.nav-item(tag="li", :to="{name: 'myChallenges'}", exact)
           a.nav-link(v-once) {{ $t('challenges') }}
         router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}", :to="{name: 'faq'}")
@@ -226,6 +234,7 @@ export default {
         user: userIcon,
         logo,
       }),
+      groupPlans: [],
     };
   },
   computed: {
@@ -234,6 +243,9 @@ export default {
     }),
     ...mapState({user: 'user.data'}),
   },
+  mounted () {
+    this.getUserGroupPlans();
+  },
   methods: {
     logout () {
       localStorage.removeItem('habit-mobile-settings');
@@ -246,6 +258,9 @@ export default {
       this.$store.state.avatarEditorOptions.editingUser = true;
       this.$root.$emit('show::modal', 'avatar-modal');
     },
+    async getUserGroupPlans () {
+      this.groupPlans = await this.$store.dispatch('guilds:getGroupPlans');
+    },
   },
 };
 </script>
diff --git a/website/client/components/auth/registerLogin.vue b/website/client/components/auth/registerLogin.vue
index edca356e5b..c102ad19b6 100644
--- a/website/client/components/auth/registerLogin.vue
+++ b/website/client/components/auth/registerLogin.vue
@@ -194,9 +194,9 @@ export default {
   },
   mounted () {
     hello.init({
-      facebook: '',
+      facebook: process.env.FACEBOOK_KEY, // eslint-disable-line
       // windows: WINDOWS_CLIENT_ID,
-      google: '',
+      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });
   },
   methods: {
diff --git a/website/client/components/group-plans/index.vue b/website/client/components/group-plans/index.vue
new file mode 100644
index 0000000000..037f2fdd1a
--- /dev/null
+++ b/website/client/components/group-plans/index.vue
@@ -0,0 +1,22 @@
+<template lang="pug">
+.row
+  secondary-menu.col-12
+    router-link.nav-link(:to="{name: 'groupPlanDetailTaskInformation', params: {groupId}}",
+      exact, :class="{'active': $route.name === 'groupPlanDetailTaskInformation'}") Task Board
+    router-link.nav-link(:to="{name: 'groupPlanDetailInformation', params: {groupId}}",
+      exact, :class="{'active': $route.name === 'groupPlanDetailInformation'}") Group Information
+
+  .col-12
+    router-view
+</template>
+
+<script>
+import SecondaryMenu from 'client/components/secondaryMenu';
+
+export default {
+  props: ['groupId'],
+  components: {
+    SecondaryMenu,
+  },
+};
+</script>
diff --git a/website/client/components/group-plans/taskInformation.vue b/website/client/components/group-plans/taskInformation.vue
new file mode 100644
index 0000000000..82393a124e
--- /dev/null
+++ b/website/client/components/group-plans/taskInformation.vue
@@ -0,0 +1,411 @@
+<template lang="pug">
+.standard-page
+  .row.tasks-navigation
+    .col-4
+      h1 Group's Tasks
+    // @TODO: Abstract to component?
+    .col-4
+      .input-group
+        input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
+        .filter-panel(v-if="isFilterPanelOpen")
+          .tags-category.d-flex(v-for="tagsType in tagsByType", v-if="tagsType.tags.length > 0", :key="tagsType.key")
+            .tags-header
+              strong(v-once) {{ $t(tagsType.key) }}
+              a.d-block(v-if="tagsType.key === 'tags' && !editingTags", @click="editTags()") {{ $t('editTags2') }}
+            .tags-list.container
+              .row(:class="{'no-gutters': !editingTags}")
+                template(v-if="editingTags && tagsType.key === 'tags'")
+                  .col-6(v-for="(tag, tagIndex) in tagsSnap")
+                    .inline-edit-input-group.tag-edit-item.input-group
+                      input.tag-edit-input.inline-edit-input.form-control(type="text", :value="tag.name")
+                      span.input-group-btn(@click="removeTag(tagIndex)")
+                        .svg-icon.destroy-icon(v-html="icons.destroy")
+                  .col-6
+                    input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event)", v-model="newTag")
+                template(v-else)
+                  .col-6(v-for="(tag, tagIndex) in tagsType.tags")
+                    label.custom-control.custom-checkbox
+                      input.custom-control-input(
+                        type="checkbox",
+                        :checked="isTagSelected(tag)",
+                        @change="toggleTag(tag)",
+                      )
+                      span.custom-control-indicator
+                      span.custom-control-description {{ tag.name }}
+
+          .filter-panel-footer.clearfix
+            template(v-if="editingTags === true")
+              .text-center
+                a.mr-3.btn-filters-primary(@click="saveTags()", v-once) {{ $t('saveEdits') }}
+                a.btn-filters-secondary(@click="cancelTagsEditing()", v-once) {{ $t('cancel') }}
+            template(v-else)
+              .float-left
+                a.btn-filters-danger(@click="resetFilters()", v-once) {{ $t('resetFilters') }}
+              .float-right
+                a.mr-3.btn-filters-primary(@click="applyFilters()", v-once) {{ $t('applyFilters') }}
+                a.btn-filters-secondary(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
+        span.input-group-btn
+          button.btn.btn-secondary.filter-button(
+            type="button",
+            @click="toggleFilterPanel()",
+            :class="{'filter-button-open': selectedTags.length > 0}",
+          )
+            .d-flex.align-items-center
+              span(v-once) {{ $t('filter') }}
+              .svg-icon.filter-icon(v-html="icons.filter")
+    #create-dropdown.col-1.offset-3
+      b-dropdown(:right="true", :variant="'success'")
+        div(slot="button-content")
+          .svg-icon.positive(v-html="icons.positive")
+          | {{ $t('create') }}
+        b-dropdown-item(v-for="type in columns", :key="type", @click="createTask(type)")
+          span.dropdown-icon-item(v-once)
+            span.svg-icon.inline(v-html="icons[type]")
+            span.text {{$t(type)}}
+      task-modal(
+        :task="workingTask",
+        :purpose="taskFormPurpose",
+        @cancel="cancelTaskModal()",
+        ref="taskModal",
+        :groupId="groupId",
+        v-on:taskCreated='taskCreated',
+        v-on:taskEdited='taskEdited',
+      )
+  .row
+    task-column.col-3(
+      v-for="column in columns",
+      :type="column",
+      :key="column",
+      :taskListOverride='tasksByType[column]',
+      v-on:editTask="editTask",
+      :group='group',
+      :searchText="searchText")
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .user-tasks-page {
+    padding-top: 31px;
+  }
+
+  .tasks-navigation {
+    margin-bottom: 40px;
+  }
+
+  .positive {
+    display: inline-block;
+    width: 10px;
+    color: $green-500;
+    margin-right: 8px;
+    padding-top: 6px;
+  }
+
+  .dropdown-icon-item .svg-icon {
+    width: 16px;
+  }
+
+  button.btn.btn-secondary.filter-button {
+    box-shadow: none;
+    border-radius: 2px;
+    border: 1px solid $gray-400 !important;
+
+    &:hover, &:active, &:focus, &.open {
+      box-shadow: none;
+      border-color: $purple-500 !important;
+      color: $gray-50 !important;
+    }
+
+    &.filter-button-open {
+      color: $purple-200 !important;
+
+      .filter-icon {
+        color: $purple-200 !important;
+      }
+    }
+
+    .filter-icon {
+      height: 10px;
+      width: 12px;
+      color: $gray-50;
+      margin-left: 15px;
+    }
+  }
+
+  .filter-panel {
+    position: absolute;
+    padding-left: 24px;
+    padding-right: 24px;
+    max-width: 40vw;
+    z-index: 9999;
+    background: $white;
+    border-radius: 2px;
+    box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+    top: 44px;
+    left: 20vw;
+    font-size: 14px;
+    line-height: 1.43;
+    text-overflow: ellipsis;
+
+    .tags-category {
+      border-bottom: 1px solid $gray-600;
+      padding-bottom: 24px;
+      padding-top: 24px;
+    }
+
+    .tags-header {
+       flex-basis: 96px;
+       flex-shrink: 0;
+
+      a {
+        font-size: 12px;
+        line-height: 1.33;
+        color: $blue-10;
+        margin-top: 4px;
+
+        &:focus, &:hover, &:active {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .tag-edit-input {
+      border-bottom: 1px solid $gray-500 !important;
+
+      &:focus, &:focus ~ .input-group-btn {
+        border-color: $purple-500 !important;
+      }
+    }
+
+    .new-tag-item {
+      width: 100%;
+      background-repeat: no-repeat;
+      background-position: center left 10px;
+      border-bottom: 1px solid $gray-500 !important;
+      background-size: 10px 10px;
+      padding-left: 40px;
+      background-image: url(~client/assets/svg/for-css/positive.svg);
+    }
+
+    .tag-edit-item .input-group-btn {
+      border-bottom: 1px solid $gray-500 !important;
+
+      &:focus {
+        border-color: $purple-500;
+      }
+    }
+
+    .custom-control-description {
+      margin-left: 10px;
+    }
+
+    .filter-panel-footer {
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      a {
+        &:focus, &:hover, &:active {
+          text-decoration: underline;
+        }
+      }
+
+      .btn-filters-danger {
+        color: $red-50;
+      }
+
+      .btn-filters-primary {
+        color: $blue-10;
+      }
+
+      .btn-filters-secondary {
+        color: $gray-300;
+      }
+    }
+  }
+</style>
+
+<script>
+import taskDefaults from 'common/script/libs/taskDefaults';
+import TaskColumn from '../tasks/column';
+import TaskModal from '../tasks/taskModal';
+import bDropdown from 'bootstrap-vue/lib/components/dropdown';
+import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
+
+import positiveIcon from 'assets/svg/positive.svg';
+import filterIcon from 'assets/svg/filter.svg';
+import deleteIcon from 'assets/svg/delete.svg';
+import habitIcon from 'assets/svg/habit.svg';
+import dailyIcon from 'assets/svg/daily.svg';
+import todoIcon from 'assets/svg/todo.svg';
+import rewardIcon from 'assets/svg/reward.svg';
+
+import Vue from 'vue';
+import cloneDeep from 'lodash/cloneDeep';
+import findIndex from 'lodash/findIndex';
+import groupBy from 'lodash/groupBy';
+import { mapState } from 'client/libs/store';
+
+export default {
+  props: ['groupId'],
+  components: {
+    TaskColumn,
+    TaskModal,
+    bDropdown,
+    bDropdownItem,
+  },
+  data () {
+    return {
+      columns: ['habit', 'daily', 'todo', 'reward'],
+      tasksByType: {
+        habit: [],
+        daily: [],
+        todo: [],
+        reward: [],
+      },
+      editingTask: {},
+      creatingTask: {},
+      workingTask: {},
+      taskFormPurpose: 'create',
+      // @TODO: Separate component?
+      searchText: '',
+      selectedTags: [],
+      temporarilySelectedTags: [],
+      isFilterPanelOpen: false,
+      icons: Object.freeze({
+        positive: positiveIcon,
+        filter: filterIcon,
+        destroy: deleteIcon,
+        habit: habitIcon,
+        daily: dailyIcon,
+        todo: todoIcon,
+        reward: rewardIcon,
+      }),
+      editingTags: false,
+      group: {},
+    };
+  },
+  async mounted () {
+    this.group = await this.$store.dispatch('guilds:getGroup', {
+      groupId: this.groupId,
+    });
+
+    let tasks = await this.$store.dispatch('tasks:getGroupTasks', {
+      groupId: this.groupId,
+    });
+
+    let approvalRequests = await this.$store.dispatch('tasks:getGroupApprovals', {
+      groupId: this.groupId,
+    });
+    let groupedApprovals = groupBy(approvalRequests, 'group.taskId');
+
+    tasks.forEach((task) => {
+      task.approvals = groupedApprovals[task._id];
+      this.tasksByType[task.type].push(task);
+    });
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    tagsByType () {
+      const userTags = this.user.tags;
+      const tagsByType = {
+        challenges: {
+          key: 'challenges',
+          tags: [],
+        },
+        groups: {
+          key: 'groups',
+          tags: [],
+        },
+        user: {
+          key: 'tags',
+          tags: [],
+        },
+      };
+
+      userTags.forEach(t => {
+        if (t.group) {
+          tagsByType.groups.tags.push(t);
+        } else if (t.challenge) {
+          tagsByType.challenges.tags.push(t);
+        } else {
+          tagsByType.user.tags.push(t);
+        }
+      });
+
+      return tagsByType;
+    },
+  },
+  methods: {
+    editTask (task) {
+      this.taskFormPurpose = 'edit';
+      this.editingTask = cloneDeep(task);
+      this.workingTask = this.editingTask;
+      // Necessary otherwise the first time the modal is not rendered
+      Vue.nextTick(() => {
+        this.$root.$emit('show::modal', 'task-modal');
+      });
+    },
+    createTask (type) {
+      this.taskFormPurpose = 'create';
+      this.creatingTask = taskDefaults({type, text: ''});
+      this.workingTask = this.creatingTask;
+      // Necessary otherwise the first time the modal is not rendered
+      Vue.nextTick(() => {
+        this.$root.$emit('show::modal', 'task-modal');
+      });
+    },
+    taskCreated (task) {
+      this.tasksByType[task.type].push(task);
+    },
+    taskEdited (task) {
+      let index = findIndex(this.tasksByType[task.type], (taskItem) => {
+        return taskItem._id === task._id;
+      });
+      this.tasksByType[task.type].splice(index, 1, task);
+    },
+    cancelTaskModal () {
+      this.editingTask = null;
+      this.creatingTask = null;
+      this.workingTask = {};
+    },
+    toggleFilterPanel () {
+      if (this.isFilterPanelOpen === true) {
+        this.closeFilterPanel();
+      } else {
+        this.openFilterPanel();
+      }
+    },
+    openFilterPanel () {
+      this.isFilterPanelOpen = true;
+      this.temporarilySelectedTags = this.selectedTags.slice();
+    },
+    closeFilterPanel () {
+      this.temporarilySelectedTags = [];
+      this.isFilterPanelOpen = false;
+    },
+    resetFilters () {
+      this.selectedTags = [];
+      this.closeFilterPanel();
+    },
+    applyFilters () {
+      const temporarilySelectedTags = this.temporarilySelectedTags;
+      this.selectedTags = temporarilySelectedTags.slice();
+      this.closeFilterPanel();
+    },
+    toggleTag (tag) {
+      const temporarilySelectedTags = this.temporarilySelectedTags;
+      const tagI = temporarilySelectedTags.indexOf(tag.id);
+      if (tagI === -1) {
+        temporarilySelectedTags.push(tag.id);
+      } else {
+        temporarilySelectedTags.splice(tagI, 1);
+      }
+    },
+    isTagSelected (tag) {
+      const tagId = tag.id;
+      if (this.temporarilySelectedTags.indexOf(tagId) !== -1) return true;
+      return false;
+    },
+  },
+};
+</script>
diff --git a/website/client/components/groups/groupPlan.vue b/website/client/components/groups/groupPlan.vue
index c4b74b3e3d..2ab181a176 100644
--- a/website/client/components/groups/groupPlan.vue
+++ b/website/client/components/groups/groupPlan.vue
@@ -1,5 +1,6 @@
 <template lang="pug">
 div
+  amazon-payments-modal(:amazon-payments='amazonPayments')
   div(v-if='activePage === PAGES.BENEFITS')
     .header
       h1.text-center Need more for your Group?
@@ -75,9 +76,9 @@ div
             input(type='checkbox', v-model='newGroup.leaderOnly.challenges')
             | {{ $t('leaderOnlyChallenges') }}
       .form-group(v-if='type === "party"')
-        input.btn.btn-default.form-control(type='submit', :value="$t('create')")
+        button.btn.btn-default.form-control(@click='pay()', :value="$t('create')")
       .form-group
-        button.btn.btn-primary.btn-lg.btn-block(@click="upgrade()", :disabled="!newGroupIsReady") {{ $t('create') }}
+        button.btn.btn-primary.btn-lg.btn-block(@click="pay()", :disabled="!newGroupIsReady") {{ $t('create') }}
 </template>
 
 <style lang="scss" scoped>
@@ -163,9 +164,18 @@ div
 </style>
 
 <script>
+import paymentsMixin from '../../mixins/payments';
+import amazonPaymentsModal from '../payments/amazonModal';
+
 export default {
+  mixins: [paymentsMixin],
+  components: {
+    amazonPaymentsModal,
+  },
   data () {
     return {
+      StripeCheckout: {},
+      amazonPayments: {},
       PAGES: {
         CREATE_GROUP: 'create-group',
         UPGRADE_GROUP: 'upgrade-group',
@@ -191,6 +201,9 @@ export default {
   mounted () {
     this.activePage = this.PAGES.BENEFITS;
     this.$store.state.hideHeader = true;
+
+    // @TODO: can this be in a mixin?
+    this.StripeCheckout = window.StripeCheckout;
   },
   destroyed () {
     // @TODO: going from the page back to party modal does not show
@@ -210,21 +223,21 @@ export default {
       this.paymentMethod = paymentType;
       this.changePage(this.PAGES.CREATE_GROUP);
     },
-    upgrade () {
-      //  let subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
+    pay () {
+      let subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
       if (this.paymentMethod === this.PAYMENTS.STRIPE) {
-        // Payments.showStripe({
-        //   subscription: subscriptionKey,
-        //   coupon: null,
-        //   groupToCreate: this.newGroup
-        // });
+        this.showStripe({
+          subscription: subscriptionKey,
+          coupon: null,
+          groupToCreate: this.newGroup,
+        });
       } else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
-        // Payments.amazonPayments.init({
-        //   type: 'subscription',
-        //   subscription: subscriptionKey,
-        //   coupon: null,
-        //   groupToCreate: this.newGroup
-        // });
+        this.amazonPaymentsInit({
+          type: 'subscription',
+          subscription: subscriptionKey,
+          coupon: null,
+          groupToCreate: this.newGroup,
+        });
       }
     },
   },
diff --git a/website/client/components/payments/amazonModal.vue b/website/client/components/payments/amazonModal.vue
index 857f7a365f..2e49194438 100644
--- a/website/client/components/payments/amazonModal.vue
+++ b/website/client/components/payments/amazonModal.vue
@@ -1,17 +1,27 @@
 <template lang="pug">
   b-modal#amazon-payment(title="Amazon", :hide-footer="true", size='lg')
     button#AmazonPayButton
+    #AmazonPayWallet(v-if="amazonPayments.loggedIn", style="width: 400px; height: 228px;")
+    #AmazonPayRecurring(v-if="amazonPayments.loggedIn && amazonPayments.type === 'subscription'",
+                        style="width: 400px; height: 140px;")
+    .modal-footer
+      .btn.btn-primary(:disabled="amazonPaymentsCanCheckout() || !amazonButtonEnabled",
+        @click="amazonCheckOut()") {{ $t('checkout') }}
 </template>
 
+<style scoped>
+  #AmazonPayRecurring {
+    height: 200px;
+    width: 500px;
+  }
+</style>
+
 <script>
 import axios from 'axios';
 
 import bModal from 'bootstrap-vue/lib/components/modal';
 
-const AMAZON_PAYMENTS = {
-  CLIENT_ID: 'testing',
-  SELLER_ID: 'test-seelllide',
-};
+const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
 
 export default {
   components: {
@@ -22,70 +32,85 @@ export default {
     return {
       OffAmazonPayments: {},
       isAmazonReady: false,
+      amazonButtonEnabled: false,
+      amazonPaymentsbillingAgreementId: '',
+      amazonPaymentspaymentSelected: false,
+      amazonPaymentsrecurringConsent: 'false',
     };
   },
   mounted () {
+    // @TODO:
+    // window.onAmazonLoginReady = function() {
+    //   amazon.Login.setClientId('CLIENT-ID');
+    // };
+    // window.onAmazonPaymentsReady = function() {
+    //             showButton();
+    // };
     this.OffAmazonPayments = window.OffAmazonPayments;
     this.isAmazonReady = true;
     window.amazon.Login.setClientId(AMAZON_PAYMENTS.CLIENT_ID);
 
+
     // @TODO: prevent modal close form clicking outside
-    this.OffAmazonPayments.Button('AmazonPayButton', AMAZON_PAYMENTS.SELLER_ID, { // eslint-disable-line
-      type: 'PwA',
-      color: 'Gold',
-      size: 'small',
-      agreementType: 'BillingAgreement',
+    let amazonButton = this.OffAmazonPayments.Button( // eslint-disable-line
+      'AmazonPayButton',
+      AMAZON_PAYMENTS.SELLER_ID,
+      {
+        type: 'PwA',
+        color: 'Gold',
+        size: 'small',
+        agreementType: 'BillingAgreement',
 
-      onSignIn: async (contract) => {
-        this.amazonPaymentsbillingAgreementId = contract.getAmazonBillingAgreementId();
+        onSignIn: async (contract) => {
+          this.amazonPaymentsbillingAgreementId = contract.getAmazonBillingAgreementId();
 
-        if (this.amazonPaymentstype === 'subscription') {
-          this.amazonPaymentsloggedIn = true;
-          this.amazonPaymentsinitWidgets();
-        } else {
-          let url = '/amazon/createOrderReferenceId';
-          let response = await axios.post(url, {
-            billingAgreementId: this.amazonPaymentsbillingAgreementId,
-          });
-
-          // @TODO: Success
-          this.amazonPaymentsloggedIn = true;
-          this.amazonPaymentsorderReferenceId = response.data.orderReferenceId;
-          this.amazonPaymentsinitWidgets();
-          // @TODO: error
-          alert(response.message);
-        }
-      },
-
-      authorization: () => {
-        window.amazon.Login.authorize({
-          scope: 'payments:widget',
-          popup: true,
-        }, function amazonSuccess (response) {
-          if (response.error) return alert(response.error);
-
-          let url = '/amazon/verifyAccessToken';
-          axios.post(url, response)
-            .catch((e) => {
-              alert(e.message);
+          if (this.amazonPayments.type === 'subscription') {
+            this.amazonPayments.loggedIn = true;
+            this.amazonPaymentsinitWidgets();
+          } else {
+            let url = '/amazon/createOrderReferenceId';
+            let response = await axios.post(url, {
+              billingAgreementId: this.amazonPaymentsbillingAgreementId,
             });
-        });
-      },
 
-      onError: this.amazonOnError,
-    });
+            // @TODO: Success
+            this.amazonPayments.loggedIn = true;
+            this.amazonPaymentsorderReferenceId = response.data.orderReferenceId;
+            this.OffAmazonPayments.amazonPaymentsinitWidgets();
+            // @TODO: error
+            alert(response.message);
+          }
+        },
+
+        authorization: () => {
+          window.amazon.Login.authorize({
+            scope: 'payments:widget',
+            popup: true,
+          }, function amazonSuccess (response) {
+            if (response.error) return alert(response.error);
+
+            let url = '/amazon/verifyAccessToken';
+            axios.post(url, response)
+              .catch((e) => {
+                alert(e.message);
+              });
+          });
+        },
+
+        onError: this.amazonOnError,
+      });
   },
   methods: {
     amazonPaymentsCanCheckout () {
-      // if (this.amazonPaymentstype === 'single') {
-      //   return this.amazonPaymentspaymentSelected === true;
-      // } else if(this.amazonPaymentstype === 'subscription') {
-      //   return this.amazonPaymentspaymentSelected === true &&
-      //           // Mah.. one is a boolean the other a string...
-      //           this.amazonPaymentsrecurringConsent === 'true';
-      // } else {
-      //   return false;
-      // }
+      if (this.amazonPayments.type === 'single') {
+        return this.amazonPaymentspaymentSelected === true;
+      } else if (this.amazonPayments.type === 'subscription') {
+        return this.amazonPaymentspaymentSelected === true &&
+                // Mah.. one is a boolean the other a string...
+                this.amazonPaymentsrecurringConsent === 'true';
+      } else {
+        return false;
+      }
     },
     amazonInitWidgets () {
       let walletParams = {
@@ -101,7 +126,7 @@ export default {
         onError: this.amazonOnError,
       };
 
-      if (this.amazonPaymentstype === 'subscription') {
+      if (this.amazonPayments.type === 'subscription') {
         walletParams.agreementType = 'BillingAgreement';
 
         walletParams.billingAgreementId = this.amazonPaymentsbillingAgreementId;
@@ -136,7 +161,7 @@ export default {
     async amazonCheckOut () {
       this.amazonButtonEnabled = false;
 
-      if (this.amazonPaymentstype === 'single') {
+      if (this.amazonPayments.type === 'single') {
         let url = '/amazon/checkout';
         let response = await axios.post(url, {
           orderReferenceId: this.amazonPaymentsorderReferenceId,
@@ -150,35 +175,86 @@ export default {
         // Failure
         alert(response.message);
         this.amazonPaymentsreset();
-      } else if (this.amazonPaymentstype === 'subscription') {
+      } else if (this.amazonPayments.type === 'subscription') {
         let url = '/amazon/subscribe';
 
-        if (this.amazonPaymentsgroupToCreate) {
+        if (this.amazonPayments.groupToCreate) {
           url = '/api/v3/groups/create-plan';
         }
 
         let response = await axios.post(url, {
           billingAgreementId: this.amazonPaymentsbillingAgreementId,
-          subscription: this.amazonPaymentssubscription,
-          coupon: this.amazonPaymentscoupon,
-          groupId: this.amazonPaymentsgroupId,
-          groupToCreate: this.amazonPaymentsgroupToCreate,
+          subscription: this.amazonPayments.subscription,
+          coupon: this.amazonPayments.coupon,
+          groupId: this.amazonPayments.groupId,
+          groupToCreate: this.amazonPayments.groupToCreate,
           paymentType: 'Amazon',
         });
 
-        // IF success
-        this.amazonPaymentsreset();
-        if (response && response.data && response.data._id) {
-          this.$router.push(`/groups/guilds/${response.data._id}`);
-        } else {
-          this.$router.push('/');
+        let responseStatus = response.status;
+        if (responseStatus >= 400) {
+          alert(`Error: ${response.message}`);
+          // @TODO: do we need this? this.amazonPaymentsreset();
+          return;
         }
 
-        // if fails
-        alert(response.message);
+        let newGroup = response.data.data;
+        if (newGroup && newGroup._id) {
+          // @TODO: Just append? or $emit?
+          this.$router.push(`/group-plans/${newGroup._id}/task-information`);
+          return;
+        }
+
+        window.location.reload(true);
         this.amazonPaymentsreset();
       }
     },
+    amazonPaymentsinitWidgets () {
+      let walletParams = {
+        sellerId: AMAZON_PAYMENTS.SELLER_ID,
+        design: {
+          designMode: 'responsive',
+        },
+
+        onPaymentSelect: () => {
+          this.amazonPayments.paymentSelected = true;
+        },
+
+        onError: this.amazonOnError,
+      };
+
+      if (this.amazonPayments.type === 'subscription') {
+        walletParams.agreementType = 'BillingAgreement';
+
+        walletParams.billingAgreementId = this.amazonPayments.billingAgreementId;
+        walletParams.onReady = (billingAgreement) => {
+          this.amazonPayments.billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
+
+          new this.OffAmazonPayments.Widgets.Consent({
+            sellerId: AMAZON_PAYMENTS.SELLER_ID,
+            amazonBillingAgreementId: this.amazonPayments.billingAgreementId,
+            design: {
+              designMode: 'responsive',
+            },
+
+            onReady: (consent) => {
+              let getConsent = consent.getConsentStatus;
+              this.amazonPayments.recurringConsent = getConsent ? getConsent() : false;
+            },
+
+            onConsent: (consent) => {
+              this.amazonPayments.recurringConsent = consent.getConsentStatus();
+            },
+
+            onError: this.amazonOnError,
+          }).bind('AmazonPayRecurring');
+        };
+      } else {
+        walletParams.amazonOrderReferenceId = this.amazonPayments.orderReferenceId;
+      }
+
+      new this.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
+    },
     amazonOnError (error) {
       alert(error.getErrorMessage());
       // @TODO: this.amazonPaymentsreset();
@@ -186,8 +262,8 @@ export default {
     reset () {
       this.amazonPaymentsmodal.close(); // @TODO:  this.$root.$emit('hide::modal', 'guild-form');
       this.amazonPaymentsmodal = null;
-      this.amazonPaymentstype = null;
-      this.amazonPaymentsloggedIn = false;
+      this.amazonPayments.type = null;
+      this.amazonPayments.loggedIn = false;
       this.amazonPaymentsgift = null;
       this.amazonPaymentsbillingAgreementId = null;
       this.amazonPaymentsorderReferenceId = null;
diff --git a/website/client/components/settings/subscription.vue b/website/client/components/settings/subscription.vue
index aee1c45913..a3702b0fa0 100644
--- a/website/client/components/settings/subscription.vue
+++ b/website/client/components/settings/subscription.vue
@@ -116,10 +116,12 @@ import { mapState } from 'client/libs/store';
 import subscriptionBlocks from '../../../common/script/content/subscriptionBlocks';
 import planGemLimits from '../../../common/script/libs/planGemLimits';
 import amazonPaymentsModal from '../payments/amazonModal';
+import paymentsMixin from '../../mixins/payments';
 
 const STRIPE_PUB_KEY = 'pk_test_6pRNASCoBOKtIshFeQd4XMUh';
 
 export default {
+  mixins: [paymentsMixin],
   components: {
     amazonPaymentsModal,
   },
@@ -250,58 +252,6 @@ export default {
       subs.basic_6mo.discount = true;
       subs.google_6mo.discount = false;
     },
-    showStripe (data) {
-      if (!this.checkGemAmount(data)) return;
-
-      let sub = false;
-
-      if (data.subscription) {
-        sub = data.subscription;
-      } else if (data.gift && data.gift.type === 'subscription') {
-        sub = data.gift.subscription.key;
-      }
-
-      sub = sub && subscriptionBlocks[sub];
-
-      let amount = 500;// 500 = $5
-      if (sub) amount = sub.price * 100;
-      if (data.gift && data.gift.type === 'gems') amount = data.gift.gems.amount / 4 * 100;
-      if (data.group) amount = (sub.price + 3 * (data.group.memberCount - 1)) * 100;
-
-      this.StripeCheckout.open({
-        key: STRIPE_PUB_KEY,
-        address: false,
-        amount,
-        name: 'Habitica',
-        description: sub ? this.$t('subscribe') : this.$t('checkout'),
-        image: '/apple-touch-icon-144-precomposed.png',
-        panelLabel: sub ? this.$t('subscribe') : this.$t('checkout'),
-        token: async (res) => {
-          let url = '/stripe/checkout?a=a'; // just so I can concat &x=x below
-
-          if (data.groupToCreate) {
-            url = '/api/v3/groups/create-plan?a=a';
-            res.groupToCreate = data.groupToCreate;
-            res.paymentType = 'Stripe';
-          }
-
-          if (data.gift) url += `&gift=${this.encodeGift(data.uuid, data.gift)}`;
-          if (data.subscription) url += `&sub=${sub.key}`;
-          if (data.coupon) url += `&coupon=${data.coupon}`;
-          if (data.groupId) url += `&groupId=${data.groupId}`;
-
-          let response = await axios.post(url, res);
-          // Success
-          if (response && response.data && response.data._id) {
-            this.$router.push(`/#/options/groups/guilds/${response.data._id}`);
-          } else {
-            window.location.reload(true);
-          }
-          // Error
-          alert(response.message);
-        },
-      });
-    },
     showStripeEdit (config) {
       let groupId;
       if (config && config.groupId) {
@@ -373,34 +323,6 @@ export default {
     getCancelSubInfo () {
       return this.$t(`cancelSubInfo${this.user.purchased.plan.paymentMethod}`);
     },
-    amazonPaymentsInit (data) {
-      if (!this.isAmazonReady) return;
-      if (!this.checkGemAmount(data)) return;
-      if (data.type !== 'single' && data.type !== 'subscription') return;
-
-      if (data.gift) {
-        if (data.gift.gems && data.gift.gems.amount && data.gift.gems.amount <= 0) return;
-        data.gift.uuid = data.giftedTo;
-      }
-
-      if (data.subscription) {
-        this.amazonPayments.subscription = data.subscription;
-        this.amazonPayments.coupon = data.coupon;
-      }
-
-      if (data.groupId) {
-        this.amazonPayments.groupId = data.groupId;
-      }
-
-      if (data.groupToCreate) {
-        this.amazonPayments.groupToCreate = data.groupToCreate;
-      }
-
-      this.amazonPayments.gift = data.gift;
-      this.amazonPayments.type = data.type;
-
-      this.$root.$emit('show::modal', 'amazon-payment');
-    },
     payPalPayment (data) {
       if (!this.checkGemAmount(data)) return;
 
@@ -413,15 +335,6 @@ export default {
       let encodedString = JSON.stringify(gift);
       return encodeURIComponent(encodedString);
     },
-    checkGemAmount (data) {
-      let isGem = data && data.gift && data.gift.type === 'gems';
-      let notEnoughGem = isGem && (!data.gift.gems.amount || data.gift.gems.amount === 0);
-      if (notEnoughGem) {
-        Notification.error(this.$t('badAmountOfGemsToPurchase'), true);
-        return false;
-      }
-      return true;
-    },
   },
 };
 </script>
diff --git a/website/client/components/tasks/approvalFooter.vue b/website/client/components/tasks/approvalFooter.vue
new file mode 100644
index 0000000000..7690a38412
--- /dev/null
+++ b/website/client/components/tasks/approvalFooter.vue
@@ -0,0 +1,99 @@
+<template lang="pug">
+div
+  approval-modal(:task='task')
+  .claim-bottom-message.col-12
+    .task-unclaimed(v-if='!approvalRequested && !multipleApprovalsRequested')
+      | {{ message }}
+      a(@click='claim()', v-if='!userIsAssigned') Claim
+      a(@click='unassign()', v-if='userIsAssigned') Remove Claim
+    .row.task-single-approval(v-if='approvalRequested')
+      .col-6.text-center
+        a(@click='approve()') Approve Task
+      .col-6.text-center
+        a Needs work
+    .text-center.task-multi-approval(v-if='multipleApprovalsRequested')
+      a(@click='showRequests()') View Requests
+</template>
+
+<style scoped>
+  .task-unclaimed a {
+    float: right;
+  }
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+import approvalModal from './approvalModal';
+
+export default {
+  props: ['task', 'group'],
+  components: {
+    approvalModal,
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    userIsAssigned () {
+      return this.task.group.assignedUsers && this.task.group.assignedUsers.indexOf(this.user._id) !== -1;
+    },
+    message () {
+      let assignedUsers = this.task.group.assignedUsers;
+      let assignedUsersLength = assignedUsers.length;
+
+      if (assignedUsersLength === 1 && !this.userIsAssigned) {
+        return `Assigned to ${assignedUsers}`;
+      } else if (assignedUsersLength > 1 && !this.userIsAssigned) {
+        return `Assigned to ${assignedUsersLength} members`;
+      } else if (assignedUsersLength > 1 && this.userIsAssigned) {
+        return `Assigned to you and ${assignedUsersLength} members`;
+      } else if (this.userIsAssigned) {
+        return 'You are assigned to this task';
+      } else if (assignedUsersLength === 0) {
+        return 'This task is unassigned';
+      }
+    },
+    approvalRequested () {
+      if (this.task.approvals && this.task.approvals.length === 1) return true;
+    },
+    multipleApprovalsRequested () {
+      if (this.task.approvals && this.task.approvals.length > 1) return true;
+    },
+  },
+  methods: {
+    claim () {
+      if (!confirm('Are you sure you want to claim this task?')) return;
+      this.$store.dispatch('tasks:assignTask', {
+        taskId: this.task._id,
+        userId: this.user._id,
+      });
+      this.task.group.assignedUsers.push(this.user._id);
+      // @TODO: Reload user tasks?
+    },
+    unassign () {
+      if (!confirm('Are you sure you want to unclaim this task?')) return;
+      this.$store.dispatch('tasks:unassignTask', {
+        taskId: this.task._id,
+        userId: this.user._id,
+      });
+      let index = this.task.group.assignedUsers.indexOf(this.user._id);
+      this.task.group.assignedUsers.splice(index, 1);
+      // @TODO: Reload user tasks?
+    },
+    approve () {
+      if (!confirm('Are you sure you want to approve this task?')) return;
+      let userIdToApprove = this.task.group.assignedUsers[0];
+      this.$store.dispatch('tasks:unassignTask', {
+        taskId: this.task._id,
+        userId: userIdToApprove,
+      });
+      this.task.group.assignedUsers.splice(0, 1);
+      this.task.approvals.splice(0, 1);
+    },
+    reject () {
+
+    },
+    showRequests () {
+      this.$root.$emit('show::modal', 'approval-modal');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/tasks/approvalHeader.vue b/website/client/components/tasks/approvalHeader.vue
new file mode 100644
index 0000000000..ca5b6fd542
--- /dev/null
+++ b/website/client/components/tasks/approvalHeader.vue
@@ -0,0 +1,38 @@
+<template lang="pug">
+.claim-bottom-message.col-12.text-center(v-if='task.approvals && task.approvals.length > 0', :class="{approval: userIsAdmin}")
+  .task-unclaimed
+    | {{ message }}
+</template>
+
+<style scoped>
+  .approval {
+    background: #24cc8f;
+    color: #fff;
+  }
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+export default {
+  props: ['task', 'group'],
+  computed: {
+    ...mapState({user: 'user.data'}),
+    message () {
+      let approvals = this.task.approvals;
+      let approvalsLength = approvals.length;
+      let userIsRequesting = this.task.group.approvals && this.task.group.approvals.indexOf(this.user._id) !== -1;
+
+      if (approvalsLength === 1 && !userIsRequesting) {
+        return `${approvals[0].userId.profile.name} requests approval`;
+      } else if (approvalsLength > 1 && !userIsRequesting) {
+        return `${approvalsLength} request approval`;
+      } else if (approvalsLength === 1 && userIsRequesting) {
+        return 'You are requesting approval';
+      }
+    },
+    userIsAdmin () {
+      return this.group.leader.id === this.user._id;
+    },
+  },
+};
+</script>
diff --git a/website/client/components/tasks/approvalModal.vue b/website/client/components/tasks/approvalModal.vue
new file mode 100644
index 0000000000..d968d51a01
--- /dev/null
+++ b/website/client/components/tasks/approvalModal.vue
@@ -0,0 +1,44 @@
+<template lang="pug">
+  b-modal#approval-modal(title="Approve Task", size='md', :hide-footer="true")
+    .modal-body
+      .row.approval(v-for='(approval, index) in task.approvals')
+        .col-8
+          strong {{approval.userId.profile.name}}
+        .col-2
+          button.btn.btn-primary(@click='approve(index)') Approve
+    .modal-footer
+      button.btn.btn-secondary(@click='close()') {{$t('close')}}
+</template>
+
+<style scoped>
+  .row.approval {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+</style>
+
+<script>
+import bModal from 'bootstrap-vue/lib/components/modal';
+
+export default {
+  props: ['task'],
+  components: {
+    bModal,
+  },
+  methods: {
+    approve (index) {
+      if (!confirm('Are you sure you want to approve this task?')) return;
+      let userIdToApprove = this.task.group.assignedUsers[index];
+      this.$store.dispatch('tasks:unassignTask', {
+        taskId: this.task._id,
+        userId: userIdToApprove,
+      });
+      this.task.group.assignedUsers.splice(index, 1);
+      this.task.approvals.splice(index, 1);
+    },
+    close () {
+      this.$root.$emit('hide::modal', 'approval-modal');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
index 6ad6b75b25..961b198f14 100644
--- a/website/client/components/tasks/column.vue
+++ b/website/client/components/tasks/column.vue
@@ -16,6 +16,7 @@
       v-if="filterTask(task)",
       :isUser="isUser",
       @editTask="editTask",
+      :group='group',
     )
     template(v-if="isUser === true && type === 'reward' && activeFilter.label !== 'custom'")
       .reward-items
@@ -169,7 +170,7 @@ export default {
     bModal,
     shopItem,
   },
-  props: ['type', 'isUser', 'searchText', 'selectedTags', 'taskListOverride'],
+  props: ['type', 'isUser', 'searchText', 'selectedTags', 'taskListOverride', 'group'], // @TODO: maybe we should store the group on state?
   data () {
     const types = Object.freeze({
       habit: {
@@ -227,6 +228,7 @@ export default {
       userPreferences: 'user.data.preferences',
     }),
     taskList () {
+      // @TODO: This should not default to user's tasks. It should require that you pass options in
       if (this.taskListOverride) return this.taskListOverride;
       return this.tasks[`${this.type}s`];
     },
@@ -265,6 +267,8 @@ export default {
           combinedTasksHeights += el.offsetHeight;
         });
 
+        if (!this.$refs.columnBackground) return;
+
         const rewardsList = taskListEl.getElementsByClassName('reward-items')[0];
         if (rewardsList) {
           combinedTasksHeights += rewardsList.offsetHeight;
diff --git a/website/client/components/tasks/task.vue b/website/client/components/tasks/task.vue
index 4a0433b1a2..c5df8352a1 100644
--- a/website/client/components/tasks/task.vue
+++ b/website/client/components/tasks/task.vue
@@ -1,277 +1,281 @@
 <template lang="pug">
-.task.d-flex(:class="{'task-not-scoreable': isUser !== true}")
-  // Habits left side control
-  .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up")
-    .task-control.habit-control(:class="controlClass.up + '-control-habit'", @click="isUser ? score('up') : null")
-      .svg-icon.positive(v-html="icons.positive")
-  // Dailies and todos left side control
-  .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
-    .task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
-      .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed}")
-  // Task title, description and icons
-  .task-content(:class="contentClass")
-    .task-clickable-area(@click="edit($event, task)")
-      h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
-      .task-notes.small-text(v-markdown="task.notes")
-    .checklist(v-if="task.checklist && task.checklist.length > 0")
-      label.custom-control.custom-checkbox.checklist-item(
-        v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
-      )
-        input.custom-control-input(type="checkbox", :checked="item.completed", @change="toggleChecklistItem(item)")
-        span.custom-control-indicator
-        span.custom-control-description {{ item.text }}
-    .icons.small-text.d-flex.align-items-center
-      .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
-        .svg-icon.calendar(v-html="icons.calendar")
-        span {{dueIn}}
-      .icons-right.d-flex.justify-content-end
-        .d-flex.align-items-center(v-if="showStreak")
-          .svg-icon.streak(v-html="icons.streak")
-          span(v-if="task.type === 'daily'") {{task.streak}}
-          span(v-if="task.type === 'habit'")
-            span.m-0(v-if="task.up") +{{task.counterUp}}
-            span.m-0(v-if="task.up && task.down") &nbsp;|&nbsp;
-            span.m-0(v-if="task.down") -{{task.counterDown}}
-        .d-flex.align-items-center(v-if="task.challenge && task.challenge.id")
-          .svg-icon.challenge(v-html="icons.challenge")
-        b-popover.tags-popover.no-span-margin(
-          :triggers="['hover']",
-          :placement="'bottom'",
-          :popover-style="{'max-width': '1000px'}",
+.task
+  approval-header(:task='task', v-if='this.task.group.id', :group='group')
+  .d-flex(:class="{'task-not-scoreable': isUser !== true}")
+    // Habits left side control
+    .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up")
+      .task-control.habit-control(:class="controlClass.up + '-control-habit'", @click="isUser ? score('up') : null")
+        .svg-icon.positive(v-html="icons.positive")
+    // Dailies and todos left side control
+    .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
+      .task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
+        .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed}")
+    // Task title, description and icons
+    .task-content(:class="contentClass")
+      .task-clickable-area(@click="edit($event, task)")
+        h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
+        .task-notes.small-text(v-markdown="task.notes")
+      .checklist(v-if="task.checklist && task.checklist.length > 0")
+        label.custom-control.custom-checkbox.checklist-item(
+          v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
         )
-          .d-flex.align-items-center(slot="content")
-            .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
-            .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
-          .d-flex.align-items-center(v-if="task.tags && task.tags.length > 0")
-            .svg-icon.tags(v-html="icons.tags")
+          input.custom-control-input(type="checkbox", :checked="item.completed", @change="toggleChecklistItem(item)")
+          span.custom-control-indicator
+          span.custom-control-description {{ item.text }}
+      .icons.small-text.d-flex.align-items-center
+        .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
+          .svg-icon.calendar(v-html="icons.calendar")
+          span {{dueIn}}
+        .icons-right.d-flex.justify-content-end
+          .d-flex.align-items-center(v-if="showStreak")
+            .svg-icon.streak(v-html="icons.streak")
+            span(v-if="task.type === 'daily'") {{task.streak}}
+            span(v-if="task.type === 'habit'")
+              span.m-0(v-if="task.up") +{{task.counterUp}}
+              span.m-0(v-if="task.up && task.down") &nbsp;|&nbsp;
+              span.m-0(v-if="task.down") -{{task.counterDown}}
+          .d-flex.align-items-center(v-if="task.challenge && task.challenge.id")
+            .svg-icon.challenge(v-html="icons.challenge")
+          b-popover.tags-popover.no-span-margin(
+            :triggers="['hover']",
+            :placement="'bottom'",
+            :popover-style="{'max-width': '1000px'}",
+          )
+            .d-flex.align-items-center(slot="content")
+              .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
+              .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
+            .d-flex.align-items-center(v-if="task.tags && task.tags.length > 0")
+              .svg-icon.tags(v-html="icons.tags")
 
-  // Habits right side control
-  .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down")
-    .task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="isUser ? score('down') : null")
-      .svg-icon.negative(v-html="icons.negative")
-  // Rewards right side control
-  .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass", @click="isUser ? score('down') : null")
-    .svg-icon(v-html="icons.gold")
-    .small-text {{task.value}}
+    // Habits right side control
+    .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down")
+      .task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="isUser ? score('down') : null")
+        .svg-icon.negative(v-html="icons.negative")
+    // Rewards right side control
+    .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass", @click="isUser ? score('down') : null")
+      .svg-icon(v-html="icons.gold")
+      .small-text {{task.value}}
+  approval-footer(:task='task', v-if='this.task.group.id', :group='group')
 </template>
 
 <style lang="scss">
-@import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/colors.scss';
 
-.task {
-  margin-bottom: 8px;
-  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
-  background: transparent;
-  border-radius: 2px;
-  z-index: 9;
-  position: relative;
+  .task {
+    margin-bottom: 8px;
+    box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+    background: transparent;
+    border-radius: 2px;
+    z-index: 9;
+    position: relative;
 
-  &:hover {
-    box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
+    &:hover {
+      box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
 
-    .left-control, .right-control, .task-content {
-      border-color: $purple-500;
+      .left-control, .right-control, .task-content {
+        border-color: $purple-500;
+      }
     }
   }
-}
 
-.task-title {
-  padding-bottom: 8px;
-  color: $gray-10;
-  font-weight: normal;
-  margin-bottom: 0px;
+  .task-title {
+    padding-bottom: 8px;
+    color: $gray-10;
+    font-weight: normal;
+    margin-bottom: 0px;
 
-  &.has-notes {
-    padding-bottom: 0px;
+    &.has-notes {
+      padding-bottom: 0px;
+    }
   }
-}
 
-.task-notes {
-  color: $gray-100;
-  font-style: normal;
-}
-
-.task-content {
-  padding: 8px;
-  flex-grow: 1;
-  cursor: pointer;
-  background: $white;
-  border: 1px solid transparent;
-
-  &.no-right-border {
-    border-right: none !important;
+  .task-notes {
+    color: $gray-100;
+    font-style: normal;
   }
-}
 
-.checklist {
-  margin-bottom: 2px;
-  margin-top: 8px;
-}
+  .task-content {
+    padding: 8px;
+    flex-grow: 1;
+    cursor: pointer;
+    background: $white;
+    border: 1px solid transparent;
 
-.checklist-item {
-  color: $gray-50;
-  font-size: 14px;
-  line-height: 1.43;
-  margin-bottom: 10px;
-  min-height: 0px;
-  width: 100%;
+    &.no-right-border {
+      border-right: none !important;
+    }
+  }
 
-  &-done {
+  .checklist {
+    margin-bottom: 2px;
+    margin-top: 8px;
+  }
+
+  .checklist-item {
+    color: $gray-50;
+    font-size: 14px;
+    line-height: 1.43;
+    margin-bottom: 10px;
+    min-height: 0px;
+    width: 100%;
+
+    &-done {
+      color: $gray-300;
+      text-decoration: line-through;
+    }
+
+    .custom-control-indicator {
+      margin-top: -2px;
+    }
+
+    .custom-control-description {
+      margin-left: 6px;
+      padding-top: 0px;
+    }
+  }
+
+  .icons {
+    margin-top: 4px;
     color: $gray-300;
-    text-decoration: line-through;
+    font-style: normal;
+
+    &-right {
+      flex-grow: 1;
+    }
   }
 
-  .custom-control-indicator {
+  .icons-right .svg-icon {
+    margin-left: 8px;
+  }
+
+  .icons span {
+    margin-left: 4px;
+  }
+
+  .no-span-margin span {
+    margin-left: 0px !important;
+  }
+
+  .svg-icon.streak {
+    width: 11.6px;
+    height: 7.1px;
+  }
+
+  .tags.svg-icon, .calendar.svg-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .tags:hover {
+    color: $purple-500;
+  }
+
+  .due-overdue {
+    color: $red-50;
+  }
+
+  .calendar.svg-icon {
+    margin-right: 2px;
     margin-top: -2px;
   }
 
-  .custom-control-description {
-    margin-left: 6px;
-    padding-top: 0px;
+  .challenge.svg-icon {
+    width: 14px;
+    height: 12px;
   }
-}
 
-.icons {
-  margin-top: 4px;
-  color: $gray-300;
-  font-style: normal;
-
-  &-right {
-    flex-grow: 1;
+  .check.svg-icon {
+    width: 12.3px;
+    height: 9.8px;
+    margin: 9px 8px;
   }
-}
 
-.icons-right .svg-icon {
-  margin-left: 8px;
-}
+  .left-control, .right-control {
+    width: 40px;
+    flex-shrink: 0;
+  }
 
-.icons span {
-  margin-left: 4px;
-}
+  .left-control {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    min-height: 60px;
+    border: 1px solid transparent;
+    border-right: none;
 
-.no-span-margin span {
-  margin-left: 0px !important;
-}
+    & + .task-content {
+      border-left: none;
+    }
+  }
 
-.svg-icon.streak {
-  width: 11.6px;
-  height: 7.1px;
-}
-
-.tags.svg-icon, .calendar.svg-icon {
-  width: 14px;
-  height: 14px;
-}
-
-.tags:hover {
-  color: $purple-500;
-}
-
-.due-overdue {
-  color: $red-50;
-}
-
-.calendar.svg-icon {
-  margin-right: 2px;
-  margin-top: -2px;
-}
-
-.challenge.svg-icon {
-  width: 14px;
-  height: 12px;
-}
-
-.check.svg-icon {
-  width: 12.3px;
-  height: 9.8px;
-  margin: 9px 8px;
-}
-
-.left-control, .right-control {
-  width: 40px;
-  flex-shrink: 0;
-}
-
-.left-control {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  min-height: 60px;
-  border: 1px solid transparent;
-  border-right: none;
-
-  & + .task-content {
+  .right-control {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    min-height: 56px;
+    border: 1px solid transparent;
     border-left: none;
   }
-}
 
-.right-control {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  min-height: 56px;
-  border: 1px solid transparent;
-  border-left: none;
-}
-
-.task-control, .reward-control {
-  cursor: pointer;
-}
-
-.task-not-scoreable {
   .task-control, .reward-control {
-    cursor: default !important;
+    cursor: pointer;
   }
 
-  .svg-icon.check {
-    display: none !important;
-  }
-}
+  .task-not-scoreable {
+    .task-control, .reward-control {
+      cursor: default !important;
+    }
 
-.daily-todo-control {
-  margin-top: 16px;
-  border-radius: 2px;
-}
-
-.reward-control {
-  flex-direction: column;
-  padding-top: 8px;
-  padding-bottom: 4px;
-
-  .svg-icon {
-    width: 24px;
-    height: 24px;
+    .svg-icon.check {
+      display: none !important;
+    }
   }
 
-  .small-text {
-    margin-top: 4px;
-    color: $yellow-10;
+  .daily-todo-control {
+    margin-top: 16px;
+    border-radius: 2px;
+  }
+
+  .reward-control {
+    flex-direction: column;
+    padding-top: 8px;
+    padding-bottom: 4px;
+
+    .svg-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    .small-text {
+      margin-top: 4px;
+      color: $yellow-10;
+    }
   }
-}
 </style>
 
-<style lang="scss"> // not working as scoped css
-@import '~client/assets/scss/colors.scss';
+<style lang="scss">
+  // not working as scoped css
+  @import '~client/assets/scss/colors.scss';
 
-.tags-popover {
-  // TODO fix padding, see https://github.com/bootstrap-vue/bootstrap-vue/issues/559#issuecomment-311150335
-  white-space: nowrap;
-}
+  .tags-popover {
+    // TODO fix padding, see https://github.com/bootstrap-vue/bootstrap-vue/issues/559#issuecomment-311150335
+    white-space: nowrap;
+  }
 
-.tags-popover-title {
-  margin-right: 4px;
-  display: block;
-  float: left;
-}
+  .tags-popover-title {
+    margin-right: 4px;
+    display: block;
+    float: left;
+  }
 
-.tag-label {
-  display: block;
-  float: left;
-  margin-left: 4px;
-  border-radius: 100px;
-  background-color: $gray-50;
-  padding: 4px 10px;
-  color: $gray-300;
-  white-space: nowrap;
-}
+  .tag-label {
+    display: block;
+    float: left;
+    margin-left: 4px;
+    border-radius: 100px;
+    background-color: $gray-50;
+    padding: 4px 10px;
+    color: $gray-300;
+    white-space: nowrap;
+  }
 </style>
 
 <script>
@@ -292,16 +296,20 @@ import checkIcon from 'assets/svg/check.svg';
 import bPopover from 'bootstrap-vue/lib/components/popover';
 import markdownDirective from 'client/directives/markdown';
 import notifications from 'client/mixins/notifications';
+import approvalHeader from './approvalHeader';
+import approvalFooter from './approvalFooter';
 
 export default {
   mixins: [notifications],
   components: {
     bPopover,
+    approvalFooter,
+    approvalHeader,
   },
   directives: {
     markdown: markdownDirective,
   },
-  props: ['task', 'isUser'],
+  props: ['task', 'isUser', 'group'], // @TODO: maybe we should store the group on state?
   data () {
     return {
       icons: Object.freeze({
diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
index b403b3b678..152d6e14b7 100644
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -1,126 +1,149 @@
 <template lang="pug">
-form(
-  v-if="task",
-  @submit.stop.prevent="submit()",
-)
-  b-modal#task-modal(
-    size="sm",
-    @hidden="cancel()",
+  form(
+    v-if="task",
+    @submit.stop.prevent="submit()",
   )
-    .task-modal-header(
-      slot="modal-header",
-      :class="[cssClass]",
+    b-modal#task-modal(
+      size="sm",
+      @hidden="cancel()",
     )
-      h1 {{ title }}
-      .form-group
-        label(v-once) {{ `${$t('title')}*` }}
-        input.form-control(type='text', :class="[`${cssClass}-modal-input`]", required, v-model="task.text")
-      .form-group
-        label(v-once) {{ $t('notes') }}
-        textarea.form-control(:class="[`${cssClass}-modal-input`]", v-model="task.notes", rows="3")
-    .task-modal-content
-      .option(v-if="task.type === 'reward'")
-        label(v-once) {{ $t('cost') }}
-        input(type="number", v-model="task.value", required, min="0")
-      .option(v-if="['daily', 'todo'].indexOf(task.type) > -1")
-        label(v-once) {{ $t('checklist') }}
-        br
-        .inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in task.checklist")
-          input.inline-edit-input.checklist-item.form-control(type="text", :value="item.text")
-          span.input-group-btn(@click="removeChecklistItem($index)")
-            .svg-icon.destroy-icon(v-html="icons.destroy")
-        input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
-      .d-flex.justify-content-center(v-if="task.type === 'habit'")
-        .option-item(:class="optionClass(task.up === true)", @click="task.up = !task.up")
-          .option-item-box
-            .task-control.habit-control(:class="controlClass.up + '-control-habit'")
-              .svg-icon.positive(v-html="icons.positive")
-          .option-item-label(v-once) {{ $t('positive') }}
-        .option-item(:class="optionClass(task.down === true)", @click="task.down = !task.down")
-          .option-item-box
-            .task-control.habit-control(:class="controlClass.down + '-control-habit'")
-              .svg-icon.negative(v-html="icons.negative")
-          .option-item-label(v-once) {{ $t('negative') }}
-      template(v-if="task.type !== 'reward'")
-        label(v-once)
-          span.float-left {{ $t('difficulty') }}
-          .svg-icon.info-icon(v-html="icons.information")
-        .d-flex.justify-content-center
-          .option-item(:class="optionClass(task.priority === 0.1)", @click="task.priority = 0.1")
+      .task-modal-header(
+        slot="modal-header",
+        :class="[cssClass]",
+      )
+        h1 {{ title }}
+        .form-group
+          label(v-once) {{ `${$t('title')}*` }}
+          input.form-control(type='text', :class="[`${cssClass}-modal-input`]", required, v-model="task.text")
+        .form-group
+          label(v-once) {{ $t('notes') }}
+          textarea.form-control(:class="[`${cssClass}-modal-input`]", v-model="task.notes", rows="3")
+      .task-modal-content
+        .option(v-if="task.type === 'reward'")
+          label(v-once) {{ $t('cost') }}
+          input(type="number", v-model="task.value", required, min="0")
+        .option(v-if="['daily', 'todo'].indexOf(task.type) > -1")
+          label(v-once) {{ $t('checklist') }}
+          br
+          .inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in task.checklist")
+            input.inline-edit-input.checklist-item.form-control(type="text", :value="item.text")
+            span.input-group-btn(@click="removeChecklistItem($index)")
+              .svg-icon.destroy-icon(v-html="icons.destroy")
+          input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
+        .d-flex.justify-content-center(v-if="task.type === 'habit'")
+          .option-item(:class="optionClass(task.up === true)", @click="task.up = !task.up")
             .option-item-box
-              .svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
-            .option-item-label(v-once) {{ $t('trivial') }}
-          .option-item(:class="optionClass(task.priority === 1)", @click="task.priority = 1")
+              .task-control.habit-control(:class="controlClass.up + '-control-habit'")
+                .svg-icon.positive(v-html="icons.positive")
+            .option-item-label(v-once) {{ $t('positive') }}
+          .option-item(:class="optionClass(task.down === true)", @click="task.down = !task.down")
             .option-item-box
-              .svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
-            .option-item-label(v-once) {{ $t('easy') }}
-          .option-item(:class="optionClass(task.priority === 1.5)", @click="task.priority = 1.5")
-            .option-item-box
-              .svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
-            .option-item-label(v-once) {{ $t('medium') }}
-          .option-item(:class="optionClass(task.priority === 2)", @click="task.priority = 2")
-            .option-item-box
-              .svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
-            .option-item-label(v-once) {{ $t('hard') }}
-      .option(v-if="task.type === 'todo'")
-        label(v-once) {{ $t('dueDate') }}
-        datepicker(v-model="task.date")
-      .option(v-if="task.type === 'daily'")
-        label(v-once) {{ $t('startDate') }}
-        datepicker(v-model="task.startDate")
-      .option(v-if="task.type === 'daily'")
-        label(v-once) {{ $t('repeats') }}
-        b-dropdown(:text="$t(task.frequency)")
-          b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
-            | {{ $t(frequency) }}
-        label(v-once) {{ $t('repeatEvery') }}
-        input.form-control(type="number", v-model="task.everyX", min="0", required)
-        | {{ repeatSuffix }}
-        br
-        template(v-if="task.frequency === 'weekly'")
-          .form-check-inline.weekday-check(
-            v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
-            :key="dayNumber",
-          )
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", v-model="task.repeat[day]")
+              .task-control.habit-control(:class="controlClass.down + '-control-habit'")
+                .svg-icon.negative(v-html="icons.negative")
+            .option-item-label(v-once) {{ $t('negative') }}
+        template(v-if="task.type !== 'reward'")
+          label(v-once)
+            span.float-left {{ $t('difficulty') }}
+            .svg-icon.info-icon(v-html="icons.information")
+          .d-flex.justify-content-center
+            .option-item(:class="optionClass(task.priority === 0.1)", @click="task.priority = 0.1")
+              .option-item-box
+                .svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
+              .option-item-label(v-once) {{ $t('trivial') }}
+            .option-item(:class="optionClass(task.priority === 1)", @click="task.priority = 1")
+              .option-item-box
+                .svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
+              .option-item-label(v-once) {{ $t('easy') }}
+            .option-item(:class="optionClass(task.priority === 1.5)", @click="task.priority = 1.5")
+              .option-item-box
+                .svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
+              .option-item-label(v-once) {{ $t('medium') }}
+            .option-item(:class="optionClass(task.priority === 2)", @click="task.priority = 2")
+              .option-item-box
+                .svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
+              .option-item-label(v-once) {{ $t('hard') }}
+        .option(v-if="task.type === 'todo'")
+          label(v-once) {{ $t('dueDate') }}
+          datepicker(v-model="task.date")
+        .option(v-if="task.type === 'daily'")
+          label(v-once) {{ $t('startDate') }}
+          datepicker(v-model="task.startDate")
+        .option(v-if="task.type === 'daily'")
+          label(v-once) {{ $t('repeats') }}
+          b-dropdown(:text="$t(task.frequency)")
+            b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
+              | {{ $t(frequency) }}
+          label(v-once) {{ $t('repeatEvery') }}
+          input.form-control(type="number", v-model="task.everyX", min="0", required)
+          | {{ repeatSuffix }}
+          br
+          template(v-if="task.frequency === 'weekly'")
+            .form-check-inline.weekday-check(
+              v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
+              :key="dayNumber",
+            )
+              label.custom-control.custom-checkbox
+                input.custom-control-input(type="checkbox", v-model="task.repeat[day]")
+                span.custom-control-indicator
+                span.custom-control-description(v-once) {{ weekdaysMin(dayNumber) }}
+          template(v-if="task.frequency === 'monthly'")
+            label.custom-control.custom-radio
+              input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth")
               span.custom-control-indicator
-              span.custom-control-description(v-once) {{ weekdaysMin(dayNumber) }}
-        template(v-if="task.frequency === 'monthly'")
-          label.custom-control.custom-radio
-            input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth")
-            span.custom-control-indicator
-            span.custom-control-description {{ $t('dayOfMonth') }}
-          label.custom-control.custom-radio
-            input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek")
-            span.custom-control-indicator
-            span.custom-control-description {{ $t('dayOfWeek') }}
-
-      .option
-        label(v-once) {{ $t('tags') }}
-        .category-wrap(@click="showTagsSelect = !showTagsSelect")
-          span.category-select(v-if='task.tags && task.tags.length === 0') {{$t('none')}}
-          span.category-select(v-else) {{getTagsFor(task)[0]}}
-        .category-box(v-if="showTagsSelect")
-          .form-check(
-            v-for="tag in user.tags",
-            :key="tag.id",
-          )
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", :value="tag.id", v-model="task.tags")
+              span.custom-control-description {{ $t('dayOfMonth') }}
+            label.custom-control.custom-radio
+              input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek")
               span.custom-control-indicator
-              span.custom-control-description(v-once) {{ tag.name }}
-          button.btn.btn-primary(@click="showTagsSelect = !showTagsSelect") {{$t('close')}}
-      .option(v-if="task.type === 'habit'")
-        label(v-once) {{ $t('resetStreak') }}
-        b-dropdown(:text="$t(task.frequency)")
-          b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
-            | {{ $t(frequency) }}
+              span.custom-control-description {{ $t('dayOfWeek') }}
 
-    .task-modal-footer(slot="modal-footer")
-      button.btn.btn-primary(type="submit", v-once) {{ $t('save') }}
-      span.cancel-task-btn(v-once, v-if="purpose === 'create'", @click="cancel()") {{ $t('cancel') }}
-      span.delete-task-btn(v-once, v-else, @click="destroy()") {{ $t('delete') }}
+        .option
+          label(v-once) {{ $t('tags') }}
+          .category-wrap(@click="showTagsSelect = !showTagsSelect")
+            span.category-select(v-if='task.tags && task.tags.length === 0') {{$t('none')}}
+            span.category-select(v-else) {{getTagsFor(task)[0]}}
+          .category-box(v-if="showTagsSelect")
+            .form-check(
+              v-for="tag in user.tags",
+              :key="tag.id",
+            )
+              label.custom-control.custom-checkbox
+                input.custom-control-input(type="checkbox", :value="tag.id", v-model="task.tags")
+                span.custom-control-indicator
+                span.custom-control-description(v-once) {{ tag.name }}
+            button.btn.btn-primary(@click="showTagsSelect = !showTagsSelect") {{$t('close')}}
+        .option(v-if="task.type === 'habit'")
+          label(v-once) {{ $t('resetStreak') }}
+          b-dropdown(:text="$t(task.frequency)")
+            b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
+              | {{ $t(frequency) }}
+
+        .option.group-options(v-if='groupId')
+          label(v-once) Assigned To
+          .category-wrap(@click="showAssignedSelect = !showAssignedSelect")
+            span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
+            span.category-select(v-else)
+              span(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}}
+          .category-box(v-if="showAssignedSelect")
+            .form-check(
+              v-for="member in members",
+              :key="member._id",
+            )
+              label.custom-control.custom-checkbox
+                input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)')
+                span.custom-control-indicator
+                span.custom-control-description(v-once) {{ member.profile.name }}
+            button.btn.btn-primary(@click="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
+
+        .option.group-options(v-if='groupId')
+          label(v-once) Needs Approval
+          toggle-switch(:label='""',
+            :checked="requiresApproval",
+            @change="updateRequiresApproval")
+
+      .task-modal-footer(slot="modal-footer")
+        button.btn.btn-primary(type="submit", v-once) {{ $t('save') }}
+        span.cancel-task-btn(v-once, v-if="purpose === 'create'", @click="cancel()") {{ $t('cancel') }}
+        span.delete-task-btn(v-once, v-else, @click="destroy()") {{ $t('delete') }}
 </template>
 
 <style lang="scss">
@@ -325,6 +348,7 @@ import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapGetters, mapActions, mapState } from 'client/libs/store';
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
+import toggleSwitch from 'client/components/ui/toggleSwitch';
 import Datepicker from 'vuejs-datepicker';
 import moment from 'moment';
 import uuid from 'uuid';
@@ -344,11 +368,13 @@ export default {
     bDropdown,
     bDropdownItem,
     Datepicker,
+    toggleSwitch,
   },
-  props: ['task', 'purpose', 'challengeId'], // purpose is either create or edit, task is the task created or edited
+  props: ['task', 'purpose', 'challengeId', 'groupId'], // purpose is either create or edit, task is the task created or edited
   data () {
     return {
       showTagsSelect: false,
+      showAssignedSelect: false,
       newChecklistItem: null,
       icons: Object.freeze({
         information: informationIcon,
@@ -360,8 +386,31 @@ export default {
         positive: positiveIcon,
         destroy: deleteIcon,
       }),
+      requiresApproval: false, // We can't set task.group fields so we use this field to toggle
+      members: [],
+      memberNamesById: {},
+      assignedMembers: [],
     };
   },
+  watch: {
+    async task () {
+      if (this.groupId && this.task.group && this.task.group.approval.required) {
+        this.requiresApproval = true;
+      }
+
+      if (this.groupId) {
+        let members = await this.$store.dispatch('members:getGroupMembers', {
+          groupId: this.groupId,
+          includeAllPublicFields: true,
+        });
+        this.members = members;
+        this.members.forEach(member => {
+          this.memberNamesById[member._id] = member.profile.name;
+        });
+        this.assignedMembers = this.task.group.assignedUsers;
+      }
+    },
+  },
   computed: {
     ...mapGetters({
       getTaskClasses: 'tasks:getTaskClasses',
@@ -457,10 +506,21 @@ export default {
             tasks: [this.task],
           });
           this.$emit('taskCreated', this.task);
+        } else if (this.groupId) {
+          this.$store.dispatch('tasks:createGroupTasks', {
+            groupId: this.groupId,
+            tasks: [this.task],
+          });
+          this.$emit('taskCreated', this.task);
         } else {
           this.createTask(this.task);
         }
       } else {
+        if (this.groupId) {
+          this.task.group.assignedUsers = this.assignedMembers;
+          this.task.requiresApproval = this.requiresApproval;
+        }
+
         this.saveTask(this.task);
         this.$emit('taskEdited', this.task);
       }
@@ -474,6 +534,24 @@ export default {
       this.showTagsSelect = false;
       this.$emit('cancel');
     },
+    updateRequiresApproval (newValue) {
+      let truthy = true;
+      if (!newValue) truthy = false; // This return undefined instad of false
+      this.requiresApproval = truthy;
+    },
+    async toggleAssignment (memberId) {
+      if (this.assignedMembers.indexOf(memberId) === -1) {
+        await this.$store.dispatch('tasks:unassignTask', {
+          taskId: this.task._id,
+          userId: this.user._id,
+        });
+        return;
+      }
+      await this.$store.dispatch('tasks:assignTask', {
+        taskId: this.task._id,
+        userId: this.user._id,
+      });
+    },
   },
 };
 </script>
diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js
new file mode 100644
index 0000000000..8009564c2c
--- /dev/null
+++ b/website/client/mixins/payments.js
@@ -0,0 +1,105 @@
+import axios from 'axios';
+
+const STRIPE_PUB_KEY = process.env.STRIPE_PUB_KEY; // eslint-disable-line
+import subscriptionBlocks from '../../common/script/content/subscriptionBlocks';
+
+export default {
+  methods: {
+    showStripe (data) {
+      if (!this.checkGemAmount(data)) return;
+
+      let sub = false;
+
+      if (data.subscription) {
+        sub = data.subscription;
+      } else if (data.gift && data.gift.type === 'subscription') {
+        sub = data.gift.subscription.key;
+      }
+
+      sub = sub && subscriptionBlocks[sub];
+
+      let amount = 500;// 500 = $5
+      if (sub) amount = sub.price * 100;
+      if (data.gift && data.gift.type === 'gems') amount = data.gift.gems.amount / 4 * 100;
+      if (data.group) amount = (sub.price + 3 * (data.group.memberCount - 1)) * 100;
+
+      this.StripeCheckout.open({
+        key: STRIPE_PUB_KEY,
+        address: false,
+        amount,
+        name: 'Habitica',
+        description: sub ? this.$t('subscribe') : this.$t('checkout'),
+        image: '/apple-touch-icon-144-precomposed.png',
+        panelLabel: sub ? this.$t('subscribe') : this.$t('checkout'),
+        token: async (res) => {
+          let url = '/stripe/checkout?a=a'; // just so I can concat &x=x below
+
+          if (data.groupToCreate) {
+            url = '/api/v3/groups/create-plan?a=a';
+            res.groupToCreate = data.groupToCreate;
+            res.paymentType = 'Stripe';
+          }
+
+          if (data.gift) url += `&gift=${this.encodeGift(data.uuid, data.gift)}`;
+          if (data.subscription) url += `&sub=${sub.key}`;
+          if (data.coupon) url += `&coupon=${data.coupon}`;
+          if (data.groupId) url += `&groupId=${data.groupId}`;
+
+          let response = await axios.post(url, res);
+
+          let responseStatus = response.status;
+          if (responseStatus >= 400) {
+            alert(`Error: ${response.message}`);
+            return;
+          }
+
+          let newGroup = response.data.data;
+          if (newGroup && newGroup._id) {
+            // @TODO: Just append? or $emit?
+            this.$router.push(`/group-plans/${newGroup._id}/task-information`);
+            return;
+          }
+
+          window.location.reload(true);
+        },
+      });
+    },
+    checkGemAmount (data) {
+      let isGem = data && data.gift && data.gift.type === 'gems';
+      let notEnoughGem = isGem && (!data.gift.gems.amount || data.gift.gems.amount === 0);
+      if (notEnoughGem) {
+        Notification.error(this.$t('badAmountOfGemsToPurchase'), true);
+        return false;
+      }
+      return true;
+    },
+    amazonPaymentsInit (data) {
+      // @TODO: Do we need this? if (!this.isAmazonReady) return;
+      if (!this.checkGemAmount(data)) return;
+      if (data.type !== 'single' && data.type !== 'subscription') return;
+
+      if (data.gift) {
+        if (data.gift.gems && data.gift.gems.amount && data.gift.gems.amount <= 0) return;
+        data.gift.uuid = data.giftedTo;
+      }
+
+      if (data.subscription) {
+        this.amazonPayments.subscription = data.subscription;
+        this.amazonPayments.coupon = data.coupon;
+      }
+
+      if (data.groupId) {
+        this.amazonPayments.groupId = data.groupId;
+      }
+
+      if (data.groupToCreate) {
+        this.amazonPayments.groupToCreate = data.groupToCreate;
+      }
+
+      this.amazonPayments.gift = data.gift;
+      this.amazonPayments.type = data.type;
+
+      this.$root.$emit('show::modal', 'amazon-payment');
+    },
+  },
+};
diff --git a/website/client/router.js b/website/client/router.js
index 19433a379d..7d289bc042 100644
--- a/website/client/router.js
+++ b/website/client/router.js
@@ -71,6 +71,10 @@ const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ './com
 const GuildPage = () => import(/* webpackChunkName: "guilds" */ './components/groups/guild');
 const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ './components/groups/groupPlan');
 
+// Group Plans
+const GroupPlanIndex = () => import(/* webpackChunkName: "group-plans" */ './components/group-plans/index');
+const GroupPlanTaskInformation = () => import(/* webpackChunkName: "group-plans" */ './components/group-plans/taskInformation');
+
 // Challenges
 const ChallengeIndex = () => import(/* webpackChunkName: "challenges" */ './components/challenges/index');
 const MyChallenges = () => import(/* webpackChunkName: "challenges" */ './components/challenges/myChallenges');
@@ -122,6 +126,26 @@ const router = new VueRouter({
     },
     { name: 'party', path: '/party', component: GuildPage },
     { name: 'groupPlan', path: '/group-plans', component: GroupPlansAppPage },
+    {
+      name: 'groupPlanDetail',
+      path: '/group-plans/:groupId',
+      component: GroupPlanIndex,
+      props: true,
+      children: [
+        {
+          name: 'groupPlanDetailTaskInformation',
+          path: '/group-plans/:groupId/task-information',
+          component: GroupPlanTaskInformation,
+          props: true,
+        },
+        {
+          name: 'groupPlanDetailInformation',
+          path: '/group-plans/:groupId/information',
+          component: GuildPage,
+          props: true,
+        },
+      ],
+    },
     {
       path: '/groups',
       component: GuildIndex,
diff --git a/website/client/store/actions/guilds.js b/website/client/store/actions/guilds.js
index bf7986e7e0..89532f0fdd 100644
--- a/website/client/store/actions/guilds.js
+++ b/website/client/store/actions/guilds.js
@@ -165,3 +165,8 @@ export async function removeManager  (store, payload) {
 
   return response;
 }
+
+export async function getGroupPlans () {
+  let response = await axios.get('/api/v3/group-plans');
+  return response.data.data;
+}
diff --git a/website/client/store/actions/tasks.js b/website/client/store/actions/tasks.js
index f49d339be5..7a9d61b8cb 100644
--- a/website/client/store/actions/tasks.js
+++ b/website/client/store/actions/tasks.js
@@ -143,3 +143,33 @@ export async function createChallengeTasks (store, payload) {
   let response = await axios.post(`/api/v3/tasks/challenge/${payload.challengeId}`, payload.tasks);
   return response.data.data;
 }
+
+export async function getGroupTasks (store, payload) {
+  let response = await axios.get(`/api/v3/tasks/group/${payload.groupId}`);
+  return response.data.data;
+}
+
+export async function createGroupTasks (store, payload) {
+  let response = await axios.post(`/api/v3/tasks/group/${payload.groupId}`, payload.tasks);
+  return response.data.data;
+}
+
+export async function assignTask (store, payload) {
+  let response = await axios.post(`/api/v3/tasks/${payload.taskId}/assign/${payload.userId}`);
+  return response.data.data;
+}
+
+export async function unassignTask (store, payload) {
+  let response = await axios.post(`/api/v3/tasks/${payload.taskId}/unassign/${payload.userId}`);
+  return response.data.data;
+}
+
+export async function getGroupApprovals (store, payload) {
+  let response = await axios.get(`/api/v3/approvals/group/${payload.groupId}`);
+  return response.data.data;
+}
+
+export async function approve (store, payload) {
+  let response = await axios.post(`/api/v3/tasks/${payload.taskId}/approve/${payload.userId}`);
+  return response.data.data;
+}
diff --git a/website/server/controllers/api-v3/groups.js b/website/server/controllers/api-v3/groups.js
index d52ee141ea..c3aaeb5858 100644
--- a/website/server/controllers/api-v3/groups.js
+++ b/website/server/controllers/api-v3/groups.js
@@ -1248,4 +1248,41 @@ api.removeGroupManager = {
   },
 };
 
+/**
+ * @api {get} /api/v3/group-plans Get group plans for a user
+ * @apiName GetGroupPlans
+ * @apiGroup Group
+ *
+ * @apiSuccess {Object[]} data An array of the requested groups with a group plan (See <a href="https://github.com/HabitRPG/habitica/blob/develop/website/server/models/group.js" target="_blank">/website/server/models/group.js</a>)
+ *
+ * @apiSuccessExample {json} Groups the user is in with a group plan:
+ *     HTTP/1.1 200 OK
+ *     [
+ *       {groupPlans}
+ *     ]
+ */
+api.getGroupPlans = {
+  method: 'GET',
+  url: '/group-plans',
+  middlewares: [authWithHeaders()],
+  async handler (req, res) {
+    let user = res.locals.user;
+
+    const userGroups = user.getGroups();
+
+    const groups = await Group
+      .find({
+        _id: {$in: userGroups},
+      })
+      .select('leaderOnly leader purchased name')
+      .exec();
+
+    let groupPlans = groups.filter(group => {
+      return group.isSubscribed();
+    });
+
+    res.respond(200, groupPlans);
+  },
+};
+
 module.exports = api;
diff --git a/website/server/controllers/api-v3/tasks.js b/website/server/controllers/api-v3/tasks.js
index 9cfe8b6c39..119994c8c0 100644
--- a/website/server/controllers/api-v3/tasks.js
+++ b/website/server/controllers/api-v3/tasks.js
@@ -454,6 +454,7 @@ api.updateTask = {
     // repeat is always among modifiedPaths because mongoose changes the other of the keys when using .toObject()
     // see https://github.com/Automattic/mongoose/issues/2749
 
+    task.group.approval.required = false;
     if (sanitizedObj.requiresApproval) {
       task.group.approval.required = true;
     }