4.264.4

fix(css): don't make invisible links
4.264.3
2025-12-16 22:27:26 +01:00 · 2023-03-24 19:46:32 -05:00 · 2023-03-24 19:46:11 -05:00 · 2023-03-23 14:34:57 -05:00 · 2023-03-23 14:34:40 -05:00 · 2023-03-21 13:54:23 -05:00
632 changed files with 30948 additions and 16028 deletions
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -2,6 +2,9 @@ name: Test
 on: [push, pull_request]
 permissions:
  contents: read
 jobs:
  lint:
    runs-on: ubuntu-latest
--- a/apidoc/apidoc.json
+++ b/apidoc/apidoc.json
@@ -2,6 +2,7 @@
  "name": "Habitica V3 API Documentation",
  "title": "Habitica",
  "url": "https://habitica.com",
  "version": "3.0.0",
  "sampleUrl": null,
  "header": {
    "title": "Introduction",
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -1,4 +1,3 @@
 version: "3"
 services:
  client:
    build:
@@ -9,7 +8,6 @@ services:
      - server
    environment:
      - BASE_URL=http://server:3000
    image: habitica
    networks:
      - habitica
    ports:
@@ -27,7 +25,6 @@ services:
      - mongo
    environment:
      - NODE_DB_URI=mongodb://mongo/habitrpg
    image: habitica
    networks:
      - habitica
    ports:
--- a/2
+++ b/2
--- a/migrations/archive/2022/20220915_transactions_user_name.js
+++ b/migrations/archive/2022/20220915_transactions_user_name.js
@@ -0,0 +1,97 @@
 /* eslint-disable no-console */
 import { model as UserModel } from '../../../website/server/models/user';
 import { TransactionModel } from '../../../website/server/models/transaction';
 const MIGRATION_NAME = '20220915_transactions_user_name';
 /* transaction config */
 const transactionPerRun = 500;
 const progressCount = 1000;
 const transactionQuery = {
  migration: { $ne: MIGRATION_NAME }, // skip already migrated entries
  'transactionType': { $in: ['gift_send', 'gift_receive'] },
 };
 let count = 0;
 async function updateTransaction (transaction, userNameMap) {
  count++;
  const set = {
    migration: MIGRATION_NAME,
  };
  if (userNameMap.has(transaction.reference)) {
    set['referenceText'] = userNameMap.get(transaction.reference);
  } else {
    set['referenceText'] = 'Account not found';
  }
  if (count % progressCount === 0) {
    console.warn(`${count} ${transaction._id}`);
  }
  return TransactionModel.updateOne({
    _id: transaction._id
  }, { $set: set }).exec();
 }
 export default async function processTransactions () {
  const fields = {
    _id: 1,
    reference: 1,
    referenceText: 1,
  };
  const userNameMap = new Map();
  while (true) { // eslint-disable-line no-constant-condition
    const foundTransactions = await TransactionModel // eslint-disable-line no-await-in-loop
      .find(transactionQuery)
      .limit(transactionPerRun)
      .sort({reference: 1})
      .select(fields)
      .lean()
      .exec();
    if (foundTransactions.length === 0) {
      console.warn('All appropriate transactions found and modified.');
      console.warn(`\n${count} transactions processed\n`);
      break;
    }
    // check for unknown users and load the names
    const userIdsToLoad = [];
    for (const foundTransaction of foundTransactions) {
      const userId = foundTransaction.reference;
      if (userNameMap.has(userId))  {
        continue;
      }
      userIdsToLoad.push(userId);
    }
    const users = await UserModel // eslint-disable-line no-await-in-loop
      .find({
        _id: { $in: userIdsToLoad }
      })
      .select({
        _id: 1,
        'auth.local.username': 1,
      })
      .lean()
      .exec();
    for (const user of users) {
      const localUserName = user.auth?.local?.username;
      if (!localUserName) {
        console.warn(`\nNo Username found for ID: ${user._id}\n`);
        continue;
      }
      userNameMap.set(user._id, localUserName)
    }
    await Promise.all(foundTransactions.map(t => updateTransaction(t, userNameMap))); // eslint-disable-line no-await-in-loop
  }
 };
--- a/migrations/archive/2022/20221031_habitoween_ladder.js
+++ b/migrations/archive/2022/20221031_habitoween_ladder.js
@@ -0,0 +1,86 @@
 /*
 * Award Habitoween ladder items to participants in this month's Habitoween festivities
 */
 /* eslint-disable no-console */
 const MIGRATION_NAME = '20221031_habitoween_ladder'; // Update when running in future years
 import { model as User } from '../../../website/server/models/user';
 const progressCount = 1000;
 let count = 0;
 async function updateUser (user) {
  count++;
  const set = {};
  const inc = {
    'items.food.Candy_Skeleton': 1,
    'items.food.Candy_Base': 1,
    'items.food.Candy_CottonCandyBlue': 1,
    'items.food.Candy_CottonCandyPink': 1,
    'items.food.Candy_Shade': 1,
    'items.food.Candy_White': 1,
    'items.food.Candy_Golden': 1,
    'items.food.Candy_Zombie': 1,
    'items.food.Candy_Desert': 1,
    'items.food.Candy_Red': 1,
  };
  set.migration = MIGRATION_NAME;
  if (user && user.items && user.items.pets && user.items.pets['JackOLantern-RoyalPurple']) {
    set['items.mounts.JackOLantern-RoyalPurple'] = true;
  } else if (user && user.items && user.items.mounts && user.items.mounts['JackOLantern-Glow']) {
    set['items.pets.JackOLantern-RoyalPurple'] = 5;
  } else if (user && user.items && user.items.pets && user.items.pets['JackOLantern-Glow']) {
    set['items.mounts.JackOLantern-Glow'] = true;
  } else if (user && user.items && user.items.mounts && user.items.mounts['JackOLantern-Ghost']) {
    set['items.pets.JackOLantern-Glow'] = 5;
  } else if (user && user.items && user.items.pets && user.items.pets['JackOLantern-Ghost']) {
    set['items.mounts.JackOLantern-Ghost'] = true;
  } else if (user && user.items && user.items.mounts && user.items.mounts['JackOLantern-Base']) {
    set['items.pets.JackOLantern-Ghost'] = 5;
  } else if (user && user.items && user.items.pets && user.items.pets['JackOLantern-Base']) {
    set['items.mounts.JackOLantern-Base'] = true;
  } else {
    set['items.pets.JackOLantern-Base'] = 5;
  }
  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
  return await User.update({_id: user._id}, {$inc: inc, $set: set}).exec();
 }
 export default async function processUsers () {
  let query = {
    migration: {$ne: MIGRATION_NAME},
    'auth.timestamps.loggedin': {$gt: new Date('2022-10-01')},
  };
  const fields = {
    _id: 1,
    items: 1,
  };
  while (true) { // eslint-disable-line no-constant-condition
    const users = await User // eslint-disable-line no-await-in-loop
      .find(query)
      .limit(250)
      .sort({_id: 1})
      .select(fields)
      .lean()
      .exec();
    if (users.length === 0) {
      console.warn('All appropriate users found and modified.');
      console.warn(`\n${count} users processed\n`);
      break;
    } else {
      query._id = {
        $gt: users[users.length - 1],
      };
    }
    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
  }
 };
--- a/migrations/archive/2022/20221031_pet_set_group_achievements.js
+++ b/migrations/archive/2022/20221031_pet_set_group_achievements.js
@@ -0,0 +1,119 @@
 /* eslint-disable no-console */
 const MIGRATION_NAME = '20221031_pet_set_group_achievements';
 import { model as User } from '../../../website/server/models/user';
 const progressCount = 1000;
 let count = 0;
 async function updateUser (user) {
  count++;
  const set = {
    migration: MIGRATION_NAME,
  };
  if (user && user.items && user.items.pets) {
    const pets = user.items.pets;
    if (pets['Wolf-Skeleton']
      && pets['TigerCub-Skeleton']
      && pets['PandaCub-Skeleton']
      && pets['LionCub-Skeleton']
      && pets['Fox-Skeleton']
      && pets['FlyingPig-Skeleton']
      && pets['Dragon-Skeleton']
      && pets['Cactus-Skeleton']
      && pets['BearCub-Skeleton']
      && pets['Gryphon-Skeleton']
      && pets['Hedgehog-Skeleton']
      && pets['Deer-Skeleton']
      && pets['Egg-Skeleton']
      && pets['Rat-Skeleton']
      && pets['Octopus-Skeleton']
      && pets['Seahorse-Skeleton']
      && pets['Parrot-Skeleton']
      && pets['Rooster-Skeleton']
      && pets['Spider-Skeleton']
      && pets['Owl-Skeleton']
      && pets['Penguin-Skeleton']
      && pets['TRex-Skeleton']
      && pets['Rock-Skeleton']
      && pets['Bunny-Skeleton']
      && pets['Slime-Skeleton']
      && pets['Sheep-Skeleton']
      && pets['Cuttlefish-Skeleton']
      && pets['Whale-Skeleton']
      && pets['Cheetah-Skeleton']
      && pets['Horse-Skeleton']
      && pets['Frog-Skeleton']
      && pets['Snake-Skeleton']
      && pets['Unicorn-Skeleton']
      && pets['Sabretooth-Skeleton']
      && pets['Monkey-Skeleton']
      && pets['Snail-Skeleton']
      && pets['Falcon-Skeleton']
      && pets['Treeling-Skeleton']
      && pets['Axolotl-Skeleton']
      && pets['Turtle-Skeleton']
      && pets['Armadillo-Skeleton']
      && pets['Cow-Skeleton']
      && pets['Beetle-Skeleton']
      && pets['Ferret-Skeleton']
      && pets['Sloth-Skeleton']
      && pets['Triceratops-Skeleton']
      && pets['GuineaPig-Skeleton']
      && pets['Peacock-Skeleton']
      && pets['Butterfly-Skeleton']
      && pets['Nudibranch-Skeleton']
      && pets['Hippo-Skeleton']
      && pets['Yarn-Skeleton']
      && pets['Pterodactyl-Skeleton']
      && pets['Badger-Skeleton']
      && pets['Squirrel-Skeleton']
      && pets['SeaSerpent-Skeleton']
      && pets['Kangaroo-Skeleton']
      && pets['Alligator-Skeleton']
      && pets['Velociraptor-Skeleton']
      && pets['Dolphin-Skeleton']
      && pets['Robot-Skeleton']) {
        set['achievements.boneToPick'] = true;
      }
  }
  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
  return await User.update({ _id: user._id }, { $set: set }).exec();
 }
 export default async function processUsers () {
  let query = {
    // migration: { $ne: MIGRATION_NAME },
    'auth.timestamps.loggedin': { $gt: new Date('2022-01-01') },
  };
  const fields = {
    _id: 1,
    items: 1,
  };
  while (true) { // eslint-disable-line no-constant-condition
    const users = await User // eslint-disable-line no-await-in-loop
      .find(query)
      .limit(250)
      .sort({_id: 1})
      .select(fields)
      .lean()
      .exec();
    if (users.length === 0) {
      console.warn('All appropriate users found and modified.');
      console.warn(`\n${count} users processed\n`);
      break;
    } else {
      query._id = {
        $gt: users[users.length - 1]._id,
      };
    }
    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
  }
 };
--- a/migrations/archive/2022/20221213_pet_group_achievements.js
+++ b/migrations/archive/2022/20221213_pet_group_achievements.js
@@ -0,0 +1,108 @@
 /* eslint-disable no-console */
 const MIGRATION_NAME = '20221213_pet_group_achievements';
 import { model as User } from '../../../website/server/models/user';
 const progressCount = 1000;
 let count = 0;
 async function updateUser (user) {
  count++;
  const set = {
    migration: MIGRATION_NAME,
  };
  if (user && user.items && user.items.pets) {
    const pets = user.items.pets;
    if (pets['BearCub-Base']
      && pets['BearCub-CottonCandyBlue']
      && pets['BearCub-CottonCandyPink']
      && pets['BearCub-Desert']
      && pets['BearCub-Golden']
      && pets['BearCub-Red']
      && pets['BearCub-Shade']
      && pets['BearCub-Skeleton']
      && pets['BearCub-White']
      && pets['BearCub-Zombie']
      && pets['Fox-Base']
      && pets['Fox-CottonCandyBlue']
      && pets['Fox-CottonCandyPink']
      && pets['Fox-Desert']
      && pets['Fox-Golden']
      && pets['Fox-Red']
      && pets['Fox-Shade']
      && pets['Fox-Skeleton']
      && pets['Fox-White']
      && pets['Fox-Zombie']
      && pets['Penguin-Base']
      && pets['Penguin-CottonCandyBlue']
      && pets['Penguin-CottonCandyPink']
      && pets['Penguin-Desert']
      && pets['Penguin-Golden']
      && pets['Penguin-Red']
      && pets['Penguin-Shade']
      && pets['Penguin-Skeleton']
      && pets['Penguin-White']
      && pets['Penguin-Zombie']
      && pets['Whale-Base']
      && pets['Whale-CottonCandyBlue']
      && pets['Whale-CottonCandyPink']
      && pets['Whale-Desert']
      && pets['Whale-Golden']
      && pets['Whale-Red']
      && pets['Whale-Shade']
      && pets['Whale-Skeleton']
      && pets['Whale-White']
      && pets['Whale-Zombie']
      && pets['Wolf-Base']
      && pets['Wolf-CottonCandyBlue']
      && pets['Wolf-CottonCandyPink']
      && pets['Wolf-Desert']
      && pets['Wolf-Golden']
      && pets['Wolf-Red']
      && pets['Wolf-Shade']
      && pets['Wolf-Skeleton']
      && pets['Wolf-White']
      && pets['Wolf-Zombie'] {
        set['achievements.polarPro'] = true;
      }
  }
  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
  return await User.update({ _id: user._id }, { $set: set }).exec();
 }
 export default async function processUsers () {
  let query = {
    // migration: { $ne: MIGRATION_NAME },
    'auth.timestamps.loggedin': { $gt: new Date('2022-11-01') },
  };
  const fields = {
    _id: 1,
    items: 1,
  };
  while (true) { // eslint-disable-line no-constant-condition
    const users = await User // eslint-disable-line no-await-in-loop
      .find(query)
      .limit(250)
      .sort({_id: 1})
      .select(fields)
      .lean()
      .exec();
    if (users.length === 0) {
      console.warn('All appropriate users found and modified.');
      console.warn(`\n${count} users processed\n`);
      break;
    } else {
      query._id = {
        $gt: users[users.length - 1]._id,
      };
    }
    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
  }
 };
--- a/migrations/archive/2022/20221227_nye.js
+++ b/migrations/archive/2022/20221227_nye.js
@@ -0,0 +1,144 @@
 /* eslint-disable no-console */
 const MIGRATION_NAME = '20221227_nye';
 import { model as User } from '../../../website/server/models/user';
 import { v4 as uuid } from 'uuid';
 const progressCount = 1000;
 let count = 0;
 async function updateUser (user) {
  count++;
  const set = { migration: MIGRATION_NAME };
  let push;
  if (typeof user.items.gear.owned.head_special_nye2021 !== 'undefined') {
    set['items.gear.owned.head_special_nye2022'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2022',
        _id: uuid(),
      },
    ];
  } else if (typeof user.items.gear.owned.head_special_nye2020 !== 'undefined') {
    set['items.gear.owned.head_special_nye2021'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2021',
        _id: uuid(),
      },
    ];
  } else if (typeof user.items.gear.owned.head_special_nye2019 !== 'undefined') {
    set['items.gear.owned.head_special_nye2020'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2020',
        _id: uuid(),
      },
    ];
  } else if (typeof user.items.gear.owned.head_special_nye2018 !== 'undefined') {
    set['items.gear.owned.head_special_nye2019'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2019',
        _id: uuid(),
      },
    ];
  } else if (typeof user.items.gear.owned.head_special_nye2017 !== 'undefined') {
    set['items.gear.owned.head_special_nye2018'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2018',
        _id: uuid(),
      },
    ];
  } else if (typeof user.items.gear.owned.head_special_nye2016 !== 'undefined') {
    set['items.gear.owned.head_special_nye2017'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2017',
        _id: uuid(),
      },
    ];
  } else if (typeof user.items.gear.owned.head_special_nye2015 !== 'undefined') {
    set['items.gear.owned.head_special_nye2016'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2016',
        _id: uuid(),
      },
    ];
  } else if (typeof user.items.gear.owned.head_special_nye2014 !== 'undefined') {
    set['items.gear.owned.head_special_nye2015'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2015',
        _id: uuid(),
      },
    ];
  } else if (typeof user.items.gear.owned.head_special_nye !== 'undefined') {
    set['items.gear.owned.head_special_nye2014'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye2014',
        _id: uuid(),
      },
    ];
  } else {
    set['items.gear.owned.head_special_nye'] = false;
    push = [
      {
        type: 'marketGear',
        path: 'gear.flat.head_special_nye',
        _id: uuid(),
      },
    ];
  }
  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
  return await User.update({_id: user._id}, {$set: set, $push: {pinnedItems: {$each: push}}}).exec();
 }
 export default async function processUsers () {
  let query = {
    'auth.timestamps.loggedin': {$gt: new Date('2022-12-01')},
    migration: {$ne: MIGRATION_NAME},
  };
  const fields = {
    _id: 1,
    items: 1,
  };
  while (true) { // eslint-disable-line no-constant-condition
    const users = await User // eslint-disable-line no-await-in-loop
      .find(query)
      .limit(250)
      .sort({_id: 1})
      .select(fields)
      .lean()
      .exec();
    if (users.length === 0) {
      console.warn('All appropriate users found and modified.');
      console.warn(`\n${count} users processed\n`);
      break;
    } else {
      query._id = {
        $gt: users[users.length - 1],
      };
    }
    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
  }
 };
--- a/migrations/archive/2023/20230123_habit_birthday.js
+++ b/migrations/archive/2023/20230123_habit_birthday.js
@@ -0,0 +1,88 @@
 /* eslint-disable no-console */
 import { v4 as uuid } from 'uuid';
 import { model as User } from '../../../website/server/models/user';
 const MIGRATION_NAME = '20230123_habit_birthday';
 const progressCount = 1000;
 let count = 0;
 async function updateUser (user) {
  count += 1;
  const inc = { 'balance': 5 };
  const set = {};
  const push = {};
  set.migration = MIGRATION_NAME;
  if (typeof user.items.gear.owned.armor_special_birthday2022 !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2023'] = true;
  } else if (typeof user.items.gear.owned.armor_special_birthday2021 !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2022'] = true;
  } else if (typeof user.items.gear.owned.armor_special_birthday2020 !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2021'] = true;
  } else if (typeof user.items.gear.owned.armor_special_birthday2019 !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2020'] = true;
  } else if (typeof user.items.gear.owned.armor_special_birthday2018 !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2019'] = true;
  } else if (typeof user.items.gear.owned.armor_special_birthday2017 !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2018'] = true;
  } else if (typeof user.items.gear.owned.armor_special_birthday2016 !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2017'] = true;
  } else if (typeof user.items.gear.owned.armor_special_birthday2015 !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2016'] = true;
  } else if (typeof user.items.gear.owned.armor_special_birthday !== 'undefined') {
    set['items.gear.owned.armor_special_birthday2015'] = true;
  } else {
    set['items.gear.owned.armor_special_birthday'] = true;
  }
  push.notifications = {
    type: 'ITEM_RECEIVED',
    data: {
      icon: 'notif_head_special_nye',
      title: 'Birthday Bash Day 1!',
      text: 'Enjoy your new Birthday Robe and 20 Gems on us!',
      destination: 'equipment',
    },
    seen: false,
  };
  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
  return await User.update({_id: user._id}, {$inc: inc, $set: set, $push: push}).exec();
 }
 export default async function processUsers () {
  let query = {
    migration: {$ne: MIGRATION_NAME},
    'auth.timestamps.loggedin': {$gt: new Date('2022-12-23')},
  };
  const fields = {
    _id: 1,
    items: 1,
  };
  while (true) { // eslint-disable-line no-constant-condition
    const users = await User // eslint-disable-line no-await-in-loop
      .find(query)
      .limit(250)
      .sort({_id: 1})
      .select(fields)
      .lean()
      .exec();
    if (users.length === 0) {
      console.warn('All appropriate users found and modified.');
      console.warn(`\n${count} users processed\n`);
      break;
    } else {
      query._id = {
        $gt: users[users.length - 1],
      };
    }
    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
  }
 };
--- a/migrations/archive/2023/20230127_habit_birthday_day5.js
+++ b/migrations/archive/2023/20230127_habit_birthday_day5.js
@@ -0,0 +1,69 @@
 /* eslint-disable no-console */
 import { v4 as uuid } from 'uuid';
 import { model as User } from '../../../website/server/models/user';
 const MIGRATION_NAME = '20230127_habit_birthday_day5';
 const progressCount = 1000;
 let count = 0;
 async function updateUser (user) {
  count += 1;
  const set = {};
  const push = {};
  set.migration = MIGRATION_NAME;
  set['items.gear.owned.back_special_anniversary'] = true;
  set['items.gear.owned.body_special_anniversary'] = true;
  set['items.gear.owned.eyewear_special_anniversary'] = true;
  push.notifications = {
    type: 'ITEM_RECEIVED',
    data: {
      icon: 'notif_head_special_nye',
      title: 'Birthday Bash Day 5!',
      text: 'Come celebrate by wearing your new Habitica Hero Cape, Collar, and Mask!',
      destination: 'equipment',
    },
    seen: false,
  };
  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
  return await User.update({_id: user._id}, {$set: set, $push: push}).exec();
 }
 export default async function processUsers () {
  let query = {
    migration: {$ne: MIGRATION_NAME},
    'auth.timestamps.loggedin': {$gt: new Date('2022-12-23')},
  };
  const fields = {
    _id: 1,
    items: 1,
  };
  while (true) { // eslint-disable-line no-constant-condition
    const users = await User // eslint-disable-line no-await-in-loop
      .find(query)
      .limit(250)
      .sort({_id: 1})
      .select(fields)
      .lean()
      .exec();
    if (users.length === 0) {
      console.warn('All appropriate users found and modified.');
      console.warn(`\n${count} users processed\n`);
      break;
    } else {
      query._id = {
        $gt: users[users.length - 1],
      };
    }
    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
  }
 };
--- a/migrations/archive/2023/20230201_habit_birthday_day10.js
+++ b/migrations/archive/2023/20230201_habit_birthday_day10.js
@@ -0,0 +1,79 @@
 /* eslint-disable no-console */
 import { v4 as uuid } from 'uuid';
 import { model as User } from '../../../website/server/models/user';
 const MIGRATION_NAME = '20230201_habit_birthday_day10';
 const progressCount = 1000;
 let count = 0;
 async function updateUser (user) {
  count += 1;
  const set = { 
    migration: MIGRATION_NAME,
    'purchased.background.birthday_bash': true,
  };
  const push = {
    notifications: {
      type: 'ITEM_RECEIVED',
      data: {
        icon: 'notif_head_special_nye',
        title: 'Birthday Bash Day 10!',
        text: 'Join in for the end of our birthday celebrations with 10th Birthday background, Cake, and achievement!',
        destination: 'backgrounds',
      },
      seen: false,
    },
  };
  const inc = {
    'items.food.Cake_Skeleton': 1,
    'items.food.Cake_Base': 1,
    'items.food.Cake_CottonCandyBlue': 1,
    'items.food.Cake_CottonCandyPink': 1,
    'items.food.Cake_Shade': 1,
    'items.food.Cake_White': 1,
    'items.food.Cake_Golden': 1,
    'items.food.Cake_Zombie': 1,
    'items.food.Cake_Desert': 1,
    'items.food.Cake_Red': 1,
    'achievements.habitBirthdays': 1,
  };
  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
  return await User.update({_id: user._id}, {$set: set, $push: push, $inc: inc }).exec();
 }
 export default async function processUsers () {
  let query = {
    migration: {$ne: MIGRATION_NAME},
    'auth.timestamps.loggedin': {$gt: new Date('2022-12-23')},
  };
  const fields = {
    _id: 1,
    items: 1,
  };
  while (true) { // eslint-disable-line no-constant-condition
    const users = await User // eslint-disable-line no-await-in-loop
      .find(query)
      .limit(250)
      .sort({_id: 1})
      .select(fields)
      .lean()
      .exec();
    if (users.length === 0) {
      console.warn('All appropriate users found and modified.');
      console.warn(`\n${count} users processed\n`);
      break;
    } else {
      query._id = {
        $gt: users[users.length - 1],
      };
    }
    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
  }
 };
--- a/migrations/users/pi-day.js
+++ b/migrations/users/pi-day.js
@@ -3,7 +3,7 @@ import { v4 as uuid } from 'uuid';
 import { model as User } from '../../website/server/models/user';
-const MIGRATION_NAME = '20220314_pi_day';
+const MIGRATION_NAME = '20230314_pi_day';
 const progressCount = 1000;
 let count = 0;
@@ -54,7 +54,7 @@ async function updateUser (user) {
 export default async function processUsers () {
  const query = {
    migration: { $ne: MIGRATION_NAME },
-    'auth.timestamps.loggedin': { $gt: new Date('2022-02-15') },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-02-15') },
  };
  const fields = {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,22 +1,22 @@
 {
  "name": "habitica",
  "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.241.2",
+  "version": "4.264.4",
  "main": "./website/server/index.js",
  "dependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-env": "^7.20.2",
    "@babel/register": "^7.18.9",
-    "@google-cloud/trace-agent": "^5.1.6",
+    "@google-cloud/trace-agent": "^7.1.2",
    "@parse/node-apn": "^5.1.3",
    "@slack/webhook": "^6.1.0",
    "accepts": "^1.3.8",
    "amazon-payments": "^0.2.9",
    "amplitude": "^6.0.0",
-    "apidoc": "^0.52.0",
+    "apidoc": "^0.54.0",
    "apple-auth": "^1.0.7",
-    "bcrypt": "^5.0.1",
+    "bcrypt": "^5.1.0",
-    "body-parser": "^1.20.0",
+    "body-parser": "^1.20.1",
    "bootstrap": "^4.6.0",
    "compression": "^1.7.4",
    "cookie-session": "^2.0.0",
@@ -27,10 +27,10 @@
    "eslint": "^6.8.0",
    "eslint-config-habitrpg": "^6.2.0",
    "eslint-plugin-mocha": "^5.0.0",
-    "express": "^4.18.1",
+    "express": "^4.18.2",
    "express-basic-auth": "^1.2.1",
    "express-validator": "^5.2.0",
-    "glob": "^8.0.3",
+    "glob": "^8.1.0",
    "got": "^11.8.3",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
@@ -41,9 +41,9 @@
    "helmet": "^4.6.0",
    "image-size": "^1.0.2",
    "in-app-purchase": "^1.11.3",
-    "js2xmlparser": "^4.0.2",
+    "js2xmlparser": "^5.0.0",
    "jsonwebtoken": "^8.5.1",
-    "jwks-rsa": "^2.1.4",
+    "jwks-rsa": "^2.1.5",
    "lodash": "^4.17.21",
    "merge-stream": "^2.0.0",
    "method-override": "^3.0.0",
@@ -61,20 +61,20 @@
    "paypal-rest-sdk": "^1.8.1",
    "pp-ipn": "^1.1.0",
    "ps-tree": "^1.0.0",
-    "rate-limiter-flexible": "^2.3.7",
+    "rate-limiter-flexible": "^2.4.0",
    "redis": "^3.1.2",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.13.11",
    "remove-markdown": "^0.5.0",
    "rimraf": "^3.0.2",
-    "short-uuid": "^4.2.0",
+    "short-uuid": "^4.2.2",
-    "stripe": "^8.222.0",
+    "stripe": "^11.10.0",
-    "superagent": "^7.1.6",
+    "superagent": "^8.0.6",
    "universal-analytics": "^0.5.3",
    "useragent": "^2.1.9",
-    "uuid": "^8.3.2",
+    "uuid": "^9.0.0",
-    "validator": "^13.7.0",
+    "validator": "^13.9.0",
    "vinyl-buffer": "^1.0.1",
-    "winston": "^3.8.1",
+    "winston": "^3.8.2",
    "winston-loggly-bulk": "^3.2.1",
    "xml2js": "^0.4.23"
  },
@@ -110,11 +110,11 @@
    "apidoc": "gulp apidoc"
  },
  "devDependencies": {
-    "axios": "^0.27.2",
+    "axios": "^1.2.2",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
    "chai-as-promised": "^7.1.1",
    "chai-moment": "^0.1.0",
-    "chalk": "^4.1.2",
+    "chalk": "^5.2.0",
    "cross-spawn": "^7.0.3",
    "expect.js": "^0.3.1",
    "istanbul": "^1.1.0-alpha.1",
@@ -122,7 +122,7 @@
    "monk": "^7.3.4",
    "require-again": "^2.0.0",
    "run-rs": "^0.7.7",
-    "sinon": "^13.0.2",
+    "sinon": "^15.0.1",
    "sinon-chai": "^3.7.0",
    "sinon-stub-promise": "^4.0.0"
  },
--- a/test/api/unit/libs/cron.test.js
+++ b/test/api/unit/libs/cron.test.js
@@ -231,13 +231,16 @@ describe('cron', async () => {
        },
      });
      // user1 has a 1-month recurring subscription starting today
-      user1.purchased.plan.customerId = 'subscribedId';
+      beforeEach(async () => {
-      user1.purchased.plan.dateUpdated = moment().toDate();
+        user1.purchased.plan.customerId = 'subscribedId';
-      user1.purchased.plan.planId = 'basic';
+        user1.purchased.plan.dateUpdated = moment().toDate();
-      user1.purchased.plan.consecutive.count = 0;
+        user1.purchased.plan.planId = 'basic';
-      user1.purchased.plan.consecutive.offset = 0;
+        user1.purchased.plan.consecutive.count = 0;
-      user1.purchased.plan.consecutive.trinkets = 0;
+        user1.purchased.plan.perkMonthCount = 0;
-      user1.purchased.plan.consecutive.gemCapExtra = 0;
+        user1.purchased.plan.consecutive.offset = 0;
        user1.purchased.plan.consecutive.trinkets = 0;
        user1.purchased.plan.consecutive.gemCapExtra = 0;
      });
      it('does not increment consecutive benefits after the first month', async () => {
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
@@ -271,6 +274,24 @@ describe('cron', async () => {
        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(0);
      });
      it('increments consecutive benefits after the second month if they also received a 1 month gift subscription', async () => {
        user1.purchased.plan.perkMonthCount = 1;
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(2, 'months')
          .add(2, 'days')
          .toDate());
        // Add 1 month to simulate what happens a month after the subscription was created.
        // Add 2 days so that we're sure we're not affected by any start-of-month effects
        // e.g., from time zone oddness.
        await cron({
          user: user1, tasksByType, daysMissed, analytics,
        });
        expect(user1.purchased.plan.perkMonthCount).to.equal(0);
        expect(user1.purchased.plan.consecutive.count).to.equal(2);
        expect(user1.purchased.plan.consecutive.offset).to.equal(0);
        expect(user1.purchased.plan.consecutive.trinkets).to.equal(1);
        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(5);
      });
      it('increments consecutive benefits after the third month', async () => {
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(3, 'months')
          .add(2, 'days')
@@ -315,6 +336,30 @@ describe('cron', async () => {
        expect(user1.purchased.plan.consecutive.trinkets).to.equal(3);
        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(15);
      });
      it('initializes plan.perkMonthCount if necessary', async () => {
        user.purchased.plan.perkMonthCount = undefined;
        clock = sinon.useFakeTimers(moment(user.purchased.plan.dateUpdated)
          .utcOffset(0)
          .startOf('month')
          .add(1, 'months')
          .add(2, 'days')
          .toDate());
        await cron({
          user, tasksByType, daysMissed, analytics,
        });
        expect(user.purchased.plan.perkMonthCount).to.equal(1);
        user.purchased.plan.perkMonthCount = undefined;
        user.purchased.plan.consecutive.count = 8;
        clock.restore();
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(2, 'months')
          .add(2, 'days')
          .toDate());
        await cron({
          user, tasksByType, daysMissed, analytics,
        });
        expect(user.purchased.plan.perkMonthCount).to.equal(2);
      });
    });
    describe('for a 3-month recurring subscription', async () => {
@@ -330,13 +375,16 @@ describe('cron', async () => {
        },
      });
      // user3 has a 3-month recurring subscription starting today
-      user3.purchased.plan.customerId = 'subscribedId';
+      beforeEach(async () => {
-      user3.purchased.plan.dateUpdated = moment().toDate();
+        user3.purchased.plan.customerId = 'subscribedId';
-      user3.purchased.plan.planId = 'basic_3mo';
+        user3.purchased.plan.dateUpdated = moment().toDate();
-      user3.purchased.plan.consecutive.count = 0;
+        user3.purchased.plan.planId = 'basic_3mo';
-      user3.purchased.plan.consecutive.offset = 3;
+        user3.purchased.plan.perkMonthCount = 0;
-      user3.purchased.plan.consecutive.trinkets = 1;
+        user3.purchased.plan.consecutive.count = 0;
-      user3.purchased.plan.consecutive.gemCapExtra = 5;
+        user3.purchased.plan.consecutive.offset = 3;
        user3.purchased.plan.consecutive.trinkets = 1;
        user3.purchased.plan.consecutive.gemCapExtra = 5;
      });
      it('does not increment consecutive benefits in the first month of the first paid period that they already have benefits for', async () => {
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
@@ -390,6 +438,21 @@ describe('cron', async () => {
        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(10);
      });
      it('keeps existing plan.perkMonthCount intact when incrementing consecutive benefits', async () => {
        user3.purchased.plan.perkMonthCount = 2;
        user3.purchased.plan.consecutive.trinkets = 1;
        user3.purchased.plan.consecutive.gemCapExtra = 5;
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(4, 'months')
          .add(2, 'days')
          .toDate());
        await cron({
          user: user3, tasksByType, daysMissed, analytics,
        });
        expect(user3.purchased.plan.perkMonthCount).to.equal(2);
        expect(user3.purchased.plan.consecutive.trinkets).to.equal(2);
        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(10);
      });
      it('does not increment consecutive benefits in the second month of the second period that they already have benefits for', async () => {
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(5, 'months')
          .add(2, 'days')
@@ -456,13 +519,16 @@ describe('cron', async () => {
        },
      });
      // user6 has a 6-month recurring subscription starting today
-      user6.purchased.plan.customerId = 'subscribedId';
+      beforeEach(async () => {
-      user6.purchased.plan.dateUpdated = moment().toDate();
+        user6.purchased.plan.customerId = 'subscribedId';
-      user6.purchased.plan.planId = 'google_6mo';
+        user6.purchased.plan.dateUpdated = moment().toDate();
-      user6.purchased.plan.consecutive.count = 0;
+        user6.purchased.plan.planId = 'google_6mo';
-      user6.purchased.plan.consecutive.offset = 6;
+        user6.purchased.plan.perkMonthCount = 0;
-      user6.purchased.plan.consecutive.trinkets = 2;
+        user6.purchased.plan.consecutive.count = 0;
-      user6.purchased.plan.consecutive.gemCapExtra = 10;
+        user6.purchased.plan.consecutive.offset = 6;
        user6.purchased.plan.consecutive.trinkets = 2;
        user6.purchased.plan.consecutive.gemCapExtra = 10;
      });
      it('does not increment consecutive benefits in the first month of the first paid period that they already have benefits for', async () => {
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
@@ -503,6 +569,19 @@ describe('cron', async () => {
        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(20);
      });
      it('keeps existing plan.perkMonthCount intact when incrementing consecutive benefits', async () => {
        user6.purchased.plan.perkMonthCount = 2;
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(7, 'months')
          .add(2, 'days')
          .toDate());
        await cron({
          user: user6, tasksByType, daysMissed, analytics,
        });
        expect(user6.purchased.plan.perkMonthCount).to.equal(2);
        expect(user6.purchased.plan.consecutive.trinkets).to.equal(4);
        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(20);
      });
      it('increments consecutive benefits the month after the third paid period has started', async () => {
        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(13, 'months')
          .add(2, 'days')
--- a/test/api/unit/libs/email.test.js
+++ b/test/api/unit/libs/email.test.js
@@ -13,11 +13,6 @@ function getUser () {
        username: 'username',
        email: 'email@email',
      },
      facebook: {
        emails: [{
          value: 'email@facebook',
        }],
      },
      google: {
        emails: [{
          value: 'email@google',
@@ -62,30 +57,12 @@ describe('emails', () => {
      expect(data).to.have.property('canSend', true);
    });
    it('returns correct user data [facebook users]', () => {
      const attachEmail = requireAgain(pathToEmailLib);
      const { getUserInfo } = attachEmail;
      const user = getUser();
      delete user.profile.name;
      delete user.auth.local.email;
      delete user.auth.google.emails;
      delete user.auth.apple.emails;
      const data = getUserInfo(user, ['name', 'email', '_id', 'canSend']);
      expect(data).to.have.property('name', user.auth.local.username);
      expect(data).to.have.property('email', user.auth.facebook.emails[0].value);
      expect(data).to.have.property('_id', user._id);
      expect(data).to.have.property('canSend', true);
    });
    it('returns correct user data [google users]', () => {
      const attachEmail = requireAgain(pathToEmailLib);
      const { getUserInfo } = attachEmail;
      const user = getUser();
      delete user.profile.name;
      delete user.auth.local.email;
      delete user.auth.facebook.emails;
      delete user.auth.apple.emails;
      const data = getUserInfo(user, ['name', 'email', '_id', 'canSend']);
@@ -103,7 +80,6 @@ describe('emails', () => {
      delete user.profile.name;
      delete user.auth.local.email;
      delete user.auth.google.emails;
      delete user.auth.facebook.emails;
      const data = getUserInfo(user, ['name', 'email', '_id', 'canSend']);
@@ -118,7 +94,6 @@ describe('emails', () => {
      const { getUserInfo } = attachEmail;
      const user = getUser();
      delete user.auth.local.email;
      delete user.auth.facebook;
      delete user.auth.google;
      delete user.auth.apple;
--- a/test/api/unit/libs/password.test.js
+++ b/test/api/unit/libs/password.test.js
@@ -246,7 +246,7 @@ describe('Password Utilities', () => {
    it('returns false if the user has no local auth', async () => {
      const user = await generateUser({
        auth: {
-          facebook: {},
+          google: {},
        },
      });
      const res = await validatePasswordResetCodeAndFindUser(encrypt(JSON.stringify({
--- a/test/api/unit/libs/payments/amazon/checkout.test.js
+++ b/test/api/unit/libs/payments/amazon/checkout.test.js
@@ -17,7 +17,7 @@ describe('Amazon Payments - Checkout', () => {
  let closeOrderReferenceSpy;
  let paymentBuyGemsStub;
-  let paymentCreateSubscritionStub;
+  let paymentCreateSubscriptionStub;
  let amount = gemsBlock.price / 100;
  function expectOrderReferenceSpy () {
@@ -85,8 +85,8 @@ describe('Amazon Payments - Checkout', () => {
    paymentBuyGemsStub = sinon.stub(payments, 'buyGems');
    paymentBuyGemsStub.resolves({});
-    paymentCreateSubscritionStub = sinon.stub(payments, 'createSubscription');
+    paymentCreateSubscriptionStub = sinon.stub(payments, 'createSubscription');
-    paymentCreateSubscritionStub.resolves({});
+    paymentCreateSubscriptionStub.resolves({});
    sinon.stub(common, 'uuid').returns('uuid-generated');
    sandbox.stub(gems, 'validateGiftMessage');
@@ -109,6 +109,7 @@ describe('Amazon Payments - Checkout', () => {
      user,
      paymentMethod,
      headers,
      sku: undefined,
    };
    if (gift) {
      expectedArgs.gift = gift;
@@ -215,13 +216,14 @@ describe('Amazon Payments - Checkout', () => {
    });
    gift.member = receivingUser;
-    expect(paymentCreateSubscritionStub).to.be.calledOnce;
+    expect(paymentCreateSubscriptionStub).to.be.calledOnce;
-    expect(paymentCreateSubscritionStub).to.be.calledWith({
+    expect(paymentCreateSubscriptionStub).to.be.calledWith({
      user,
      paymentMethod: amzLib.constants.PAYMENT_METHOD_GIFT,
      headers,
      gift,
      gemsBlock: undefined,
      sku: undefined,
    });
    expectAmazonStubs();
  });
--- a/test/api/unit/libs/payments/apple.test.js
+++ b/test/api/unit/libs/payments/apple.test.js
@@ -12,10 +12,10 @@ const { i18n } = common;
 describe('Apple Payments', () => {
  const subKey = 'basic_3mo';
-  describe('verifyGemPurchase', () => {
+  describe('verifyPurchase', () => {
    let sku; let user; let token; let receipt; let
      headers;
-    let iapSetupStub; let iapValidateStub; let iapIsValidatedStub; let paymentBuyGemsStub; let
+    let iapSetupStub; let iapValidateStub; let iapIsValidatedStub; let paymentBuySkuStub; let
      iapGetPurchaseDataStub; let validateGiftMessageStub;
    beforeEach(() => {
@@ -29,14 +29,15 @@ describe('Apple Payments', () => {
        .resolves();
      iapValidateStub = sinon.stub(iap, 'validate')
        .resolves({});
-      iapIsValidatedStub = sinon.stub(iap, 'isValidated')
+      iapIsValidatedStub = sinon.stub(iap, 'isValidated').returns(true);
-        .returns(true);
+      sinon.stub(iap, 'isExpired').returns(false);
      sinon.stub(iap, 'isCanceled').returns(false);
      iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
        .returns([{
          productId: 'com.habitrpg.ios.Habitica.21gems',
          transactionId: token,
        }]);
-      paymentBuyGemsStub = sinon.stub(payments, 'buyGems').resolves({});
+      paymentBuySkuStub = sinon.stub(payments, 'buySkuItem').resolves({});
      validateGiftMessageStub = sinon.stub(gems, 'validateGiftMessage');
    });
@@ -44,8 +45,10 @@ describe('Apple Payments', () => {
      iap.setup.restore();
      iap.validate.restore();
      iap.isValidated.restore();
      iap.isExpired.restore();
      iap.isCanceled.restore();
      iap.getPurchaseData.restore();
-      payments.buyGems.restore();
+      payments.buySkuItem.restore();
      gems.validateGiftMessage.restore();
    });
@@ -54,7 +57,7 @@ describe('Apple Payments', () => {
      iapIsValidatedStub = sinon.stub(iap, 'isValidated')
        .returns(false);
-      await expect(applePayments.verifyGemPurchase({ user, receipt, headers }))
+      await expect(applePayments.verifyPurchase({ user, receipt, headers }))
        .to.eventually.be.rejected.and.to.eql({
          httpCode: 401,
          name: 'NotAuthorized',
@@ -66,7 +69,7 @@ describe('Apple Payments', () => {
      iapGetPurchaseDataStub.restore();
      iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData').returns([]);
-      await expect(applePayments.verifyGemPurchase({ user, receipt, headers }))
+      await expect(applePayments.verifyPurchase({ user, receipt, headers }))
        .to.eventually.be.rejected.and.to.eql({
          httpCode: 401,
          name: 'NotAuthorized',
@@ -76,7 +79,7 @@ describe('Apple Payments', () => {
    it('errors if the user cannot purchase gems', async () => {
      sinon.stub(user, 'canGetGems').resolves(false);
-      await expect(applePayments.verifyGemPurchase({ user, receipt, headers }))
+      await expect(applePayments.verifyPurchase({ user, receipt, headers }))
        .to.eventually.be.rejected.and.to.eql({
          httpCode: 401,
          name: 'NotAuthorized',
@@ -94,14 +97,16 @@ describe('Apple Payments', () => {
          productId: 'badProduct',
          transactionId: token,
        }]);
      paymentBuySkuStub.restore();
-      await expect(applePayments.verifyGemPurchase({ user, receipt, headers }))
+      await expect(applePayments.verifyPurchase({ user, receipt, headers }))
        .to.eventually.be.rejected.and.to.eql({
-          httpCode: 401,
+          httpCode: 400,
-          name: 'NotAuthorized',
+          name: 'BadRequest',
          message: applePayments.constants.RESPONSE_INVALID_ITEM,
        });
      paymentBuySkuStub = sinon.stub(payments, 'buySkuItem').resolves({});
      user.canGetGems.restore();
    });
@@ -138,7 +143,7 @@ describe('Apple Payments', () => {
          }]);
        sinon.stub(user, 'canGetGems').resolves(true);
-        await applePayments.verifyGemPurchase({ user, receipt, headers });
+        await applePayments.verifyPurchase({ user, receipt, headers });
        expect(iapSetupStub).to.be.calledOnce;
        expect(iapValidateStub).to.be.calledOnce;
@@ -148,13 +153,13 @@ describe('Apple Payments', () => {
        expect(iapGetPurchaseDataStub).to.be.calledOnce;
        expect(validateGiftMessageStub).to.not.be.called;
-        expect(paymentBuyGemsStub).to.be.calledOnce;
+        expect(paymentBuySkuStub).to.be.calledOnce;
-        expect(paymentBuyGemsStub).to.be.calledWith({
+        expect(paymentBuySkuStub).to.be.calledWith({
          user,
          paymentMethod: applePayments.constants.PAYMENT_METHOD_APPLE,
          gemsBlock: common.content.gems[gemTest.gemsBlock],
          headers,
          gift: undefined,
          paymentMethod: applePayments.constants.PAYMENT_METHOD_APPLE,
          sku: gemTest.productId,
          headers,
        });
        expect(user.canGetGems).to.be.calledOnce;
        user.canGetGems.restore();
@@ -173,7 +178,7 @@ describe('Apple Payments', () => {
        }]);
      const gift = { uuid: receivingUser._id };
-      await applePayments.verifyGemPurchase({
+      await applePayments.verifyPurchase({
        user, gift, receipt, headers,
      });
@@ -187,18 +192,16 @@ describe('Apple Payments', () => {
      expect(validateGiftMessageStub).to.be.calledOnce;
      expect(validateGiftMessageStub).to.be.calledWith(gift, user);
-      expect(paymentBuyGemsStub).to.be.calledOnce;
+      expect(paymentBuySkuStub).to.be.calledOnce;
-      expect(paymentBuyGemsStub).to.be.calledWith({
+      expect(paymentBuySkuStub).to.be.calledWith({
        user,
        paymentMethod: applePayments.constants.PAYMENT_METHOD_APPLE,
        headers,
        gift: {
          type: 'gems',
          gems: { amount: 4 },
          member: sinon.match({ _id: receivingUser._id }),
          uuid: receivingUser._id,
          member: sinon.match({ _id: receivingUser._id }),
        },
-        gemsBlock: common.content.gems['4gems'],
+        paymentMethod: applePayments.constants.PAYMENT_METHOD_APPLE,
        sku: 'com.habitrpg.ios.Habitica.4gems',
        headers,
      });
    });
  });
@@ -218,6 +221,7 @@ describe('Apple Payments', () => {
      headers = {};
      receipt = `{"token": "${token}"}`;
      nextPaymentProcessing = moment.utc().add({ days: 2 });
      user = new User();
      iapSetupStub = sinon.stub(iap, 'setup')
        .resolves();
@@ -228,14 +232,17 @@ describe('Apple Payments', () => {
      iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
        .returns([{
          expirationDate: moment.utc().subtract({ day: 1 }).toDate(),
          purchaseDate: moment.utc().valueOf(),
          productId: sku,
          transactionId: token,
        }, {
          expirationDate: moment.utc().add({ day: 1 }).toDate(),
          purchaseDate: moment.utc().valueOf(),
          productId: 'wrongsku',
          transactionId: token,
        }, {
          expirationDate: moment.utc().add({ day: 1 }).toDate(),
          purchaseDate: moment.utc().valueOf(),
          productId: sku,
          transactionId: token,
        }]);
@@ -250,21 +257,12 @@ describe('Apple Payments', () => {
      if (payments.createSubscription.restore) payments.createSubscription.restore();
    });
    it('should throw an error if sku is empty', async () => {
      await expect(applePayments.subscribe('', user, receipt, headers, nextPaymentProcessing))
        .to.eventually.be.rejected.and.to.eql({
          httpCode: 400,
          name: 'BadRequest',
          message: i18n.t('missingSubscriptionCode'),
        });
    });
    it('should throw an error if receipt is invalid', async () => {
      iap.isValidated.restore();
      iapIsValidatedStub = sinon.stub(iap, 'isValidated')
        .returns(false);
-      await expect(applePayments.subscribe(sku, user, receipt, headers, nextPaymentProcessing))
+      await expect(applePayments.subscribe(user, receipt, headers, nextPaymentProcessing))
        .to.eventually.be.rejected.and.to.eql({
          httpCode: 401,
          name: 'NotAuthorized',
@@ -295,13 +293,15 @@ describe('Apple Payments', () => {
        iap.getPurchaseData.restore();
        iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
          .returns([{
-            expirationDate: moment.utc().add({ day: 1 }).toDate(),
+            expirationDate: moment.utc().add({ day: 2 }).toDate(),
            purchaseDate: new Date(),
            productId: option.sku,
            transactionId: token,
            originalTransactionId: token,
          }]);
        sub = common.content.subscriptionBlocks[option.subKey];
-        await applePayments.subscribe(option.sku, user, receipt, headers, nextPaymentProcessing);
+        await applePayments.subscribe(user, receipt, headers, nextPaymentProcessing);
        expect(iapSetupStub).to.be.calledOnce;
        expect(iapValidateStub).to.be.calledOnce;
@@ -321,20 +321,253 @@ describe('Apple Payments', () => {
          nextPaymentProcessing,
        });
      });
      if (option !== subOptions[3]) {
        const newOption = subOptions[3];
        it(`upgrades a subscription from ${option.sku} to ${newOption.sku}`, async () => {
          const oldSub = common.content.subscriptionBlocks[option.subKey];
          oldSub.logic = 'refundAndRepay';
          user.profile.name = 'sender';
          user.purchased.plan.paymentMethod = applePayments.constants.PAYMENT_METHOD_APPLE;
          user.purchased.plan.customerId = token;
          user.purchased.plan.planId = option.subKey;
          user.purchased.plan.additionalData = receipt;
          iap.getPurchaseData.restore();
          iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
            .returns([{
              expirationDate: moment.utc().add({ day: 2 }).toDate(),
              purchaseDate: moment.utc().valueOf(),
              productId: newOption.sku,
              transactionId: `${token}new`,
              originalTransactionId: token,
            }]);
          sub = common.content.subscriptionBlocks[newOption.subKey];
          await applePayments.subscribe(user,
            receipt,
            headers,
            nextPaymentProcessing);
          expect(iapSetupStub).to.be.calledOnce;
          expect(iapValidateStub).to.be.calledOnce;
          expect(iapValidateStub).to.be.calledWith(iap.APPLE, receipt);
          expect(iapIsValidatedStub).to.be.calledOnce;
          expect(iapIsValidatedStub).to.be.calledWith({});
          expect(iapGetPurchaseDataStub).to.be.calledOnce;
          expect(paymentsCreateSubscritionStub).to.be.calledOnce;
          expect(paymentsCreateSubscritionStub).to.be.calledWith({
            user,
            customerId: token,
            paymentMethod: applePayments.constants.PAYMENT_METHOD_APPLE,
            sub,
            headers,
            additionalData: receipt,
            nextPaymentProcessing,
            updatedFrom: oldSub,
          });
        });
      }
      if (option !== subOptions[0]) {
        const newOption = subOptions[0];
        it(`downgrades a subscription from ${option.sku} to ${newOption.sku}`, async () => {
          const oldSub = common.content.subscriptionBlocks[option.subKey];
          user.profile.name = 'sender';
          user.purchased.plan.paymentMethod = applePayments.constants.PAYMENT_METHOD_APPLE;
          user.purchased.plan.customerId = token;
          user.purchased.plan.planId = option.subKey;
          user.purchased.plan.additionalData = receipt;
          iap.getPurchaseData.restore();
          iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
            .returns([{
              expirationDate: moment.utc().add({ day: 2 }).toDate(),
              purchaseDate: moment.utc().valueOf(),
              productId: newOption.sku,
              transactionId: `${token}new`,
              originalTransactionId: token,
            }]);
          sub = common.content.subscriptionBlocks[newOption.subKey];
          await applePayments.subscribe(user,
            receipt,
            headers,
            nextPaymentProcessing);
          expect(iapSetupStub).to.be.calledOnce;
          expect(iapValidateStub).to.be.calledOnce;
          expect(iapValidateStub).to.be.calledWith(iap.APPLE, receipt);
          expect(iapIsValidatedStub).to.be.calledOnce;
          expect(iapIsValidatedStub).to.be.calledWith({});
          expect(iapGetPurchaseDataStub).to.be.calledOnce;
          expect(paymentsCreateSubscritionStub).to.be.calledOnce;
          expect(paymentsCreateSubscritionStub).to.be.calledWith({
            user,
            customerId: token,
            paymentMethod: applePayments.constants.PAYMENT_METHOD_APPLE,
            sub,
            headers,
            additionalData: receipt,
            nextPaymentProcessing,
            updatedFrom: oldSub,
          });
        });
      }
    });
-    it('errors when a user is already subscribed', async () => {
+    it('uses the most recent subscription data', async () => {
-      payments.createSubscription.restore();
+      iap.getPurchaseData.restore();
-      user = new User();
+      iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
        .returns([{
          expirationDate: moment.utc().add({ day: 4 }).toDate(),
          purchaseDate: moment.utc().subtract({ day: 5 }).toDate(),
          productId: 'com.habitrpg.ios.habitica.subscription.3month',
          transactionId: `${token}oldest`,
          originalTransactionId: `${token}evenOlder`,
        }, {
          expirationDate: moment.utc().add({ day: 2 }).toDate(),
          purchaseDate: moment.utc().subtract({ day: 1 }).toDate(),
          productId: 'com.habitrpg.ios.habitica.subscription.12month',
          transactionId: `${token}newest`,
          originalTransactionId: `${token}newest`,
        }, {
          expirationDate: moment.utc().add({ day: 1 }).toDate(),
          purchaseDate: moment.utc().subtract({ day: 2 }).toDate(),
          productId: 'com.habitrpg.ios.habitica.subscription.6month',
          transactionId: token,
          originalTransactionId: token,
        }]);
      sub = common.content.subscriptionBlocks.basic_12mo;
-      await applePayments.subscribe(sku, user, receipt, headers, nextPaymentProcessing);
+      await applePayments.subscribe(user, receipt, headers, nextPaymentProcessing);
-      await expect(applePayments.subscribe(sku, user, receipt, headers, nextPaymentProcessing))
+      expect(paymentsCreateSubscritionStub).to.be.calledOnce;
-        .to.eventually.be.rejected.and.to.eql({
+      expect(paymentsCreateSubscritionStub).to.be.calledWith({
-          httpCode: 401,
+        user,
-          name: 'NotAuthorized',
+        customerId: `${token}newest`,
-          message: applePayments.constants.RESPONSE_ALREADY_USED,
+        paymentMethod: applePayments.constants.PAYMENT_METHOD_APPLE,
-        });
+        sub,
        headers,
        additionalData: receipt,
        nextPaymentProcessing,
      });
    });
    describe('does not apply multiple times', async () => {
      it('errors when a user is using the same subscription', async () => {
        payments.createSubscription.restore();
        iap.getPurchaseData.restore();
        iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
          .returns([{
            expirationDate: moment.utc().add({ day: 1 }).toDate(),
            purchaseDate: moment.utc().toDate(),
            productId: sku,
            transactionId: token,
            originalTransactionId: token,
          }]);
        await applePayments.subscribe(user, receipt, headers, nextPaymentProcessing);
        await expect(applePayments.subscribe(user, receipt, headers, nextPaymentProcessing))
          .to.eventually.be.rejected.and.to.eql({
            httpCode: 401,
            name: 'NotAuthorized',
            message: applePayments.constants.RESPONSE_ALREADY_USED,
          });
      });
      it('errors when a user is using a rebill of the same subscription', async () => {
        user = new User();
        await user.save();
        payments.createSubscription.restore();
        iap.getPurchaseData.restore();
        iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
          .returns([{
            expirationDate: moment.utc().add({ day: 1 }).toDate(),
            purchaseDate: moment.utc().toDate(),
            productId: sku,
            transactionId: `${token}renew`,
            originalTransactionId: token,
          }]);
        await applePayments.subscribe(user, receipt, headers, nextPaymentProcessing);
        await expect(applePayments.subscribe(user, receipt, headers, nextPaymentProcessing))
          .to.eventually.be.rejected.and.to.eql({
            httpCode: 401,
            name: 'NotAuthorized',
            message: applePayments.constants.RESPONSE_ALREADY_USED,
          });
      });
      it('errors when a different user is using the subscription', async () => {
        user = new User();
        await user.save();
        payments.createSubscription.restore();
        iap.getPurchaseData.restore();
        iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
          .returns([{
            expirationDate: moment.utc().add({ day: 1 }).toDate(),
            purchaseDate: moment.utc().toDate(),
            productId: sku,
            transactionId: token,
            originalTransactionId: token,
          }]);
        await applePayments.subscribe(user, receipt, headers, nextPaymentProcessing);
        const secondUser = new User();
        await secondUser.save();
        await expect(applePayments.subscribe(
          secondUser, receipt, headers, nextPaymentProcessing,
        ))
          .to.eventually.be.rejected.and.to.eql({
            httpCode: 401,
            name: 'NotAuthorized',
            message: applePayments.constants.RESPONSE_ALREADY_USED,
          });
      });
      it('errors when a multiple users exist using the subscription', async () => {
        user = new User();
        await user.save();
        payments.createSubscription.restore();
        iap.getPurchaseData.restore();
        iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
          .returns([{
            expirationDate: moment.utc().add({ day: 1 }).toDate(),
            purchaseDate: moment.utc().toDate(),
            productId: sku,
            transactionId: token,
            originalTransactionId: token,
          }]);
        await applePayments.subscribe(user, receipt, headers, nextPaymentProcessing);
        const secondUser = new User();
        secondUser.purchased.plan = user.purchased.plan;
        secondUser.purchased.plan.dateTerminate = new Date();
        secondUser.save();
        iap.getPurchaseData.restore();
        iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
          .returns([{
            expirationDate: moment.utc().add({ day: 1 }).toDate(),
            purchaseDate: moment.utc().toDate(),
            productId: sku,
            transactionId: `${token}new`,
            originalTransactionId: token,
          }]);
        const thirdUser = new User();
        await thirdUser.save();
        await expect(applePayments.subscribe(
          thirdUser, receipt, headers, nextPaymentProcessing,
        ))
          .to.eventually.be.rejected.and.to.eql({
            httpCode: 401,
            name: 'NotAuthorized',
            message: applePayments.constants.RESPONSE_ALREADY_USED,
          });
      });
    });
  });
@@ -359,9 +592,9 @@ describe('Apple Payments', () => {
        });
      iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
        .returns([{ expirationDate: expirationDate.toDate() }]);
-      iapIsValidatedStub = sinon.stub(iap, 'isValidated')
+      iapIsValidatedStub = sinon.stub(iap, 'isValidated').returns(true);
-        .returns(true);
+      sinon.stub(iap, 'isCanceled').returns(false);
-
+      sinon.stub(iap, 'isExpired').returns(true);
      user = new User();
      user.profile.name = 'sender';
      user.purchased.plan.paymentMethod = applePayments.constants.PAYMENT_METHOD_APPLE;
@@ -376,6 +609,8 @@ describe('Apple Payments', () => {
      iap.setup.restore();
      iap.validate.restore();
      iap.isValidated.restore();
      iap.isExpired.restore();
      iap.isCanceled.restore();
      iap.getPurchaseData.restore();
      payments.cancelSubscription.restore();
    });
@@ -395,6 +630,8 @@ describe('Apple Payments', () => {
      iap.getPurchaseData.restore();
      iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
        .returns([{ expirationDate: expirationDate.add({ day: 1 }).toDate() }]);
      iap.isExpired.restore();
      sinon.stub(iap, 'isExpired').returns(false);
      await expect(applePayments.cancelSubscribe(user, headers))
        .to.eventually.be.rejected.and.to.eql({
@@ -417,7 +654,38 @@ describe('Apple Payments', () => {
        });
    });
-    it('should cancel a user subscription', async () => {
+    it('should cancel a cancelled subscription with termination date in the future', async () => {
      const futureDate = expirationDate.add({ day: 1 });
      iap.getPurchaseData.restore();
      iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
        .returns([{ expirationDate: futureDate }]);
      iap.isExpired.restore();
      sinon.stub(iap, 'isExpired').returns(false);
      iap.isCanceled.restore();
      sinon.stub(iap, 'isCanceled').returns(true);
      await applePayments.cancelSubscribe(user, headers);
      expect(iapSetupStub).to.be.calledOnce;
      expect(iapValidateStub).to.be.calledOnce;
      expect(iapValidateStub).to.be.calledWith(iap.APPLE, receipt);
      expect(iapIsValidatedStub).to.be.calledOnce;
      expect(iapIsValidatedStub).to.be.calledWith({
        expirationDate: futureDate,
      });
      expect(iapGetPurchaseDataStub).to.be.calledOnce;
      expect(paymentCancelSubscriptionSpy).to.be.calledOnce;
      expect(paymentCancelSubscriptionSpy).to.be.calledWith({
        user,
        paymentMethod: applePayments.constants.PAYMENT_METHOD_APPLE,
        nextBill: futureDate.toDate(),
        headers,
      });
    });
    it('should cancel an expired subscription', async () => {
      await applePayments.cancelSubscribe(user, headers);
      expect(iapSetupStub).to.be.calledOnce;
--- a/test/api/unit/libs/payments/google.test.js
+++ b/test/api/unit/libs/payments/google.test.js
@@ -12,11 +12,11 @@ const { i18n } = common;
 describe('Google Payments', () => {
  const subKey = 'basic_3mo';
-  describe('verifyGemPurchase', () => {
+  describe('verifyPurchase', () => {
    let sku; let user; let token; let receipt; let signature; let
-      headers; const gemsBlock = common.content.gems['21gems'];
+      headers;
    let iapSetupStub; let iapValidateStub; let iapIsValidatedStub; let
-      paymentBuyGemsStub; let validateGiftMessageStub;
+      paymentBuySkuStub; let validateGiftMessageStub;
    beforeEach(() => {
      sku = 'com.habitrpg.android.habitica.iap.21gems';
@@ -27,11 +27,10 @@ describe('Google Payments', () => {
      iapSetupStub = sinon.stub(iap, 'setup')
        .resolves();
-      iapValidateStub = sinon.stub(iap, 'validate')
+      iapValidateStub = sinon.stub(iap, 'validate').resolves({ productId: sku });
        .resolves({});
      iapIsValidatedStub = sinon.stub(iap, 'isValidated')
        .returns(true);
-      paymentBuyGemsStub = sinon.stub(payments, 'buyGems').resolves({});
+      paymentBuySkuStub = sinon.stub(payments, 'buySkuItem').resolves({});
      validateGiftMessageStub = sinon.stub(gems, 'validateGiftMessage');
    });
@@ -39,7 +38,7 @@ describe('Google Payments', () => {
      iap.setup.restore();
      iap.validate.restore();
      iap.isValidated.restore();
-      payments.buyGems.restore();
+      payments.buySkuItem.restore();
      gems.validateGiftMessage.restore();
    });
@@ -48,7 +47,7 @@ describe('Google Payments', () => {
      iapIsValidatedStub = sinon.stub(iap, 'isValidated')
        .returns(false);
-      await expect(googlePayments.verifyGemPurchase({
+      await expect(googlePayments.verifyPurchase({
        user, receipt, signature, headers,
      }))
        .to.eventually.be.rejected.and.to.eql({
@@ -60,21 +59,25 @@ describe('Google Payments', () => {
    it('should throw an error if productId is invalid', async () => {
      receipt = `{"token": "${token}", "productId": "invalid"}`;
      iapValidateStub.restore();
      iapValidateStub = sinon.stub(iap, 'validate').resolves({});
-      await expect(googlePayments.verifyGemPurchase({
+      paymentBuySkuStub.restore();
      await expect(googlePayments.verifyPurchase({
        user, receipt, signature, headers,
      }))
        .to.eventually.be.rejected.and.to.eql({
-          httpCode: 401,
+          httpCode: 400,
-          name: 'NotAuthorized',
+          name: 'BadRequest',
          message: googlePayments.constants.RESPONSE_INVALID_ITEM,
        });
      paymentBuySkuStub = sinon.stub(payments, 'buySkuItem').resolves({});
    });
    it('should throw an error if user cannot purchase gems', async () => {
      sinon.stub(user, 'canGetGems').resolves(false);
-      await expect(googlePayments.verifyGemPurchase({
+      await expect(googlePayments.verifyPurchase({
        user, receipt, signature, headers,
      }))
        .to.eventually.be.rejected.and.to.eql({
@@ -88,7 +91,7 @@ describe('Google Payments', () => {
    it('purchases gems', async () => {
      sinon.stub(user, 'canGetGems').resolves(true);
-      await googlePayments.verifyGemPurchase({
+      await googlePayments.verifyPurchase({
        user, receipt, signature, headers,
      });
@@ -101,15 +104,17 @@ describe('Google Payments', () => {
        signature,
      });
      expect(iapIsValidatedStub).to.be.calledOnce;
-      expect(iapIsValidatedStub).to.be.calledWith({});
+      expect(iapIsValidatedStub).to.be.calledWith(
        { productId: sku },
      );
-      expect(paymentBuyGemsStub).to.be.calledOnce;
+      expect(paymentBuySkuStub).to.be.calledOnce;
-      expect(paymentBuyGemsStub).to.be.calledWith({
+      expect(paymentBuySkuStub).to.be.calledWith({
        user,
        paymentMethod: googlePayments.constants.PAYMENT_METHOD_GOOGLE,
        gemsBlock,
        headers,
        gift: undefined,
        paymentMethod: googlePayments.constants.PAYMENT_METHOD_GOOGLE,
        sku,
        headers,
      });
      expect(user.canGetGems).to.be.calledOnce;
      user.canGetGems.restore();
@@ -120,7 +125,7 @@ describe('Google Payments', () => {
      await receivingUser.save();
      const gift = { uuid: receivingUser._id };
-      await googlePayments.verifyGemPurchase({
+      await googlePayments.verifyPurchase({
        user, gift, receipt, signature, headers,
      });
@@ -134,20 +139,20 @@ describe('Google Payments', () => {
        signature,
      });
      expect(iapIsValidatedStub).to.be.calledOnce;
-      expect(iapIsValidatedStub).to.be.calledWith({});
+      expect(iapIsValidatedStub).to.be.calledWith(
        { productId: sku },
      );
-      expect(paymentBuyGemsStub).to.be.calledOnce;
+      expect(paymentBuySkuStub).to.be.calledOnce;
-      expect(paymentBuyGemsStub).to.be.calledWith({
+      expect(paymentBuySkuStub).to.be.calledWith({
        user,
        paymentMethod: googlePayments.constants.PAYMENT_METHOD_GOOGLE,
        gemsBlock,
        headers,
        gift: {
          type: 'gems',
          gems: { amount: 21 },
          member: sinon.match({ _id: receivingUser._id }),
          uuid: receivingUser._id,
          member: sinon.match({ _id: receivingUser._id }),
        },
        paymentMethod: googlePayments.constants.PAYMENT_METHOD_GOOGLE,
        sku,
        headers,
      });
    });
  });
--- a/test/api/unit/libs/payments/payments.test.js
+++ b/test/api/unit/libs/payments/payments.test.js
@@ -11,10 +11,13 @@ import {
  generateGroup,
 } from '../../../../helpers/api-unit.helper';
 import * as worldState from '../../../../../website/server/libs/worldState';
 import { TransactionModel } from '../../../../../website/server/models/transaction';
 describe('payments/index', () => {
-  let user; let group; let data; let
+  let user;
-    plan;
+  let group;
  let data;
  let plan;
  beforeEach(async () => {
    user = new User();
@@ -104,6 +107,23 @@ describe('payments/index', () => {
        expect(recipient.purchased.plan.extraMonths).to.eql(3);
      });
      it('add a transaction entry to the recipient', async () => {
        recipient.purchased.plan = plan;
        expect(recipient.purchased.plan.extraMonths).to.eql(0);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.extraMonths).to.eql(3);
        const transactions = await TransactionModel
          .find({ userId: recipient._id })
          .sort({ createdAt: -1 })
          .exec();
        expect(transactions).to.have.lengthOf(1);
      });
      it('does not set negative extraMonths if plan has past dateTerminated date', async () => {
        const dateTerminated = moment().subtract(2, 'months').toDate();
        recipient.purchased.plan.dateTerminated = dateTerminated;
@@ -183,6 +203,28 @@ describe('payments/index', () => {
        expect(recipient.purchased.plan.dateCreated).to.exist;
      });
      it('sets plan.dateCurrentTypeCreated if it did not previously exist', async () => {
        expect(recipient.purchased.plan.dateCurrentTypeCreated).to.not.exist;
        await api.createSubscription(data);
        expect(recipient.purchased.plan.dateCurrentTypeCreated).to.exist;
      });
      it('keeps plan.dateCreated when changing subscription type', async () => {
        await api.createSubscription(data);
        const initialDate = recipient.purchased.plan.dateCreated;
        await api.createSubscription(data);
        expect(recipient.purchased.plan.dateCreated).to.eql(initialDate);
      });
      it('sets plan.dateCurrentTypeCreated when changing subscription type', async () => {
        await api.createSubscription(data);
        const initialDate = recipient.purchased.plan.dateCurrentTypeCreated;
        await api.createSubscription(data);
        expect(recipient.purchased.plan.dateCurrentTypeCreated).to.not.eql(initialDate);
      });
      it('does not change plan.customerId if it already exists', async () => {
        recipient.purchased.plan = plan;
        data.customerId = 'purchaserCustomerId';
@@ -193,6 +235,116 @@ describe('payments/index', () => {
        expect(recipient.purchased.plan.customerId).to.eql('customer-id');
      });
      it('sets plan.perkMonthCount to 1 if user is not subscribed', async () => {
        recipient.purchased.plan = plan;
        recipient.purchased.plan.perkMonthCount = 1;
        recipient.purchased.plan.customerId = undefined;
        data.sub.key = 'basic_earned';
        data.gift.subscription.key = 'basic_earned';
        data.gift.subscription.months = 1;
        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
      });
      it('sets plan.perkMonthCount to 1 if field is not initialized', async () => {
        recipient.purchased.plan = plan;
        recipient.purchased.plan.perkMonthCount = -1;
        recipient.purchased.plan.customerId = undefined;
        data.sub.key = 'basic_earned';
        data.gift.subscription.key = 'basic_earned';
        data.gift.subscription.months = 1;
        expect(recipient.purchased.plan.perkMonthCount).to.eql(-1);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
      });
      it('sets plan.perkMonthCount to 1 if user had previous count but lapsed subscription', async () => {
        recipient.purchased.plan = plan;
        recipient.purchased.plan.perkMonthCount = 2;
        recipient.purchased.plan.customerId = undefined;
        data.sub.key = 'basic_earned';
        data.gift.subscription.key = 'basic_earned';
        data.gift.subscription.months = 1;
        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
      });
      it('adds to plan.perkMonthCount if user is already subscribed', async () => {
        recipient.purchased.plan = plan;
        recipient.purchased.plan.perkMonthCount = 1;
        data.sub.key = 'basic_earned';
        data.gift.subscription.key = 'basic_earned';
        data.gift.subscription.months = 1;
        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
      });
      it('awards perks if plan.perkMonthCount reaches 3 with existing subscription', async () => {
        recipient.purchased.plan = plan;
        recipient.purchased.plan.perkMonthCount = 2;
        data.sub.key = 'basic_earned';
        data.gift.subscription.key = 'basic_earned';
        data.gift.subscription.months = 1;
        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.perkMonthCount).to.eql(0);
        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(5);
      });
      it('awards perks if plan.perkMonthCount reaches 3 without existing subscription', async () => {
        recipient.purchased.plan.perkMonthCount = 0;
        expect(recipient.purchased.plan.perkMonthCount).to.eql(0);
        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.perkMonthCount).to.eql(0);
        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(5);
      });
      it('awards perks if plan.perkMonthCount reaches 3 without initialized field', async () => {
        expect(recipient.purchased.plan.perkMonthCount).to.eql(-1);
        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.perkMonthCount).to.eql(0);
        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(5);
      });
      it('awards perks if plan.perkMonthCount goes over 3', async () => {
        recipient.purchased.plan = plan;
        recipient.purchased.plan.perkMonthCount = 2;
        data.sub.key = 'basic_earned';
        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
        await api.createSubscription(data);
        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(5);
      });
      it('sets plan.customerId to "Gift" if it does not already exist', async () => {
        expect(recipient.purchased.plan.customerId).to.not.exist;
@@ -359,6 +511,7 @@ describe('payments/index', () => {
        expect(user.purchased.plan.customerId).to.eql('customer-id');
        expect(user.purchased.plan.dateUpdated).to.exist;
        expect(user.purchased.plan.gemsBought).to.eql(0);
        expect(user.purchased.plan.perkMonthCount).to.eql(0);
        expect(user.purchased.plan.paymentMethod).to.eql('Payment Method');
        expect(user.purchased.plan.extraMonths).to.eql(0);
        expect(user.purchased.plan.dateTerminated).to.eql(null);
@@ -366,6 +519,63 @@ describe('payments/index', () => {
        expect(user.purchased.plan.dateCreated).to.exist;
      });
      it('sets plan.dateCreated if it did not previously exist', async () => {
        expect(user.purchased.plan.dateCreated).to.not.exist;
        await api.createSubscription(data);
        expect(user.purchased.plan.dateCreated).to.exist;
      });
      it('sets plan.dateCurrentTypeCreated if it did not previously exist', async () => {
        expect(user.purchased.plan.dateCurrentTypeCreated).to.not.exist;
        await api.createSubscription(data);
        expect(user.purchased.plan.dateCurrentTypeCreated).to.exist;
      });
      it('keeps plan.dateCreated when changing subscription type', async () => {
        await api.createSubscription(data);
        const initialDate = user.purchased.plan.dateCreated;
        await api.createSubscription(data);
        expect(user.purchased.plan.dateCreated).to.eql(initialDate);
      });
      it('sets plan.dateCurrentTypeCreated when changing subscription type', async () => {
        await api.createSubscription(data);
        const initialDate = user.purchased.plan.dateCurrentTypeCreated;
        await api.createSubscription(data);
        expect(user.purchased.plan.dateCurrentTypeCreated).to.not.eql(initialDate);
      });
      it('keeps plan.perkMonthCount when changing subscription type', async () => {
        await api.createSubscription(data);
        user.purchased.plan.perkMonthCount = 2;
        await api.createSubscription(data);
        expect(user.purchased.plan.perkMonthCount).to.eql(2);
      });
      it('sets plan.perkMonthCount to zero when creating new monthly subscription', async () => {
        user.purchased.plan.perkMonthCount = 2;
        await api.createSubscription(data);
        expect(user.purchased.plan.perkMonthCount).to.eql(0);
      });
      it('sets plan.perkMonthCount to zero when creating new 3 month subscription', async () => {
        user.purchased.plan.perkMonthCount = 2;
        await api.createSubscription(data);
        expect(user.purchased.plan.perkMonthCount).to.eql(0);
      });
      it('updates plan.consecutive.offset when changing subscription type', async () => {
        await api.createSubscription(data);
        expect(user.purchased.plan.consecutive.offset).to.eql(3);
        data.sub.key = 'basic_6mo';
        await api.createSubscription(data);
        expect(user.purchased.plan.consecutive.offset).to.eql(6);
      });
      it('awards the Royal Purple Jackalope pet', async () => {
        await api.createSubscription(data);
@@ -445,6 +655,89 @@ describe('payments/index', () => {
          },
        });
      });
      context('Upgrades subscription', () => {
        it('from basic_earned to basic_6mo', async () => {
          data.sub.key = 'basic_earned';
          expect(user.purchased.plan.planId).to.not.exist;
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_earned');
          expect(user.purchased.plan.customerId).to.eql('customer-id');
          const created = user.purchased.plan.dateCreated;
          const updated = user.purchased.plan.dateUpdated;
          data.sub.key = 'basic_6mo';
          data.updatedFrom = { key: 'basic_earned' };
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_6mo');
          expect(user.purchased.plan.dateCreated).to.eql(created);
          expect(user.purchased.plan.dateUpdated).to.not.eql(updated);
          expect(user.purchased.plan.customerId).to.eql('customer-id');
        });
        it('from basic_3mo to basic_12mo', async () => {
          expect(user.purchased.plan.planId).to.not.exist;
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_3mo');
          expect(user.purchased.plan.customerId).to.eql('customer-id');
          const created = user.purchased.plan.dateCreated;
          const updated = user.purchased.plan.dateUpdated;
          data.sub.key = 'basic_12mo';
          data.updatedFrom = { key: 'basic_3mo' };
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_12mo');
          expect(user.purchased.plan.dateCreated).to.eql(created);
          expect(user.purchased.plan.dateUpdated).to.not.eql(updated);
          expect(user.purchased.plan.customerId).to.eql('customer-id');
        });
      });
      context('Downgrades subscription', () => {
        it('from basic_6mo to basic_earned', async () => {
          data.sub.key = 'basic_6mo';
          expect(user.purchased.plan.planId).to.not.exist;
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_6mo');
          expect(user.purchased.plan.customerId).to.eql('customer-id');
          const created = user.purchased.plan.dateCreated;
          const updated = user.purchased.plan.dateUpdated;
          data.sub.key = 'basic_earned';
          data.updatedFrom = { key: 'basic_6mo' };
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_earned');
          expect(user.purchased.plan.dateCreated).to.eql(created);
          expect(user.purchased.plan.dateUpdated).to.not.eql(updated);
          expect(user.purchased.plan.customerId).to.eql('customer-id');
        });
        it('from basic_12mo to basic_3mo', async () => {
          expect(user.purchased.plan.planId).to.not.exist;
          data.sub.key = 'basic_12mo';
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_12mo');
          expect(user.purchased.plan.customerId).to.eql('customer-id');
          const created = user.purchased.plan.dateCreated;
          const updated = user.purchased.plan.dateUpdated;
          data.sub.key = 'basic_3mo';
          data.updatedFrom = { key: 'basic_12mo' };
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_3mo');
          expect(user.purchased.plan.dateCreated).to.eql(created);
          expect(user.purchased.plan.dateUpdated).to.not.eql(updated);
          expect(user.purchased.plan.customerId).to.eql('customer-id');
        });
      });
    });
    context('Block subscription perks', () => {
@@ -468,7 +761,6 @@ describe('payments/index', () => {
      it('adds 10 to plan.consecutive.gemCapExtra for 6 month block', async () => {
        data.sub.key = 'basic_6mo';
        await api.createSubscription(data);
        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
@@ -476,7 +768,6 @@ describe('payments/index', () => {
      it('adds 20 to plan.consecutive.gemCapExtra for 12 month block', async () => {
        data.sub.key = 'basic_12mo';
        await api.createSubscription(data);
        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
@@ -512,6 +803,532 @@ describe('payments/index', () => {
        expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
      });
      context('Upgrades subscription', () => {
        context('Using payDifference logic', () => {
          beforeEach(async () => {
            data.updatedFrom = { logic: 'payDifference' };
          });
          it('Adds 10 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
            data.sub.key = 'basic_earned';
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_earned');
            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
            data.sub.key = 'basic_6mo';
            data.updatedFrom.key = 'basic_earned';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_6mo');
            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
          });
          it('Adds 15 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_3mo');
            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
            data.sub.key = 'basic_12mo';
            data.updatedFrom.key = 'basic_3mo';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_12mo');
            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
          });
          it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
            data.sub.key = 'basic_earned';
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_earned');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
            data.sub.key = 'basic_6mo';
            data.updatedFrom.key = 'basic_earned';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_6mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
          });
          it('Adds 2 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
            data.sub.key = 'basic_6mo';
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_6mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
            data.sub.key = 'basic_12mo';
            data.updatedFrom.key = 'basic_6mo';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_12mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
          });
          it('Adds 3 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_3mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
            data.sub.key = 'basic_12mo';
            data.updatedFrom.key = 'basic_3mo';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_12mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
          });
        });
        context('Using payFull logic', () => {
          beforeEach(async () => {
            data.updatedFrom = { logic: 'payFull' };
          });
          it('Adds 10 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
            data.sub.key = 'basic_earned';
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_earned');
            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
            data.sub.key = 'basic_6mo';
            data.updatedFrom.key = 'basic_earned';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_6mo');
            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
          });
          it('Adds 20 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_3mo');
            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
            data.sub.key = 'basic_12mo';
            data.updatedFrom.key = 'basic_3mo';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_12mo');
            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(25);
          });
          it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
            data.sub.key = 'basic_earned';
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_earned');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
            data.sub.key = 'basic_6mo';
            data.updatedFrom.key = 'basic_earned';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_6mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
          });
          it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
            data.sub.key = 'basic_6mo';
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_6mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
            data.sub.key = 'basic_12mo';
            data.updatedFrom.key = 'basic_6mo';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_12mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(6);
          });
          it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
            expect(user.purchased.plan.planId).to.not.exist;
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_3mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
            data.sub.key = 'basic_12mo';
            data.updatedFrom.key = 'basic_3mo';
            await api.createSubscription(data);
            expect(user.purchased.plan.planId).to.eql('basic_12mo');
            expect(user.purchased.plan.consecutive.trinkets).to.eql(5);
          });
        });
        context('Using refundAndRepay logic', () => {
          let clock;
          beforeEach(async () => {
            clock = sinon.useFakeTimers(new Date('2022-01-01'));
            data.updatedFrom = { logic: 'refundAndRepay' };
          });
          context('Upgrades within first half of subscription', () => {
            it('Adds 10 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
              data.sub.key = 'basic_earned';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_earned');
              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
              data.sub.key = 'basic_6mo';
              data.updatedFrom.key = 'basic_earned';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-01-10'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
            });
            it('Adds 15 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_3mo');
              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_3mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-02-05'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
            });
            it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
              data.sub.key = 'basic_earned';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_earned');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
              data.sub.key = 'basic_6mo';
              data.updatedFrom.key = 'basic_earned';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-01-08'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
            });
            it('Adds 3 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_3mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_3mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-01-31'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
            });
            it('Adds 2 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
              data.sub.key = 'basic_6mo';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_6mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-01-28'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
            });
            it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo after initial cycle', async () => {
              data.sub.key = 'basic_earned';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_earned');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
              data.sub.key = 'basic_6mo';
              data.updatedFrom.key = 'basic_earned';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2024-01-08'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
            });
            it('Adds 2 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo after initial cycle', async () => {
              data.sub.key = 'basic_6mo';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_6mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-08-28'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
            });
            it('Adds 3 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo after initial cycle', async () => {
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_3mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_3mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-07-31'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
            });
          });
          context('Upgrades within second half of subscription', () => {
            it('Adds 10 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
              data.sub.key = 'basic_earned';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_earned');
              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
              data.sub.key = 'basic_6mo';
              data.updatedFrom.key = 'basic_earned';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-01-20'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
            });
            it('Adds 20 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_3mo');
              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_3mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-02-24'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(25);
            });
            it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
              data.sub.key = 'basic_earned';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_earned');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
              data.sub.key = 'basic_6mo';
              data.updatedFrom.key = 'basic_earned';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-01-28'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
            });
            it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
              data.sub.key = 'basic_6mo';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_6mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-05-28'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(6);
            });
            it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_3mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_3mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-03-03'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(5);
            });
            it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo after initial cycle', async () => {
              data.sub.key = 'basic_earned';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_earned');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
              data.sub.key = 'basic_6mo';
              data.updatedFrom.key = 'basic_earned';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2022-05-28'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
            });
            it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo after initial cycle', async () => {
              data.sub.key = 'basic_6mo';
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_6mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_6mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2023-05-28'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(6);
            });
            it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo after initial cycle', async () => {
              expect(user.purchased.plan.planId).to.not.exist;
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_3mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
              data.sub.key = 'basic_12mo';
              data.updatedFrom.key = 'basic_3mo';
              clock.restore();
              clock = sinon.useFakeTimers(new Date('2023-09-03'));
              await api.createSubscription(data);
              expect(user.purchased.plan.planId).to.eql('basic_12mo');
              expect(user.purchased.plan.consecutive.trinkets).to.eql(5);
            });
          });
          afterEach(async () => {
            if (clock !== null) clock.restore();
          });
        });
      });
      context('Downgrades subscription', () => {
        it('does not remove from plan.consecutive.gemCapExtra from basic_6mo to basic_earned', async () => {
          data.sub.key = 'basic_6mo';
          expect(user.purchased.plan.planId).to.not.exist;
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_6mo');
          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
          data.sub.key = 'basic_earned';
          data.updatedFrom = { key: 'basic_6mo' };
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_earned');
          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
        });
        it('does not remove from plan.consecutive.gemCapExtra from basic_12mo to basic_3mo', async () => {
          expect(user.purchased.plan.planId).to.not.exist;
          data.sub.key = 'basic_12mo';
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_12mo');
          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
          data.sub.key = 'basic_3mo';
          data.updatedFrom = { key: 'basic_12mo' };
          await api.createSubscription(data);
          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
        });
        it('does not remove from plan.consecutive.trinkets from basic_6mo to basic_earned', async () => {
          data.sub.key = 'basic_6mo';
          expect(user.purchased.plan.planId).to.not.exist;
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_6mo');
          expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
          data.sub.key = 'basic_earned';
          data.updatedFrom = { key: 'basic_6mo' };
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_earned');
          expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
        });
        it('does not remove from plan.consecutive.trinkets from basic_12mo to basic_3mo', async () => {
          expect(user.purchased.plan.planId).to.not.exist;
          data.sub.key = 'basic_12mo';
          await api.createSubscription(data);
          expect(user.purchased.plan.planId).to.eql('basic_12mo');
          expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
          data.sub.key = 'basic_3mo';
          data.updatedFrom = { key: 'basic_12mo' };
          await api.createSubscription(data);
          expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
        });
      });
    });
    context('Mystery Items', () => {
@@ -672,10 +1489,12 @@ describe('payments/index', () => {
    context('No Active Promotion', () => {
      beforeEach(() => {
        sinon.stub(worldState, 'getCurrentEvent').returns(null);
        sinon.stub(worldState, 'getCurrentEventList').returns([]);
      });
      afterEach(() => {
        worldState.getCurrentEvent.restore();
        worldState.getCurrentEventList.restore();
      });
      it('does not apply a discount', async () => {
@@ -692,14 +1511,14 @@ describe('payments/index', () => {
    context('Active Promotion', () => {
      beforeEach(() => {
-        sinon.stub(worldState, 'getCurrentEvent').returns({
+        sinon.stub(worldState, 'getCurrentEventList').returns([{
          ...common.content.events.fall2020,
          event: 'fall2020',
-        });
+        }]);
      });
      afterEach(() => {
-        worldState.getCurrentEvent.restore();
+        worldState.getCurrentEventList.restore();
      });
      it('applies a discount', async () => {
--- a/test/api/unit/libs/payments/skuItem.test.js
+++ b/test/api/unit/libs/payments/skuItem.test.js
@@ -0,0 +1,40 @@
 import {
  canBuySkuItem,
 } from '../../../../../website/server/libs/payments/skuItem';
 import { model as User } from '../../../../../website/server/models/user';
 describe('payments/skuItems', () => {
  let user;
  let clock;
  beforeEach(() => {
    user = new User();
    clock = null;
  });
  afterEach(() => {
    if (clock !== null) clock.restore();
  });
  describe('#canBuySkuItem', () => {
    it('returns true for random sku', () => {
      expect(canBuySkuItem('something', user)).to.be.true;
    });
    describe('#gryphatrice', () => {
      const sku = 'Pet-Gryphatrice-Jubilant';
      it('returns true during birthday week', () => {
        clock = sinon.useFakeTimers(new Date('2023-01-31'));
        expect(canBuySkuItem(sku, user)).to.be.true;
      });
      it('returns false outside of birthday week', () => {
        clock = sinon.useFakeTimers(new Date('2023-01-20'));
        expect(canBuySkuItem(sku, user)).to.be.false;
      });
      it('returns false if user already owns it', () => {
        clock = sinon.useFakeTimers(new Date('2023-02-01'));
        user.items.pets['Gryphatrice-Jubilant'] = 5;
        expect(canBuySkuItem(sku, user)).to.be.false;
      });
    });
  });
 });
--- a/test/api/unit/models/group.test.js
+++ b/test/api/unit/models/group.test.js
@@ -1359,6 +1359,7 @@ describe('Group Model', () => {
    describe('#sendChat', () => {
      beforeEach(() => {
        sandbox.spy(User, 'update');
        sandbox.spy(User, 'updateMany');
      });
      it('formats message', () => {
@@ -1413,8 +1414,8 @@ describe('Group Model', () => {
      it('updates users about new messages in party', () => {
        party.sendChat({ message: 'message' });
-        expect(User.update).to.be.calledOnce;
+        expect(User.updateMany).to.be.calledOnce;
-        expect(User.update).to.be.calledWithMatch({
+        expect(User.updateMany).to.be.calledWithMatch({
          'party._id': party._id,
          _id: { $ne: '' },
        });
@@ -1427,8 +1428,8 @@ describe('Group Model', () => {
        group.sendChat({ message: 'message' });
-        expect(User.update).to.be.calledOnce;
+        expect(User.updateMany).to.be.calledOnce;
-        expect(User.update).to.be.calledWithMatch({
+        expect(User.updateMany).to.be.calledWithMatch({
          guilds: group._id,
          _id: { $ne: '' },
        });
@@ -1437,8 +1438,8 @@ describe('Group Model', () => {
      it('does not send update to user that sent the message', () => {
        party.sendChat({ message: 'message', user: { _id: 'user-id', profile: { name: 'user' } } });
-        expect(User.update).to.be.calledOnce;
+        expect(User.updateMany).to.be.calledOnce;
-        expect(User.update).to.be.calledWithMatch({
+        expect(User.updateMany).to.be.calledWithMatch({
          'party._id': party._id,
          _id: { $ne: 'user-id' },
        });
--- a/test/api/v3/integration/chat/POST-chat.test.js
+++ b/test/api/v3/integration/chat/POST-chat.test.js
@@ -541,6 +541,35 @@ describe('POST /chat', () => {
      .to.eql(userWithStyle.preferences.background);
  });
  it('creates equipped to user styles', async () => {
    const userWithStyle = await generateUser({
      'preferences.costume': false,
      'auth.timestamps.created': new Date('2022-01-01'),
    });
    await userWithStyle.sync();
    const message = await userWithStyle.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage });
    expect(message.message.id).to.exist;
    expect(message.message.userStyles.items.gear.equipped)
      .to.eql(userWithStyle.items.gear.equipped);
    expect(message.message.userStyles.items.gear.costume).to.not.exist;
  });
  it('creates costume to user styles', async () => {
    const userWithStyle = await generateUser({
      'preferences.costume': true,
      'auth.timestamps.created': new Date('2022-01-01'),
    });
    await userWithStyle.sync();
    const message = await userWithStyle.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage });
    expect(message.message.id).to.exist;
    expect(message.message.userStyles.items.gear.costume).to.eql(userWithStyle.items.gear.costume);
    expect(message.message.userStyles.items.gear.equipped).to.not.exist;
  });
  it('adds backer info to chat', async () => {
    const backerInfo = {
      npc: 'Town Crier',
--- a/test/api/v3/integration/chat/POST-groups_id_chat_id_clear_flags.test.js
+++ b/test/api/v3/integration/chat/POST-groups_id_chat_id_clear_flags.test.js
@@ -66,7 +66,7 @@ describe('POST /groups/:id/chat/:id/clearflags', () => {
          type: 'party',
          privacy: 'private',
        },
-        members: 1,
+        members: 2,
      });
      await members[0].update({ 'auth.timestamps.created': new Date('2022-01-01') });
@@ -76,12 +76,17 @@ describe('POST /groups/:id/chat/:id/clearflags', () => {
      await admin.post(`/groups/${group._id}/chat/${privateMessage.id}/flag`);
      // first test that the flag was actually successful
      // author always sees own message; flag count is hidden from non-admins
      let messages = await members[0].get(`/groups/${group._id}/chat`);
-      expect(messages[0].flagCount).to.eql(5);
+      expect(messages[0].flagCount).to.eql(0);
      messages = await members[1].get(`/groups/${group._id}/chat`);
      expect(messages.length).to.eql(0);
      // admin cannot directly request private group chat, but after unflag,
      // message should be revealed again and still have flagCount of 0
      await admin.post(`/groups/${group._id}/chat/${privateMessage.id}/clearflags`);
-
+      messages = await members[1].get(`/groups/${group._id}/chat`);
-      messages = await members[0].get(`/groups/${group._id}/chat`);
+      expect(messages.length).to.eql(1);
      expect(messages[0].flagCount).to.eql(0);
    });
--- a/test/api/v3/integration/groups/POST-groups_invite.test.js
+++ b/test/api/v3/integration/groups/POST-groups_invite.test.js
@@ -48,6 +48,19 @@ describe('Post /groups/:groupId/invite', () => {
        });
    });
    it('returns error when recipient has blocked the senders', async () => {
      const inviterNoBlocks = await inviter.update({ 'inbox.blocks': [] });
      const userWithBlockedInviter = await generateUser({ 'inbox.blocks': [inviter._id] });
      await expect(inviterNoBlocks.post(`/groups/${group._id}/invite`, {
        usernames: [userWithBlockedInviter.auth.local.lowerCaseUsername],
      }))
        .to.eventually.be.rejected.and.eql({
          code: 401,
          error: 'NotAuthorized',
          message: t('notAuthorizedToSendMessageToThisUser'),
        });
    });
    it('invites a user to a group by username', async () => {
      const userToInvite = await generateUser();
--- a/test/api/v3/integration/groups/PUT-groups.test.js
+++ b/test/api/v3/integration/groups/PUT-groups.test.js
@@ -11,6 +11,12 @@ describe('PUT /group', () => {
  const groupName = 'Test Public Guild';
  const groupType = 'guild';
  const groupUpdatedName = 'Test Public Guild Updated';
  const groupCategories = [
    {
      slug: 'initialCat',
      name: 'Initial Category',
    },
  ];
  beforeEach(async () => {
    const { group, groupLeader, members } = await createAndPopulateGroup({
@@ -18,6 +24,7 @@ describe('PUT /group', () => {
        name: groupName,
        type: groupType,
        privacy: 'public',
        categories: groupCategories,
      },
      members: 1,
    });
@@ -61,6 +68,35 @@ describe('PUT /group', () => {
    expect(updatedGroup.categories[0].name).to.eql(categories[0].name);
  });
  it('removes the initial group category', async () => {
    const categories = [];
    const updatedGroup = await leader.put(`/groups/${groupToUpdate._id}`, {
      categories,
    });
    expect(updatedGroup.categories.length).to.equal(0);
  });
  it('removes duplicate group categories', async () => {
    const categories = [
      {
        slug: 'newCat',
        name: 'New Category',
      },
      {
        slug: 'newCat',
        name: 'New Category',
      },
    ];
    const updatedGroup = await leader.put(`/groups/${groupToUpdate._id}`, {
      categories,
    });
    expect(updatedGroup.categories.length).to.equal(1);
  });
  it('allows an admin to update a guild', async () => {
    const updatedGroup = await adminUser.put(`/groups/${groupToUpdate._id}`, {
      name: groupUpdatedName,
--- a/test/api/v3/integration/payments/apple/POST-payments_apple_subscribe.test.js
+++ b/test/api/v3/integration/payments/apple/POST-payments_apple_subscribe.test.js
@@ -45,11 +45,10 @@ describe('payments : apple #subscribe', () => {
      });
      expect(subscribeStub).to.be.calledOnce;
-      expect(subscribeStub.args[0][0]).to.eql(sku);
+      expect(subscribeStub.args[0][0]._id).to.eql(user._id);
-      expect(subscribeStub.args[0][1]._id).to.eql(user._id);
+      expect(subscribeStub.args[0][1]).to.eql('receipt');
-      expect(subscribeStub.args[0][2]).to.eql('receipt');
+      expect(subscribeStub.args[0][2]['x-api-key']).to.eql(user.apiToken);
-      expect(subscribeStub.args[0][3]['x-api-key']).to.eql(user.apiToken);
+      expect(subscribeStub.args[0][2]['x-api-user']).to.eql(user._id);
      expect(subscribeStub.args[0][3]['x-api-user']).to.eql(user._id);
    });
  });
 });
--- a/test/api/v3/integration/payments/apple/POST-payments_apple_verifyiap.js
+++ b/test/api/v3/integration/payments/apple/POST-payments_apple_verifyiap.js
@@ -21,11 +21,11 @@ describe('payments : apple #verify', () => {
    let verifyStub;
    beforeEach(async () => {
-      verifyStub = sinon.stub(applePayments, 'verifyGemPurchase').resolves({});
+      verifyStub = sinon.stub(applePayments, 'verifyPurchase').resolves({});
    });
    afterEach(() => {
-      applePayments.verifyGemPurchase.restore();
+      applePayments.verifyPurchase.restore();
    });
    it('makes a purchase', async () => {
--- a/test/api/v3/integration/payments/google/POST-payments_google_verifyiap.js
+++ b/test/api/v3/integration/payments/google/POST-payments_google_verifyiap.js
@@ -21,11 +21,11 @@ describe('payments : google #verify', () => {
    let verifyStub;
    beforeEach(async () => {
-      verifyStub = sinon.stub(googlePayments, 'verifyGemPurchase').resolves({});
+      verifyStub = sinon.stub(googlePayments, 'verifyPurchase').resolves({});
    });
    afterEach(() => {
-      googlePayments.verifyGemPurchase.restore();
+      googlePayments.verifyPurchase.restore();
    });
    it('makes a purchase', async () => {
--- a/test/api/v3/integration/user/DELETE-user.test.js
+++ b/test/api/v3/integration/user/DELETE-user.test.js
@@ -289,45 +289,6 @@ describe('DELETE /user', () => {
    });
  });
  context('user with Facebook auth', async () => {
    beforeEach(async () => {
      user = await generateUser({
        auth: {
          facebook: {
            id: 'facebook-id',
          },
        },
      });
    });
    it('returns an error if confirmation phrase is wrong', async () => {
      await expect(user.del('/user', {
        password: 'just-do-it',
      })).to.eventually.be.rejected.and.eql({
        code: 401,
        error: 'NotAuthorized',
        message: t('incorrectDeletePhrase', { magicWord: 'DELETE' }),
      });
    });
    it('returns an error if confirmation phrase is not supplied', async () => {
      await expect(user.del('/user', {
        password: '',
      })).to.eventually.be.rejected.and.eql({
        code: 400,
        error: 'BadRequest',
        message: t('missingPassword'),
      });
    });
    it('deletes a Facebook user', async () => {
      await user.del('/user', {
        password: DELETE_CONFIRMATION,
      });
      await expect(checkExistence('users', user._id)).to.eventually.eql(false);
    });
  });
  context('user with Google auth', async () => {
    beforeEach(async () => {
      user = await generateUser({
--- a/test/api/v3/integration/user/POST-user_class_cast_spellId.test.js
+++ b/test/api/v3/integration/user/POST-user_class_cast_spellId.test.js
@@ -152,9 +152,9 @@ describe('POST /user/class/cast/:spellId', () => {
    await expect(groupLeader.post(`/user/class/cast/pickPocket?targetId=${groupTask._id}`))
      .to.eventually.be.rejected.and.eql({
-        code: 400,
+        code: 404,
-        error: 'BadRequest',
+        error: 'NotFound',
-        message: t('groupTasksNoCast'),
+        message: t('messageTaskNotFound'),
      });
  });
--- a/test/api/v3/integration/user/auth/DELETE-user_auth_social_network.test.js
+++ b/test/api/v3/integration/user/auth/DELETE-user_auth_social_network.test.js
@@ -20,44 +20,6 @@ describe('DELETE social registration', () => {
    });
  });
  context('Facebook', () => {
    it('fails if user does not have an alternative registration method', async () => {
      await user.update({
        'auth.facebook.id': 'some-fb-id',
        'auth.local': { ok: true },
      });
      await expect(user.del('/user/auth/social/facebook')).to.eventually.be.rejected.and.eql({
        code: 401,
        error: 'NotAuthorized',
        message: t('cantDetachSocial'),
      });
    });
    it('succeeds if user has a local registration', async () => {
      await user.update({
        'auth.facebook.id': 'some-fb-id',
      });
      const response = await user.del('/user/auth/social/facebook');
      expect(response).to.eql({});
      await user.sync();
      expect(user.auth.facebook).to.be.undefined;
    });
    it('succeeds if user has a google registration', async () => {
      await user.update({
        'auth.facebook.id': 'some-fb-id',
        'auth.google.id': 'some-google-id',
        'auth.local': { ok: true },
      });
      const response = await user.del('/user/auth/social/facebook');
      expect(response).to.eql({});
      await user.sync();
      expect(user.auth.facebook).to.be.undefined;
    });
  });
  context('Google', () => {
    it('fails if user does not have an alternative registration method', async () => {
      await user.update({
@@ -81,19 +43,6 @@ describe('DELETE social registration', () => {
      await user.sync();
      expect(user.auth.google).to.be.undefined;
    });
    it('succeeds if user has a facebook registration', async () => {
      await user.update({
        'auth.google.id': 'some-google-id',
        'auth.facebook.id': 'some-facebook-id',
        'auth.local': { ok: true },
      });
      const response = await user.del('/user/auth/social/google');
      expect(response).to.eql({});
      await user.sync();
      expect(user.auth.goodl).to.be.undefined;
    });
  });
  context('Apple', () => {
@@ -119,18 +68,5 @@ describe('DELETE social registration', () => {
      await user.sync();
      expect(user.auth.apple).to.be.undefined;
    });
    it('succeeds if user has a facebook registration', async () => {
      await user.update({
        'auth.apple.id': 'some-apple-id',
        'auth.facebook.id': 'some-facebook-id',
        'auth.local': { ok: true },
      });
      const response = await user.del('/user/auth/social/apple');
      expect(response).to.eql({});
      await user.sync();
      expect(user.auth.goodl).to.be.undefined;
    });
  });
 });
--- a/test/api/v3/integration/user/auth/POST-register_local.test.js
+++ b/test/api/v3/integration/user/auth/POST-register_local.test.js
@@ -344,6 +344,24 @@ describe('POST /user/auth/local/register', () => {
      });
    });
    it('enforces maximum length for the password', async () => {
      const username = generateRandomUserName();
      const email = `${username}@example.com`;
      const password = '12345678910111213141516171819202122232425262728293031323334353637383940';
      const confirmPassword = '12345678910111213141516171819202122232425262728293031323334353637383940';
      await expect(api.post('/user/auth/local/register', {
        username,
        email,
        password,
        confirmPassword,
      })).to.eventually.be.rejected.and.eql({
        code: 400,
        error: 'BadRequest',
        message: t('invalidReqParams'),
      });
    });
    it('requires a username', async () => {
      const email = `${generateRandomUserName()}@example.com`;
      const password = 'password';
--- a/test/api/v3/integration/user/auth/POST-user_auth_social.test.js
+++ b/test/api/v3/integration/user/auth/POST-user_auth_social.test.js
@@ -12,7 +12,6 @@ describe('POST /user/auth/social', () => {
  let user;
  const endpoint = '/user/auth/social';
  let randomAccessToken = '123456';
  let randomFacebookId = 'facebookId';
  let randomGoogleId = 'googleId';
  let network = 'NoNetwork';
@@ -33,146 +32,6 @@ describe('POST /user/auth/social', () => {
    });
  });
  describe('facebook', () => {
    beforeEach(async () => {
      randomFacebookId = generateUUID();
      const expectedResult = {
        id: randomFacebookId,
        displayName: 'a facebook user',
        emails: [
          { value: `${user.auth.local.username}+facebook@example.com` },
        ],
      };
      sandbox.stub(passport._strategies.facebook, 'userProfile').yields(null, expectedResult);
      network = 'facebook';
    });
    afterEach(async () => {
      passport._strategies.facebook.userProfile.restore();
    });
    it('registers a new user', async () => {
      const response = await api.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      expect(response.apiToken).to.exist;
      expect(response.id).to.exist;
      expect(response.newUser).to.be.true;
      expect(response.username).to.exist;
      await expect(getProperty('users', response.id, 'profile.name')).to.eventually.equal('a facebook user');
      await expect(getProperty('users', response.id, 'auth.local.lowerCaseUsername')).to.exist;
      await expect(getProperty('users', response.id, 'auth.local.email')).to.eventually.equal(`${user.auth.local.username}+facebook@example.com`);
      await expect(getProperty('users', response.id, 'auth.facebook.id')).to.eventually.equal(randomFacebookId);
    });
    it('logs an existing user in', async () => {
      const registerResponse = await api.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      const response = await api.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      expect(response.apiToken).to.eql(registerResponse.apiToken);
      expect(response.id).to.eql(registerResponse.id);
      expect(response.newUser).to.be.false;
      expect(registerResponse.newUser).to.be.true;
    });
    it('logs an existing user in if they have local auth with matching email', async () => {
      passport._strategies.facebook.userProfile.restore();
      const expectedResult = {
        id: randomFacebookId,
        displayName: 'a facebook user',
        emails: [
          { value: user.auth.local.email },
        ],
      };
      sandbox.stub(passport._strategies.facebook, 'userProfile').yields(null, expectedResult);
      const response = await api.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      expect(response.apiToken).to.eql(user.apiToken);
      expect(response.id).to.eql(user._id);
      expect(response.newUser).to.be.false;
    });
    it('logs an existing user into their social account if they have local auth with matching email', async () => {
      const registerResponse = await api.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      expect(registerResponse.newUser).to.be.true;
      // This is important for existing accounts before the new social handling
      passport._strategies.facebook.userProfile.restore();
      const expectedResult = {
        id: randomFacebookId,
        displayName: 'a facebook user',
        emails: [
          { value: user.auth.local.email },
        ],
      };
      sandbox.stub(passport._strategies.facebook, 'userProfile').yields(null, expectedResult);
      const response = await api.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      expect(response.apiToken).to.eql(registerResponse.apiToken);
      expect(response.id).to.eql(registerResponse.id);
      expect(response.apiToken).not.to.eql(user.apiToken);
      expect(response.id).not.to.eql(user._id);
      expect(response.newUser).to.be.false;
    });
    it('add social auth to an existing user', async () => {
      const response = await user.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      expect(response.apiToken).to.eql(user.apiToken);
      expect(response.id).to.eql(user._id);
      expect(response.newUser).to.be.false;
    });
    it('does not log into other account if social auth already exists', async () => {
      const registerResponse = await api.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      expect(registerResponse.newUser).to.be.true;
      await expect(user.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      })).to.eventually.be.rejected.and.eql({
        code: 401,
        error: 'NotAuthorized',
        message: t('socialAlreadyExists'),
      });
    });
    xit('enrolls a new user in an A/B test', async () => {
      await api.post(endpoint, {
        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
        network,
      });
      await expect(getProperty('users', user._id, '_ABtests')).to.eventually.be.a('object');
    });
  });
  describe('google', () => {
    beforeEach(async () => {
      randomGoogleId = generateUUID();
--- a/test/api/v3/integration/user/auth/POST-user_reset_password.test.js
+++ b/test/api/v3/integration/user/auth/POST-user_reset_password.test.js
@@ -25,6 +25,19 @@ describe('POST /user/reset-password', async () => {
    expect(user.auth.local.hashed_password).to.not.eql(previousPassword);
  });
  it('resets password for social users', async () => {
    const email = `${user.auth.local.username}+google@example.com`;
    await user.update({ 'auth.google.emails': [{ value: email }] });
    await user.sync();
    const previousPassword = user.auth.local.passwordResetCode;
    const response = await user.post(endpoint, {
      email,
    });
    expect(response).to.eql({ data: {}, message: t('passwordReset') });
    await user.sync();
    expect(user.auth.local.passwordResetCode).to.not.eql(previousPassword);
  });
  it('same message on error as on success', async () => {
    const response = await user.post(endpoint, {
      email: 'nonExistent@email.com',
--- a/test/api/v3/integration/user/auth/PUT-user_update_password.test.js
+++ b/test/api/v3/integration/user/auth/PUT-user_update_password.test.js
@@ -96,6 +96,20 @@ describe('PUT /user/auth/update-password', async () => {
    });
  });
  it('returns an error when newPassword is too long', async () => {
    const body = {
      password,
      newPassword: '12345678910111213141516171819202122232425262728293031323334353637383940',
      confirmPassword: '12345678910111213141516171819202122232425262728293031323334353637383940',
    };
    await expect(user.put(ENDPOINT, body)).to.eventually.be.rejected.and.eql({
      code: 400,
      error: 'BadRequest',
      message: t('invalidReqParams'),
    });
  });
  it('returns an error when confirmPassword is missing', async () => {
    const body = {
      password,
--- a/test/api/v3/integration/world-state/GET-world-state.test.js
+++ b/test/api/v3/integration/world-state/GET-world-state.test.js
@@ -35,13 +35,6 @@ describe('GET /world-state', () => {
    });
  });
  it('returns a string representing the current season for NPC sprites', async () => {
    const res = await requester().get('/world-state');
    expect(res).to.have.nested.property('npcImageSuffix');
    expect(res.npcImageSuffix).to.be.a('string');
  });
  context('no current event', () => {
    beforeEach(async () => {
      sinon.stub(worldState, 'getCurrentEvent').returns(null);
--- a/test/api/v4/faq/GET-faq.test.js
+++ b/test/api/v4/faq/GET-faq.test.js
@@ -37,6 +37,8 @@ describe('GET /faq', () => {
      expect(res).to.have.property('questions');
      expect(res.questions[0]).to.eql({
        exclusions: [],
        heading: 'overview',
        question: translate('faqQuestion0'),
        ios: translate('iosFaqAnswer0'),
      });
@@ -57,6 +59,8 @@ describe('GET /faq', () => {
      expect(res).to.have.property('questions');
      expect(res.questions[0]).to.eql({
        exclusions: [],
        heading: 'overview',
        question: translate('faqQuestion0'),
        android: translate('androidFaqAnswer0'),
      });
--- a/test/api/v4/user/POST-user_class_cast_spellId.test.js
+++ b/test/api/v4/user/POST-user_class_cast_spellId.test.js
@@ -137,9 +137,9 @@ describe('POST /user/class/cast/:spellId', () => {
    await expect(groupLeader.post(`/user/class/cast/pickPocket?targetId=${groupTask._id}`))
      .to.eventually.be.rejected.and.eql({
-        code: 400,
+        code: 404,
-        error: 'BadRequest',
+        error: 'NotFound',
-        message: t('groupTasksNoCast'),
+        message: t('messageTaskNotFound'),
      });
  });
--- a/test/common/libs/cron.test.js
+++ b/test/common/libs/cron.test.js
@@ -213,8 +213,9 @@ describe('cron utility functions', () => {
      };
    }
-    it('offset 0, next date in 3 months', () => {
+    it('monthly plan, next date in 3 months', () => {
      const user = baseUserData(60, 0, 'group_plan_auto');
      user.purchased.plan.perkMonthCount = 0;
      const planContext = getPlanContext(user, now);
@@ -222,8 +223,9 @@ describe('cron utility functions', () => {
        .to.be.sameMoment('2022-08-10T02:00:00.144Z');
    });
-    it('offset 1, next date in 1 months', () => {
+    it('monthly plan, next date in 1 month', () => {
-      const user = baseUserData(60, 1, 'group_plan_auto');
+      const user = baseUserData(62, 0, 'group_plan_auto');
      user.purchased.plan.perkMonthCount = 2;
      const planContext = getPlanContext(user, now);
@@ -231,8 +233,27 @@ describe('cron utility functions', () => {
        .to.be.sameMoment('2022-06-10T02:00:00.144Z');
    });
-    it('offset 2, next date in 2 months - with any plan', () => {
+    it('multi-month plan, no offset', () => {
-      const user = baseUserData(60, 2, 'basic_3mo');
+      const user = baseUserData(60, 0, 'basic_3mo');
      const planContext = getPlanContext(user, now);
      expect(planContext.nextHourglassDate)
        .to.be.sameMoment('2022-06-10T02:00:00.144Z');
    });
    it('multi-month plan with offset', () => {
      const user = baseUserData(60, 1, 'basic_3mo');
      const planContext = getPlanContext(user, now);
      expect(planContext.nextHourglassDate)
        .to.be.sameMoment('2022-07-10T02:00:00.144Z');
    });
    it('multi-month plan with perk count', () => {
      const user = baseUserData(60, 1, 'basic_3mo');
      user.purchased.plan.perkMonthCount = 2;
      const planContext = getPlanContext(user, now);
--- a/test/helpers/api-integration/external-server.js
+++ b/test/helpers/api-integration/external-server.js
@@ -12,8 +12,9 @@ const webhookData = {};
 app.use(bodyParser.urlencoded({
  extended: true,
  limit: '10mb',
 }));
-app.use(bodyParser.json());
+app.use(bodyParser.json({ limit: '10mb' }));
 app.post('/webhooks/:id', (req, res) => {
  const { id } = req.params;
--- a/website/client/package-lock.json
+++ b/website/client/package-lock.json
--- a/website/client/package.json
+++ b/website/client/package.json
@@ -18,53 +18,54 @@
    "@storybook/addon-links": "6.5.8",
    "@storybook/addon-notes": "5.3.21",
    "@storybook/addons": "6.5.9",
-    "@storybook/vue": "6.3.13",
+    "@storybook/vue": "6.5.14",
-    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^4.5.19",
-    "@vue/cli-plugin-router": "^4.5.15",
+    "@vue/cli-plugin-router": "^5.0.8",
-    "@vue/cli-plugin-unit-mocha": "^4.5.15",
+    "@vue/cli-plugin-unit-mocha": "^5.0.8",
    "@vue/cli-service": "^4.5.15",
    "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^8.18.5",
+    "amplitude-js": "^8.21.3",
-    "axios": "^0.25.0",
+    "axios": "^0.27.2",
    "axios-progress-bar": "^1.2.0",
    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.6.0",
-    "bootstrap-vue": "^2.22.0",
+    "bootstrap-vue": "^2.23.1",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
-    "core-js": "^3.23.5",
+    "core-js": "^3.27.2",
-    "dompurify": "^2.3.10",
+    "dompurify": "^2.4.3",
    "eslint": "^6.8.0",
    "eslint-config-habitrpg": "^6.2.0",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-vue": "^6.2.2",
    "habitica-markdown": "^3.0.0",
-    "hellojs": "^1.19.5",
+    "hellojs": "^1.20.0",
    "inspectpack": "^4.7.1",
-    "intro.js": "^5.1.0",
+    "intro.js": "^6.0.0",
-    "jquery": "^3.6.0",
+    "jquery": "^3.6.3",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "nconf": "^0.12.0",
    "sass": "^1.34.0",
    "sass-loader": "^8.0.2",
-    "smartbanner.js": "^1.19.0",
+    "smartbanner.js": "^1.19.1",
    "stopword": "^2.0.7",
    "svg-inline-loader": "^0.8.2",
    "svg-url-loader": "^7.1.1",
    "svgo": "^1.3.2",
    "svgo-loader": "^2.2.1",
    "uuid": "^8.3.2",
-    "validator": "^13.7.0",
+    "validator": "^13.9.0",
-    "vue": "^2.7.8",
+    "vue": "^2.7.10",
    "vue-cli-plugin-storybook": "2.1.0",
    "vue-mugen-scroll": "^0.2.6",
-    "vue-router": "^3.5.4",
+    "vue-router": "^3.6.5",
-    "vue-template-compiler": "^2.7.8",
+    "vue-template-compiler": "^2.7.10",
    "vuedraggable": "^2.24.3",
    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9"
+    "@babel/plugin-proposal-optional-chaining": "^7.20.7"
  }
 }
--- a/website/client/src/app.vue
+++ b/website/client/src/app.vue
@@ -35,6 +35,7 @@
      <sub-canceled-modal v-if="isUserLoaded" />
      <bug-report-modal v-if="isUserLoaded" />
      <bug-report-success-modal v-if="isUserLoaded" />
      <birthday-modal />
      <snackbars />
      <router-view v-if="!isUserLoggedIn || isStaticPage" />
      <template v-else>
@@ -42,6 +43,7 @@
          <damage-paused-banner />
          <gems-promo-banner />
          <gift-promo-banner />
          <birthday-banner />
          <notifications-display />
          <app-menu />
          <div
@@ -153,11 +155,13 @@
 import axios from 'axios';
 import { loadProgressBar } from 'axios-progress-bar';
 import birthdayModal from '@/components/news/birthdayModal';
 import AppMenu from './components/header/menu';
 import AppHeader from './components/header/index';
 import DamagePausedBanner from './components/header/banners/damagePaused';
 import GemsPromoBanner from './components/header/banners/gemsPromo';
 import GiftPromoBanner from './components/header/banners/giftPromo';
 import BirthdayBanner from './components/header/banners/birthdayBanner';
 import AppFooter from './components/appFooter';
 import notificationsDisplay from './components/notifications';
 import snackbars from './components/snackbars/notifications';
@@ -191,9 +195,11 @@ export default {
    AppMenu,
    AppHeader,
    AppFooter,
    birthdayModal,
    DamagePausedBanner,
    GemsPromoBanner,
    GiftPromoBanner,
    BirthdayBanner,
    notificationsDisplay,
    snackbars,
    BuyModal,
--- a/website/client/src/assets/css/sprites.css
+++ b/website/client/src/assets/css/sprites.css
@@ -156,6 +156,12 @@
  height: 99px;
 }
 .Pet-Gryphatrice-Jubilant {
  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Gryphatrice-Jubilant.gif") no-repeat;
  width: 81px;
  height: 96px;
 }
 .Mount_Head_Gryphon-Gryphatrice, .Mount_Body_Gryphon-Gryphatrice {
  width: 135px;
  height: 135px;
--- a/website/client/src/assets/css/sprites/spritesmith-main.css
+++ b/website/client/src/assets/css/sprites/spritesmith-main.css
--- a/website/client/src/assets/images/10-birthday.png
+++ b/website/client/src/assets/images/10-birthday.png
--- a/website/client/src/assets/images/anniversary_pet_still_cropped.png
+++ b/website/client/src/assets/images/anniversary_pet_still_cropped.png
--- a/website/client/src/assets/images/community-guidelines/staff.png
+++ b/website/client/src/assets/images/community-guidelines/staff.png
--- a/website/client/src/assets/images/fancy-divider.png
+++ b/website/client/src/assets/images/fancy-divider.png
--- a/website/client/src/assets/images/glitter.png
+++ b/website/client/src/assets/images/glitter.png
--- a/website/client/src/assets/images/habitica-hero-goober.webp
+++ b/website/client/src/assets/images/habitica-hero-goober.webp
--- a/website/client/src/assets/images/robes.webp
+++ b/website/client/src/assets/images/robes.webp
--- a/website/client/src/assets/scss/form.scss
+++ b/website/client/src/assets/scss/form.scss
@@ -180,8 +180,8 @@ input, textarea, input.form-control, textarea.form-control {
 }
 // used in checkboxes and radios
-$bg-focused-active-control: #4f2993;
+$bg-focused-active-control: $purple-200;
-$bg-disabled-control: #34303a;
+$bg-disabled-control: $gray-10;
 // custom control
 .custom-control {
@@ -231,17 +231,21 @@ $bg-disabled-control: #34303a;
      background-color: inherit;
    }
-    &:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
+    &:focus:not(:checked):not(:disabled)~.custom-control-label::before, 
-      box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
+    &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
      border: 2px solid $gray-300;
      box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
    }
-    &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before  {
+    &:focus:checked:not(:disabled)~.custom-control-label::before, 
-      box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
+    &:active:checked:not(:disabled)~.custom-control-label::before  {
-      border-color: $purple-400;
+      box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
      border-color: 2 px solid $purple-400;
      background-color: $purple-400;
    }
-    &:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before  {
+    &:focus:disabled~.custom-control-label::before, 
    &:active:disabled~.custom-control-label::before  {
      box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
    }
--- a/website/client/src/assets/scss/markdown.scss
+++ b/website/client/src/assets/scss/markdown.scss
@@ -50,10 +50,7 @@ h3.markdown {
  }
  a {
    color: $blue-10;
    &:hover, &:active, &:focus {
      color: $blue-10;
      text-decoration: underline;
    }
  }
--- a/website/client/src/assets/scss/typography.scss
+++ b/website/client/src/assets/scss/typography.scss
@@ -26,19 +26,17 @@ a:not([href]), a:not([href]):hover {
 a, a:not([href]):not([tabindex]) {
  cursor: pointer;
  color: $purple-300;
-  &.standard-link {
+  &:hover, &:active, &:focus {
-    color: $blue-10;
+    text-decoration: underline;
    color: $purple-300;
  }
-    &:hover, &:active, &:focus {
+  &[disabled="disabled"] {
-      text-decoration: underline;
+    color: $gray-300;
-    }
+    text-decoration: none;
-
+    cursor: default;
    &[disabled="disabled"] {
      color: $gray-300;
      text-decoration: none;
      cursor: default;
    }
  }
  &.small-link {
--- a/website/client/src/assets/svg/10th-birthday-linear.svg
+++ b/website/client/src/assets/svg/10th-birthday-linear.svg
@@ -0,0 +1,61 @@
 <svg width="199" height="24" viewBox="0 0 199 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#c19w6aye5a)" fill="#fff">
        <path d="M56.47 18.83V6.003L56 3.662l.47-1.405h8.942c1.773 0 3.193.344 4.26 1.03 1.066.687 1.6 1.733 1.6 3.137 0 .765-.142 1.397-.424 1.896a4.175 4.175 0 0 1-1.035 1.24 4.14 4.14 0 0 1 1.505.703c.471.327.855.772 1.154 1.334.297.546.447 1.225.447 2.036 0 1.639-.487 2.918-1.46 3.839-.956.905-2.502 1.358-4.635 1.358H56.471zm5.177-10.136h2.777c.533 0 .918-.078 1.153-.234.235-.171.353-.429.353-.772 0-.359-.173-.609-.518-.75-.345-.155-.753-.233-1.223-.233h-2.542v1.99zm0 5.688h4c.628 0 1.067-.093 1.318-.28a.974.974 0 0 0 .377-.796c0-.75-.486-1.124-1.46-1.124h-4.235v2.2zM75.515 18.83V6.003l-.236-2.341.236-1.405h5.2V18.83h-5.2zM84 18.83V6.026l-.471-2.364.47-1.405h8.472c1.27 0 2.36.203 3.27.61.91.405 1.608 1.06 2.095 1.965.486.89.73 2.068.73 3.535 0 1.357-.228 2.473-.683 3.347a4.552 4.552 0 0 1-2 1.99l.4.327 1.623 2.2 1.341 1.194v1.405h-6.235l-2.588-4.284h-1.248v.515l.236 2.34-.236 1.429H84zm5.176-8.66h1.365c.55 0 1.02-.024 1.412-.071.408-.047.722-.187.941-.421.22-.25.33-.648.33-1.194 0-.578-.118-.991-.353-1.24-.236-.25-.565-.399-.989-.446a9.614 9.614 0 0 0-1.435-.093h-1.506l.235 3.464zM104.666 18.83V6.728l-4.706.234V2.257h14.707v4.705l-4.824-.234v8.357l.259 2.34-.259 1.405h-5.177zM116.785 18.83V6.026l-.235-2.34.235-1.429h5.177v6.344h4.918V2.257h5.177v8.802l.235 1.615v6.156h-5.412v-5.946h-4.918v1.639l.235 4.307h-5.412zM135.588 18.83V6.026l-.471-2.34.471-1.429h7.977c1.114 0 2.188.11 3.223.328 1.051.203 1.985.593 2.801 1.17.831.578 1.49 1.405 1.976 2.482.486 1.076.73 2.473.73 4.19 0 1.716-.251 3.128-.753 4.236-.487 1.092-1.146 1.943-1.977 2.552a7.477 7.477 0 0 1-2.8 1.264 14.463 14.463 0 0 1-3.2.35h-7.977zm5.224-4.448h1.788c.926 0 1.702-.101 2.33-.304a2.498 2.498 0 0 0 1.458-1.147c.33-.577.495-1.412.495-2.504 0-1.108-.173-1.92-.518-2.435-.33-.53-.816-.874-1.459-1.03-.628-.171-1.396-.257-2.306-.257h-1.788v7.677zM153.013 18.83l1.13-3.956V11.9l1.741-.702 3.294-8.918h7.083l4.024 10.486 1.812 3.324v2.739h-5.106l-1.177-3.488h-6.377l-1.012 3.488h-5.412zm7.977-7.584h3.53l-1.553-4.658h-.494l-1.483 4.658zM176.04 18.83v-6.788l-5.835-8.38V2.257h5.906l2.353 4.822h.47l2.33-4.822h5.883v1.405l-6.001 8.52.141 2.364v4.284h-5.247zM191.923 12.72l-2.07-8.847L192.676 2l2.8 1.896-2.141 8.824h-1.412zm.518 7.28-3.059-3.043 3.059-3.043 3.059 3.043L192.441 20z"/>
    </g>
    <g filter="url(#s1alkvv8kb)">
        <path d="M5.87 18.825V7.601H3V3.17l8.228-.937.239 1.406-.24 2.344v12.841H5.87z" fill="url(#xidihnl5xc)"/>
        <path d="M21.258 19.06a9.043 9.043 0 0 1-2.87-.446 6.484 6.484 0 0 1-2.369-1.453c-.67-.671-1.195-1.546-1.578-2.624-.383-1.094-.574-2.43-.574-4.007 0-1.562.191-2.883.574-3.96.382-1.094.909-1.977 1.578-2.648a6.092 6.092 0 0 1 2.368-1.453A8.63 8.63 0 0 1 21.257 2c1.356 0 2.584.281 3.684.844 1.116.562 2.001 1.468 2.655 2.718.67 1.234 1.004 2.89 1.004 4.968s-.335 3.741-1.004 4.991c-.654 1.25-1.539 2.156-2.655 2.718-1.1.547-2.328.82-3.683.82zm0-5.039c.701 0 1.187-.25 1.459-.75.27-.5.406-1.413.406-2.741 0-1.313-.136-2.219-.407-2.719-.27-.515-.757-.773-1.459-.773-.685 0-1.18.258-1.483.773-.287.516-.43 1.422-.43 2.719 0 1.312.143 2.226.43 2.742.303.5.798.75 1.483.75z" fill="url(#9hqzmmkygd)"/>
        <path d="M32.721 12.014V4.745l-2.87.14V2.06h8.97v2.826l-2.943-.141v5.02l.158 1.405-.158.844h-3.157z" fill="url(#bzq8gpt5ve)"/>
        <path d="M40.543 12.014v-7.69l-.144-1.407.144-.857H43.7v3.81h3V2.06h3.156v5.286l.144.97v3.698h-3.3V8.443h-3v.984l.143 2.587h-3.3z" fill="url(#4t6arxwa4f)"/>
    </g>
    <defs>
        <linearGradient id="xidihnl5xc" x1="3" y1="2" x2="29.822" y2="35.308" gradientUnits="userSpaceOnUse">
            <stop stop-color="#6133B4"/>
            <stop offset="1" stop-color="#4F2A93"/>
        </linearGradient>
        <linearGradient id="9hqzmmkygd" x1="3" y1="2" x2="29.822" y2="35.308" gradientUnits="userSpaceOnUse">
            <stop stop-color="#6133B4"/>
            <stop offset="1" stop-color="#4F2A93"/>
        </linearGradient>
        <linearGradient id="bzq8gpt5ve" x1="3" y1="2" x2="29.822" y2="35.308" gradientUnits="userSpaceOnUse">
            <stop stop-color="#6133B4"/>
            <stop offset="1" stop-color="#4F2A93"/>
        </linearGradient>
        <linearGradient id="4t6arxwa4f" x1="3" y1="2" x2="29.822" y2="35.308" gradientUnits="userSpaceOnUse">
            <stop stop-color="#6133B4"/>
            <stop offset="1" stop-color="#4F2A93"/>
        </linearGradient>
        <filter id="c19w6aye5a" x="53" y="0" width="145.5" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="1"/>
            <feGaussianBlur stdDeviation="1.5"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix values="0 0 0 0 0.101961 0 0 0 0 0.0941176 0 0 0 0 0.113725 0 0 0 0.12 0"/>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_45_799"/>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="1"/>
            <feGaussianBlur stdDeviation="1"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix values="0 0 0 0 0.101961 0 0 0 0 0.0941176 0 0 0 0 0.113725 0 0 0 0.24 0"/>
            <feBlend in2="effect1_dropShadow_45_799" result="effect2_dropShadow_45_799"/>
            <feBlend in="SourceGraphic" in2="effect2_dropShadow_45_799" result="shape"/>
        </filter>
        <filter id="s1alkvv8kb" x="0" y="0" width="53" height="23.059" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="1"/>
            <feGaussianBlur stdDeviation="1.5"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix values="0 0 0 0 0.101961 0 0 0 0 0.0941176 0 0 0 0 0.113725 0 0 0 0.12 0"/>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_45_799"/>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="1"/>
            <feGaussianBlur stdDeviation="1"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix values="0 0 0 0 0.101961 0 0 0 0 0.0941176 0 0 0 0 0.113725 0 0 0 0.24 0"/>
            <feBlend in2="effect1_dropShadow_45_799" result="effect2_dropShadow_45_799"/>
            <feBlend in="SourceGraphic" in2="effect2_dropShadow_45_799" result="shape"/>
        </filter>
    </defs>
 </svg>
--- a/website/client/src/assets/svg/birthday-gems.svg
+++ b/website/client/src/assets/svg/birthday-gems.svg
@@ -0,0 +1,22 @@
 <svg width="58" height="48" viewBox="0 0 58 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="m16.853 4.36 7.959-1.453-2.71 7.556-2.708 7.557-5.25-6.103-5.25-6.103 7.959-1.453z" fill="#5DDEAB"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M32.771 1.454 40.731 0l-2.71 7.556-2.709 7.556-5.25-6.102-5.25-6.103 7.96-1.453z" fill="#5DDEAB"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m43.272 13.659-7.96 1.453 2.71-7.556L40.73 0l5.25 6.103 5.25 6.102-7.96 1.454z" fill="#38C38D"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m27.353 16.566-7.96 1.453 2.71-7.556 2.709-7.556 5.25 6.103 5.25 6.102-7.96 1.454zM11.434 19.473l-7.959 1.453 2.71-7.556 2.708-7.556 5.25 6.103 5.25 6.102-7.959 1.454z" fill="#B0F1D7"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m3.475 20.926 28.05 18.662L19.394 18.02 3.475 20.926z" fill="#38C38D"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M51.249 12.202 31.525 39.588l3.805-24.48 15.919-2.906z" fill="#B0F1D7"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m19.394 18.02 12.131 21.568 3.787-24.476-15.918 2.907z" fill="#5DDEAB"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m51.904 26.44-3.832-.897 1.132 3.736 1.132 3.737 2.7-2.84 2.7-2.84-3.832-.896zM44.24 24.647l-3.832-.897 1.132 3.736 1.132 3.736 2.7-2.84 2.7-2.839-3.832-.896z" fill="#87E3E1"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m38.84 30.326 3.832.896-1.132-3.736-1.132-3.736-2.7 2.84-2.7 2.839 3.832.897zM46.504 32.12l3.832.896-1.132-3.736-1.132-3.737-2.7 2.84-2.7 2.84 3.832.896z" fill="#C0FBFA"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M54.168 33.912 58 34.81l-1.132-3.736-1.133-3.736-2.7 2.84-2.7 2.839 3.833.896z" fill="#5EC5C2"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m58 34.81-14.084 8.395 6.42-10.19L58 34.81z" fill="#C0FBFA"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m35 29.427 8.916 13.779-1.252-11.986L35 29.427z" fill="#5EC5C2"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m50.336 33.016-6.42 10.19-1.244-11.984 7.664 1.794z" fill="#87E3E1"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m16.877 22.666-5.078 1.971 4.262 3.372 4.262 3.37.816-5.341.816-5.343-5.078 1.971zM6.721 26.609l-5.078 1.97 4.262 3.372 4.262 3.371.816-5.342.816-5.343-5.078 1.972z" fill="#7BE3CF"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m5.09 37.294 5.077-1.972-4.262-3.371-4.261-3.371-.817 5.342-.816 5.343 5.078-1.971z" fill="#C5F3EA"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m15.245 33.351 5.078-1.971-4.262-3.371-4.262-3.371-.816 5.342-.816 5.342 5.078-1.97z" fill="#C5F3EA"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m25.4 29.41 5.078-1.972-4.262-3.371-4.261-3.372-.816 5.343-.816 5.342 5.078-1.97z" fill="#41C7AF"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M30.478 27.438 21.117 48l-.794-16.62 10.155-3.942z" fill="#C5F3EA"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 39.269 21.117 8.73-10.961-12.672L0 39.269z" fill="#41C7AF"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.323 31.38 21.117 48l-10.95-12.678 10.156-3.942z" fill="#7BE3CF"/>
 </svg>
--- a/website/client/src/assets/svg/check.svg
+++ b/website/client/src/assets/svg/check.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M4.662 9.832c-.312 0-.61-.123-.831-.344L0 5.657l1.662-1.662 2.934 2.934L10.534 0l1.785 1.529-6.764 7.893a1.182 1.182 0 0 1-.848.409l-.045.001"/>
+    <path d="M6.54,13c-.3,0-.59-.13-.81-.35l-3.73-3.9,1.62-1.69,2.86,2.98L12.26,3l1.74,1.56L7.41,12.58c-.21,.25-.51,.4-.83,.42-.01,0-.03,0-.04,0Z" fill-rule="evenodd"/>
 </svg>
--- a/website/client/src/assets/svg/confetti.svg
+++ b/website/client/src/assets/svg/confetti.svg
@@ -0,0 +1,22 @@
 <svg width="518" height="152" viewBox="0 0 518 152" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M144.48 65.487v5.042h-1.772v-5.042h1.772zm1.621 6.671h5.013v1.782h-5.013v-1.782zm-10.027 0h5.013v1.782h-5.013v-1.782zm8.406 3.412v5.041h-1.772V75.57h1.772z" fill="#36205D" style="mix-blend-mode:multiply" opacity=".5"/>
    <path opacity=".92" fill-rule="evenodd" clip-rule="evenodd" d="m9.504 29.894 2.707-4.715 1.658.962-2.707 4.715-1.658-.962zm2.066-7.12-4.689-2.722.958-1.667 4.688 2.723-.957 1.667zm9.378 5.445-4.689-2.722.957-1.667 4.69 2.722-.958 1.667zm-6.03-7.755 2.707-4.715 1.658.962-2.707 4.715-1.658-.962z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m60.85 11.508.708-3.662 1.288.251-.708 3.662-1.288-.252zm-.24-5.076-3.642-.712.25-1.295 3.642.712-.25 1.295zm7.283 1.423-3.642-.711.25-1.295 3.642.712-.25 1.294zm-5.627-3.671.708-3.662 1.287.251-.708 3.662-1.287-.251z" fill="#36205D" style="mix-blend-mode:multiply" opacity=".81"/>
    <path opacity=".76" fill-rule="evenodd" clip-rule="evenodd" d="m107.034 22.162.493 5.675-1.995.175-.494-5.674 1.996-.176zm2.477 7.349 5.643-.497.175 2.007-5.644.496-.174-2.006zm-11.287.993 5.644-.497.174 2.007-5.643.496-.175-2.006zm9.797 3.008.494 5.675-1.996.175-.493-5.675 1.995-.175z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m16.191 92.492-5.006 1.636-.575-1.78 5.006-1.636.575 1.78zm-6.098 3.792 1.626 5.034-1.77.578-1.626-5.034 1.77-.578zM6.839 86.215l1.627 5.035-1.77.578-1.627-5.034 1.77-.579zm-.66 9.549-5.006 1.635-.576-1.78 5.007-1.635.575 1.78z" fill="#36205D" style="mix-blend-mode:multiply" opacity=".91"/>
    <path opacity=".92" fill-rule="evenodd" clip-rule="evenodd" d="m35.176 59.176 5.102-1.97.692 1.814-5.101 1.97-.693-1.814zm6.118-4.264-1.958-5.13 1.803-.696 1.958 5.13-1.803.696zm3.916 10.26-1.958-5.13 1.804-.696 1.958 5.13-1.804.696zm.17-9.935 5.1-1.969.693 1.814-5.101 1.969-.693-1.814z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m95.733 86.583-4.383 2.649-.931-1.559 4.383-2.648.93 1.558zm-4.949 4.93 2.634 4.407-1.55.936-2.633-4.407 1.55-.937zm-5.267-8.816 2.633 4.408-1.55.936-2.633-4.408 1.55-.936zm1.45 9.183-4.384 2.648-.93-1.558 4.382-2.648.931 1.558z" fill="#36205D" style="mix-blend-mode:multiply"/>
    <path opacity=".98" fill-rule="evenodd" clip-rule="evenodd" d="m24.804 132.406-2.1-3.015 1.06-.746 2.1 3.014-1.06.747zm-3.747-3.307-2.998 2.111-.742-1.066 2.998-2.111.742 1.066zm5.996-4.222-2.998 2.111-.742-1.066 2.998-2.11.742 1.065zm-6.447 1.5-2.1-3.015 1.06-.746 2.1 3.014-1.06.747z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m60.65 142.295-1.594 3.144-1.105-.567 1.593-3.144 1.105.567zm-1.098 4.678 3.126 1.602-.563 1.112-3.127-1.602.564-1.112zm-6.254-3.204 3.127 1.602-.563 1.112-3.127-1.603.563-1.111zm4.165 4.814-1.593 3.144-1.106-.566 1.593-3.144 1.106.566z" fill="#36205D" style="mix-blend-mode:multiply" opacity=".82"/>
    <path opacity=".71" fill-rule="evenodd" clip-rule="evenodd" d="m110.507 140.233 2.321-4.582 1.611.826-2.321 4.581-1.611-.825zm1.599-6.817-4.556-2.335.821-1.62 4.556 2.335-.821 1.62zm9.112 4.669-4.556-2.335.821-1.62 4.556 2.335-.821 1.62zm-6.068-7.015 2.321-4.582 1.611.825-2.321 4.582-1.611-.825z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M373.52 65.487v5.042h1.772v-5.042h-1.772zm-1.621 6.671h-5.013v1.782h5.013v-1.782zm10.027 0h-5.013v1.782h5.013v-1.782zm-8.406 3.412v5.041h1.772V75.57h-1.772z" fill="#36205D" style="mix-blend-mode:multiply" opacity=".5"/>
    <path opacity=".92" fill-rule="evenodd" clip-rule="evenodd" d="m508.496 29.894-2.707-4.715-1.658.962 2.707 4.715 1.658-.962zm-2.066-7.12 4.689-2.722-.958-1.667-4.689 2.723.958 1.667zm-9.378 5.445 4.689-2.722-.957-1.667-4.689 2.722.957 1.667zm6.03-7.755-2.707-4.715-1.658.962 2.707 4.715 1.658-.962z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m457.15 11.508-.708-3.662-1.287.251.707 3.662 1.288-.252zm.24-5.076 3.642-.712-.25-1.295-3.642.712.25 1.295zm-7.283 1.423 3.642-.711-.251-1.295-3.641.712.25 1.294zm5.627-3.671-.708-3.662-1.287.251.708 3.662 1.287-.251z" fill="#36205D" style="mix-blend-mode:multiply" opacity=".81"/>
    <path opacity=".76" fill-rule="evenodd" clip-rule="evenodd" d="m410.966 22.162-.493 5.675 1.995.175.494-5.674-1.996-.176zm-2.477 7.349-5.643-.497-.175 2.007 5.644.496.174-2.006zm11.287.993-5.644-.497-.174 2.007 5.643.496.175-2.006zm-9.797 3.008-.494 5.675 1.996.175.493-5.675-1.995-.175z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m501.809 92.492 5.006 1.636.575-1.78-5.006-1.636-.575 1.78zm6.098 3.792-1.626 5.034 1.77.578 1.626-5.034-1.77-.578zm3.254-10.069-1.627 5.035 1.77.578 1.627-5.034-1.77-.579zm.66 9.549 5.006 1.635.576-1.78-5.007-1.635-.575 1.78z" fill="#36205D" style="mix-blend-mode:multiply" opacity=".91"/>
    <path opacity=".92" fill-rule="evenodd" clip-rule="evenodd" d="m482.824 59.176-5.102-1.97-.692 1.814 5.101 1.97.693-1.814zm-6.118-4.264 1.958-5.13-1.803-.696-1.958 5.13 1.803.696zm-3.916 10.26 1.958-5.13-1.804-.696-1.958 5.13 1.804.696zm-.169-9.935-5.102-1.969-.692 1.814 5.101 1.969.693-1.814z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m422.267 86.583 4.383 2.649.932-1.559-4.384-2.648-.931 1.558zm4.949 4.93-2.634 4.407 1.55.936 2.634-4.407-1.55-.937zm5.267-8.816-2.633 4.408 1.549.936 2.634-4.408-1.55-.936zm-1.449 9.183 4.383 2.648.931-1.558-4.383-2.648-.931 1.558z" fill="#36205D" style="mix-blend-mode:multiply"/>
    <path opacity=".98" fill-rule="evenodd" clip-rule="evenodd" d="m493.196 132.406 2.099-3.015-1.06-.746-2.099 3.014 1.06.747zm3.747-3.307 2.998 2.111.742-1.066-2.998-2.111-.742 1.066zm-5.996-4.222 2.998 2.111.742-1.066-2.998-2.11-.742 1.065zm6.447 1.5 2.1-3.015-1.06-.746-2.099 3.014 1.059.747z" fill="#fff"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m457.351 142.295 1.593 3.144 1.105-.567-1.593-3.144-1.105.567zm1.097 4.678-3.126 1.602.563 1.112 3.127-1.602-.564-1.112zm6.254-3.204-3.127 1.602.563 1.112 3.127-1.603-.563-1.111zm-4.165 4.814 1.593 3.144 1.106-.566-1.593-3.144-1.106.566z" fill="#36205D" style="mix-blend-mode:multiply" opacity=".82"/>
    <path opacity=".71" fill-rule="evenodd" clip-rule="evenodd" d="m407.493 140.233-2.321-4.582-1.611.826 2.321 4.581 1.611-.825zm-1.599-6.817 4.556-2.335-.821-1.62-4.556 2.335.821 1.62zm-9.112 4.669 4.556-2.335-.821-1.62-4.556 2.335.821 1.62zm6.068-7.015-2.321-4.582-1.611.825 2.321 4.582 1.611-.825z" fill="#fff"/>
 </svg>
--- a/website/client/src/assets/svg/cross.svg
+++ b/website/client/src/assets/svg/cross.svg
@@ -0,0 +1,3 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M1.26512 0L4.84341 3.57829L3.57829 4.84341L0 1.26512L1.26512 0ZM7.15659 3.57829L10.7349 5.33207e-08L12 1.26512L8.42171 4.84341L7.15659 3.57829ZM5.33207e-08 10.7349L3.57829 7.15659L4.84341 8.42171L1.26512 12L5.33207e-08 10.7349ZM8.42171 7.15659L12 10.7349L10.7349 12L7.15659 8.42171L8.42171 7.15659Z" fill="#FFB445"/>
 </svg>
--- a/website/client/src/assets/svg/divider.svg
+++ b/website/client/src/assets/svg/divider.svg
@@ -0,0 +1,4 @@
 <svg width="138" height="12" viewBox="0 0 138 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="m127.265 0 3.578 3.578-1.265 1.265L126 1.265 127.265 0zm5.892 3.578L136.735 0 138 1.265l-3.578 3.578-1.265-1.265zM126 10.735l3.578-3.578 1.265 1.265L127.265 12 126 10.735zm8.422-3.578L138 10.735 136.735 12l-3.578-3.578 1.265-1.265z" fill="#FFB445"/>
    <path d="M114.445 4.555 112.5 1l-1.945 3.555L107.914 6h-3.828l-1.349-.737L101.5 3l-1.237 2.263L98.914 6H0v1h98.914l1.349.737L101.5 10l1.237-2.263L104.086 7h3.828l2.641 1.445L112.5 12l1.945-3.555L118 6.5l-3.555-1.945z" fill="#36205D"/>
 </svg>
--- a/website/client/src/assets/svg/facebook.svg
+++ b/website/client/src/assets/svg/facebook.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
+<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill-rule="evenodd" d="M7.145 8.006H4.903V16H1.58V8.006H0V5.182h1.58V3.354C1.58 2.045 2.202 0 4.933 0l2.461.01v2.742H5.608c-.291 0-.705.145-.705.77v1.66h2.533l-.291 2.824z"/>
+    <path d="M20,0H4C1.79,0,0,1.79,0,4V20c0,2.21,1.79,4,4,4H20c2.21,0,4-1.79,4-4V4c0-2.21-1.79-4-4-4Zm-3.72,6.66h-1.26c-1.24,0-1.63,.77-1.63,1.56v1.88h2.78l-.44,2.9h-2.33v7h-3.13v-7h-2.54v-2.9h2.54v-2.21c0-2.51,1.5-3.9,3.78-3.9,1.1,0,2.24,.2,2.24,.2v2.47Z" fill-rule="evenodd"/>
 </svg>
--- a/website/client/src/assets/svg/gem-red.svg
+++ b/website/client/src/assets/svg/gem-red.svg
@@ -0,0 +1,10 @@
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd">
        <path fill="#DE3F3F" d="M0 5.667 3.333 1h9.334L16 5.667l-8 8.666z"/>
        <path fill="#FFF" opacity=".25" d="M4.667 5.533 4 2.333h4zM11.333 5.533l.667-3.2H8z"/>
        <path fill="#FFF" opacity=".5" d="M4.667 5.533 8 2.333l3.333 3.2zM1.733 5.533 4 2.333l.667 3.2z"/>
        <path fill="#34313A" opacity=".11" d="M14.267 5.533 12 2.333l-.667 3.2zM1.733 5.533h2.934L8 12.4z"/>
        <path fill="#FFF" opacity=".5" d="M14.267 5.533h-2.934L8 12.4z"/>
        <path fill="#FFF" opacity=".25" d="M4.667 5.533h6.666L8 12.4z"/>
    </g>
 </svg>
--- a/website/client/src/assets/svg/gifts-birthday.svg
+++ b/website/client/src/assets/svg/gifts-birthday.svg
@@ -0,0 +1,37 @@
 <svg width="85" height="32" viewBox="0 0 85 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="m4.93 12.255 2.466-.63-1.983-1.597-.63-2.468-1.595 1.986-2.465.63 1.983 1.597.63 2.468 1.595-1.986zM80.034 7.698l2.465-.63-1.983-1.597-.63-2.468-1.594 1.985-2.466.631 1.983 1.596.63 2.469 1.595-1.986zM42.27 7.427l2.929.487-1.368-2.638.487-2.932-2.635 1.37-2.928-.488 1.367 2.638-.486 2.932 2.634-1.37zM78.215 26.355l2.694 2.064.033-3.396 2.063-2.697-3.393-.034-2.694-2.065-.033 3.397-2.062 2.697 3.392.034zM38.321 28.092l2.092.348-.977-1.885.347-2.094-1.881.978-2.092-.348.977 1.884-.348 2.095 1.882-.978zM12.17 30.035l.916 1.915.981-1.882 1.913-.916-1.88-.982-.915-1.916-.981 1.882-1.913.917 1.88.982z" fill="#fff" fill-opacity=".5"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m24.878 12.01 6.73-1.805 2.524 9.433-6.73 1.806-2.524-9.433z" fill="#F9F9F9"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m18.148 13.816 6.73-1.805 2.524 9.433-6.73 1.805-2.524-9.433z" fill="#E1E0E3"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m23.532 12.372 1.346-.361 2.524 9.433-1.346.36-2.524-9.432z" fill="#6133B4"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m24.878 12.01 1.346-.36 2.524 9.433-1.346.36-2.524-9.432z" fill="#9A62FF"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m25.696 20.457 1.345-.36.361 1.347-1.346.36-.36-1.347zM23.532 12.372l1.346-.361.36 1.347-1.346.361-.36-1.347z" fill="#4F2A93"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m18.148 13.816 5.384-1.444.36 1.348-5.383 1.444-.36-1.348zM20.312 21.902l5.384-1.445.36 1.348-5.383 1.444-.36-1.347zM26.224 11.65l5.383-1.445.36 1.348-5.383 1.444-.36-1.347zM28.387 19.735l5.384-1.444.36 1.347-5.383 1.445-.36-1.348z" fill="#BDA8FF" fill-opacity=".3"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m27.041 20.096 1.346-.36.361 1.347-1.346.36-.36-1.347zM24.878 12.01l1.346-.36.36 1.347-1.346.361-.36-1.347z" fill="#6133B4"/>
    <path clip-rule="evenodd" d="M24.735 4.954c-.335-1.183-1.148-2.301-2.285-2.51-1.138-.21-1.923.616-1.7 1.476.221.86 1 1.122 3.498 2.183.71.302.823.034.487-1.149z" stroke="#6133B4" stroke-width="1.5"/>
    <path clip-rule="evenodd" d="M27.66 5.365c.648-1.044 1.737-1.895 2.888-1.782 1.151.112 1.678 1.123 1.228 1.889-.45.765-1.27.802-3.964 1.133-.765.094-.8-.195-.152-1.24z" stroke="#9A62FF" stroke-width="1.5"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.319 4.294c-2.24-.315-1.259 2.44-.36 2.566.898.126 2.6-2.25.36-2.566z" fill="#4F2A93"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m26.016 6.454 8.279 1.165-.582 4.145-8.279-1.165.582-4.145z" fill="#F9F9F9"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m17.737 5.29 8.279 1.164-.582 4.145-8.279-1.165.582-4.145z" fill="#E1E0E3"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m23.256 6.066 5.52.777-.582 4.144-5.52-.776.582-4.145z" fill="#9A62FF"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m23.256 6.066 2.76.388-.582 4.145-2.76-.388.582-4.145z" fill="#6133B4"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m26.016 6.454 2.76.389-.195 1.381-2.76-.388.195-1.382z" fill="#6133B4"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m23.256 6.066 2.76.388-.194 1.382-2.76-.388.194-1.382z" fill="#4F2A93"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m17.349 8.053 5.52.776-.195 1.382-5.519-.777.194-1.381zM28.388 9.606l5.519.776-.194 1.382-5.52-.777.195-1.381z" fill="#BDA8FF" fill-opacity=".3"/>
    <path clip-rule="evenodd" d="M56.55 9.16c-.624-1.413-1.83-2.662-3.282-2.724-1.452-.062-2.285 1.104-1.858 2.135.426 1.031 1.441 1.22 4.734 2.104.935.25 1.03-.102.406-1.515z" stroke="#6133B4" stroke-width="1.5"/>
    <path clip-rule="evenodd" d="M60.26 9.16c.624-1.413 1.83-2.662 3.283-2.724 1.451-.062 2.284 1.104 1.857 2.135-.426 1.031-1.44 1.22-4.734 2.104-.935.25-1.03-.102-.406-1.515z" stroke="#9A62FF" stroke-width="1.5"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M58.405 8.061c-2.842 0-1.14 3.256 0 3.256s2.842-3.256 0-3.256z" fill="#4F2A93"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M58.405 10.802H68.91v5.259H58.405v-5.259z" fill="#F9F9F9"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M47.901 10.802h10.504v5.259H47.901v-5.259z" fill="#E1E0E3"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M54.904 10.802h7.002v5.259h-7.002v-5.259z" fill="#9A62FF"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M54.904 10.802h3.501v5.259h-3.501v-5.259zM58.405 10.802h3.501v1.753h-3.5v-1.753z" fill="#6133B4"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M54.904 10.802h3.501v1.753h-3.501v-1.753z" fill="#4F2A93"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M58.405 16.06h8.753v12.27h-8.753V16.06z" fill="#F9F9F9"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.652 16.06h8.753v12.27h-8.753V16.06z" fill="#E1E0E3"/>
    <path fill="#6133B4" d="M56.654 16.061h1.751v12.27h-1.751z"/>
    <path fill="#9A62FF" d="M58.405 16.061h1.751v12.27h-1.751z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M56.654 26.578h1.751v1.753h-1.75v-1.753zM56.654 16.06h1.751v1.754h-1.75V16.06z" fill="#4F2A93"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.652 16.06h7.002v1.754h-7.002V16.06z" fill="#BDA8FF" fill-opacity=".3"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M47.901 14.308h7.003v1.753H47.9v-1.753zM49.652 26.578h7.002v1.753h-7.002v-1.753zM60.156 16.06h7.002v1.754h-7.002V16.06z" fill="#BDA8FF" fill-opacity=".3"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M61.906 14.308h7.003v1.753h-7.003v-1.753zM60.156 26.578h7.002v1.753h-7.002v-1.753z" fill="#BDA8FF" fill-opacity=".3"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M58.405 26.578h1.75v1.753h-1.75v-1.753zM58.405 16.06h1.75v1.754h-1.75V16.06z" fill="#6133B4"/>
 </svg>
--- a/website/client/src/assets/svg/hourglass-red.svg
+++ b/website/client/src/assets/svg/hourglass-red.svg
@@ -0,0 +1,10 @@
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd">
        <path d="M3 12.606v1.778c0 .208.093.408.262.53 1.842 1.347 6.923 1.347 8.766 0a.655.655 0 0 0 .26-.53v-1.778c0-1.621-.831-3.177-2.091-4.104a.666.666 0 0 1 0-1.08c1.26-.927 2.092-2.483 2.092-4.105V1.54a.652.652 0 0 0-.261-.53c-1.843-1.346-6.924-1.346-8.766 0A.65.65 0 0 0 3 1.54v1.777c0 1.622.832 3.178 2.092 4.105.368.27.368.81 0 1.08C3.832 9.429 3 10.985 3 12.606" fill="#F19595"/>
        <path d="M7.644 1.327c1.51 0 2.684.274 3.318.587v1.403c0 1.169-.594 2.332-1.551 3.036a2.006 2.006 0 0 0-.818 1.609c0 .63.305 1.232.817 1.608.958.705 1.552 1.868 1.552 3.036v1.404c-.634.313-1.809.587-3.318.587-1.508 0-2.683-.274-3.317-.587v-1.404c0-1.168.594-2.331 1.551-3.035.513-.377.817-.978.817-1.609 0-.63-.304-1.232-.816-1.609-.958-.704-1.552-1.867-1.552-3.036V1.914c.634-.313 1.809-.587 3.317-.587" fill-opacity=".9" fill="#FFF"/>
        <path d="M7.797 2.324c-1.132 0-2.331.105-2.343.385-.01.226-.005.664.914 1.13.893.453 1.06 1.282 1.546 1.282.564 0 .596-.477 1.284-.95.71-.488.823-1.148.815-1.408-.011-.363-1.084-.439-2.216-.439" fill="#DE3F3F"/>
        <path d="M9.198 4.17c.71-.487.823-1.146.815-1.407-.009-.288-.684-.395-1.526-.427.236.12.543.377.467.88-.078.525-.904 1.105-.77 1.568.025.09.069.162.124.221.247-.17.408-.502.89-.835" fill="#B01515"/>
        <path d="M7.644 9.17c-.344 0-.433.628-.933 1.018-.613.478-1.196 1.067-1.356 1.914-.131.698-.012.785.148.834.16.049 1.386.257 2.588 0 1.203-.258 1.87-.737 1.755-1.227-.111-.466-.448-.865-1.068-1.325-.593-.44-.79-1.214-1.134-1.214" fill="#DE3F3F"/>
        <path d="M5.503 12.936c.16.05 1.386.257 2.588 0 .956-.205 1.574-.55 1.729-.929a.096.096 0 0 0-.005-.023c-.067-.256-1.073-.41-2.325-.207-1.192.192-2.158.586-2.153 1.03.037.08.097.108.166.129" fill="#B01515"/>
    </g>
 </svg>
--- a/website/client/src/assets/svg/icon-background-birthday.svg
+++ b/website/client/src/assets/svg/icon-background-birthday.svg
@@ -0,0 +1,9 @@
 <svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path fill="url(#sxizdfpdya)" d="M0 0h68v68H0z"/>
    <defs>
        <pattern id="sxizdfpdya" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use xlink:href="#pomapjzcdb" transform="scale(.0147)"/>
        </pattern>
        <image id="pomapjzcdb" width="68" height="68" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gwJFx8lKwafmAAABjRJREFUeNrtm39MVWUYx78IV5BfF3Qg8kNppNIoyhKWZmUBlpRNpC3Uac7EUUGrscxM+AOHia1foKmDHOHItkbhLGnpzGVBimtlozmVTeByCRDhwgXll/THc17de3zvuedernDd3uefc895f5/zuc/3ed57DyBNmjRpzpuH+sLvR8fGAODR0nS+YmAgAMCQNQMAMJKwkys//+tUAMDQDTrPzNgIACj58iAAoLH5LADgx/Kzwols/zyba3+jny9n7WNmJ3LXffzoONUHTrVPyvDg7sEUyQRvXrYKrvX2AgCmK2RUxL9OT35oDzWs38bVf3XlNe78sfindE3gam/TpCw87fwPwuuSEL2EXMg6DgBY/HW6+E4OdQAA4lZ4CYnotVgBAEvShuiIRwAAXxV/y9Xbve+jSSHj2SfIl1RLQpwkRO1LmDEimJV+Qyqy+709wvZx/3wBAFhk3QQAONlYqKoxpGuijLDfvnduodmnTwIAUrM2ataThDhKSEp9FH2o38/5iopCuuO1/drqceAy+YiSAPI5m+rE9UvLcjTnweKfJWk7nVtppb5qkhB7hLAI01Y8wdSjyzLM9aCOJ9qrI+jDZTqkNlwBAByLixZOpMtk4uIeZrVrqkgVhtYL4x9m830iXXJDJCH2CGGqwXKB4gKxevw9eBgA0HDwIgAg94UdAICZL1JSkd5H5w2VVB4ZHg8A6IkkEoKMREKPhVTM/AHFPdNLxHFP6TnKdTIX8vOp7a8AABxWcpnVwZ9pLvjSlRYAwNzoKEmIS1TGlnqc2H1aWO5n8qSIFGsAAKdazVx53pR5pDog1SkMuF8z7rnD1yi+a4bRICy39vUBAPwDAhSVe5uy3Scp283+iUjE8ymSEJcQolaPVxZkkldPJRKiYmZqtl+3iy9vaWwk1agcJTUKJ18S9TI5gSu59ASjP07R9F0PW1YLV1BlzSMfhh1SZSaEkHe25ZMK1LQBANpa2wEAyTELxjUw64dZFOYJs21bxkjxcdAL1qzdCgBYXrlLEuJSlWFPdGlmuOIL6Lz/L4pITeZmIicnnH/SVV5cOfM9rJ9TpUyF5rl0YZXtebpISTr6viTEpXHIgy9NAwD4+voCAA4da+YIamn05OqbzKNc+bqMhwAAAwMDCiHudUMkIc4Swr7zakvf7698omNoaKiKqA6uXG+/kpB7jRCmBsEhscoVyikWrpoFAPAYJZ8wcqvjQQBAeKgRADDmST7n3HdXlRoGpV+KXFcVxWiO391F+zCY7dxC9baXhOglxPIL/UhqNlOEunKfNwAgInKYU5kLJ9Sbqjds9Ej15iYZOJVhVlfM9k3oERqf8ZE+xK0JYZElix96/iQ1iFRtXcYm+3E+5OaUafwdv3md8yEWi0WoMrcjVjKjiyNXSYirCWE5hzqrPVPA5ybZR4xc+d6VlzlfkKbakj20voMrj00f4fZNWI4k4xB3J4R9p5dmQjM3OX7AU3Of4+cy7XI/Ve7Dxk3eEiMJuSciVZbd3jZSjfkgdVi2KUyzvb1ydf+Tnf1KQvQSYisLTcyYodlh8ub7uPjDXnt1xGpr3M7OrnEtVG97SYg9QrYVPQcAWDywXZXdQslF9HXMIlZbpDBrrTOofAhlv7W+bwjr118sI082SL/wfZpfJ33IhBJiDAxWvtx0iFg0zMcR9bwqtGFM1cOAQ0NGLBLXvzUPdRbe2y1Vxi1UpiFsr/LpE+76rIQR7jzI3yD0Hepsl1mPdVilMrbGhSY51zt7JSFuEameKZjOZbfrKnxdOoGqLCuX/U62SUIcJaS8ZQN3fmItX74hqpwj6M1q/h9BJataOQLKW14TD9Sib8JMZT7MrZOEuAUhDhO0AuMiwJb919k0LjIu/UH7MMuXSUIcsjveuYt7IH7MHSdq7FkOAAgJpm3/t/Lpf6v23rlj/7Pt7DYJ28t37hwlJDHh8TEA6LcOCJ8QM3an7e5DKE/mDrUIquHO/fzF8Y2X6WnhdTb+lqJsISHs/R1b47P2R/7NkYQ4pDJhIXPoCXp3c/sOIR7OvW1gi6QRPyJimnegMLtlqhI+JwgAYG7qEZL37uatuubB+rltVqkyExKH3G1TkzHefhixhkBJiDRp0qTddfsfGCIUXNZsU4gAAAAASUVORK5CYII="/>
    </defs>
 </svg>
--- a/website/client/src/assets/svg/instagram.svg
+++ b/website/client/src/assets/svg/instagram.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill-rule="evenodd" d="M8 0c2.173 0 2.445.01 3.298.048.852.04 1.433.174 1.942.372.526.205.973.478 1.418.922.444.445.717.892.922 1.418.198.509.333 1.09.372 1.942C15.99 5.555 16 5.827 16 8s-.01 2.445-.048 3.298c-.04.852-.174 1.433-.372 1.942a3.924 3.924 0 0 1-.922 1.418 3.924 3.924 0 0 1-1.418.922c-.509.198-1.09.333-1.942.372-.853.04-1.125.048-3.298.048s-2.445-.009-3.298-.048c-.852-.04-1.433-.174-1.942-.372a3.924 3.924 0 0 1-1.418-.922A3.924 3.924 0 0 1 .42 13.24c-.198-.509-.333-1.09-.372-1.942C.01 10.445 0 10.173 0 8s.01-2.445.048-3.298C.088 3.85.222 3.269.42 2.76c.205-.526.478-.973.922-1.418A3.924 3.924 0 0 1 2.76.42C3.269.222 3.85.087 4.702.048 5.555.01 5.827 0 8 0zm0 3.892a4.108 4.108 0 1 0 0 8.216 4.108 4.108 0 0 0 0-8.216zm5.23-.162a.96.96 0 1 0-1.92 0 .96.96 0 0 0 1.92 0zM8 10.667a2.666 2.666 0 1 1 0-5.333 2.666 2.666 0 0 1 0 5.333z"/>
+  <path d="M14.67,12A2.67,2.67,0,1,1,12,9.33,2.67,2.67,0,0,1,14.67,12Zm3.89,0c0,1.16.1,3.66-.32,4.71a2.7,2.7,0,0,1-1.52,1.52c-1.06.42-3.55.33-4.72.33s-3.66.09-4.71-.33a2.65,2.65,0,0,1-1.52-1.52c-.42-1.05-.33-3.55-.33-4.71s-.09-3.67.33-4.72A2.65,2.65,0,0,1,7.29,5.76c1-.42,3.55-.32,4.71-.32a18,18,0,0,1,4.72.32,2.7,2.7,0,0,1,1.52,1.52C18.66,8.34,18.56,10.83,18.56,12ZM16.1,12A4.1,4.1,0,1,0,12,16.1,4.09,4.09,0,0,0,16.1,12Zm1.13-4.27a1,1,0,1,0-1,1A1,1,0,0,0,17.23,7.73ZM24,4V20a4,4,0,0,1-4,4H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H20A4,4,0,0,1,24,4ZM19.94,8.7a4.71,4.71,0,0,0-1.29-3.35A4.71,4.71,0,0,0,15.3,4.06C14,4,10,4,8.7,4.06A4.76,4.76,0,0,0,5.35,5.34,4.75,4.75,0,0,0,4.06,8.7C4,10,4,14,4.06,15.3a4.73,4.73,0,0,0,1.29,3.35A4.77,4.77,0,0,0,8.7,19.94c1.32.08,5.28.08,6.6,0a4.71,4.71,0,0,0,3.35-1.29,4.73,4.73,0,0,0,1.29-3.35C20,14,20,10,19.94,8.7Z" />
 </svg>
--- a/website/client/src/assets/svg/new-close.svg
+++ b/website/client/src/assets/svg/new-close.svg
@@ -0,0 +1 @@
 <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" fill="none"/><g id="b"><g id="c"><g id="d"><polygon id="e" points="12.2 2 14 3.8 9.8 8 14 12.2 12.2 14 8 9.8 3.8 14 2 12.2 6.2 8 2 3.8 3.8 2 8 6.2 12.2 2"/></g></g></g></svg>
--- a/website/client/src/assets/svg/stripe.svg
+++ b/website/client/src/assets/svg/stripe.svg
@@ -0,0 +1,5 @@
 <svg width="48" height="20" viewBox="0 0 48 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M48 10.334c0-3.418-1.653-6.115-4.813-6.115-3.174 0-5.094 2.697-5.094 6.088 0 4.019 2.267 6.048 5.52 6.048 1.587 0 2.787-.36 3.694-.868v-2.67c-.907.454-1.947.735-3.267.735-1.293 0-2.44-.454-2.587-2.03h6.52c0-.173.027-.868.027-1.188zm-6.587-1.268c0-1.51.92-2.137 1.76-2.137.813 0 1.68.628 1.68 2.136h-3.44zM32.947 4.22c-1.307 0-2.147.613-2.614 1.04l-.173-.827h-2.933V20l3.333-.707.013-3.779c.48.347 1.187.841 2.36.841 2.387 0 4.56-1.922 4.56-6.155-.013-3.871-2.213-5.98-4.546-5.98zm-.8 9.198c-.787 0-1.254-.28-1.574-.627l-.013-4.954c.347-.387.827-.654 1.587-.654 1.213 0 2.053 1.362 2.053 3.11 0 1.79-.827 3.125-2.053 3.125zM22.64 3.431l3.346-.72V0L22.64.708V3.43z" fill="#635BFF"/>
    <path fill="#635BFF" d="M22.64 4.446h3.347v11.682H22.64z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="m19.053 5.434-.213-.988h-2.88v11.682h3.333V8.211c.787-1.028 2.12-.841 2.534-.694V4.446c-.427-.16-1.987-.454-2.774.988zM12.387 1.549l-3.254.694-.013 10.694c0 1.976 1.48 3.431 3.453 3.431 1.094 0 1.894-.2 2.334-.44v-2.71c-.427.173-2.534.787-2.534-1.189V7.29h2.534V4.447h-2.534l.014-2.897zM3.373 7.837c0-.52.427-.72 1.134-.72 1.013 0 2.293.306 3.306.854V4.833a8.783 8.783 0 0 0-3.306-.614C1.8 4.22 0 5.634 0 7.997c0 3.685 5.067 3.098 5.067 4.687 0 .614-.534.814-1.28.814-1.107 0-2.52-.454-3.64-1.068v3.178a9.233 9.233 0 0 0 3.64.76c2.773 0 4.68-1.375 4.68-3.764-.014-3.98-5.094-3.271-5.094-4.767z" fill="#635BFF"/>
 </svg>
--- a/website/client/src/assets/svg/tumblr.svg
+++ b/website/client/src/assets/svg/tumblr.svg
@@ -0,0 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M20,0H4A4,4,0,0,0,0,4V20a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0ZM16.68,19a4.47,4.47,0,0,1-3,1C9.86,20,9,17.22,9,15.61v-4.5H7.56a.31.31,0,0,1-.31-.32V8.67a.52.52,0,0,1,.35-.5,4,4,0,0,0,2.63-3.66c0-.34.21-.51.51-.51H13a.31.31,0,0,1,.32.31v3.6h2.59a.31.31,0,0,1,.31.31v2.55a.31.31,0,0,1-.31.32H13.25v4.16c0,1.07.74,1.67,2.13,1.12a.67.67,0,0,1,.4-.07.36.36,0,0,1,.23.25l.68,2C16.75,18.71,16.8,18.89,16.68,19Z" fill-rule="evenodd"/>
 </svg>
--- a/website/client/src/assets/svg/twitter.svg
+++ b/website/client/src/assets/svg/twitter.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill-rule="evenodd" d="M14.362 3.238c.007.141.01.281.01.424 0 4.338-3.302 9.34-9.34 9.34A9.284 9.284 0 0 1 0 11.527c.257.029.518.045.783.045a6.576 6.576 0 0 0 4.076-1.404 3.288 3.288 0 0 1-3.065-2.28 3.312 3.312 0 0 0 1.481-.056A3.288 3.288 0 0 1 .642 4.613v-.041c.444.246.949.393 1.488.41A3.28 3.28 0 0 1 .67 2.25c0-.602.162-1.166.444-1.651a9.315 9.315 0 0 0 6.766 3.43A3.28 3.28 0 0 1 11.078 0c.943 0 1.797.398 2.395 1.035a6.565 6.565 0 0 0 2.085-.797 3.289 3.289 0 0 1-1.443 1.816A6.543 6.543 0 0 0 16 1.539a6.665 6.665 0 0 1-1.638 1.699"/>
+  <path d="M20,0H4A4,4,0,0,0,0,4V20a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0ZM18.36,8.74c0,.14,0,.29,0,.43A9.34,9.34,0,0,1,4,17a6.85,6.85,0,0,0,.79,0,6.57,6.57,0,0,0,4.07-1.4A3.29,3.29,0,0,1,5.8,13.39a4.1,4.1,0,0,0,.62,0,3.49,3.49,0,0,0,.86-.11,3.28,3.28,0,0,1-2.63-3.22v0a3.35,3.35,0,0,0,1.48.42A3.29,3.29,0,0,1,4.67,7.76,3.22,3.22,0,0,1,5.12,6.1a9.3,9.3,0,0,0,6.76,3.43,3.67,3.67,0,0,1-.08-.75,3.28,3.28,0,0,1,5.67-2.24,6.54,6.54,0,0,0,2.08-.79,3.22,3.22,0,0,1-1.44,1.8A6.67,6.67,0,0,0,20,7.05,7.31,7.31,0,0,1,18.36,8.74Z" fill-rule="evenodd"/>
 </svg>
--- a/website/client/src/components/admin-panel/user-support/cronAndAuth.vue
+++ b/website/client/src/components/admin-panel/user-support/cronAndAuth.vue
@@ -22,11 +22,6 @@
        Account created:
        <strong>{{ hero.auth.timestamps.created | formatDate }}</strong>
      </div>
      <div>
        Most recent cron:
        <strong>{{ hero.auth.timestamps.loggedin | formatDate }}</strong>
        ("auth.timestamps.loggedin")
      </div>
      <div v-if="cronError">
        "lastCron" value:
        <strong>{{ hero.lastCron | formatDate }}</strong>
@@ -36,6 +31,19 @@
          ("auth.timestamps.loggedin" and "lastCron" dates are different).
        </span>
      </div>
      <div class="form-inline">
        <div>
          Most recent cron:
          <strong>{{ hero.auth.timestamps.loggedin | formatDate }}</strong>
          ("auth.timestamps.loggedin")
        </div>
        <button
          class="btn btn-primary ml-2"
          @click="resetCron()"
        >
          Reset Cron to Yesterday
        </button>
      </div>
      <div class="subsection-start">
        Time zone:
        <strong>{{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
@@ -218,6 +226,10 @@ export default {
      await this.saveHero({ hero: this.hero, msg: 'API Token' });
      this.tokenModified = true;
    },
    resetCron () {
      this.hero.resetCron = true;
      this.saveHero({ hero: this.hero, msg: 'Last Cron', clearData: true });
    },
  },
 };
 </script>
--- a/website/client/src/components/admin-panel/user-support/index.vue
+++ b/website/client/src/components/admin-panel/user-support/index.vue
@@ -17,6 +17,10 @@
          :reset-counter="resetCounter"
        />
        <subscription-and-perks
          :hero="hero"
        />
        <cron-and-auth
          :hero="hero"
          :reset-counter="resetCounter"
@@ -45,6 +49,7 @@
        <transactions
          :hero="hero"
          :reset-counter="resetCounter"
        />
        <contributor-details
@@ -97,6 +102,7 @@ import AvatarAndDrops from './avatarAndDrops';
 import PrivilegesAndGems from './privilegesAndGems';
 import ContributorDetails from './contributorDetails';
 import Transactions from './transactions';
 import SubscriptionAndPerks from './subscriptionAndPerks';
 import { userStateMixin } from '../../../mixins/userState';
@@ -110,6 +116,7 @@ export default {
    PrivilegesAndGems,
    ContributorDetails,
    Transactions,
    SubscriptionAndPerks,
  },
  mixins: [userStateMixin],
  data () {
--- a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
@@ -0,0 +1,165 @@
 <template>
  <div class="accordion-group">
    <h3
      class="expand-toggle"
      :class="{'open': expand}"
      @click="expand = !expand"
    >
      Subscription, Monthly Perks
    </h3>
    <div v-if="expand">
      <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
        <div v-if="hero.purchased.plan.paymentMethod">
          Payment method:
          <strong>{{ hero.purchased.plan.paymentMethod }}</strong>
        </div>
        <div v-if="hero.purchased.plan.planId">
          Payment schedule ("basic-earned" is monthly):
          <strong>{{ hero.purchased.plan.planId }}</strong>
        </div>
        <div v-if="hero.purchased.plan.dateCreated">
          Creation date:
          <strong>{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
        </div>
        <div>
          Termination date:
          <strong
            v-if="hero.purchased.plan.dateTerminated"
          >
            {{ dateFormat(hero.purchased.plan.dateTerminated) }}
          </strong>
          <strong v-else> None </strong>
        </div>
        <div class="form-inline">
          <label>
            Consecutive months:
            <input
              v-model="hero.purchased.plan.consecutive.count"
              class="form-control"
              type="number"
              min="0"
              step="1"
            >
          </label>
        </div>
        <div>
          Perk offset months:
          <strong>{{ hero.purchased.plan.consecutive.offset }}</strong>
        </div>
        <div>
          Perk month count:
          <strong>{{ hero.purchased.plan.perkMonthCount }}</strong>
        </div>
        <div>
          Next Mystic Hourglass:
          <strong>{{ nextHourglassDate }}</strong>
        </div>
        <div class="form-inline">
          <label>
            Mystic Hourglasses:
            <input
              v-model="hero.purchased.plan.consecutive.trinkets"
              class="form-control"
              type="number"
              min="0"
              step="1"
            >
          </label>
        </div>
        <div class="form-inline">
          <label>
            Gem cap increase:
            <input
              v-model="hero.purchased.plan.consecutive.gemCapExtra"
              class="form-control"
              type="number"
              min="0"
              max="25"
              step="5"
            >
          </label>
        </div>
        <div>
          Total Gem cap:
          <strong>{{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}</strong>
        </div>
        <div class="form-inline">
          <label>
            Gems bought this month:
            <input
              v-model="hero.purchased.plan.gemsBought"
              class="form-control"
              type="number"
              min="0"
              :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
              step="1"
            >
          </label>
        </div>
        <div
          v-if="hero.purchased.plan.extraMonths > 0"
        >
          Additional credit (applied upon cancellation):
          <strong>{{ hero.purchased.plan.extraMonths }}</strong>
        </div>
        <div>
          Mystery Items:
          <span
            v-if="hero.purchased.plan.mysteryItems.length > 0"
          >
            <span
              v-for="(item, index) in hero.purchased.plan.mysteryItems"
              :key="index"
            >
              <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
                {{ item }},
              </strong>
              <strong v-else> {{ item }} </strong>
            </span>
          </span>
          <span v-else>
            <strong>None</strong>
          </span>
        </div>
        <input
          type="submit"
          value="Save"
          class="btn btn-primary mt-1"
        >
      </form>
    </div>
  </div>
 </template>
 <script>
 import moment from 'moment';
 import saveHero from '../mixins/saveHero';
 import { getPlanContext } from '@/../../common/script/cron';
 export default {
  mixins: [saveHero],
  props: {
    hero: {
      type: Object,
      required: true,
    },
  },
  data () {
    return {
      expand: false,
    };
  },
  computed: {
    nextHourglassDate () {
      const currentPlanContext = getPlanContext(this.hero, new Date());
      return currentPlanContext.nextHourglassDate.format('MMMM YYYY');
    },
  },
  methods: {
    dateFormat (date) {
      return moment(date).format('YYYY/MM/DD');
    },
  },
 };
 </script>
--- a/website/client/src/components/admin-panel/user-support/transactions.vue
+++ b/website/client/src/components/admin-panel/user-support/transactions.vue
@@ -30,6 +30,10 @@ export default {
      type: Object,
      required: true,
    },
    resetCounter: {
      type: Number,
      required: true,
    },
  },
  data () {
    return {
@@ -38,6 +42,14 @@ export default {
      hourglassTransactions: [],
    };
  },
  watch: {
    resetCounter () {
      if (this.expand) {
        this.expand = !this.expand;
        this.toggleTransactionsOpen();
      }
    },
  },
  methods: {
    async toggleTransactionsOpen () {
      this.expand = !this.expand;
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
--- a/website/client/src/components/auth/authForm.vue
+++ b/website/client/src/components/auth/authForm.vue
@@ -1,21 +1,5 @@
 <template>
  <div class="form">
    <div class="form-group row text-center">
      <div class="col-12">
        <div
          class="btn btn-secondary social-button"
          @click="socialAuth('facebook')"
        >
          <div
            class="svg-icon social-icon"
            v-html="icons.facebookIcon"
          ></div>
          <span>{{ registering
            ? $t('signUpWithSocial', {social: 'Facebook'})
            : $t('loginWithSocial', {social: 'Facebook'}) }}</span>
        </div>
      </div>
    </div>
    <div class="form-group row text-center">
      <div class="col-12">
        <div
@@ -243,7 +227,6 @@ import debounce from 'lodash/debounce';
 import isEmail from 'validator/lib/isEmail';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
 import googleIcon from '@/assets/svg/google.svg';
 import appleIcon from '@/assets/svg/apple_black.svg';
@@ -260,7 +243,6 @@ export default {
    };
    data.icons = Object.freeze({
      facebookIcon: facebookSquareIcon,
      googleIcon,
      appleIcon,
    });
@@ -308,8 +290,6 @@ export default {
  },
  mounted () {
    hello.init({
      facebook: process.env.FACEBOOK_KEY, // eslint-disable-line
      // windows: WINDOWS_CLIENT_ID,
      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
    });
  },
--- a/website/client/src/components/auth/registerLoginReset.vue
+++ b/website/client/src/components/auth/registerLoginReset.vue
@@ -621,7 +621,6 @@ import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import exclamation from '@/assets/svg/exclamation.svg';
 import gryphon from '@/assets/svg/gryphon.svg';
 import habiticaIcon from '@/assets/svg/habitica-logo.svg';
 import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
 import googleIcon from '@/assets/svg/google.svg';
 import appleIcon from '@/assets/svg/apple_black.svg';
@@ -644,7 +643,6 @@ export default {
      exclamation,
      gryphon,
      habiticaIcon,
      facebookIcon: facebookSquareIcon,
      googleIcon,
      appleIcon,
    });
@@ -734,8 +732,6 @@ export default {
  },
  mounted () {
    hello.init({
      facebook: process.env.FACEBOOK_KEY, // eslint-disable-line
      // windows: WINDOWS_CLIENT_ID,
      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
    });
  },
@@ -757,8 +753,7 @@ export default {
    }, 500),
    sanitizeRedirect (redirect) {
      if (!redirect) return '/';
-      let sanitizedString = DOMPurify.sanitize(redirect).replace(/\\|\/\/|\./g, '');
+      const sanitizedString = DOMPurify.sanitize(redirect).replace(/\\|\/\/|\./g, '');
      sanitizedString = `/${sanitizedString}`;
      return sanitizedString;
    },
    async register () {
--- a/website/client/src/components/avatarModal/hair-settings.vue
+++ b/website/client/src/components/avatarModal/hair-settings.vue
@@ -27,7 +27,7 @@
        <customize-options
          :items="set.options"
          :current-value="user.preferences.hair.color"
-          :full-set="!hideSet(set) && !userOwnsSet('hair', set.keys, 'color')"
+          :full-set="!hideSet(set.key) && !userOwnsSet('hair', set.keys, 'color')"
          @unlock="unlock(`hair.color.${set.keys.join(',hair.color.')}`)"
        />
      </div>
--- a/website/client/src/components/avatarModal/skin-settings.vue
+++ b/website/client/src/components/avatarModal/skin-settings.vue
@@ -23,7 +23,7 @@
      <customize-options
        :items="set.options"
        :current-value="user.preferences.skin"
-        :full-set="!hideSet(set) && !userOwnsSet('skin', set.keys)"
+        :full-set="!hideSet(set.key) && !userOwnsSet('skin', set.keys)"
        @unlock="unlock(`skin.${set.keys.join(',skin.')}`)"
      />
    </div>
--- a/website/client/src/components/bugReportModal.vue
+++ b/website/client/src/components/bugReportModal.vue
@@ -159,7 +159,6 @@ label {
 }
 .cancel-link {
  color: $blue-10;
  line-height: 1.71;
 }
--- a/website/client/src/components/bugReportSuccessModal.vue
+++ b/website/client/src/components/bugReportSuccessModal.vue
@@ -107,7 +107,6 @@ label {
 }
 .cancel-link {
  color: $blue-10;
  line-height: 1.71;
 }
--- a/website/client/src/components/challenges/challengeModal.vue
+++ b/website/client/src/components/challenges/challengeModal.vue
@@ -280,6 +280,7 @@ import markdownDirective from '@/directives/markdown';
 import { userStateMixin } from '../../mixins/userState';
 import { TAVERN_ID, MIN_SHORTNAME_SIZE_FOR_CHALLENGES, MAX_SUMMARY_SIZE_FOR_CHALLENGES } from '@/../../common/script/constants';
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 export default {
  directives: {
@@ -288,64 +289,7 @@ export default {
  mixins: [userStateMixin],
  props: ['groupId'],
  data () {
-    const categoryOptions = [
+    const categoryOptions = CategoryOptions;
      {
        label: 'habitica_official',
        key: 'habitica_official',
      },
      {
        label: 'academics',
        key: 'academics',
      },
      {
        label: 'advocacy_causes',
        key: 'advocacy_causes',
      },
      {
        label: 'creativity',
        key: 'creativity',
      },
      {
        label: 'entertainment',
        key: 'entertainment',
      },
      {
        label: 'finance',
        key: 'finance',
      },
      {
        label: 'health_fitness',
        key: 'health_fitness',
      },
      {
        label: 'hobbies_occupations',
        key: 'hobbies_occupations',
      },
      {
        label: 'location_based',
        key: 'location_based',
      },
      {
        label: 'mental_health',
        key: 'mental_health',
      },
      {
        label: 'getting_organized',
        key: 'getting_organized',
      },
      {
        label: 'self_improvement',
        key: 'self_improvement',
      },
      {
        label: 'spirituality',
        key: 'spirituality',
      },
      {
        label: 'time_management',
        key: 'time_management',
      },
    ];
    const hashedCategories = {};
    categoryOptions.forEach(category => {
      hashedCategories[category.key] = category.label;
--- a/website/client/src/components/challenges/groupChallenges.vue
+++ b/website/client/src/components/challenges/groupChallenges.vue
@@ -112,10 +112,8 @@ export default {
    },
  },
  watch: {
-    'group._id': {
+    'group._id': function groupId () {
-      async groupId () {
+      this.loadChallenges();
        this.loadChallenges();
      },
    },
  },
  mounted () {
--- a/website/client/src/components/challenges/leaveChallengeModal.vue
+++ b/website/client/src/components/challenges/leaveChallengeModal.vue
@@ -50,7 +50,21 @@ export default {
        challengeId: this.challengeId,
        keep,
      });
-      await this.$store.dispatch('tasks:fetchUserTasks', { forceLoad: true });
+      const userTasksByType = (await this.$store.dispatch('tasks:fetchUserTasks', { forceLoad: true })).data;
      let tagInUse = false;
      Object.keys(userTasksByType).forEach(taskType => {
        userTasksByType[taskType].forEach(task => {
          if (task.tags.indexOf(this.challengeId) > -1) {
            tagInUse = true;
          }
        });
      });
      if (!tagInUse) {
        await this.$store.dispatch(
          'tags:deleteTag',
          { tagId: this.challengeId },
        );
      }
      this.close();
    },
    close () {
--- a/website/client/src/components/challenges/sidebar.vue
+++ b/website/client/src/components/challenges/sidebar.vue
@@ -89,70 +89,14 @@
 import throttle from 'lodash/throttle';
 import FilterSidebar from '@/components/ui/filterSidebar';
 import FilterGroup from '@/components/ui/filterGroup';
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 export default {
  components: { FilterGroup, FilterSidebar },
  data () {
    return {
      categoryFilters: [],
-      categoryOptions: [
+      categoryOptions: CategoryOptions,
        {
          label: 'habitica_official',
          key: 'habitica_official',
        },
        {
          label: 'academics',
          key: 'academics',
        },
        {
          label: 'advocacy_causes',
          key: 'advocacy_causes',
        },
        {
          label: 'creativity',
          key: 'creativity',
        },
        {
          label: 'entertainment',
          key: 'entertainment',
        },
        {
          label: 'finance',
          key: 'finance',
        },
        {
          label: 'health_fitness',
          key: 'health_fitness',
        },
        {
          label: 'hobbies_occupations',
          key: 'hobbies_occupations',
        },
        {
          label: 'location_based',
          key: 'location_based',
        },
        {
          label: 'mental_health',
          key: 'mental_health',
        },
        {
          label: 'getting_organized',
          key: 'getting_organized',
        },
        {
          label: 'self_improvement',
          key: 'self_improvement',
        },
        {
          label: 'spirituality',
          key: 'spirituality',
        },
        {
          label: 'time_management',
          key: 'time_management',
        },
      ],
      membershipFilters: [],
      membershipOptions: [
        {
--- a/website/client/src/components/chat/reportFlagModal.vue
+++ b/website/client/src/components/chat/reportFlagModal.vue
@@ -77,7 +77,6 @@
   }
   a.cancel-link {
     color: $blue-10;
     margin-right: .5em;
   }
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -121,7 +121,7 @@
            v-if="editing"
            class="menu-container col-2"
            :class="{active: activeTopPage === 'backgrounds'}"
-            @click="changeTopPage('backgrounds', '2022')"
+            @click="changeTopPage('backgrounds', '2023')"
          >
            <div class="menu-item">
              <div
@@ -198,52 +198,79 @@
          </div>
        </div>
        <div
-          v-if="!filterBackgrounds"
+          v-if="!filterBackgrounds && user.purchased.background.birthday_bash"
          class="row text-center title-row"
        >
          <strong>{{ backgroundShopSets[1].text }}</strong>
        </div>
        <div
          v-if="!filterBackgrounds"
          class="row title-row"
        >
          <div
-            v-for="bg in backgroundShopSets[1].items"
+            class="row text-center title-row"
-            :key="bg.key"
+          >
-            class="col-4 text-center customize-option background-button"
+            <strong>{{ backgroundShopSets[2].text }}</strong>
-            :popover-title="bg.text"
+          </div>
-            :popover="bg.notes"
+          <div
-            popover-trigger="mouseenter"
+            class="row title-row"
            @click="!user.purchased.background[bg.key]
              ? backgroundSelected(bg) : unlock('background.' + bg.key)"
          >
            <div
-              class="background"
+              v-for="bg in backgroundShopSets[2].items"
-              :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
+              :key="bg.key"
-            ></div>
+              class="col-4 text-center customize-option background-button"
-            <i
+              :popover-title="bg.text"
-              v-if="!user.purchased.background[bg.key]"
+              :popover="bg.notes"
-              class="glyphicon glyphicon-lock"
+              popover-trigger="mouseenter"
-            ></i>
+              @click="unlock('background.' + bg.key)"
            <div
              v-if="!user.purchased.background[bg.key]"
              class="purchase-background single d-flex align-items-center justify-content-center"
            >
              <div
-                class="svg-icon hourglass"
+                class="background"
-                v-html="icons.hourglass"
+                :class="`background_${bg.key}`"
              ></div>
              <span class="price">1</span>
            </div>
-            <span
+          </div>
-              v-if="!user.purchased.background[bg.key]"
+        </div>
-              class="badge-top"
+        <div v-if="!filterBackgrounds">
-              @click.stop.prevent="togglePinned(bg)"
+          <div
            class="row text-center title-row"
          >
            <strong>{{ backgroundShopSets[1].text }}</strong>
          </div>
          <div
            class="row title-row"
          >
            <div
              v-for="bg in backgroundShopSets[1].items"
              :key="bg.key"
              class="col-4 text-center customize-option background-button"
              :popover-title="bg.text"
              :popover="bg.notes"
              popover-trigger="mouseenter"
              @click="!user.purchased.background[bg.key]
                ? backgroundSelected(bg) : unlock('background.' + bg.key)"
            >
-              <pin-badge
+              <div
-                :pinned="isBackgroundPinned(bg)"
+                class="background"
-              />
+                :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
-            </span>
+              ></div>
              <i
                v-if="!user.purchased.background[bg.key]"
                class="glyphicon glyphicon-lock"
              ></i>
              <div
                v-if="!user.purchased.background[bg.key]"
                class="purchase-background single d-flex align-items-center justify-content-center"
              >
                <div
                  class="svg-icon hourglass"
                  v-html="icons.hourglass"
                ></div>
                <span class="price">1</span>
              </div>
              <span
                v-if="!user.purchased.background[bg.key]"
                class="badge-top"
                @click.stop.prevent="togglePinned(bg)"
              >
                <pin-badge
                  :pinned="isBackgroundPinned(bg)"
                />
              </span>
            </div>
          </div>
        </div>
        <sub-menu
@@ -1185,7 +1212,7 @@ export default {
        },
      ],
-      bgSubMenuItems: ['2022', '2021', '2020', '2019', '2018', '2017', '2016', '2015', '2014'].map(y => ({
+      bgSubMenuItems: ['2023', '2022', '2021', '2020', '2019', '2018', '2017', '2016', '2015', '2014'].map(y => ({
        id: y,
        label: y,
      })),
@@ -1214,6 +1241,7 @@ export default {
        2020: [],
        2021: [],
        2022: [],
        2023: [],
      };
      // Hack to force update for now until we restructure the data
--- a/website/client/src/components/group-plans/createGroupModalPages.vue
+++ b/website/client/src/components/group-plans/createGroupModalPages.vue
@@ -1,3 +1,4 @@
 <!-- THIS IS A VERY OLD FILE DO NOT USE -->
 <template>
  <div class="create-group-modal-pages">
    <div
--- a/website/client/src/components/group-plans/groupPlanCreationModal.vue
+++ b/website/client/src/components/group-plans/groupPlanCreationModal.vue
@@ -0,0 +1,356 @@
 <template>
  <b-modal
    id="create-group"
    :title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
    :hide-footer="true"
    :hide-header="true"
    size="md"
    @hide="onHide()"
  >
    <div
      v-if="activePage === PAGES.CREATE_GROUP"
      class="col-12"
    >
      <!-- HEADER -->
      <div
        class="modal-close"
      >
        <span
          class="cancel-text"
          @click="close()"
        >
          {{ $t('cancel') }}
        </span>
        <button
          class="btn btn-primary next-button"
          :value="$t('next')"
          :disabled="!newGroupIsReady"
          @click="createGroup()"
        >
          {{ $t('next') }}
        </button>
      </div>
      <h2>{{ $t('createGroup') }}</h2>
      <!-- FORM -->
      <div class="form-group">
        <lockable-label
          :text="$t('nameStar')"
        />
        <input
          id="new-group-name"
          v-model="newGroup.name"
          class="form-control input-medium option-content name-input"
          required="required"
          type="text"
          :placeholder="$t('nameStarText')"
        >
      </div>
      <div class="form-group">
        <lockable-label
          for="new-group-description"
          :text="$t('descriptionOptional')"
          class="description-label"
        />
        <div class="characters-remaining">
          {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
        </div>
        <textarea
          id="new-group-description"
          v-model="newGroup.description"
          class="form-control option-content description-input"
          cols="3"
          :placeholder="$t('descriptionOptionalText')"
          maxlength="250"
        ></textarea>
      </div>
      <div class="form-group">
        <div class="custom-control custom-checkbox">
          <input
            id="create-group-leaderOnlyChallenges-checkbox"
            v-model="newGroup.leaderOnly.challenges"
            class="custom-control-input"
            type="checkbox"
          >
          <label
            class="custom-control-label"
            for="create-group-leaderOnlyChallenges-checkbox"
          >{{ $t('leaderOnlyChallenges') }}</label>
        </div>
      </div>
      <div class="form-group">
        <lockable-label
          :text="$t('groupUse')"
        />
        <select-translated-array
          :items="[
            'groupParentChildren',
            'groupCouple',
            'groupFriends',
            'groupCoworkers',
            'groupManager',
            'groupTeacher'
          ]"
          class="group-input"
          :placeholder="'groupUseDefault'"
          :value="newGroup.demographics"
          @select="newGroup.demographics = $event"
        />
      </div>
      <div class="form-group">
        <button
          class="btn btn-primary btn-lg btn-block btn-payment"
          :disabled="!newGroupIsReady"
          @click="createGroup()"
        >
          {{ $t('nextPaymentMethod') }}
        </button>
      </div>
    </div>
    <!-- PAYMENT -->
    <!-- @TODO: Separate payment into a separate modal -->
    <div
      v-if="activePage === PAGES.PAY"
      class="col-12 payments"
    >
      <div class="text-center">
        <payments-buttons
          :stripe-fn="() => pay(PAYMENTS.STRIPE)"
          :amazon-data="pay(PAYMENTS.AMAZON)"
        />
      </div>
    </div>
  </b-modal>
 </template>
 <style lang="scss" scoped>
  @import '~@/assets/scss/colors.scss';
  h2 {
    color: $purple-300;
    font-size: 1.25rem;
    height: 28px;
    width: 120px;
    margin-top: 24px;
    align-self: center;
  }
  .cancel-text {
    color: $blue-10;
    font-size: 0.875rem;
    margin-right: 16px;
    text-align: center;
    cursor: pointer;
  }
  .next-button {
    align-self: center;
  }
  .form-control::placeholder {
    color: $gray-50;
    height: 32px;
  }
  .description-label {
    margin-bottom: -24px;
  }
  .name-input, .description-input, .group-input {
    margin-top: -4px;
  }
 .characters-remaining {
  color: $gray-100;
  font-size: 0.75rem;
  line-height: 1.33;
  text-align: right;
  margin-bottom: 12px;
 }
  .description-input {
    height: 56px;
  }
  .spacer {
    margin-bottom: 16px !important;
  }
  .btn-payment {
    margin: 24px 112px 24px 112px;
    width: 177px;
  }
  .payments {
    padding: 24px;
  }
  .payment-options {
    margin-bottom: 4em;
    .purple-box {
      background-color: #4f2a93;
      color: #fff;
      padding: .5em;
      border-radius: 8px;
      width: 200px;
      height: 215px;
      .dollar {
      }
      .number {
        font-size: 60px;
      }
      .name {
        width: 100px;
        margin-left: .3em;
      }
      div {
        display: inline-block;
      }
    }
    .box, .purple-box {
      display: inline-block;
      vertical-align: bottom;
    }
  }
 </style>
 <style lang="scss">
  @import '~@/assets/scss/mixins.scss';
  #create-group {
    .modal-dialog {
      max-width: 448px;
    }
    .modal-content {
      width: 448px;
      max-height: 436px;
      border-radius: 8px;
      box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
    }
    .modal-body{
      padding: 0px;
      margin-left: 12px;
      margin-right: 12px;
    }
    .modal-close {
      position: absolute;
      right: 16px;
      cursor: pointer;
      top: 0px;
    }
  }
 </style>
 <script>
 import paymentsMixin from '../../mixins/payments';
 import { mapState } from '@/libs/store';
 import paymentsButtons from '@/components/payments/buttons/list';
 import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
 import * as Analytics from '@/libs/analytics';
 export default {
  components: {
    paymentsButtons,
    selectTranslatedArray,
    lockableLabel,
  },
  mixins: [paymentsMixin],
  data () {
    return {
      amazonPayments: {},
      PAGES: {
        CREATE_GROUP: 'create-group',
        // UPGRADE_GROUP: 'upgrade-group',
        PAY: 'pay',
      },
      PAYMENTS: {
        AMAZON: 'amazon',
        STRIPE: 'stripe',
      },
      paymentMethod: '',
      newGroup: {
        type: 'guild',
        privacy: 'private',
        name: '',
        description: '',
        leaderOnly: {
          challenges: false,
        },
        demographics: null,
        user: '',
      },
      activePage: 'create-group',
      type: 'guild',
    };
  },
  computed: {
    ...mapState({ user: 'user.data' }),
    newGroupIsReady () {
      return Boolean(this.newGroup.name) && Boolean(this.newGroup.demographics);
    },
    charactersRemaining () {
      const currentLength = this.newGroup.description ? this.newGroup.description.length : 0;
      return 250 - currentLength;
    },
  },
  methods: {
    close () {
      this.$root.$emit('bv::hide::modal', 'create-group');
    },
    changePage (page) {
      this.activePage = page;
    },
    createGroup () {
      this.changePage(this.PAGES.PAY);
    },
    pay (paymentMethod) {
      const subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
      const demographicsKey = this.newGroup.demographics;
      const paymentData = {
        subscription: subscriptionKey,
        coupon: null,
        demographics: demographicsKey,
      };
      Analytics.track({
        hitType: 'event',
        eventName: 'group plan create',
        eventAction: 'group plan create',
        eventCategory: 'behavior',
        demographics: this.newGroup.demographics,
        type: this.newGroup.type,
      }, { trackOnClient: true });
      if (this.upgradingGroup && this.upgradingGroup._id) {
        paymentData.groupId = this.upgradingGroup._id;
        paymentData.group = this.upgradingGroup;
      } else {
        paymentData.groupToCreate = this.newGroup;
      }
      this.paymentMethod = paymentMethod;
      if (this.paymentMethod === this.PAYMENTS.AMAZON) {
        paymentData.type = 'subscription';
        return paymentData;
      }
      if (this.paymentMethod === this.PAYMENTS.STRIPE) {
        this.redirectToStripe(paymentData);
      }
      return null;
    },
    onHide () {
      this.sendingInProgress = false;
    },
  },
 };
 </script>
--- a/website/client/src/components/group-plans/taskInformation.vue
+++ b/website/client/src/components/group-plans/taskInformation.vue
@@ -19,21 +19,18 @@
      :task="editingTask"
      @cancel="cancelTaskModal()"
    />
-    <div class="row tasks-navigation mb-4">
+    <div class="d-flex flex-wrap align-items-center mb-4">
-      <div class="col-12 col-md-4 d-flex align-items-center">
+      <div class="mr-auto">
        <h1>{{ group.name }}</h1>
      </div>
-      <!-- @TODO: Abstract to component!-->
+      <input
-      <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
+        v-model="searchText"
-        <input
+        class="form-control input-search"
-          v-model="searchText"
+        type="text"
-          class="form-control input-search"
+        :placeholder="$t('search')"
-          type="text"
+      >
          :placeholder="$t('search')"
        >
      </div>
      <div
-        class="col-12 col-md-4 create-task-area d-flex align-items-center"
+        class="d-flex flex-wrap align-items-center justify-content-end ml-auto"
      >
        <toggle-switch
          id="taskMirrorToggle"
@@ -44,11 +41,11 @@
          @change="changeMirrorPreference"
        />
        <div
-          class="day-start d-flex align-items-center mr-2"
+          class="day-start d-flex align-items-center"
          v-html="$t('dayStart', { startTime: groupStartTime } )"
        >
        </div>
-        <div>
+        <div class="create-task-area ml-2">
          <button
            id="create-task-btn"
            v-if="canCreateTasks"
@@ -136,20 +133,38 @@
  }
  .create-task-area {
-    top: 1.5rem;
+    position: inherit;
    height: 40px;
-    .day-start {
+    .dropdown {
-      height: 2rem;
+      right: 24px;
      padding: 0.25rem 0.75rem;
      border-radius: 2px;
      color: $gray-100;
      background-color: $gray-600;
    }
  }
-  .input-search {
+  .day-start {
-    max-width: 458px;
+    height: 2rem;
    padding: 0.25rem 0.75rem;
    border-radius: 2px;
    color: $gray-100;
    background-color: $gray-600;
  }
  @media screen and (min-width: 1200px) {
    .input-search {
      margin-left: 12.5rem;
      width: 25%;
    }
  }
  @media screen and (max-width: 1200px) {
    .input-search {
      width: 50%;
    }
  }
  @media screen and (max-width: 500px) {
    #create-task-btn {
      margin-top: 4px;
    }
  }
  .positive {
--- a/website/client/src/components/groups/groupFormModal.vue
+++ b/website/client/src/components/groups/groupFormModal.vue
@@ -379,6 +379,7 @@ import informationIcon from '@/assets/svg/information.svg';
 import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '@/../../common/script/constants';
 import { userStateMixin } from '../../mixins/userState';
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 // @TODO: Not sure the best way to pass party creating status
 // Since we need the modal in the header, passing props doesn't work
@@ -410,64 +411,7 @@ export default {
        allowGuildInvitationsFromNonMembers: true,
        bannedWordsAllowed: null,
      },
-      categoryOptions: [
+      categoryOptions: CategoryOptions,
        {
          label: 'habitica_official',
          key: 'habitica_official',
        },
        {
          label: 'academics',
          key: 'academics',
        },
        {
          label: 'advocacy_causes',
          key: 'advocacy_causes',
        },
        {
          label: 'creativity',
          key: 'creativity',
        },
        {
          label: 'entertainment',
          key: 'entertainment',
        },
        {
          label: 'finance',
          key: 'finance',
        },
        {
          label: 'health_fitness',
          key: 'health_fitness',
        },
        {
          label: 'hobbies_occupations',
          key: 'hobbies_occupations',
        },
        {
          label: 'location_based',
          key: 'location_based',
        },
        {
          label: 'mental_health',
          key: 'mental_health',
        },
        {
          label: 'getting_organized',
          key: 'getting_organized',
        },
        {
          label: 'recovery_support_groups',
          key: 'recovery_support_groups',
        },
        {
          label: 'spirituality',
          key: 'spirituality',
        },
        {
          label: 'time_management',
          key: 'time_management',
        },
      ],
      showCategorySelect: false,
      members: [],
      inviteMembers: false,
--- a/website/client/src/components/groups/groupPlan.vue
+++ b/website/client/src/components/groups/groupPlan.vue
@@ -1,6 +1,7 @@
 <template>
  <!-- @TODO: Move to group plans folder-->
  <div>
    <group-plan-creation-modal />
    <div>
      <div class="header">
        <h1 class="text-center">
@@ -51,6 +52,7 @@
          </div>
        </div>
      </div>
      <!-- Upgrading an existing group -->
      <div
        v-if="upgradingGroup._id"
        id="upgrading-group"
@@ -92,7 +94,6 @@
              </div>
            </div>
            <div class="box payment-providers">
              <h3>Choose your payment method</h3>
              <payments-buttons
                :stripe-fn="() => pay(PAYMENTS.STRIPE)"
                :amazon-data="pay(PAYMENTS.AMAZON)"
@@ -101,154 +102,53 @@
          </div>
        </div>
      </div>
      <!-- Create a new group -->
      <div
        v-if="!upgradingGroup._id"
        class="container col-6 offset-3 create-option"
      >
        <div class="row">
          <h1 class="col-12 text-center purple-header">
-            Create your Group today!
+            Create Your Group Today!
          </h1>
        </div>
        <div class="row">
          <div class="col-12 text-center">
            <button
              class="btn btn-primary create-group"
-              @click="launchModal('create')"
+              @click="launchModal('create-page')"
            >
-              Create Your New Group
+              Create Your New Group!
            </button>
          </div>
        </div>
-        <div class="row pricing">
+        <div class="row pricing justify-content-center align-items-center">
-          <div class="col-5">
+          <div class="dollar">
-            <div class="dollar">
+            $
              $
            </div>
            <div class="number">
              9
            </div>
            <div class="name">
              <div>Group Owner</div>
              <div>Subscription</div>
            </div>
          </div>
-          <div class="col-1">
+          <div class="number">
-            <div class="plus">
+            9
              +
            </div>
          </div>
-          <div class="col-6">
+          <div class="name">
-            <div class="dollar">
+            <div>Group Owner</div>
-              $
+            <div>Subscription</div>
-            </div>
+          </div>
-            <div class="number">
+          <div class="plus">
-              3
+            +
-            </div>
+          </div>
-            <div class="name">
+          <div class="dollar">
-              <div>Each Additional</div>
+            $
-              <div>Member</div>
+          </div>
-            </div>
+          <div class="number">
            3
          </div>
          <div class="name">
            <div>Each Additional</div>
            <div>Member</div>
          </div>
        </div>
      </div>
    </div>
    <b-modal
      id="group-plan-modal"
      :title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
      size="md"
      hide-footer="hide-footer"
    >
      <div
        v-if="activePage === PAGES.CREATE_GROUP"
        class="col-12"
      >
        <div class="form-group">
          <label
            class="control-label"
            for="new-group-name"
          >Name</label>
          <input
            id="new-group-name"
            v-model="newGroup.name"
            class="form-control input-medium option-content"
            required="required"
            type="text"
            placeholder="Name"
          >
        </div>
        <div class="form-group">
          <label for="new-group-description">{{ $t('description') }}</label>
          <textarea
            id="new-group-description"
            v-model="newGroup.description"
            class="form-control option-content"
            cols="3"
            :placeholder="$t('description')"
          ></textarea>
        </div>
        <div
          v-if="type === 'guild'"
          class="form-group"
        >
          <div class="custom-control custom-radio">
            <input
              v-model="newGroup.privacy"
              class="custom-control-input"
              type="radio"
              name="new-group-privacy"
              value="private"
            >
            <label class="custom-control-label">{{ $t('inviteOnly') }}</label>
          </div>
        </div>
        <div class="form-group">
          <div class="custom-control custom-checkbox">
            <input
              id="create-group-leaderOnlyChallenges-checkbox"
              v-model="newGroup.leaderOnly.challenges"
              class="custom-control-input"
              type="checkbox"
            >
            <label
              class="custom-control-label"
              for="create-group-leaderOnlyChallenges-checkbox"
            >{{ $t('leaderOnlyChallenges') }}</label>
          </div>
        </div>
        <div
          v-if="type === 'party'"
          class="form-group"
        >
          <button
            class="btn btn-secondary form-control"
            :value="$t('create')"
            @click="createGroup()"
          ></button>
        </div>
        <div class="form-group">
          <button
            class="btn btn-primary btn-lg btn-block"
            :disabled="!newGroupIsReady"
            @click="createGroup()"
          >
            {{ $t('create') }}
          </button>
        </div>
      </div>
      <div
        v-if="activePage === PAGES.PAY"
        class="col-12"
      >
        <div class="text-center">
          <h3>Choose your payment method</h3>
          <payments-buttons
            :stripe-fn="() => pay(PAYMENTS.STRIPE)"
            :amazon-data="pay(PAYMENTS.AMAZON)"
          />
        </div>
      </div>
    </b-modal>
  </div>
 </template>
@@ -260,12 +160,17 @@
    .dollar {
      position: absolute;
-      left: -1em;
+      left: -16px;
-      top: 1em;
+      top: 16px;
    }
    .purple-box {
      color: #bda8ff;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
    }
    .number {
@@ -279,6 +184,8 @@
    .payment-providers {
      width: 350px;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
@@ -286,9 +193,9 @@
    background: #432874;
    background: linear-gradient(180deg, #4F2A93 0%, #432874 100%);
    color: #fff;
-    padding: 2em;
+    padding: 32px;
    height: 340px;
-    margin-bottom: 2em;
+    margin-bottom: 32px;
    margin-left: -12px;
    margin-right: -12px;
@@ -312,6 +219,7 @@
    .box {
      height: 416px;
      border-radius: 8px;
    }
    h2 {
@@ -354,17 +262,19 @@
  button.create-group {
    width: 330px;
    height: 96px;
    border-radius: 8px;
    font-size: 1.5rem;
  }
  .purple-header {
    color: #6133b4;
    font-size: 48px;
-    margin-top: 1em;
+    margin-top: 16px;
  }
  .pricing {
-    margin-top: 2em;
+    margin-top: 32px;
-    margin-bottom: 4em;
+    margin-bottom: 64px;
    .dollar, .number, .name {
      display: inline-block;
@@ -373,35 +283,41 @@
    }
    .plus {
-      font-size: 34px;
+      font-size: 2.125rem;
      color: #a5a1ac;
      margin-left: 16px;
      margin-right: 16px;
    }
    .dollar {
-      margin-bottom: 1.5em;
+      margin-bottom: 24px;
-      font-size: 32px;
+      font-size: 2rem;
      font-weight: bold;
    }
    .name {
-      font-size: 24px;
+      font-size: 1.5rem;
-      margin-bottom: .8em;
+      margin-left: 8px;
-      margin-left: .5em;
+      margin-right: 8px;
    }
    .number {
-      font-size: 72px;
+      font-size: 4.5rem;
      font-weight: bolder;
    }
  }
  .payment-options {
-    margin-bottom: 4em;
+    margin-bottom: 64px;
    h4 {
      color: #34313a;
    }
    .purple-box {
      background-color: #4f2a93;
      color: #fff;
-      padding: .5em;
+      padding: 8px;
      border-radius: 8px;
      width: 200px;
      height: 215px;
@@ -415,7 +331,7 @@
      .name {
        width: 100px;
-        margin-left: .3em;
+        margin-left: 4.8px;
      }
      .plus {
@@ -440,10 +356,12 @@ import paymentsMixin from '../../mixins/payments';
 import { mapState } from '@/libs/store';
 import positiveIcon from '@/assets/svg/positive.svg';
 import paymentsButtons from '@/components/payments/buttons/list';
 import groupPlanCreationModal from '../group-plans/groupPlanCreationModal';
 export default {
  components: {
    paymentsButtons,
    groupPlanCreationModal,
  },
  mixins: [paymentsMixin],
  data () {
@@ -492,12 +410,7 @@ export default {
  },
  methods: {
    launchModal () {
-      this.changePage(this.PAGES.CREATE_GROUP);
+      this.$root.$emit('bv::show::modal', 'create-group');
      this.$root.$emit('bv::show::modal', 'group-plan-modal');
    },
    changePage (page) {
      this.activePage = page;
      window.scrollTo(0, 0);
    },
    createGroup () {
      this.changePage(this.PAGES.PAY);
--- a/website/client/src/components/groups/groupSidebar.vue
+++ b/website/client/src/components/groups/groupSidebar.vue
@@ -86,6 +86,7 @@
 import throttle from 'lodash/throttle';
 import FilterSidebar from '@/components/ui/filterSidebar';
 import FilterGroup from '@/components/ui/filterGroup';
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 // TODO use checkbox-component to add/remove entries to *Filters, but without the v-model binding
@@ -94,64 +95,7 @@ export default {
  data () {
    return {
      categoryFilters: [],
-      categoryOptions: [
+      categoryOptions: CategoryOptions,
        {
          label: 'habitica_official',
          key: 'habitica_official',
        },
        {
          label: 'academics',
          key: 'academics',
        },
        {
          label: 'advocacy_causes',
          key: 'advocacy_causes',
        },
        {
          label: 'creativity',
          key: 'creativity',
        },
        {
          label: 'entertainment',
          key: 'entertainment',
        },
        {
          label: 'finance',
          key: 'finance',
        },
        {
          label: 'health_fitness',
          key: 'health_fitness',
        },
        {
          label: 'hobbies_occupations',
          key: 'hobbies_occupations',
        },
        {
          label: 'location_based',
          key: 'location_based',
        },
        {
          label: 'mental_health',
          key: 'mental_health',
        },
        {
          label: 'getting_organized',
          key: 'getting_organized',
        },
        {
          label: 'recovery_support_groups',
          key: 'recovery_support_groups',
        },
        {
          label: 'spirituality',
          key: 'spirituality',
        },
        {
          label: 'time_management',
          key: 'time_management',
        },
      ],
      roleFilters: [],
      roleOptions: [
        {
--- a/website/client/src/components/groups/inviteModal.vue
+++ b/website/client/src/components/groups/inviteModal.vue
@@ -78,7 +78,6 @@
  @import '~@/assets/scss/colors.scss';
  a:not([href]) {
    color: $blue-10;
    font-size: 16px;
  }
--- a/website/client/src/components/groups/questDetailModal.vue
+++ b/website/client/src/components/groups/questDetailModal.vue
@@ -245,10 +245,6 @@
    text-align: center;
    color: $gray-100;
    a {
      color: $blue-10;
    }
  }
  #quest-detail-modal {
--- a/website/client/src/components/groups/questSidebarSection.vue
+++ b/website/client/src/components/groups/questSidebarSection.vue
@@ -377,11 +377,9 @@
      .members-invited {
        min-height: 1rem;
        color: $blue-10;
        margin: 0;
        &:hover, &:focus {
          color: $blue-10;
          text-decoration: underline;
        }
      }
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1 @@`
							`<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" fill="none"/><g id="b"><g id="c"><g id="d"><polygon id="e" points="12.2 2 14 3.8 9.8 8 14 12.2 12.2 14 8 9.8 3.8 14 2 12.2 6.2 8 2 3.8 3.8 2 8 6.2 12.2 2"/></g></g></g></svg>`