4.273.1

* feat(content): add June subscriber items

* feat(content): add July backgrounds and Enchanted Armoire items

* feat(fix): correct sizing for aquarium background

* fix(strings): JSON formatting

* fix(sprites): add missing broad variant

---------

Co-authored-by: SabreCat <sabe@habitica.com>

config.json.example

@@ -86,5 +86,6 @@
   "RATE_LIMITER_ENABLED": "false",
   "REDIS_HOST": "aaabbbcccdddeeefff",
   "REDIS_PORT": "1234",
-  "REDIS_PASSWORD": "12345678"
+  "REDIS_PASSWORD": "12345678",
+  "TRUSTED_DOMAINS": "https://localhost,https://habitica.com"
 }

migrations/archive/2023/20230522_pet_group_achievements.js

@@ -0,0 +1,158 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20230522_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['Parrot-Base']
+      && pets['Parrot-CottonCandyBlue']
+      && pets['Parrot-CottonCandyPink']
+      && pets['Parrot-Desert']
+      && pets['Parrot-Golden']
+      && pets['Parrot-Red']
+      && pets['Parrot-Shade']
+      && pets['Parrot-Skeleton']
+      && pets['Parrot-White']
+      && pets['Parrot-Zombie']
+      && pets['Rooster-Base']
+      && pets['Rooster-CottonCandyBlue']
+      && pets['Rooster-CottonCandyPink']
+      && pets['Rooster-Desert']
+      && pets['Rooster-Golden']
+      && pets['Rooster-Red']
+      && pets['Rooster-Shade']
+      && pets['Rooster-Skeleton']
+      && pets['Rooster-White']
+      && pets['Rooster-Zombie']
+      && pets['Triceratops-Base']
+      && pets['Triceratops-CottonCandyBlue']
+      && pets['Triceratops-CottonCandyPink']
+      && pets['Triceratops-Desert']
+      && pets['Triceratops-Golden']
+      && pets['Triceratops-Red']
+      && pets['Triceratops-Shade']
+      && pets['Triceratops-Skeleton']
+      && pets['Triceratops-White']
+      && pets['Triceratops-Zombie']
+      && pets['TRex-Base']
+      && pets['TRex-CottonCandyBlue']
+      && pets['TRex-CottonCandyPink']
+      && pets['TRex-Desert']
+      && pets['TRex-Golden']
+      && pets['TRex-Red']
+      && pets['TRex-Shade']
+      && pets['TRex-Skeleton']
+      && pets['TRex-White']
+      && pets['TRex-Zombie']
+      && pets['Pterodactyl-Base']
+      && pets['Pterodactyl-CottonCandyBlue']
+      && pets['Pterodactyl-CottonCandyPink']
+      && pets['Pterodactyl-Desert']
+      && pets['Pterodactyl-Golden']
+      && pets['Pterodactyl-Red']
+      && pets['Pterodactyl-Shade']
+      && pets['Pterodactyl-Skeleton']
+      && pets['Pterodactyl-White']
+      && pets['Pterodactyl-Zombie']
+      && pets['Owl-Base']
+      && pets['Owl-CottonCandyBlue']
+      && pets['Owl-CottonCandyPink']
+      && pets['Owl-Desert']
+      && pets['Owl-Golden']
+      && pets['Owl-Red']
+      && pets['Owl-Shade']
+      && pets['Owl-Skeleton']
+      && pets['Owl-White']
+      && pets['Owl-Zombie']
+      && pets['Velociraptor-Base']
+      && pets['Velociraptor-CottonCandyBlue']
+      && pets['Velociraptor-CottonCandyPink']
+      && pets['Velociraptor-Desert']
+      && pets['Velociraptor-Golden']
+      && pets['Velociraptor-Red']
+      && pets['Velociraptor-Shade']
+      && pets['Velociraptor-Skeleton']
+      && pets['Velociraptor-White']
+      && pets['Velociraptor-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['Falcon-Base']
+      && pets['Falcon-CottonCandyBlue']
+      && pets['Falcon-CottonCandyPink']
+      && pets['Falcon-Desert']
+      && pets['Falcon-Golden']
+      && pets['Falcon-Red']
+      && pets['Falcon-Shade']
+      && pets['Falcon-Skeleton']
+      && pets['Falcon-White']
+      && pets['Falcon-Zombie']
+      && pets['Peacock-Base']
+      && pets['Peacock-CottonCandyBlue']
+      && pets['Peacock-CottonCandyPink']
+      && pets['Peacock-Desert']
+      && pets['Peacock-Golden']
+      && pets['Peacock-Red']
+      && pets['Peacock-Shade']
+      && pets['Peacock-Skeleton']
+      && pets['Peacock-White']
+      && pets['Peacock-Zombie']) {
+        set['achievements.dinosaurDynasty'] = 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('2023-04-15') },
+  };
+
+  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
+  }
+};

package.json

@@ -1,12 +1,12 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.264.1",
+  "version": "4.273.1",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/register": "^7.18.9",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/register": "^7.21.0",
     "@google-cloud/trace-agent": "^7.1.2",
     "@parse/node-apn": "^5.1.3",
     "@slack/webhook": "^6.1.0",
@@ -14,9 +14,9 @@
     "amazon-payments": "^0.2.9",
     "amplitude": "^6.0.0",
     "apidoc": "^0.54.0",
-    "apple-auth": "^1.0.7",
+    "apple-auth": "^1.0.9",
     "bcrypt": "^5.1.0",
-    "body-parser": "^1.20.1",
+    "body-parser": "^1.20.2",
     "bootstrap": "^4.6.0",
     "compression": "^1.7.4",
     "cookie-session": "^2.0.0",
@@ -42,7 +42,7 @@
     "image-size": "^1.0.2",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^5.0.0",
-    "jsonwebtoken": "^8.5.1",
+    "jsonwebtoken": "^9.0.0",
     "jwks-rsa": "^2.1.5",
     "lodash": "^4.17.21",
     "merge-stream": "^2.0.0",
@@ -67,8 +67,8 @@
     "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
     "short-uuid": "^4.2.2",
-    "stripe": "^11.10.0",
-    "superagent": "^8.0.6",
+    "stripe": "^12.6.0",
+    "superagent": "^8.0.9",
     "universal-analytics": "^0.5.3",
     "useragent": "^2.1.9",
     "uuid": "^9.0.0",
@@ -76,7 +76,7 @@
     "vinyl-buffer": "^1.0.1",
     "winston": "^3.8.2",
     "winston-loggly-bulk": "^3.2.1",
-    "xml2js": "^0.4.23"
+    "xml2js": "^0.5.0"
   },
   "private": true,
   "engines": {
@@ -110,7 +110,7 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "axios": "^1.2.2",
+    "axios": "^1.3.6",
     "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
@@ -122,7 +122,7 @@
     "monk": "^7.3.4",
     "require-again": "^2.0.0",
     "run-rs": "^0.7.7",
-    "sinon": "^15.0.1",
+    "sinon": "^15.1.0",
     "sinon-chai": "^3.7.0",
     "sinon-stub-promise": "^4.0.0"
   },

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';
-      user1.purchased.plan.dateUpdated = moment().toDate();
-      user1.purchased.plan.planId = 'basic';
-      user1.purchased.plan.consecutive.count = 0;
-      user1.purchased.plan.consecutive.offset = 0;
-      user1.purchased.plan.consecutive.trinkets = 0;
-      user1.purchased.plan.consecutive.gemCapExtra = 0;
+      beforeEach(async () => {
+        user1.purchased.plan.customerId = 'subscribedId';
+        user1.purchased.plan.dateUpdated = moment().toDate();
+        user1.purchased.plan.planId = 'basic';
+        user1.purchased.plan.consecutive.count = 0;
+        user1.purchased.plan.perkMonthCount = 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';
-      user3.purchased.plan.dateUpdated = moment().toDate();
-      user3.purchased.plan.planId = 'basic_3mo';
-      user3.purchased.plan.consecutive.count = 0;
-      user3.purchased.plan.consecutive.offset = 3;
-      user3.purchased.plan.consecutive.trinkets = 1;
-      user3.purchased.plan.consecutive.gemCapExtra = 5;
+      beforeEach(async () => {
+        user3.purchased.plan.customerId = 'subscribedId';
+        user3.purchased.plan.dateUpdated = moment().toDate();
+        user3.purchased.plan.planId = 'basic_3mo';
+        user3.purchased.plan.perkMonthCount = 0;
+        user3.purchased.plan.consecutive.count = 0;
+        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';
-      user6.purchased.plan.dateUpdated = moment().toDate();
-      user6.purchased.plan.planId = 'google_6mo';
-      user6.purchased.plan.consecutive.count = 0;
-      user6.purchased.plan.consecutive.offset = 6;
-      user6.purchased.plan.consecutive.trinkets = 2;
-      user6.purchased.plan.consecutive.gemCapExtra = 10;
+      beforeEach(async () => {
+        user6.purchased.plan.customerId = 'subscribedId';
+        user6.purchased.plan.dateUpdated = moment().toDate();
+        user6.purchased.plan.planId = 'google_6mo';
+        user6.purchased.plan.perkMonthCount = 0;
+        user6.purchased.plan.consecutive.count = 0;
+        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')

test/api/unit/libs/payments/apple.test.js

@@ -29,8 +29,9 @@ describe('Apple Payments', () => {
         .resolves();
       iapValidateStub = sinon.stub(iap, 'validate')
         .resolves({});
-      iapIsValidatedStub = sinon.stub(iap, 'isValidated')
-        .returns(true);
+      iapIsValidatedStub = sinon.stub(iap, 'isValidated').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',
@@ -44,6 +45,8 @@ describe('Apple Payments', () => {
       iap.setup.restore();
       iap.validate.restore();
       iap.isValidated.restore();
+      iap.isExpired.restore();
+      iap.isCanceled.restore();
       iap.getPurchaseData.restore();
       payments.buySkuItem.restore();
       gems.validateGiftMessage.restore();
@@ -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,21 +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 () => {
-      payments.createSubscription.restore();
-      user = new User();
-      await user.save();
+    it('uses the most recent subscription data', async () => {
+      iap.getPurchaseData.restore();
+      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))
-        .to.eventually.be.rejected.and.to.eql({
-          httpCode: 401,
-          name: 'NotAuthorized',
-          message: applePayments.constants.RESPONSE_ALREADY_USED,
-        });
+      expect(paymentsCreateSubscritionStub).to.be.calledOnce;
+      expect(paymentsCreateSubscritionStub).to.be.calledWith({
+        user,
+        customerId: `${token}newest`,
+        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,
+          });
+      });
     });
   });
 
@@ -360,9 +592,9 @@ describe('Apple Payments', () => {
         });
       iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
         .returns([{ expirationDate: expirationDate.toDate() }]);
-      iapIsValidatedStub = sinon.stub(iap, 'isValidated')
-        .returns(true);
-
+      iapIsValidatedStub = sinon.stub(iap, 'isValidated').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;
@@ -377,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();
     });
@@ -396,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({
@@ -418,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;

test/api/unit/libs/payments/payments.test.js

@@ -203,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';
@@ -213,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;
 
@@ -379,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);
@@ -386,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);
 
@@ -465,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', () => {
@@ -475,9 +748,19 @@ describe('payments/index', () => {
       });
 
       it('does not add to plans.consecutive.offset if 1 month subscription', async () => {
+        data.sub.key = 'basic_earned';
         await api.createSubscription(data);
 
-        expect(user.purchased.plan.extraMonths).to.eql(0);
+        expect(user.purchased.plan.consecutive.offset).to.eql(0);
+      });
+
+      it('resets plans.consecutive.offset if 1 month subscription', async () => {
+        user.purchased.plan.consecutive.offset = 1;
+        await user.save();
+        data.sub.key = 'basic_earned';
+        await api.createSubscription(data);
+
+        expect(user.purchased.plan.consecutive.offset).to.eql(0);
       });
 
       it('adds 5 to plan.consecutive.gemCapExtra for 3 month block', async () => {
@@ -488,7 +771,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);
@@ -496,7 +778,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);
@@ -532,6 +813,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', () => {

test/api/unit/middlewares/cronMiddleware.js

@@ -242,7 +242,7 @@ describe('cron middleware', () => {
 
     sandbox.spy(cronLib, 'recoverCron');
 
-    sandbox.stub(User, 'update')
+    sandbox.stub(User, 'updateOne')
       .withArgs({
         _id: user._id,
         $or: [

test/api/unit/models/group.test.js

@@ -1732,7 +1732,7 @@ describe('Group Model', () => {
         });
 
         it('updates participting members (not including user)', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateMany');
 
           await party.startQuest(nonParticipatingMember);
 
@@ -1740,7 +1740,7 @@ describe('Group Model', () => {
             questLeader._id, participatingMember._id, sleepingParticipatingMember._id,
           ];
 
-          expect(User.update).to.be.calledWith(
+          expect(User.updateMany).to.be.calledWith(
             { _id: { $in: members } },
             {
               $set: {
@@ -1753,11 +1753,11 @@ describe('Group Model', () => {
         });
 
         it('updates non-user quest leader and decrements quest scroll', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateOne');
 
           await party.startQuest(participatingMember);
 
-          expect(User.update).to.be.calledWith(
+          expect(User.updateOne).to.be.calledWith(
             { _id: questLeader._id },
             {
               $inc: {
@@ -1819,29 +1819,29 @@ describe('Group Model', () => {
         };
 
         it('doesn\'t retry successful operations', async () => {
-          sandbox.stub(User, 'update').returns(successfulMock);
+          sandbox.stub(User, 'updateOne').returns(successfulMock);
 
           await party.finishQuest(quest);
 
-          expect(User.update).to.be.calledThrice;
+          expect(User.updateOne).to.be.calledThrice;
         });
 
         it('stops retrying when a successful update has occurred', async () => {
-          const updateStub = sandbox.stub(User, 'update');
+          const updateStub = sandbox.stub(User, 'updateOne');
           updateStub.onCall(0).returns(failedMock);
           updateStub.returns(successfulMock);
 
           await party.finishQuest(quest);
 
-          expect(User.update.callCount).to.equal(4);
+          expect(User.updateOne.callCount).to.equal(4);
         });
 
         it('retries failed updates at most five times per user', async () => {
-          sandbox.stub(User, 'update').returns(failedMock);
+          sandbox.stub(User, 'updateOne').returns(failedMock);
 
           await expect(party.finishQuest(quest)).to.eventually.be.rejected;
 
-          expect(User.update.callCount).to.eql(15); // for 3 users
+          expect(User.updateOne.callCount).to.eql(15); // for 3 users
         });
       });
 
@@ -2088,17 +2088,17 @@ describe('Group Model', () => {
 
       context('Party quests', () => {
         it('updates participating members with rewards', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateOne');
           await party.finishQuest(quest);
 
-          expect(User.update).to.be.calledThrice;
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledThrice;
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: questLeader._id,
           });
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: participatingMember._id,
           });
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: sleepingParticipatingMember._id,
           });
         });
@@ -2173,11 +2173,11 @@ describe('Group Model', () => {
         });
 
         it('updates all users with rewards', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateMany');
           await party.finishQuest(tavernQuest);
 
-          expect(User.update).to.be.calledOnce;
-          expect(User.update).to.be.calledWithMatch({});
+          expect(User.updateMany).to.be.calledOnce;
+          expect(User.updateMany).to.be.calledWithMatch({});
         });
 
         it('sets quest completed to the world quest key', async () => {

test/api/v3/integration/groups/POST-groups_groupId_join.test.js

@@ -2,7 +2,6 @@ import { v4 as generateUUID } from 'uuid';
 import {
   generateUser,
   createAndPopulateGroup,
-  checkExistence,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
 
@@ -258,47 +257,6 @@ describe('POST /group/:groupId/join', () => {
         await expect(user.get('/user')).to.eventually.have.nested.property('items.quests.basilist', 2);
       });
 
-      it('deletes previous party where the user was the only member', async () => {
-        const userToInvite = await generateUser();
-        const oldParty = await userToInvite.post('/groups', { // add user to a party
-          name: 'Another Test Party',
-          type: 'party',
-        });
-
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(true);
-        await user.post(`/groups/${party._id}/invite`, {
-          uuids: [userToInvite._id],
-        });
-        await userToInvite.post(`/groups/${party._id}/join`);
-
-        await expect(user.get('/user')).to.eventually.have.nested.property('party._id', party._id);
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(false);
-      });
-
-      it('does not allow user to leave a party if a quest was active and they were the only member', async () => {
-        const userToInvite = await generateUser();
-        const oldParty = await userToInvite.post('/groups', { // add user to a party
-          name: 'Another Test Party',
-          type: 'party',
-        });
-
-        await userToInvite.update({
-          [`items.quests.${PET_QUEST}`]: 1,
-        });
-        await userToInvite.post(`/groups/${oldParty._id}/quests/invite/${PET_QUEST}`);
-
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(true);
-        await user.post(`/groups/${party._id}/invite`, {
-          uuids: [userToInvite._id],
-        });
-
-        await expect(userToInvite.post(`/groups/${party._id}/join`)).to.eventually.be.rejected.and.eql({
-          code: 401,
-          error: 'NotAuthorized',
-          message: t('messageCannotLeaveWhileQuesting'),
-        });
-      });
-
       it('invites joining member to active quest', async () => {
         await user.update({
           [`items.quests.${PET_QUEST}`]: 1,

test/api/v3/integration/groups/POST-groups_invite.test.js

@@ -1,6 +1,7 @@
 import { v4 as generateUUID } from 'uuid';
 import nconf from 'nconf';
 import {
+  createAndPopulateGroup,
   generateUser,
   generateGroup,
   translate as t,
@@ -581,20 +582,7 @@ describe('Post /groups/:groupId/invite', () => {
         });
     });
 
-    it('allow inviting a user to a party if they are partying solo', async () => {
-      const userToInvite = await generateUser();
-      await userToInvite.post('/groups', { // add user to a party
-        name: 'Another Test Party',
-        type: 'party',
-      });
-
-      await inviter.post(`/groups/${party._id}/invite`, {
-        uuids: [userToInvite._id],
-      });
-      expect((await userToInvite.get('/user')).invitations.parties[0].id).to.equal(party._id);
-    });
-
-    it('allow inviting a user to 2 different parties', async () => {
+    it('allows inviting a user to 2 different parties', async () => {
       // Create another inviter
       const inviter2 = await generateUser();
 
@@ -635,29 +623,48 @@ describe('Post /groups/:groupId/invite', () => {
       });
       expect((await userToInvite.get('/user')).invitations.parties[0].id).to.equal(party._id);
     });
+  });
+
+  describe('party size limits', () => {
+    let party;
+    let partyLeader;
+
+    beforeEach(async () => {
+      group = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'Test Party',
+          type: 'party',
+          privacy: 'private',
+        },
+        // Generate party with 20 members
+        members: PARTY_LIMIT_MEMBERS - 10,
+      });
+      party = group.group;
+      partyLeader = group.groupLeader;
+    });
 
     it('allows 30 members in a party', async () => {
       const invitesToGenerate = [];
-      // Generate 29 users to invite (29 + leader = 30 members)
-      for (let i = 0; i < PARTY_LIMIT_MEMBERS - 1; i += 1) {
+      // Generate 10 new invites
+      for (let i = 1; i < 10; i += 1) {
         invitesToGenerate.push(generateUser());
       }
       const generatedInvites = await Promise.all(invitesToGenerate);
       // Invite users
-      expect(await inviter.post(`/groups/${party._id}/invite`, {
+      expect(await partyLeader.post(`/groups/${party._id}/invite`, {
         uuids: generatedInvites.map(invite => invite._id),
       })).to.be.an('array');
     }).timeout(10000);
 
-    it('does not allow 30+ members in a party', async () => {
+    it('does not allow >30 members in a party', async () => {
       const invitesToGenerate = [];
-      // Generate 30 users to invite (30 + leader = 31 members)
-      for (let i = 0; i < PARTY_LIMIT_MEMBERS; i += 1) {
+      // Generate 11 invites
+      for (let i = 1; i < 11; i += 1) {
         invitesToGenerate.push(generateUser());
       }
       const generatedInvites = await Promise.all(invitesToGenerate);
       // Invite users
-      await expect(inviter.post(`/groups/${party._id}/invite`, {
+      await expect(partyLeader.post(`/groups/${party._id}/invite`, {
         uuids: generatedInvites.map(invite => invite._id),
       }))
         .to.eventually.be.rejected.and.eql({

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][1]._id).to.eql(user._id);
-      expect(subscribeStub.args[0][2]).to.eql('receipt');
-      expect(subscribeStub.args[0][3]['x-api-key']).to.eql(user.apiToken);
-      expect(subscribeStub.args[0][3]['x-api-user']).to.eql(user._id);
+      expect(subscribeStub.args[0][0]._id).to.eql(user._id);
+      expect(subscribeStub.args[0][1]).to.eql('receipt');
+      expect(subscribeStub.args[0][2]['x-api-key']).to.eql(user.apiToken);
+      expect(subscribeStub.args[0][2]['x-api-user']).to.eql(user._id);
     });
   });
 });

test/api/v4/user/POST-user_class_cast_spellId.test.js

@@ -202,18 +202,86 @@ describe('POST /user/class/cast/:spellId', () => {
     await group.groupLeader.post('/user/class/cast/mpheal');
 
     promises = [];
+    promises.push(group.groupLeader.sync());
     promises.push(group.members[0].sync());
     promises.push(group.members[1].sync());
     promises.push(group.members[2].sync());
     promises.push(group.members[3].sync());
     await Promise.all(promises);
 
+    expect(group.groupLeader.stats.mp).to.be.equal(170); // spell caster
     expect(group.members[0].stats.mp).to.be.greaterThan(0); // warrior
     expect(group.members[1].stats.mp).to.equal(0); // wizard
     expect(group.members[2].stats.mp).to.be.greaterThan(0); // rogue
     expect(group.members[3].stats.mp).to.be.greaterThan(0); // healer
   });
 
+  const spellList = [
+    {
+      className: 'warrior',
+      spells: [['smash', 'task'], ['defensiveStance'], ['valorousPresence'], ['intimidate']],
+    },
+    {
+      className: 'wizard',
+      spells: [['fireball', 'task'], ['mpheal'], ['earth'], ['frost']],
+    },
+    {
+      className: 'healer',
+      spells: [['heal'], ['brightness'], ['protectAura'], ['healAll']],
+    },
+    {
+      className: 'rogue',
+      spells: [['pickPocket', 'task'], ['backStab', 'task'], ['toolsOfTrade'], ['stealth']],
+    },
+  ];
+
+  spellList.forEach(async habitClass => {
+    describe(`For a ${habitClass.className}`, async () => {
+      habitClass.spells.forEach(async spell => {
+        describe(`Using ${spell[0]}`, async () => {
+          it('Deducts MP from spell caster', async () => {
+            const { groupLeader } = await createAndPopulateGroup({
+              groupDetails: { type: 'party', privacy: 'private' },
+              members: 3,
+            });
+            await groupLeader.update({
+              'stats.mp': 200, 'stats.class': habitClass.className, 'stats.lvl': 20, 'stats.hp': 40,
+            });
+            // need this for task spells and for stealth
+            const task = await groupLeader.post('/tasks/user', {
+              text: 'test habit',
+              type: 'daily',
+            });
+            if (spell.length === 2 && spell[1] === 'task') {
+              await groupLeader.post(`/user/class/cast/${spell[0]}?targetId=${task._id}`);
+            } else {
+              await groupLeader.post(`/user/class/cast/${spell[0]}`);
+            }
+            await groupLeader.sync();
+            expect(groupLeader.stats.mp).to.be.lessThan(200);
+          });
+          it('works without a party', async () => {
+            await user.update({
+              'stats.mp': 200, 'stats.class': habitClass.className, 'stats.lvl': 20, 'stats.hp': 40,
+            });
+            // need this for task spells and for stealth
+            const task = await user.post('/tasks/user', {
+              text: 'test habit',
+              type: 'daily',
+            });
+            if (spell.length === 2 && spell[1] === 'task') {
+              await user.post(`/user/class/cast/${spell[0]}?targetId=${task._id}`);
+            } else {
+              await user.post(`/user/class/cast/${spell[0]}`);
+            }
+            await user.sync();
+            expect(user.stats.mp).to.be.lessThan(200);
+          });
+        });
+      });
+    });
+  });
+
   it('cast bulk', async () => {
     let { group, groupLeader } = await createAndPopulateGroup({ // eslint-disable-line prefer-const
       groupDetails: { type: 'party', privacy: 'private' },

test/common/libs/cron.test.js

@@ -215,6 +215,7 @@ describe('cron utility functions', () => {
 
     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);
 
@@ -224,6 +225,7 @@ describe('cron utility functions', () => {
 
     it('monthly plan, next date in 1 month', () => {
       const user = baseUserData(62, 0, 'group_plan_auto');
+      user.purchased.plan.perkMonthCount = 2;
 
       const planContext = getPlanContext(user, now);
 
@@ -248,5 +250,15 @@ describe('cron utility functions', () => {
       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);
+
+      expect(planContext.nextHourglassDate)
+        .to.be.sameMoment('2022-07-10T02:00:00.144Z');
+    });
   });
 });

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;

test/helpers/api-integration/requester.js

@@ -53,7 +53,8 @@ function _requestMaker (user, method, additionalSets = {}) {
     if (user && user._id && user.apiToken) {
       request
         .set('x-api-user', user._id)
-        .set('x-api-key', user.apiToken);
+        .set('x-api-key', user.apiToken)
+        .set('x-client', 'habitica-web');
     }
 
     if (!isEmpty(additionalSets)) {

website/client/package-lock.json

@@ -1842,9 +1842,9 @@
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.20.7.tgz",
-      "integrity": "sha512-T+A7b1kfjtRM51ssoOfS1+wbyCVqorfyZhT99TvxxLMirPShD8CzKMRepMlCBGM5RpHMbn8s+5MMHnPstJH6mQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
@@ -1870,9 +1870,9 @@
           "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
         },
         "@babel/types": {
-          "version": "7.20.7",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz",
-          "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==",
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
+          "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
           "requires": {
             "@babel/helper-string-parser": "^7.19.4",
             "@babel/helper-validator-identifier": "^7.19.1",
@@ -13318,11 +13318,31 @@
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
           "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
         },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
         },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -13354,6 +13374,35 @@
             "ansi-regex": "^5.0.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "4.1.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+              "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            }
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -16852,9 +16901,9 @@
       }
     },
     "core-js": {
-      "version": "3.27.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
-      "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w=="
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
+      "integrity": "sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg=="
     },
     "core-js-compat": {
       "version": "3.11.0",
@@ -17903,9 +17952,9 @@
       }
     },
     "dompurify": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
-      "integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.3.tgz",
+      "integrity": "sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ=="
     },
     "domutils": {
       "version": "1.7.0",
@@ -21022,6 +21071,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -21382,9 +21436,9 @@
       "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
     },
     "intro.js": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-6.0.0.tgz",
-      "integrity": "sha512-ZUiR6BoLSvPSlLG0boewnWVgji1fE1gBvP/pyw5pgCKXEDQz1mMeUxarggClPNs71UTq364LwSk9zxz17A9gaQ=="
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-7.0.1.tgz",
+      "integrity": "sha512-1oqz6aOz9cGQ3CrtVYhCSo6AkjnXUn302kcIWLaZ3TI4kKssRXDwDSz4VRoGcfC1jN+WfaSJXRBrITz+QVEBzg=="
     },
     "invariant": {
       "version": "2.2.4",
@@ -21964,9 +22018,9 @@
       }
     },
     "jquery": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
-      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg=="
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
     },
     "js-message": {
       "version": "1.0.5",
@@ -27312,17 +27366,19 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.34.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
-      "integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
       "requires": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       },
       "dependencies": {
         "anymatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-          "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+          "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
           "requires": {
             "normalize-path": "^3.0.0",
             "picomatch": "^2.0.4"
@@ -27342,18 +27398,18 @@
           }
         },
         "chokidar": {
-          "version": "3.5.1",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-          "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+          "version": "3.5.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+          "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
           "requires": {
-            "anymatch": "~3.1.1",
+            "anymatch": "~3.1.2",
             "braces": "~3.0.2",
-            "fsevents": "~2.3.1",
-            "glob-parent": "~5.1.0",
+            "fsevents": "~2.3.2",
+            "glob-parent": "~5.1.2",
             "is-binary-path": "~2.1.0",
             "is-glob": "~4.0.1",
             "normalize-path": "~3.0.0",
-            "readdirp": "~3.5.0"
+            "readdirp": "~3.6.0"
           }
         },
         "fill-range": {
@@ -27392,9 +27448,9 @@
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
         },
         "readdirp": {
-          "version": "3.5.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-          "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
           "requires": {
             "picomatch": "^2.2.1"
           }
@@ -27746,9 +27802,9 @@
       }
     },
     "smartbanner.js": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.19.1.tgz",
-      "integrity": "sha512-x3alFTlk6pLuqrm9PrYQv1E+86CrEIgPf/KJ+nP5342BmOWstbdR8OwD3TPmM56zHQm4MEr/eoqbEcfTKdvdKw=="
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.19.2.tgz",
+      "integrity": "sha512-hwcGNp5Hza5PJHTmqP6H8q0XBYhloIQyJgdzv0ldz3HQSeEuKB2riVraQXdKuquE6ZU/0M0yubno53xJ/ZiQQg=="
     },
     "snapdragon": {
       "version": "0.8.2",
@@ -28120,9 +28176,9 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
     "stopword": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/stopword/-/stopword-2.0.7.tgz",
-      "integrity": "sha512-s+uLKAxrproCLrq0Wcd3JAIjlJLx6l80b2Rzt0u8+ra5SzGkHnNG8PS3DfGmYk2TrKePDVLL4SdKYwKpgSLc+w=="
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/stopword/-/stopword-2.0.8.tgz",
+      "integrity": "sha512-btlEC2vEuhCuvshz99hSGsY8GzaP5qzDPQm56j6rR/R38p8xdsOXgU5a6tIgvU/4hcCta1Vlo/2FVXA9m0f8XA=="
     },
     "store2": {
       "version": "2.10.0",
@@ -30216,9 +30272,9 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
     },
     "uuid-browser": {
       "version": "3.1.0",
@@ -30574,76 +30630,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "emojis-list": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-mugen-scroll": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/vue-mugen-scroll/-/vue-mugen-scroll-0.2.6.tgz",

website/client/package.json

@@ -32,8 +32,8 @@
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.23.1",
     "chai": "^4.3.7",
-    "core-js": "^3.27.2",
-    "dompurify": "^2.4.3",
+    "core-js": "^3.30.2",
+    "dompurify": "^3.0.3",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
@@ -41,20 +41,20 @@
     "habitica-markdown": "^3.0.0",
     "hellojs": "^1.20.0",
     "inspectpack": "^4.7.1",
-    "intro.js": "^6.0.0",
-    "jquery": "^3.6.3",
+    "intro.js": "^7.0.1",
+    "jquery": "^3.7.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "nconf": "^0.12.0",
-    "sass": "^1.34.0",
+    "sass": "^1.62.1",
     "sass-loader": "^8.0.2",
-    "smartbanner.js": "^1.19.1",
-    "stopword": "^2.0.7",
+    "smartbanner.js": "^1.19.2",
+    "stopword": "^2.0.8",
     "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",
+    "uuid": "^9.0.0",
     "validator": "^13.9.0",
     "vue": "^2.7.10",
     "vue-cli-plugin-storybook": "2.1.0",
@@ -66,6 +66,6 @@
     "webpack": "^4.46.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.20.7"
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0"
   }
 }

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" />
+      <external-link-modal />
       <birthday-modal />
       <snackbars />
       <router-view v-if="!isUserLoggedIn || isStaticPage" />
@@ -175,6 +176,7 @@ import amazonPaymentsModal from '@/components/payments/amazonModal';
 import paymentsSuccessModal from '@/components/payments/successModal';
 import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
 import subCanceledModal from '@/components/payments/canceledModal';
+import externalLinkModal from '@/components/externalLinkModal.vue';
 
 import spellsMixin from '@/mixins/spells';
 import {
@@ -210,6 +212,7 @@ export default {
     subCanceledModal,
     bugReportModal,
     bugReportSuccessModal,
+    externalLinkModal,
   },
   mixins: [notifications, spellsMixin],
   data () {

website/client/src/assets/css/sprites/spritesmith-main.css

@@ -138,6 +138,11 @@
   width: 48px;
   height: 52px;
 }
+.achievement-dinosaurDynasty2x {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-dinosaurDynasty2x.png');
+  width: 68px;
+  height: 68px;
+}
 .achievement-domesticated2x {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-domesticated2x.png');
   width: 60px;
@@ -810,6 +815,11 @@
   width: 141px;
   height: 147px;
 }
+.background_crater_lake {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_crater_lake.png');
+  width: 141px;
+  height: 147px;
+}
 .background_creepy_castle {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_creepy_castle.png');
   width: 141px;
@@ -820,6 +830,11 @@
   width: 141px;
   height: 147px;
 }
+.background_cretaceous_forest {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_cretaceous_forest.png');
+  width: 141px;
+  height: 147px;
+}
 .background_crosscountry_ski_trail {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_crosscountry_ski_trail.png');
   width: 141px;
@@ -1054,6 +1069,11 @@
   width: 141px;
   height: 147px;
 }
+.background_flying_over_hedge_maze {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_flying_over_hedge_maze.png');
+  width: 141px;
+  height: 147px;
+}
 .background_flying_over_icy_steppes {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_flying_over_icy_steppes.png');
   width: 141px;
@@ -1329,11 +1349,21 @@
   width: 141px;
   height: 147px;
 }
+.background_in_a_painting {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_in_a_painting.png');
+  width: 141px;
+  height: 147px;
+}
 .background_in_an_ancient_tomb {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_in_an_ancient_tomb.png');
   width: 141px;
   height: 147px;
 }
+.background_in_an_aquarium {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_in_an_aquarium.png');
+  width: 141px;
+  height: 147px;
+}
 .background_in_front_of_fountain {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_in_front_of_fountain.png');
   width: 141px;
@@ -1354,6 +1384,11 @@
   width: 141px;
   height: 147px;
 }
+.background_inside_adventurers_hideout {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_inside_adventurers_hideout.png');
+  width: 141px;
+  height: 147px;
+}
 .background_inside_an_ornament {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_inside_an_ornament.png');
   width: 141px;
@@ -1389,6 +1424,11 @@
   width: 141px;
   height: 147px;
 }
+.background_leafy_tree_tunnel {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_leafy_tree_tunnel.png');
+  width: 141px;
+  height: 147px;
+}
 .background_lighthouse_shore {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_lighthouse_shore.png');
   width: 141px;
@@ -1839,6 +1879,11 @@
   width: 141px;
   height: 147px;
 }
+.background_springtime_shower {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_springtime_shower.png');
+  width: 141px;
+  height: 147px;
+}
 .background_stable {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_stable.png');
   width: 141px;
@@ -2024,6 +2069,11 @@
   width: 141px;
   height: 147px;
 }
+.background_under_wisteria {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_under_wisteria.png');
+  width: 141px;
+  height: 147px;
+}
 .background_underwater_among_koi {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_underwater_among_koi.png');
   width: 141px;
@@ -2481,6 +2531,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_crater_lake {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_crater_lake.png');
+  width: 60px;
+  height: 60px;
+}
 .icon_background_creepy_castle {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_creepy_castle.png');
   width: 60px;
@@ -2491,6 +2546,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_cretaceous_forest {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_cretaceous_forest.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_crosscountry_ski_trail {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_crosscountry_ski_trail.png');
   width: 68px;
@@ -2725,6 +2785,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_flying_over_hedge_maze {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_flying_over_hedge_maze.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_flying_over_icy_steppes {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_flying_over_icy_steppes.png');
   width: 68px;
@@ -3000,11 +3065,21 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_in_a_painting {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_in_a_painting.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_in_an_ancient_tomb {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_in_an_ancient_tomb.png');
   width: 68px;
   height: 68px;
 }
+.icon_background_in_an_aquarium {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_in_an_aquarium.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_in_front_of_fountain {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_in_front_of_fountain.png');
   width: 68px;
@@ -3025,6 +3100,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_inside_adventurers_hideout {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_inside_adventurers_hideout.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_inside_an_ornament {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_inside_an_ornament.png');
   width: 68px;
@@ -3060,6 +3140,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_leafy_tree_tunnel {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_leafy_tree_tunnel.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_lighthouse_shore {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_lighthouse_shore.png');
   width: 68px;
@@ -3510,6 +3595,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_springtime_shower {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_springtime_shower.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_stable {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_stable.png');
   width: 68px;
@@ -3700,6 +3790,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_under_wisteria {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_under_wisteria.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_underwater_among_koi {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_underwater_among_koi.png');
   width: 68px;
@@ -18315,6 +18410,11 @@
   width: 114px;
   height: 90px;
 }
+.broad_armor_armoireDiagonalRainbowShirt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoireDiagonalRainbowShirt.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_alchemistsRobe {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_alchemistsRobe.png');
   width: 114px;
@@ -18425,6 +18525,11 @@
   width: 90px;
   height: 90px;
 }
+.broad_armor_armoire_diagonalRainbowShirt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_diagonalRainbowShirt.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_doubletOfClubs {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_doubletOfClubs.png');
   width: 114px;
@@ -18610,6 +18715,11 @@
   width: 90px;
   height: 90px;
 }
+.broad_armor_armoire_paintersApron {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_paintersApron.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_pirateOutfit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_pirateOutfit.png');
   width: 114px;
@@ -18720,6 +18830,11 @@
   width: 114px;
   height: 90px;
 }
+.broad_armor_armoire_stripedRainbowShirt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_stripedRainbowShirt.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_stripedSwimsuit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_stripedSwimsuit.png');
   width: 90px;
@@ -18835,6 +18950,11 @@
   width: 90px;
   height: 90px;
 }
+.head_armoire_beaniePropellerHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_beaniePropellerHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_bigWig {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_bigWig.png');
   width: 90px;
@@ -19095,6 +19215,11 @@
   width: 90px;
   height: 90px;
 }
+.head_armoire_paintersBeret {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_paintersBeret.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_paperBag {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_paperBag.png');
   width: 90px;
@@ -19435,6 +19560,11 @@
   width: 90px;
   height: 90px;
 }
+.shield_armoire_paintersPalette {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_paintersPalette.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_armoire_perchingFalcon {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_perchingFalcon.png');
   width: 90px;
@@ -19690,6 +19820,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_armor_armoire_diagonalRainbowShirt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_diagonalRainbowShirt.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_armoire_doubletOfClubs {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_doubletOfClubs.png');
   width: 68px;
@@ -19875,6 +20010,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_armor_armoire_paintersApron {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_paintersApron.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_armoire_pirateOutfit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_pirateOutfit.png');
   width: 68px;
@@ -19985,6 +20125,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_armor_armoire_stripedRainbowShirt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_stripedRainbowShirt.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_armoire_stripedSwimsuit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_stripedSwimsuit.png');
   width: 68px;
@@ -20115,6 +20260,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_head_armoire_beaniePropellerHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_beaniePropellerHat.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_head_armoire_bigWig {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_bigWig.png');
   width: 68px;
@@ -20375,6 +20525,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_head_armoire_paintersBeret {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_paintersBeret.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_head_armoire_paperBag {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_paperBag.png');
   width: 68px;
@@ -20715,6 +20870,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_shield_armoire_paintersPalette {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_armoire_paintersPalette.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_shield_armoire_perchingFalcon {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_armoire_perchingFalcon.png');
   width: 68px;
@@ -21160,6 +21320,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_weapon_armoire_paintbrush {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_armoire_paintbrush.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_weapon_armoire_paperCutter {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_armoire_paperCutter.png');
   width: 68px;
@@ -21430,6 +21595,11 @@
   width: 90px;
   height: 90px;
 }
+.slim_armor_armoire_diagonalRainbowShirt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_diagonalRainbowShirt.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_doubletOfClubs {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_doubletOfClubs.png');
   width: 114px;
@@ -21615,6 +21785,11 @@
   width: 90px;
   height: 90px;
 }
+.slim_armor_armoire_paintersApron {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_paintersApron.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_pirateOutfit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_pirateOutfit.png');
   width: 114px;
@@ -21725,6 +21900,11 @@
   width: 114px;
   height: 90px;
 }
+.slim_armor_armoire_stripedRainbowShirt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_stripedRainbowShirt.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_stripedSwimsuit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_stripedSwimsuit.png');
   width: 90px;
@@ -22070,6 +22250,11 @@
   width: 114px;
   height: 90px;
 }
+.weapon_armoire_paintbrush {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_paintbrush.png');
+  width: 114px;
+  height: 90px;
+}
 .weapon_armoire_paperCutter {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_paperCutter.png');
   width: 114px;
@@ -27835,6 +28020,91 @@
   width: 68px;
   height: 68px;
 }
+.broad_armor_mystery_202304 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202304.png');
+  width: 114px;
+  height: 90px;
+}
+.head_mystery_202304 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202304.png');
+  width: 114px;
+  height: 90px;
+}
+.set_mystery_202304 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/set_mystery_202304.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_armor_mystery_202304 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_mystery_202304.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_head_mystery_202304 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_mystery_202304.png');
+  width: 68px;
+  height: 68px;
+}
+.slim_armor_mystery_202304 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202304.png');
+  width: 114px;
+  height: 90px;
+}
+.back_mystery_202305 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_202305.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_mystery_202305 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_mystery_202305.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_back_mystery_202305 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_back_mystery_202305.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_mystery_202305 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_mystery_202305.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_set_mystery_202305 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_set_mystery_202305.png');
+  width: 68px;
+  height: 68px;
+}
+.broad_armor_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202306.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_armor_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_mystery_202306.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_set_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_set_mystery_202306.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_mystery_202306.png');
+  width: 68px;
+  height: 68px;
+}
+.slim_armor_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202306.png');
+  width: 114px;
+  height: 90px;
+}
+.weapon_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_mystery_202306.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_mystery_301404 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_301404.png');
   width: 90px;
@@ -33679,6 +33949,204 @@
   width: 68px;
   height: 68px;
 }
+.headAccessory_special_bearEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_bearEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_blackHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blackHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_blueHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blueHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_cactusEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_cactusEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_foxEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_foxEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_greenHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_greenHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_lionEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_lionEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pandaEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_pandaEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pigEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_pigEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pinkHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pinkHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_redHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_redHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_tigerEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_tigerEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_whiteHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_whiteHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_wolfEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_wolfEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_yellowHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_yellowHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_headAccessory_special_bearEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_bearEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_blackHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blackHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_blueHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blueHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_cactusEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_cactusEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_foxEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_foxEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_greenHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_greenHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_lionEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_lionEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pandaEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pandaEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pigEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pigEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pinkHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pinkHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_redHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_redHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_tigerEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_tigerEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_whiteHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_whiteHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_wolfEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_wolfEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_yellowHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_yellowHeadband.png');
+  width: 68px;
+  height: 68px;
+}
 .head_0 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_0.png');
   width: 90px;
@@ -34060,204 +34528,6 @@
   width: 68px;
   height: 68px;
 }
-.headAccessory_special_bearEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_bearEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_blackHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blackHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_blueHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blueHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_cactusEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_cactusEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_foxEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_foxEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_greenHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_greenHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_lionEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_lionEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pandaEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_pandaEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pigEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_pigEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pinkHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pinkHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_redHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_redHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_tigerEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_tigerEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_whiteHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_whiteHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_wolfEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_wolfEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_yellowHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_yellowHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.shop_headAccessory_special_bearEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_bearEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_blackHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blackHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_blueHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blueHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_cactusEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_cactusEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_foxEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_foxEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_greenHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_greenHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_lionEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_lionEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pandaEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pandaEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pigEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pigEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pinkHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pinkHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_redHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_redHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_tigerEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_tigerEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_whiteHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_whiteHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_wolfEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_wolfEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_yellowHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_yellowHeadband.png');
-  width: 68px;
-  height: 68px;
-}
 .shield_healer_1 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_healer_1.png');
   width: 90px;
@@ -58373,11 +58643,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-HatchingPotion-TeaShop {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-HatchingPotion-TeaShop.png');
-  width: 68px;
-  height: 68px;
-}
 .Pet_HatchingPotion_Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Amber.png');
   width: 68px;
@@ -58623,6 +58888,11 @@
   width: 68px;
   height: 68px;
 }
+.Pet_HatchingPotion_TeaShop {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_TeaShop.png');
+  width: 68px;
+  height: 68px;
+}
 .Pet_HatchingPotion_Thunderstorm {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Thunderstorm.png');
   width: 68px;

website/client/src/assets/scss/animals.scss

@@ -19,8 +19,12 @@
   top: -16px !important;
 }
 
-.Pet.Pet-FlyingPig-Veggie, .Pet.Pet-FlyingPig-Dessert, .Pet.Pet-FlyingPig-VirtualPet {
-  top: -28px !important;
+$foolPets: Veggie, Dessert, VirtualPet, TeaShop;
+
+@each $foolPet in $foolPets {
+  .Pet.Pet-FlyingPig-#{$foolPet} {
+    top: -28px !important;
+  }
 }
 
 .Pet[class*="Virtual"] {

website/client/src/assets/scss/icon.scss

@@ -24,9 +24,9 @@
   }
 }
 
-.icon-16 {
-  width: 16px;
-  height: 16px;
+.icon-10 {
+  width: 10px;
+  height: 10px;
 }
 
 .icon-12 {
@@ -34,21 +34,26 @@
   height: 12px;
 }
 
+.icon-16 {
+  width: 16px;
+  height: 16px;
+}
+
 .icon-24 {
   width: 24px;
   height: 24px;
 }
 
+.icon-32 {
+  width: 32px;
+  height: 32px;
+}
+
 .icon-48 {
   width: 48px;
   height: 48px;
 }
 
-.icon-10 {
-  width: 10px;
-  height: 10px;
-}
-
 .inline {
   display: inline-block;
 }

website/client/src/assets/svg/sync-2.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"><path id="b" d="m10,6h6V0h-2v2.72C12.49.99,10.3,0,8,0,3.59,0,0,3.59,0,8s3.59,8,8,8c2.69,0,5.2-1.35,6.68-3.6l-1.67-1.1c-1.11,1.69-2.99,2.71-5.01,2.7-3.31,0-6-2.69-6-6s2.69-6,6-6c1.72,0,3.33.74,4.46,2h-2.46v2Z" fill-rule="evenodd"/></svg>

website/client/src/components/admin-panel/user-support/cronAndAuth.vue

@@ -22,6 +22,10 @@
         Account created:
         <strong>{{ hero.auth.timestamps.created | formatDate }}</strong>
       </div>
+      <div v-if="hero.flags.thirdPartyTools">
+        User has employed <strong>third party tools</strong>. Last known usage:
+        <strong>{{ hero.flags.thirdPartyTools | formatDate }}</strong>
+      </div>
       <div v-if="cronError">
         "lastCron" value:
         <strong>{{ hero.lastCron | formatDate }}</strong>

website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue

@@ -17,10 +17,18 @@
           Payment schedule ("basic-earned" is monthly):
           <strong>{{ hero.purchased.plan.planId }}</strong>
         </div>
+        <div v-if="hero.purchased.plan.planId == 'group_plan_auto'">
+          Group plan ID:
+          <strong>{{ hero.purchased.plan.owner }}</strong>
+        </div>
         <div v-if="hero.purchased.plan.dateCreated">
           Creation date:
           <strong>{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
         </div>
+        <div v-if="hero.purchased.plan.dateCurrentTypeCreated">
+          Start date for current subscription type:
+          <strong>{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}</strong>
+        </div>
         <div>
           Termination date:
           <strong
@@ -46,6 +54,17 @@
           Perk offset months:
           <strong>{{ hero.purchased.plan.consecutive.offset }}</strong>
         </div>
+        <div class="form-inline">
+          Perk month count:
+          <input
+              v-model="hero.purchased.plan.perkMonthCount"
+              class="form-control"
+              type="number"
+              min="0"
+              max="2"
+              step="1"
+            >
+        </div>
         <div>
           Next Mystic Hourglass:
           <strong>{{ nextHourglassDate }}</strong>
@@ -149,7 +168,7 @@ export default {
     nextHourglassDate () {
       const currentPlanContext = getPlanContext(this.hero, new Date());
 
-      return currentPlanContext.nextHourglassDate.format('MMMM');
+      return currentPlanContext.nextHourglassDate.format('MMMM YYYY');
     },
   },
   methods: {

website/client/src/components/appFooter.vue

@@ -213,7 +213,7 @@
             </a>
             <a
               class="social-circle"
-              href="https://twitter.com/habitica"
+              href="https://twitter.com/habitica/"
               target="_blank"
             >
               <div
@@ -223,7 +223,7 @@
             </a>
             <a
               class="social-circle"
-              href="https://www.facebook.com/Habitica"
+              href="https://www.facebook.com/Habitica/"
               target="_blank"
             >
               <div

website/client/src/components/avatar.vue

@@ -244,7 +244,7 @@ export default {
     petClass () {
       if (some(
         this.currentEventList,
-        event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'virtual',
+        event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'teaShop',
       )) {
         return this.foolPet(this.member.items.currentPet);
       }

website/client/src/components/challenges/challengeDetail.vue

@@ -322,6 +322,7 @@ import omit from 'lodash/omit';
 import { v4 as uuid } from 'uuid';
 
 import { userStateMixin } from '../../mixins/userState';
+import externalLinks from '../../mixins/externalLinks';
 import memberSearchDropdown from '@/components/members/memberSearchDropdown';
 import closeChallengeModal from './closeChallengeModal';
 import Column from '../tasks/column';
@@ -358,7 +359,7 @@ export default {
     userLink,
     groupLink,
   },
-  mixins: [challengeMemberSearchMixin, userStateMixin],
+  mixins: [challengeMemberSearchMixin, externalLinks, userStateMixin],
   props: ['challengeId'],
   data () {
     return {
@@ -414,6 +415,10 @@ export default {
   mounted () {
     if (!this.searchId) this.searchId = this.challengeId;
     if (!this.challenge._id) this.loadChallenge();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   async beforeRouteUpdate (to, from, next) {
     this.searchId = to.params.challengeId;

website/client/src/components/challenges/findChallenges.vue

@@ -120,6 +120,7 @@ import { mapState } from '@/libs/store';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
+import externalLinks from '@/mixins/externalLinks';
 import challengeUtilities from '@/mixins/challengeUtilities';
 
 import positiveIcon from '@/assets/svg/positive.svg';
@@ -131,7 +132,7 @@ export default {
     challengeModal,
     MugenScroll,
   },
-  mixins: [challengeUtilities],
+  mixins: [challengeUtilities, externalLinks],
   data () {
     return {
       loading: true,
@@ -177,6 +178,10 @@ export default {
       section: this.$t('challenges'),
     });
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     updateSearch (eventData) {

website/client/src/components/challenges/groupChallenges.vue

@@ -81,6 +81,8 @@ import challengeModal from './challengeModal';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import challengeItem from './challengeItem';
 import challengeIcon from '@/assets/svg/challenge.svg';
 
@@ -92,6 +94,7 @@ export default {
   directives: {
     markdown: markdownDirective,
   },
+  mixins: [externalLinks],
   props: ['group'],
   data () {
     return {
@@ -118,6 +121,10 @@ export default {
   },
   mounted () {
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     async loadChallenges () {

website/client/src/components/challenges/myChallenges.vue

@@ -145,6 +145,7 @@ import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
 import challengeUtilities from '@/mixins/challengeUtilities';
+import externalLinks from '@/mixins/externalLinks';
 
 import challengeIcon from '@/assets/svg/challenge.svg';
 import positiveIcon from '@/assets/svg/positive.svg';
@@ -156,7 +157,7 @@ export default {
     challengeModal,
     MugenScroll,
   },
-  mixins: [challengeUtilities],
+  mixins: [challengeUtilities, externalLinks],
   data () {
     return {
       icons: Object.freeze({
@@ -203,6 +204,10 @@ export default {
       section: this.$t('challenges'),
     });
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     updateSearch (eventData) {

website/client/src/components/creatorIntro.vue

@@ -183,10 +183,8 @@
           <div
             v-for="bg in backgroundShopSets[0].items"
             :key="bg.key"
+            :id="bg.key"
             class="col-2"
-            :popover-title="bg.text"
-            :popover="bg.notes"
-            popover-trigger="mouseenter"
             @click="unlock('background.' + bg.key)"
           >
             <div
@@ -195,6 +193,13 @@
             >
               <div class="small-rectangle"></div>
             </div>
+            <b-popover
+              :target="bg.key"
+              triggers="hover focus"
+              placement="bottom"
+              :prevent-overflow="false"
+              :content="bg.notes"
+            />
           </div>
         </div>
         <div
@@ -211,16 +216,21 @@
             <div
               v-for="bg in backgroundShopSets[2].items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="unlock('background.' + bg.key)"
             >
               <div
                 class="background"
                 :class="`background_${bg.key}`"
               ></div>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
           </div>
         </div>
@@ -236,10 +246,8 @@
             <div
               v-for="bg in backgroundShopSets[1].items"
               :key="bg.key"
+              :id="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)"
             >
@@ -270,6 +278,13 @@
                   :pinned="isBackgroundPinned(bg)"
                 />
               </span>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
           </div>
         </div>
@@ -302,10 +317,8 @@
             <div
               v-for="bg in set.items"
               :key="bg.key"
+              :id="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)"
             >
@@ -336,6 +349,13 @@
                   :pinned="isBackgroundPinned(bg)"
                 />
               </span>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
             <div
               v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'"
@@ -358,16 +378,21 @@
           <div
             v-for="(bg) in ownedBackgrounds"
             :key="bg.key"
+            :id="bg.key"
             class="col-4 text-center customize-option background-button"
-            :popover-title="bg.text"
-            :popover="bg.notes"
-            popover-trigger="mouseenter"
             @click="unlock('background.' + bg.key)"
           >
             <div
               class="background"
               :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
             ></div>
+            <b-popover
+              :target="bg.key"
+              triggers="hover focus"
+              placement="bottom"
+              :prevent-overflow="false"
+              :content="bg.notes"
+            />
           </div>
         </div>
       </div>

website/client/src/components/externalLinkModal.vue

@@ -0,0 +1,209 @@
+<template>
+  <b-modal
+    id="external-link-modal"
+    size="md"
+  >
+    <!-- HEADER -->
+    <div slot="modal-header">
+      <div
+        class="modal-close"
+        @click="close()"
+      >
+        <div
+          class="icon-close"
+          v-html="icons.close"
+        >
+        </div>
+      </div>
+      <div class="exclamation-container d-flex align-items-center justify-content-center">
+        <div
+          v-once
+          class="svg-icon svg-exclamation"
+          v-html="icons.exclamation"
+        ></div>
+      </div>
+      <h2>
+        {{ $t('leaveHabitica') }}
+      </h2>
+    </div>
+
+    <!-- BODY -->
+    <div
+      class="row leave-warning-text"
+      v-html="$t('leaveHabiticaText')"
+    >
+    </div>
+    <div
+      class="skip-modal"
+    >
+      {{ $t('skipExternalLinkModal') }}
+    </div>
+
+    <!-- FOOTER -->
+    <div slot="modal-footer">
+      <button
+        v-once
+        class="btn btn-primary"
+        @click="proceed()"
+      >
+        {{ $t('continue') }}
+      </button>
+      <div
+        v-once
+        class="close-link justify-content-center"
+        @click="close()"
+      >
+        {{ $t('cancel') }}
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+@import '~@/assets/scss/colors.scss';
+
+#external-link-modal {
+  &.modal {
+    display: flex !important;
+  }
+
+  .modal-md {
+    max-width: 448px;
+    min-width: 330px;
+    margin: auto;
+
+  .modal-close {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    cursor: pointer;
+
+    .icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
+
+      & svg {
+        fill: $yellow-1;
+        opacity: 0.75;
+      }
+       & :hover {
+        fill: $yellow-1;
+        opacity: 1;
+      }
+    }
+  }
+
+  .modal-content {
+    background: transparent;
+  }
+
+  .modal-header {
+    justify-content: center;
+    padding-top: 32px;
+    padding-bottom: 0px;
+    background: $yellow-100;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    border-bottom: none;
+
+    .exclamation-container {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: $yellow-1;
+      margin: 0 auto;
+      margin-bottom: 16px;
+    }
+
+    .svg-exclamation {
+      width: 8px;
+      color: $white;
+    }
+
+    h2 {
+      color: $yellow-1;
+      margin-bottom: 16px;
+    }
+  }
+
+  .modal-body {
+    padding: 16px 44px 20px 44px;
+    background: $white;
+
+    .leave-warning-text {
+      font-size: 0.875rem;
+      line-height: 1.71;
+      text-align: center;
+      margin-top:24px;
+    }
+
+    .skip-modal {
+      color: $gray-100;
+      font-size: 0.75rem;
+      text-align: center;
+      line-height: 1.33;
+      margin-top: 16px;
+      // padding-bottom: 24px;
+    }
+  }
+
+    .modal-footer {
+      background: $white;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      justify-content: center;
+      border-top: none;
+      padding-top: 0;
+    }
+    .close-link {
+      color: $purple-300;
+      line-height: 1.71;
+      font-size: 0.875rem;
+      cursor: pointer;
+      margin-top:16px;
+      margin-bottom: 8px;
+      text-align: center;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import exclamationIcon from '@/assets/svg/exclamation.svg';
+import closeIcon from '@/assets/svg/new-close.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: closeIcon,
+        exclamation: exclamationIcon,
+      }),
+      url: '',
+    };
+  },
+  mounted () {
+    this.$root.$on('habitica:external-link', url => {
+      this.url = url;
+      this.$root.$emit('bv::show::modal', 'external-link-modal');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica:external-link');
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'external-link-modal');
+    },
+    proceed () {
+      window.open(this.url, '_blank').focus();
+      this.close();
+    },
+  },
+};
+</script>

website/client/src/components/groups/chat.vue

@@ -87,6 +87,8 @@
 <script>
 import debounce from 'lodash/debounce';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
 import chatMessage from '../chat/chatMessages';
@@ -103,6 +105,7 @@ export default {
     communityGuidelines,
     chatMessage,
   },
+  mixins: [externalLinks],
   props: ['label', 'group', 'placeholder'],
   data () {
     return {
@@ -132,6 +135,10 @@ export default {
   },
   mounted () {
     this.textbox = this.$refs['user-entry'];
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a

website/client/src/components/groups/createPartyModal.vue

@@ -11,9 +11,12 @@
       <div class="quest_screen"></div>
       <div class="row heading">
         <div class="col-12 text-center pr-5 pl-5">
-          <h2 v-once>
+          <h1
+            v-once
+            class="mb-2"
+          >
             {{ $t('playInPartyTitle') }}
-          </h2>
+          </h1>
           <p
             v-once
             class="mb-4"
@@ -22,67 +25,91 @@
           </p>
           <button
             v-once
-            class="btn btn-primary"
+            class="btn btn-primary px-4 mb-2"
             @click="createParty()"
           >
             {{ $t('createParty') }}
           </button>
         </div>
       </div>
+      <close-x
+        @close="close()"
+      />
     </div>
     <div class="row grey-row">
-      <div class="col-12 text-center">
+      <div class="col-12 text-center px-0">
         <div class="join-party"></div>
-        <h2 v-once>
-          {{ $t('wantToJoinPartyTitle') }}
-        </h2>
-        <p v-html="$t('wantToJoinPartyDescription')"></p>
-        <div
-          class="form-group"
-          @click="copyUsername"
+        <h1
+          v-once
+          class="mb-2"
         >
-          <div class="d-flex align-items-center">
-            <label
-              v-once
-              class="mr-3"
-            >{{ $t('username') }}</label>
-            <div class="flex-grow-1">
-              <div class="input-group-prepend input-group-text">
-                @
-                <div class="text">
-                  {{ user.auth.local.username }}
-                </div>
-                <div
-                  class="svg-icon copy-icon"
-                  v-html="icons.copy"
-                ></div>
-                <div
-                  v-once
-                  class="small"
-                >
-                  {{ $t('copy') }}
-                </div>
-              </div>
+          {{ $t('wantToJoinPartyTitle') }}
+        </h1>
+        <p
+          v-once
+          class="mb-4"
+          v-html="$t('partyFinderDescription')"
+        >
+        </p>
+        <div
+          v-if="seeking"
+        >
+          <div
+            class="green-bar mb-3"
+          >
+            {{ $t('currentlyLookingForParty') }}
+          </div>
+          <div class="d-flex justify-content-center">
+            <div
+              class="red-link"
+              @click="seekParty()"
+            >
+              {{ $t('leave') }}
             </div>
           </div>
         </div>
+        <button
+          v-else
+          class="btn btn-primary px-4 mt-2 mb-1"
+          @click="seekParty()"
+        >
+          {{ $t('lookForParty') }}
+        </button>
       </div>
     </div>
   </b-modal>
 </template>
 
-<style>
-  #create-party-modal .modal-body {
-    padding: 0rem 0.75rem;
-  }
+<style lang="scss">
+  #create-party-modal {
+    display: flex !important;
+    overflow-y: hidden;
 
-  #create-party-modal .modal-dialog {
-    width: 35.75rem;
-  }
+    @media (max-height: 770px) {
+      overflow-y: auto;
+    }
 
-  #create-party-modal .modal-header {
-    padding: 0;
-    border-bottom: 0px;
+    .modal-body {
+      padding: 0rem 0.75rem;
+    }
+
+    .modal-content {
+      border-radius: 8px;
+    }
+
+    .modal-dialog {
+      width: 566px;
+      margin: auto;
+
+      @media (max-height: 826px) {
+        margin-top: 56px;
+      }
+    }
+
+    .modal-header {
+      padding: 0;
+      border-bottom: 0px;
+    }
   }
 </style>
 
@@ -107,15 +134,27 @@
     cursor: pointer;
   }
 
+  .green-bar {
+    height: 32px;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1.71;
+    text-align: center;
+    color: $green-1;
+    background-color: $green-100;
+    border-radius: 2px;
+    padding: 4px 0px 4px 0px;
+  }
+
   .grey-row {
     background-color: $gray-700;
     color: #4e4a57;
     padding: 2em;
-    border-radius: 0px 0px 2px 2px;
+    border-radius: 0px 0px 8px 8px;
   }
 
-  h2 {
-    color: $gray-100;
+  h1 {
+    color: $purple-300;
   }
 
   .header-wrap {
@@ -132,10 +171,6 @@
       border-radius: 2px 2px 0 0;
       image-rendering: optimizequality;
     }
-
-    h2 {
-      color: $purple-200;
-    }
   }
 
   .heading {
@@ -182,6 +217,21 @@
     margin: 0.75rem auto 0.75rem 0.25rem;
   }
 
+  p {
+    line-height: 1.71;
+  }
+
+  .red-link {
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.71;
+    text-align: center;
+    color: $maroon-50;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   .small {
     color: $gray-200;
     margin: auto 0.5rem auto 0.25rem;
@@ -192,21 +242,29 @@
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
 import notifications from '@/mixins/notifications';
+import closeX from '../ui/closeX';
 
 import copyIcon from '@/assets/svg/copy.svg';
 
 export default {
+  components: {
+    closeX,
+  },
   mixins: [notifications],
   data () {
     return {
       icons: Object.freeze({
         copy: copyIcon,
       }),
+      seeking: false,
     };
   },
   computed: {
     ...mapState({ user: 'user.data' }),
   },
+  mounted () {
+    this.seeking = Boolean(this.user.party.seeking);
+  },
   methods: {
     async createParty () {
       const group = {
@@ -223,7 +281,10 @@ export default {
       });
 
       this.$root.$emit('bv::hide::modal', 'create-party-modal');
-      this.$router.push('/party');
+      await this.$router.push('/party');
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'create-party-modal');
     },
     copyUsername () {
       if (navigator.clipboard) {
@@ -238,6 +299,12 @@ export default {
       }
       this.text(this.$t('usernameCopied'));
     },
+    seekParty () {
+      this.$store.dispatch('user:set', {
+        'party.seeking': !this.user.party.seeking ? new Date() : null,
+      });
+      this.seeking = !this.seeking;
+    },
   },
 };
 </script>

website/client/src/components/groups/group.vue

@@ -542,7 +542,8 @@ export default {
       await this.$store.dispatch('guilds:leave', data);
 
       if (this.isParty) {
-        this.$router.push({ name: 'tasks' });
+        await this.$router.push({ name: 'tasks' });
+        window.location.reload(true);
       }
     },
     upgradeGroup () {

website/client/src/components/groups/groupPlan.vue

@@ -4,12 +4,12 @@
     <group-plan-creation-modal />
     <div>
       <div class="header">
-        <h1 class="text-center">
-          Need more for your Group?
+        <h1 v-once class="text-center">
+          {{ $t('groupPlanTitle') }}
         </h1>
         <div class="row">
           <div class="col-8 offset-2 text-center">
-            <h2 class="sub-text">
+            <h2 v-once class="sub-text">
               {{ $t('groupBenefitsDescription') }}
             </h2>
           </div>
@@ -24,8 +24,8 @@
                 src="~@/assets/images/group-plans/group-14@3x.png"
               >
               <hr>
-              <h2>{{ $t('teamBasedTasks') }}</h2>
-              <p>Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('teamBasedTasks') }} </h2>
+              <p v-once> {{ $t('teamBasedTasksListDesc') }} </p>
             </div>
           </div>
           <div class="col-4">
@@ -35,8 +35,8 @@
                 src="~@/assets/images/group-plans/group-12@3x.png"
               >
               <hr>
-              <h2>Group Management Controls</h2>
-              <p>Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('groupManagementControls') }} </h2>
+              <p v-once> {{ $t('groupManagementControlsDesc') }} </p>
             </div>
           </div>
           <div class="col-4">
@@ -46,8 +46,8 @@
                 src="~@/assets/images/group-plans/group-13@3x.png"
               >
               <hr>
-              <h2>In-Game Benefits</h2>
-              <p>Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('inGameBenefits') }} </h2>
+              <p v-once> {{ $t('inGameBenefitsDesc') }} </p>
             </div>
           </div>
         </div>

website/client/src/components/groups/lookingForParty.vue

@@ -0,0 +1,343 @@
+<template>
+  <div>
+    <div class="d-flex justify-content-center">
+      <div
+        v-if="seekers.length > 0"
+        class="fit-content mx-auto mt-4"
+      >
+        <div class="d-flex align-items-center">
+          <h1 v-once class="my-auto mr-auto"> {{ $t('findPartyMembers') }}</h1>
+          <div
+            class="btn btn-secondary btn-sync ml-auto my-auto pl-2 pr-3 d-flex"
+            @click="refreshList()"
+          >
+            <div class="svg-icon icon-16 color my-auto mr-2" v-html="icons.sync"></div>
+            <div class="ml-auto"> {{ $t('refreshList') }} </div>
+          </div>
+        </div>
+        <div class="d-flex flex-wrap seeker-list">
+          <div
+            v-for="(seeker, index) in seekers"
+            :key="seeker._id"
+            class="seeker"
+          >
+            <div class="d-flex">
+              <avatar
+                :member="seeker"
+                :hideClassBadge="true"
+                @click.native="showMemberModal(seeker._id)"
+                class="mr-3 mb-2"
+              />
+              <div class="card-data">
+                <user-link
+                  :user-id="seeker._id"
+                  :name="seeker.profile.name"
+                  :backer="seeker.backer"
+                  :contributor="seeker.contributor"
+                />
+                <div class="small-with-border pb-2 mb-2">
+                  @{{ seeker.auth.local.username }} • {{ $t('level') }} {{ seeker.stats.lvl }}
+                </div>
+                <div
+                  class="d-flex"
+                >
+                  <strong v-once> {{ $t('classLabel') }} </strong>
+                  <span
+                    class="svg-icon d-inline-block icon-16 my-auto mx-2"
+                    v-html="icons[seeker.stats.class]"
+                  >
+                  </span>
+                  <strong
+                    :class="`${seeker.stats.class}-color`"
+                  >
+                    {{ $t(seeker.stats.class) }}
+                  </strong>
+                </div>
+                <div>
+                  <strong v-once class="mr-2"> {{ $t('checkinsLabel') }} </strong>
+                  {{ seeker.loginIncentives }}
+                </div>
+                <div>
+                  <strong v-once class="mr-2"> {{ $t('languageLabel') }} </strong>
+                  {{ displayLanguage(seeker.preferences.language) }}
+                </div>
+              </div>
+            </div>
+            <strong
+              v-if="!seeker.invited"
+              @click="inviteUser(seeker._id, index)"
+              class="btn btn-primary w-100"
+            >
+              {{ $t('inviteToParty') }}
+            </strong>
+            <div
+              v-else
+              @click="rescindInvite(seeker._id, index)"
+              class="btn btn-success w-100"
+              v-html="$t('invitedToYourParty')"
+            >
+            </div>
+          </div>
+          <mugen-scroll
+            v-show="loading"
+            :handler="infiniteScrollTrigger"
+            :should-handle="!loading && canLoadMore"
+            :threshold="1"
+          />
+        </div>
+      </div>
+      <div
+        v-if="seekers.length === 0 && !loading"
+        class="d-flex flex-column empty-state text-center my-5"
+      >
+        <div class="gray-circle mb-3 mx-auto d-flex">
+          <div
+            class="svg-icon icon-32 color m-auto"
+            v-html="icons.users"
+          >
+
+          </div>
+        </div>
+        <strong class="mb-1"> {{ $t('findMorePartyMembers') }} </strong>
+        <div v-html="$t('noOneLooking')"></div>
+      </div>
+    </div>
+    <h2
+      v-show="loading"
+      class="loading"
+      :class="seekers.length === 0 ? 'mt-3' : 'mt-0'"
+    >
+      {{ $t('loading') }}
+    </h2>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h1 {
+    color: $purple-300;
+  }
+
+  strong {
+    line-height: 1.71;
+  }
+  .avatar {
+    background-color: $gray-600;
+  }
+
+  .btn-success {
+    box-shadow: none;
+    color: $green-1;
+    font-weight: normal;
+
+    &:not(:disabled):not(.disabled):active {
+      color: $green-1;
+    }
+  }
+
+  .btn-sync {
+    min-width: 128px;
+    max-height: 32px;
+
+    .svg-icon {
+      color: $gray-200;
+    }
+  }
+
+  .card-data {
+    width: 267px;
+  }
+
+  .empty-state {
+    color: $gray-100;
+    line-height: 1.71;
+  }
+
+  .fit-content {
+    width: fit-content;
+  }
+
+  .gray-circle {
+    width: 64px;
+    height: 64px;
+    color: $gray-600;
+    background-color: $gray-200;
+    border-radius: 100px;
+
+    .icon-32 {
+      height: auto;
+    }
+  }
+
+  .loading {
+    text-align: center;
+    color: $purple-300;
+  }
+
+  .seeker-list {
+    max-width: 920px;
+
+    @media (max-width: 962px) {
+      max-width: 464px;
+    };
+
+    .seeker {
+      width: 448px;
+      margin-bottom: 24px;
+      padding: 8px;
+      border-radius: 4px;
+      box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+
+      &:first-of-type {
+        margin-top: 24px;
+      }
+
+      @media (min-width: 963px) {
+        &:nth-child(2) {
+          margin-top: 24px;
+        }
+        &:nth-child(even) {
+          margin-left: 24px;
+        }
+      }
+    }
+  }
+
+  .small-with-border {
+    border-bottom: 1px solid $gray-500;
+    color: $gray-100;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.33;
+  }
+
+  .healer-color {
+    color: $yellow-10;
+  }
+
+  .rogue-color {
+    color: $purple-200;
+  }
+
+  .warrior-color {
+    color: $red-50;
+  }
+
+  .wizard-color {
+    color: $blue-10;
+  }
+</style>
+
+<script>
+import debounce from 'lodash/debounce';
+import MugenScroll from 'vue-mugen-scroll';
+import Avatar from '../avatar';
+import userLink from '../userLink';
+import { mapState } from '@/libs/store';
+
+import syncIcon from '@/assets/svg/sync-2.svg';
+import usersIcon from '@/assets/svg/users.svg';
+import warriorIcon from '@/assets/svg/warrior.svg';
+import rogueIcon from '@/assets/svg/rogue.svg';
+import healerIcon from '@/assets/svg/healer.svg';
+import wizardIcon from '@/assets/svg/wizard.svg';
+
+export default {
+  components: {
+    Avatar,
+    MugenScroll,
+    userLink,
+  },
+  data () {
+    return {
+      canLoadMore: true,
+      loading: true,
+      page: 0,
+      party: {},
+      seekers: [],
+      icons: Object.freeze({
+        warrior: warriorIcon,
+        rogue: rogueIcon,
+        healer: healerIcon,
+        sync: syncIcon,
+        users: usersIcon,
+        wizard: wizardIcon,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({
+      availableLanguages: 'i18n.availableLanguages',
+      user: 'user.data',
+    }),
+  },
+  async mounted () {
+    try {
+      this.party = await this.$store.dispatch('guilds:getGroup', { groupId: this.user.party._id });
+    } catch {
+      this.$router.push('/');
+    }
+    if (!this.party._id || this.party.leader._id !== this.user._id) {
+      this.$router.push('/');
+    } else {
+      this.$store.dispatch('common:setTitle', {
+        section: this.$t('lookingForPartyTitle'),
+      });
+      this.seekers = await this.$store.dispatch('party:lookingForParty');
+      this.canLoadMore = this.seekers.length === 30;
+      this.loading = false;
+    }
+  },
+  methods: {
+    displayLanguage (languageCode) {
+      const language = this.availableLanguages.find(lang => lang.code === languageCode);
+      if (language) {
+        return language.name;
+      }
+      return languageCode;
+    },
+    infiniteScrollTrigger () {
+      if (this.canLoadMore) {
+        this.loading = true;
+      }
+
+      this.loadMore();
+    },
+    async inviteUser (userId, index) {
+      await this.$store.dispatch('guilds:invite', {
+        invitationDetails: {
+          inviter: this.user.profile.name,
+          uuids: [userId],
+        },
+        groupId: this.party._id,
+      });
+      this.seekers[index].invited = true;
+    },
+    loadMore: debounce(async function loadMoreDebounce () {
+      this.page += 1;
+      const addlSeekers = await this.$store.dispatch('party:lookingForParty', { page: this.page });
+      this.seekers = this.seekers.concat(addlSeekers);
+      this.canLoadMore = this.seekers.length % 30 === 0;
+      this.loading = false;
+    }, 1000),
+    async refreshList () {
+      this.loading = true;
+      this.page = 0;
+      this.seekers = await this.$store.dispatch('party:lookingForParty');
+      this.canLoadMore = this.seekers.length === 30;
+      this.loading = false;
+    },
+    async rescindInvite (userId, index) {
+      await this.$store.dispatch('members:removeMember', {
+        memberId: userId,
+        groupId: this.party._id,
+      });
+      this.seekers[index].invited = false;
+    },
+    showMemberModal (userId) {
+      this.$router.push({ name: 'userProfile', params: { userId } });
+    },
+  },
+};
+</script>

website/client/src/components/groups/rightSidebar.vue

@@ -2,7 +2,7 @@
   <div class="sidebar px-4">
     <div>
       <div class="buttons-wrapper">
-        <div class="button-container button-with-menu-row">
+        <div class="button-container d-flex">
           <button
             v-if="!isMember"
             class="btn btn-success btn-success"
@@ -203,10 +203,6 @@ export default {
     }
   }
 
-  .button-with-menu-row {
-    display: flex;
-  }
-
   .menuIcon {
     width: 4px;
     height: 1rem;

website/client/src/components/hall/heroes.vue

@@ -258,13 +258,22 @@
                 :key="hero._id"
               >
                 <td>
-                  <user-link
+                  <div
                     v-if="hasPermission(hero, 'userSupport')"
-                    :user="hero"
-                    :popover="$t('gamemaster')"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                  />
+                    class="width-content"
+                  >
+                    <user-link
+                      :id="hero._id"
+                      :user="hero"
+                    />
+                    <b-popover
+                      :target="hero._id"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('gamemaster')"
+                    />
+                  </div>
                   <user-link
                     v-else
                     :user="hero"
@@ -302,6 +311,10 @@
   h4.expand-toggle::after {
     margin-left: 5px;
   }
+
+  .width-content {
+    width: fit-content;
+  }
 </style>
 
 <script>

website/client/src/components/header/index.vue

@@ -51,20 +51,20 @@
       </div>
       <div
         v-else
-        class="no-party d-none d-md-flex  justify-content-center text-center mr-4"
+        class="no-party d-none d-md-flex justify-content-center text-center mr-4"
       >
         <div class="align-self-center">
-          <h3>{{ $t('battleWithFriends') }}</h3>
+          <h3>{{ user.party._id ? $t('questWithOthers') : $t('battleWithFriends') }}</h3>
           <span
             class="small-text"
-            v-html="$t('inviteFriendsParty')"
+            v-html="user.party._id ? $t('inviteFriendsParty') : $t('startPartyDetail')"
           ></span>
           <br>
           <button
             class="btn btn-primary"
             @click="createOrInviteParty()"
           >
-            {{ user.party._id ? $t('inviteFriends') : $t('startAParty') }}
+            {{ user.party._id ? $t('findPartyMembers') : $t('getStarted') }}
           </button>
         </div>
       </div>
@@ -122,6 +122,7 @@
 
 <script>
 import orderBy from 'lodash/orderBy';
+import * as Analytics from '@/libs/analytics';
 import { mapGetters, mapActions } from '@/libs/store';
 import MemberDetails from '../memberDetails';
 import createPartyModal from '../groups/createPartyModal';
@@ -232,10 +233,24 @@ export default {
         this.expandedMember = memberId;
       }
     },
-    createOrInviteParty () {
+    async createOrInviteParty () {
       if (this.user.party._id) {
-        this.$root.$emit('inviteModal::inviteToGroup', this.user.party);
+        await Analytics.track({
+          eventName: 'Header Party CTA',
+          eventAction: 'Header Party CTA',
+          eventCategory: 'behavior',
+          hitType: 'event',
+          state: 'Find Party Members',
+        });
+        this.$router.push('/looking-for-party');
       } else {
+        await Analytics.track({
+          eventName: 'Header Party CTA',
+          eventAction: 'Header Party CTA',
+          eventCategory: 'behavior',
+          hitType: 'event',
+          state: 'Get Started',
+        });
         this.$root.$emit('bv::show::modal', 'create-party-modal');
       }
     },

website/client/src/components/header/menu.vue

@@ -148,7 +148,7 @@
             </div>
           </li>
           <b-nav-item
-            v-if="user.party._id"
+            v-if="user.party._id && user._id !== partyLeaderId"
             class="topbar-item"
             :class="{'active': $route.path.startsWith('/party')}"
             tag="li"
@@ -156,6 +156,36 @@
           >
             {{ $t('party') }}
           </b-nav-item>
+          <li
+            v-if="user.party._id && user._id === partyLeaderId"
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/party')}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div>
+            <router-link
+              class="nav-link"
+              :to="{name: 'party'}"
+            >
+              {{ $t('party') }}
+            </router-link>
+            <div class="topbar-dropdown">
+              <router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'lookingForParty'}"
+              >
+                {{ $t('lookingForPartyTitle') }}
+              </router-link>
+            </div>
+          </li>
           <b-nav-item
             v-if="!user.party._id"
             class="topbar-item"
@@ -768,6 +798,7 @@ export default {
     return {
       isUserDropdownOpen: false,
       menuIsOpen: false,
+      partyLeaderId: null,
       icons: Object.freeze({
         gem: gemIcon,
         gold: goldIcon,
@@ -796,8 +827,9 @@ export default {
       };
     },
   },
-  mounted () {
-    this.getUserGroupPlans();
+  async mounted () {
+    await this.getUserGroupPlans();
+    await this.getUserParty();
     Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
       link.addEventListener('click', this.closeMenu);
     });
@@ -805,6 +837,9 @@ export default {
       link.addEventListener('mouseenter', this.dropdownDesktop);
       link.addEventListener('mouseleave', this.dropdownDesktop);
     });
+    this.$root.$on('update-party', () => {
+      this.getUserParty();
+    });
   },
   methods: {
     modForm () {
@@ -816,6 +851,12 @@ export default {
     async getUserGroupPlans () {
       await this.$store.dispatch('guilds:getGroupPlans');
     },
+    async getUserParty () {
+      if (this.user.party._id) {
+        await this.$store.dispatch('party:getParty');
+        this.partyLeaderId = this.$store.state.party.data.leader._id;
+      }
+    },
     openPartyModal () {
       this.$root.$emit('bv::show::modal', 'create-party-modal');
     },

website/client/src/components/header/notifications/partyInvitation.vue

@@ -34,11 +34,13 @@
 <script>
 import BaseNotification from './base';
 import { mapState } from '@/libs/store';
+import sync from '@/mixins/sync';
 
 export default {
   components: {
     BaseNotification,
   },
+  mixins: [sync],
   props: {
     notification: {
       type: Object,
@@ -73,6 +75,7 @@ export default {
       }
 
       await this.$store.dispatch('guilds:join', { groupId: group.id, type: 'party' });
+      this.sync();
       this.$router.push('/party');
     },
     reject () {

website/client/src/components/inventory/stable/petItem.vue

@@ -171,8 +171,9 @@ export default {
     getPetItemClass () {
       if (this.isOwned() && some(
         this.currentEventList,
-        event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'virtual',
+        event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'teaShop',
       )) {
+        if (this.isSpecial()) return `Pet ${this.foolPet(this.item.key)}`;
         const petString = `${this.item.eggKey}-${this.item.key}`;
         return `Pet ${this.foolPet(petString)}`;
       }

website/client/src/components/messages/messageCard.vue

@@ -139,6 +139,8 @@
 import axios from 'axios';
 import moment from 'moment';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import renderWithMentions from '@/libs/renderWithMentions';
 import { mapState } from '@/libs/store';
 import userLink from '../userLink';
@@ -150,6 +152,7 @@ export default {
   components: {
     userLink,
   },
+  mixins: [externalLinks],
   filters: {
     timeAgo (value) {
       return moment(value).fromNow();
@@ -179,6 +182,10 @@ export default {
   },
   mounted () {
     this.$emit('message-card-mounted');
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     report () {

website/client/src/components/payments/sendGiftModal.vue

@@ -126,7 +126,7 @@
 
           <!-- the word "total" -->
           <div class="buy-gem-total">
-            {{ $t('sendGiftTotal') }}
+            {{ $t('sendTotal') }}
           </div>
 
           <!-- the actual dollar amount -->

website/client/src/components/settings/api.vue

@@ -23,33 +23,7 @@
       </div>
       <div class="section">
         <h3>{{ $t('thirdPartyApps') }}</h3>
-        <ul>
-          <li>
-            <a
-              target="_blank"
-              href="https://www.beeminder.com/habitica"
-            >{{ $t('beeminder') }}</a>
-            <br>
-            {{ $t('beeminderDesc') }}
-          </li>
-          <li>
-            <div v-html="$t('chatExtension')">
-            </div>
-            <span>{{ $t('chatExtensionDesc') }}</span>
-          </li>
-          <li>
-            <a
-              target="_blank"
-              :href="`https://oldgods.net/habitica/habitrpg_user_data_display.html?uuid=` + user._id"
-            >{{ $t('dataDisplayTool') }}</a>
-            <br>
-            {{ $t('dataToolDesc') }}
-          </li>
-          <li>
-            <div v-html="$t('otherExtensions')"></div>
-            <span>{{ $t('otherDesc') }}</span>
-          </li>
-        </ul>
+        <p v-html="$t('thirdPartyTools')"></p>
         <hr>
       </div>
     </div>

website/client/src/components/settings/restoreModal.vue

@@ -179,7 +179,9 @@ export default {
       let valid = true;
 
       for (const stat of canRestore) {
-        if (this.restoreValues.stats[stat] === '') {
+        if (this.restoreValues.stats[stat] === ''
+          || this.restoreValues.stats[stat] < 0
+        ) {
           this.restoreValues.stats[stat] = this.user.stats[stat];
           valid = false;
         }

website/client/src/components/settings/site.vue

@@ -128,7 +128,10 @@
         <hr>
       </div>
       <div>
-        <div class="checkbox">
+        <div
+          class="checkbox"
+          id="preferenceAdvancedCollapsed"
+        >
           <label>
             <input
               v-model="user.preferences.advancedCollapsed"
@@ -136,33 +139,22 @@
               class="mr-2"
               @change="set('advancedCollapsed')"
             >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('startAdvCollapsedPop')"
-            >{{ $t('startAdvCollapsed') }}</span>
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="user.preferences.dailyDueDefaultView"
-              type="checkbox"
-              class="mr-2"
-              @change="set('dailyDueDefaultView')"
-            >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('dailyDueDefaultViewPop')"
-            >{{ $t('dailyDueDefaultView') }}</span>
+            <span class="hint">
+              {{ $t('startAdvCollapsed') }}
+            </span>
+            <b-popover
+              target="preferenceAdvancedCollapsed"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t('startAdvCollapsedPop')"
+            />
           </label>
         </div>
         <div
           v-if="party.memberCount === 1"
           class="checkbox"
+          id="preferenceDisplayInviteAtOneMember"
         >
           <label>
             <input
@@ -171,12 +163,9 @@
               class="mr-2"
               @change="set('displayInviteToPartyWhenPartyIs1')"
             >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('displayInviteToPartyWhenPartyIs1')"
-            >{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
+            <span class="hint">
+              {{ $t('displayInviteToPartyWhenPartyIs1') }}
+            </span>
           </label>
         </div>
         <div class="checkbox">
@@ -217,32 +206,47 @@
         </div>
         <hr>
         <button
+          id="buttonShowBailey"
           class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('showBaileyPop')"
           @click="showBailey()"
         >
           {{ $t('showBailey') }}
+          <b-popover
+            target="buttonShowBailey"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('showBaileyPop')"
+          />
         </button>
         <button
+          id="buttonFCV"
           class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('fixValPop')"
           @click="openRestoreModal()"
         >
           {{ $t('fixVal') }}
+          <b-popover
+            target="buttonFCV"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('fixValPop')"
+          />
         </button>
         <button
           v-if="user.preferences.disableClasses == true"
+          id="buttonEnableClasses"
           class="btn btn-primary mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('enableClassPop')"
           @click="changeClassForUser(false)"
         >
           {{ $t('enableClass') }}
+          <b-popover
+            target="buttonEnableClasses"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('enableClassPop')"
+          />
         </button>
         <hr>
         <day-start-adjustment />
@@ -532,6 +536,10 @@
   input {
     color: $gray-50;
   }
+
+  .checkbox {
+    width: fit-content;
+  }
   .usersettings h5 {
     margin-top: 1em;
   }

website/client/src/components/settings/subscription.vue

@@ -804,7 +804,7 @@ export default {
       return currentPlanContext.nextHourglassDate;
     },
     nextHourGlass () {
-      const nextHourglassMonth = this.nextHourGlassDate.format('MMM');
+      const nextHourglassMonth = this.nextHourGlassDate.format('MMM YYYY');
 
       return nextHourglassMonth;
     },

website/client/src/components/shared/itemCost.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="item-cost">
+    <span
+      class="cost"
+      :class="getPriceClass()"
+    >
+      <span
+        class="svg-icon inline icon-24"
+        aria-hidden="true"
+        v-html="icons[getPriceClass()]"
+      >
+      </span>
+      <span
+        :class="getPriceClass()"
+      >{{ item.value }}</span>
+    </span>
+  </div>
+</template>
+
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/mixins.scss';
+
+.item-cost {
+ padding-bottom: 16px;
+}
+
+  .cost {
+    height: 40px;
+    font-size: 1.25rem;
+    font-weight: bold;
+    line-height: 1.4;
+    vertical-align: middle;
+
+    &.gems {
+      color: $gems-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(36, 204, 143, 0.15);
+    }
+
+    &.gold {
+      color: $gold-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(255, 190, 93, 0.15);
+    }
+
+    &.hourglasses {
+      color: $hourglass-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(41, 149, 205, 0.15);
+    }
+  }
+</style>
+
+<script>
+import svgClose from '@/assets/svg/close.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgGem from '@/assets/svg/gem.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+        gold: svgGold,
+        gems: svgGem,
+      }),
+      selectedAmountToBuy: 1,
+      selectedAmount: 1,
+    };
+  },
+  methods: {
+    getPriceClass () {
+      if (this.priceType && this.icons[this.priceType]) {
+        return this.priceType;
+      } if (this.item.currency && this.icons[this.item.currency]) {
+        return this.item.currency;
+      }
+      return 'gold';
+    },
+  },
+};
+</script>

website/client/src/components/shared/numberIncrement.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="d-flex flex-row align-items-center justify-content-center number-increment">
+    <!-- buy modal -->
+    <div
+      class="gray-circle"
+      @click="quantity <= 0
+        ? quantity = 0
+        : quantity--"
+    >
+      <div
+        class="icon-negative"
+        v-html="icons.svgNegative"
+      ></div>
+    </div>
+    <div class="input-group">
+      <div class="align-items-center">
+      </div>
+      <input
+        v-model="quantity"
+        class="form-control alignment"
+        step="1"
+        type="number"
+      >
+    </div>
+    <div
+      class="gray-circle"
+      @click="quantity++"
+    >
+      <div
+        class="icon-positive"
+        v-html="icons.svgPositive"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .number-increment {
+    padding-bottom: 0px;
+    }
+
+  .alignment {
+    text-align: center;
+  }
+
+  .input-group {
+    width: 94px;
+    height: 32px;
+    width: 48px;
+    margin: 0px 16px 0px 16px;
+    padding: 0;
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    background-color: $white;
+  }
+
+  .gray-circle {
+    border-radius: 100%;
+    border: solid 2px $gray-300;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $purple-300;
+    }
+  }
+
+  .gray-circle:hover{
+    .icon-positive, .icon-negative {
+      & ::v-deep svg path {
+        fill: $purple-300;
+      }
+    }
+  }
+
+  .icon-positive, .icon-negative {
+    width: 10px;
+    height: 10px;
+    margin: 4px auto;
+
+    & ::v-deep svg path {
+      fill: $gray-300;
+    }
+  }
+
+/* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+/* Firefox */
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+
+</style>
+
+<script>
+// icons
+import svgGem from '@/assets/svg/gem.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        svgGem,
+        svgGold,
+        svgPositive,
+        svgNegative,
+      }),
+      item: { },
+      quantity: 1,
+    };
+  },
+  computed: {
+  },
+  watch: {
+    quantity () {
+      this.$emit('updateQuantity', this.quantity);
+    },
+  },
+  methods: {
+    setDefaults () {
+      this.input = 1;
+    },
+  },
+};
+
+</script>

website/client/src/components/shops/balanceInfo.vue

@@ -22,10 +22,11 @@
   @import '~@/assets/scss/colors.scss';
 
 span {
-  font-weight: normal;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1.33;
-  color: $gray-200;
+  color: $gray-100;
+  margin-bottom: 16px;
+  margin-top: -4px;
 
   display: inline-block;
 }

website/client/src/components/shops/buyModal.vue

@@ -17,7 +17,7 @@
     </span>
     <div>
       <span
-        class="svg-icon icon-12 close-icon"
+        class="svg-icon close-icon icon-16 color"
         aria-hidden="true"
         tabindex="0"
         @click="hideDialog()"
@@ -45,6 +45,13 @@
               :sprites-margin="'0px auto 0px -24px'"
             />
           </div>
+          <item
+            v-else-if="item.key === 'gem'"
+            class="flat bordered-item"
+            :item="item"
+            :item-content-class="item.class"
+            :show-popover="false"
+          />
           <item
             v-else-if="item.key != 'gem'"
             class="flat bordered-item"
@@ -53,10 +60,20 @@
             :show-popover="false"
           />
         </slot>
+        <div
+          v-if="!showAvatar && user.items[item.purchaseType]"
+          class="owned"
+          :class="totalOwned"
+        >
+          <!-- eslint-disable-next-line max-len -->
+          <span class="owned-text">{{ $t('owned') }}: <span class="user-amount">{{ totalOwned }}</span></span>
+        </div>
         <h4 class="title">
           {{ itemText }}
         </h4>
-        <div v-html="itemNotes"></div>
+        <div class="item-notes">
+          {{ itemNotes }}
+        </div>
         <slot
           name="additionalInfo"
           :item="item"
@@ -69,60 +86,61 @@
           />
         </slot>
         <div
-          v-if="item.value > 0"
+          v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
           class="purchase-amount"
         >
-          <div
-            v-if="showAmountToBuy(item)"
-            class="how-many-to-buy"
-          >
-            <strong>{{ $t('howManyToBuy') }}</strong>
-          </div>
-          <div v-if="showAmountToBuy(item)">
-            <div class="box">
-              <input
-                v-model.number="selectedAmountToBuy"
-                class="form-control"
-                type="number"
-                min="0"
-                step="1"
-              >
-            </div>
-            <span :class="{'notEnough': notEnoughCurrency}">
+          <!-- this is where the pretty item cost element lives -->
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="getPriceClass()"
+            >
               <span
-                class="svg-icon inline icon-32"
+                class="svg-icon inline icon-24"
                 aria-hidden="true"
                 v-html="icons[getPriceClass()]"
-              ></span>
+              >
+              </span>
               <span
-                class="cost"
                 :class="getPriceClass()"
               >{{ item.value }}</span>
             </span>
           </div>
+
           <div
-            v-else
-            class="d-flex align-items-middle"
+            v-if="showAmountToBuy(item)"
+            class="how-many-to-buy"
           >
-            <span
-              class="svg-icon inline icon-32 ml-auto my-auto"
-              aria-hidden="true"
-              v-html="icons[getPriceClass()]"
-            ></span>
-            <span
-              class="cost mr-auto my-auto"
-              :class="getPriceClass()"
-            >{{ item.value }}</span>
+            {{ $t('howManyToBuy') }}
+          </div>
+          <div
+            v-if="showAmountToBuy(item)"
+          >
+            <number-increment
+              class="number-increment"
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+            <div
+              :class="{'notEnough': notEnoughCurrency}"
+              class="total"
+            >
+              <span class="total-text">{{ $t('sendTotal') }}</span>
+              <span
+                class="svg-icon total icon-24"
+                aria-hidden="true"
+                v-html="icons[getPriceClass()]"
+              ></span>
+              <span
+                class="total-text"
+                :class="getPriceClass()"
+              >{{ item.value * selectedAmountToBuy }}</span>
+            </div>
           </div>
         </div>
         <div
-          v-if="item.key === 'gem'"
-          class="gems-left"
+          v-if="item.key === 'gem' && gemsLeft < 1"
+          class="no-more-gems"
         >
-          <strong v-if="gemsLeft > 0">{{ gemsLeft }} {{ $t('gemsRemaining') }}</strong>
-          <strong v-if="gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
-        </div>
-        <div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
           {{ $t('notEnoughGemsToBuy') }}
         </div>
         <div
@@ -147,7 +165,7 @@
           {{ $t('viewSubscriptions') }}
         </button>
         <button
-          v-else
+          v-else-if="!(item.key === 'gem' && gemsLeft < 1)"
           class="btn btn-primary"
           :disabled="item.key === 'gem' && gemsLeft === 0 ||
             attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid || item.locked ||
@@ -165,6 +183,7 @@
     <countdown-banner
       v-if="item.event && item.owned == null"
       :end-date="endDate"
+      class="limitedTime available"
     />
     <div
       v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
@@ -179,12 +198,31 @@
       </div>
     </div>
     <div
-      slot="modal-footer"
-      class="d-flex"
+      v-if="item.key === 'gem'"
+      class="d-flex justify-content-center align-items-center"
     >
-      <span class="balance mr-auto">{{ $t('yourBalance') }}</span>
+      <div
+        v-if="gemsLeft > 0"
+        class="gems-left d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+      <div
+        v-if="gemsLeft === 0"
+        class="out-of-gems-banner d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+    </div>
+    <div
+      slot="modal-footer"
+      class="clearfix"
+    >
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
       <balanceInfo
-        class="ml-auto"
+        class="currency-totals"
         :currency-needed="getPriceClass()"
         :amount-needed="item.value"
       />
@@ -200,11 +238,47 @@
     @include centeredModal();
 
     .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
       padding-bottom: 0px;
     }
 
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      margin: 24px 0 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
-      width: 330px;
+      width: 448px;
+      box-sizing: border-box;
+    }
+
+    .badge-dialog {
+      left: -8px;
+      top: -8px;
     }
 
     .avatar {
@@ -212,8 +286,71 @@
       margin: 0 auto;
     }
 
+   .owned {
+      height: 32px;
+      width: 141px;
+      margin-top: -36px;
+      margin-left: 153px;
+      padding-top: 6px;
+      background-color: $gray-600;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      display: block;
+      text-align: center;
+      position: relative;
+      z-index: 1;
+
+      .owned-text {
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.71;
+      }
+
+      .user-amount {
+        font-weight: normal !important;
+      }
+    }
+
+    .item {
+      width: 141px;
+      height: 147px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      cursor: default;
+    }
+
+    .item-content {
+      transform: scale(1.45, 1.45);
+      top: -25.67px;
+      left: 1px;
+
+      &.shop_gem {
+        transform: scale(1.45, 1.45);
+        top: -2px;
+       left: 0px;
+      }
+    }
+
+    .title {
+      height: 28px;
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 25px;
+    }
+
+    .item-notes {
+       margin-top: 8px;
+       padding-left: 48.5px;
+       padding-right: 48.5px;
+       line-height: 1.71;
+       font-size: 0.875rem;
+    }
+
     .content {
       text-align: center;
+      width: 448px;
     }
 
     .item-wrapper {
@@ -221,15 +358,22 @@
     }
 
     .inner-content {
-      margin: 33px auto auto;
-      width: 282px;
+      margin: 32px auto auto;
+    }
+
+    .btn-primary {
+      margin-top: 16px;
     }
 
     .purchase-amount {
-      margin-top: 24px;
+      margin-top: 0px;
 
       .how-many-to-buy {
-        margin-bottom: 16px;
+        font-weight: bold !important;
+      }
+
+      .number-increment {
+        margin-top: 16px;
       }
 
       .box {
@@ -255,31 +399,105 @@
         }
       }
     }
+    .no-more-gems {
+      color: $yellow-5;
+      font-size: 0.875em;
+      line-height: 1.33;
+      margin: 16px 48px 0 48px;
+    }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-
+// for cost icon of a single item
+    span.svg-icon.inline.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
       margin-right: 8px;
+      padding-top: 6px;
+    }
 
-      vertical-align: middle;
+    span.svg-icon.icon-16 {
+      height: 16px;
+      width: 16px;
+    }
+
+    .close-icon {
+      color: $gray-200;
+      stroke-width: 0px;
+
+      &:hover {
+          color: $gray-100;
+      }
+    }
+
+    .attributes-group {
+      margin: 32px;
+      border-radius: 4px;
+      line-height: 1.71;
+      font-size: 0.875;
+    }
+
+    .attributesGrid {
+      margin-top: 28px;
+      border-radius: 2px;
+      background-color: $gray-500;
+    }
+
+    .item-cost {
+      display: inline-flex;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
     }
 
     .cost {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 1.25rem;
       font-weight: bold;
-      line-height: 1.33;
-
-      vertical-align: middle;
+      padding: 6px 20px;
+      line-height: 1.4;
+      border-radius: 20px;
 
       &.gems {
-        color: $gems-color;
+        color: $green-10;
+        background-color: rgba(36, 204, 143, 0.15);
+        align-items: center;
       }
 
       &.gold {
-        color: $gold-color;
+        color: $yellow-5;
+        background-color: rgba(255, 190, 93, 0.15);
+        align-items: center;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+        background-color: rgba(41, 149, 205, 0.15);
+        align-items: center;
+      }
+    }
+
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      padding-top: 2px;
+      margin-top: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
       }
 
       &.hourglasses {
@@ -287,62 +505,84 @@
       }
     }
 
+  .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      line-height: 1.71;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+  }
+
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
-      min-width: 6rem;
+      margin-top: 16px;
+      padding: 4px 16px;
+      height: 32px;
 
       &:focus {
         border: 2px solid black;
       }
     }
 
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
-    }
+      .notEnough {
+        pointer-events: none;
+        opacity: 0.55;
+      }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-    }
+      .free-rebirth {
+        background-color: $yellow-5;
+        color: $white;
+        height: 2rem;
+        line-height: 16px;
+        margin: auto -1rem -1rem;
+      }
 
-    .notEnough {
-      pointer-events: none;
-      opacity: 0.55;
-    }
+      // .pt-015 {
+      //   padding-top: 0.15rem;
+      // }
 
-    .attributesGrid {
-      margin-top: 8px;
-      border-radius: 2px;
-      background-color: $gray-500;
-
-      margin: 10px 0 24px;
-    }
 
     .gems-left {
-      margin-top: .5em;
+      height: 32px;
+      background-color: $green-100;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      color: $green-1;
+      width: 100%;
+      margin-bottom: -24px;
     }
 
-    .free-rebirth {
-      background-color: $yellow-5;
+    .out-of-gems-banner {
+      height: 32px;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      background-color: $yellow-100;
+      color: $yellow-1;
+      width: 100%;
+      margin-bottom: -24px;
+    }
+
+    .limitedTime {
+      height: 32px;
+      width: 446px;
+      font-size: 0.75rem;
+      margin: 24px 0 0 0;
+      background-color: $purple-300;
       color: $white;
-      height: 2rem;
-      line-height: 16px;
-      margin: auto -1rem -1rem;
-    }
-
-    .pt-015 {
-      padding-top: 0.15rem;
+      margin-bottom: -24px;
     }
   }
+
 </style>
 
 <style lang="scss" scoped>
@@ -370,6 +610,8 @@ import svgGem from '@/assets/svg/gem.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
 import svgClock from '@/assets/svg/clock.svg';
 import svgWhiteClock from '@/assets/svg/clock-white.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from './balanceInfo.vue';
 import PinBadge from '@/components/ui/pinBadge';
@@ -377,6 +619,7 @@ import CountdownBanner from './countdownBanner';
 import currencyMixin from './_currencyMixin';
 import notifications from '@/mixins/notifications';
 import buyMixin from '@/mixins/buy';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import { mapState } from '@/libs/store';
 
@@ -407,14 +650,17 @@ export default {
     Avatar,
     PinBadge,
     CountdownBanner,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
   props: {
+    // eslint-disable-next-line vue/require-default-prop
     item: {
       type: Object,
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -433,10 +679,14 @@ export default {
         hourglasses: svgHourglasses,
         clock: svgClock,
         whiteClock: svgWhiteClock,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       selectedAmountToBuy: 1,
+      selectedAmount: 1,
       isPinned: false,
+      quantity: 1,
     };
   },
   computed: {
@@ -474,6 +724,11 @@ export default {
       return planGemLimits.convCap
         + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
     },
+    totalGems () {
+      if (!this.user.purchased.plan) return 0;
+      return planGemLimits.convCap
+        + this.user.purchased.plan.consecutive.gemCapExtra;
+    },
     attemptingToPurchaseMoreGemsThanAreLeft () {
       if (this.item && this.item.key && this.item.key === 'gem' && this.selectedAmountToBuy > this.gemsLeft) return true;
       return false;
@@ -490,6 +745,9 @@ export default {
     endDate () {
       return moment(this.item.event.end);
     },
+    totalOwned () {
+      return this.user.items[this.item.purchaseType][this.item.key] || 0;
+    },
   },
   watch: {
     item: function itemChanged () {
@@ -500,7 +758,9 @@ export default {
   methods: {
     onChange ($event) {
       this.$emit('change', $event);
+      this.selectedAmountToBuy = 1;
     },
+
     buyItem () {
       // @TODO: I  think we should buying to the items.
       // Turn the items into classes, and use polymorphism
@@ -597,6 +857,7 @@ export default {
       }
     },
     hideDialog () {
+      this.selectedAmountToBuy = 1;
       this.$root.$emit('bv::hide::modal', 'buy-modal');
     },
     getPriceClass () {

website/client/src/components/shops/market/sellModal.vue

@@ -4,9 +4,9 @@
     :hide-header="true"
     @change="onChange($event)"
   >
-    <div class="close">
+    <div>
       <span
-        class="svg-icon inline icon-10"
+        class="svg-icon close-icon icon-16 color"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
@@ -14,60 +14,73 @@
     </div>
     <div
       v-if="item"
-      class="content"
+      class="content bordered-item"
     >
       <div class="inner-content">
         <item
-          class="flat"
+          class="flat bordered-item"
           :item="item"
           :item-content-class="itemContextToSell.itemClass"
           :show-popover="false"
-        >
-          <countBadge
-            slot="itemBadge"
-            :show="true"
-            :count="itemContextToSell.itemCount"
-          />
-        </item>
+        />
+        <span class="owned">
+          {{ $t('owned') }}: <span class="user-amount">{{ itemContextToSell.itemCount }}</span>
+        </span>
         <h4 class="title">
           {{ itemContextToSell.itemName }}
         </h4>
         <div v-if="item.key === 'Saddle'">
-          <div class="text">
+          <div class="item-notes">
             {{ item.sellWarningNote() }}
           </div>
           <br>
         </div>
         <div v-else>
           <div>
-            <div class="text">
+            <div class="item-notes">
               {{ item.notes() }}
             </div>
-            <div>
-              <b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
+            <div class="item-cost">
+              <span class="cost gold">
+                <span
+                  class="svg-icon inline icon-24"
+                  aria-hidden="true"
+                  v-html="icons.gold"
+                ></span>
+                <span>{{ item.value }}</span>
+              </span>
             </div>
             <div>
-              <b-input
-                v-model="selectedAmountToSell"
-                class="itemsToSell"
-                type="number"
-                :max="itemContextToSell.itemCount"
-                min="1"
-                step="1"
-                @keyup.native="preventNegative($event)"
-              />
               <span
-                class="svg-icon inline icon-32"
+                class="how-many-to-sell"
+              >
+                {{ $t('howManyToSell') }}
+              </span>
+            </div>
+            <div>
+              <number-increment
+                @updateQuantity="selectedAmountToSell = $event"
+              />
+            </div>
+            <div class="total-row">
+              <span class="total-text">
+                {{ $t('sendTotal') }}
+              </span>
+              <span
+                class="svg-icon total icon-24"
                 aria-hidden="true"
                 v-html="icons.gold"
               ></span>
-              <span class="value">{{ item.value }}</span>
+              <span class="total-text gold">
+                {{ item.value * selectedAmountToSell }}
+              </span>
             </div>
             <button
               class="btn btn-primary"
+              :disabled="selectedAmountToSell > itemContextToSell.itemCount"
               @click="sellItems()"
             >
-              {{ $t('sell') }}
+              {{ $t('sellItems') }}
             </button>
           </div>
         </div>
@@ -77,8 +90,10 @@
       slot="modal-footer"
       class="clearfix"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span>
-      <balanceInfo class="float-right" />
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
+      <balanceInfo
+        class="float-right currency-totals"
+      />
     </div>
   </b-modal>
 </template>
@@ -95,51 +110,13 @@
     }
 
     .modal-dialog {
-      width: 330px;
+      width: 448px;
     }
 
-    .content {
-      text-align: center;
-
-    }
-    .inner-content {
-      margin: 33px auto auto;
-      width: 282px;
-    }
-
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-
-      margin-left: 24px;
-      margin-right: 8px;
-
-      vertical-align: middle;
-    }
-
-    .value {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: #df911e;
-
-      vertical-align: middle;
-    }
-
-    button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
-    }
-
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
     }
 
     .modal-footer {
@@ -148,29 +125,215 @@
       border-bottom-right-radius: 8px;
       border-bottom-left-radius: 8px;
       display: block;
+      margin: 24px 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
     }
 
-    .how-many-to-sell {
-      margin-bottom: 16px;
+    .content {
+      text-align: center;
+    }
+
+    .inner-content {
+      margin: 33px auto auto;
+      width: 282px;
+    }
+
+    .owned {
+      font-size: 0.75rem;
+      font-weight: bold;
+      line-height: 1.33;
+      background-color: $gray-600;
+      padding: 8px 8px;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
       display: block;
+      width: 141px;
+      margin-left: 71px;
+      margin-top: -48px;
+      position: relative;
+      z-index: 1;
+
+      .user-amount {
+        font-weight: normal !important;
+      }
+    }
+
+    .item-wrapper {
+      margin-top: -10px;
+    }
+
+    .item {
+      width: 141px;
+      height: 147px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      cursor: default;
+      margin-top: 8px;
+    }
+
+    .item-content {
+      transform: scale(1.45, 1.45);
+      top: -25px;
+      left: 1px;
+    }
+
+    .title {
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 26px;
+      margin-bottom: 0px;
+    }
+
+    .item-notes {
+       margin-top: 12px;
+       line-height: 1.71;
+       font-size: 0.875rem;
+    }
+
+// for cost icon of a single item
+    span.svg-icon.inline.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
+      margin-right: 8px;
+      padding-top: 6px;
+    }
+
+    span.svg-icon.icon-16 {
+      height: 16px;
+      width: 16px;
+    }
+
+    .close-icon {
+      color: $gray-200;
+      stroke-width: 0px;
+      cursor: pointer;
+
+      &:hover {
+        color: $gray-100;
+      }
+    }
+
+  .item-cost {
+      display: inline-flex;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
+    }
+
+    .cost {
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 1.25rem;
+      font-weight: bold;
+      padding: 6px 20px;
+      line-height: 1.4;
+      border-radius: 20px;
+
+      &.gold {
+        color: $yellow-5;
+        background-color: rgba(255, 190, 93, 0.15);
+        align-items: center;
+      }
     }
   }
+
+  .how-many-to-sell {
+    font-weight: bold !important;
+  }
+
+  .number-increment {
+     margin-top: 16px;
+  }
+
+  .total-row {
+    font-weight: bold;
+    font-size: 0.875rem;
+    margin-top: 16px;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
+
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      line-height: 1.71;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
+
+  button.btn.btn-primary {
+    margin-top: 16px;
+    padding: 4px 16px;
+    height: 32px;
+
+    &:focus {
+      border: 2px solid black;
+    }
+
+  .balance {
+    width: 74px;
+    height: 16px;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1.33;
+    color: $gray-200;
+  }
+
+
+}
 </style>
 
 <script>
 import svgClose from '@/assets/svg/close.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgGem from '@/assets/svg/gem.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import Item from '@/components/inventory/item';
-import CountBadge from '@/components/ui/countBadge';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 export default {
   components: {
     BalanceInfo,
     Item,
-    CountBadge,
+    numberIncrement,
   },
   data () {
     return {
@@ -181,6 +344,8 @@ export default {
         close: svgClose,
         gold: svgGold,
         gem: svgGem,
+        svgPositive,
+        svgNegative,
       }),
     };
   },
@@ -211,6 +376,10 @@ export default {
         this.selectedAmountToSell = 0;
       }
     },
+    maxOwned () {
+      const maxOwned = this.itemContextToSell.itemCount;
+      return maxOwned;
+    },
     sellItems () {
       if (!Number.isInteger(Number(this.selectedAmountToSell))) {
         this.selectedAmountToSell = 0;

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -33,6 +33,22 @@
           v-if="!item.locked"
           class="purchase-amount"
         >
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="priceType"
+            >
+              <span
+                class="svg-icon inline icon-24"
+                aria-hidden="true"
+                v-html="icons[priceType]"
+              >
+              </span>
+              <span
+                :class="priceType"
+              >{{ item.value }}</span>
+            </span>
+          </div>
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
@@ -42,24 +58,25 @@
           >
             {{ item.addlNotes }}
           </div>
-          <div class="box">
-            <input
-              v-model.number="selectedAmountToBuy"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
+          <div>
+            <number-increment
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+          </div>
+          <div class="total-row">
+            <span class="total-text">
+              {{ $t('sendTotal') }}
+            </span>
+            <span
+              class="svg-icon inline icon-20"
+              aria-hidden="true"
+              v-html="currencyIcon"
+            ></span>
+            <span
+              class="total"
+              :class="priceType"
+            >{{ item.value * selectedAmountToBuy }}</span>
           </div>
-          <span
-            class="svg-icon inline icon-32"
-            aria-hidden="true"
-            v-html="currencyIcon"
-          ></span>
-          <span
-            class="value"
-            :class="priceType"
-          >{{ item.value }}</span>
         </div>
         <button
           v-if="priceType === 'gems'
@@ -112,6 +129,40 @@
       margin-top: 1rem;
     }
 
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
+    }
+
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      margin-top: 24px;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
       margin-top: 8%;
       width: 448px !important;
@@ -129,8 +180,13 @@
       margin: 33px auto auto;
     }
 
-    .modal-body {
-      padding-bottom: 0px;
+    .item-notes {
+      height: 48px;
+      margin-top: 8px;
+      padding-left: 48.5px;
+      padding-right: 48.5px;
+      line-height: 1.71;
+      font-size: 0.875rem;
     }
 
     .questInfo {
@@ -152,16 +208,14 @@
       height: 100%;
     }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
+      margin-top: 14px;
+      padding: 4px 16px;
+      height: 32px;
+
+      &:focus {
+        border: 2px solid black;
+      }
     }
 
     .balance {
@@ -173,19 +227,6 @@
       color: $gray-200;
     }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-      padding: 1rem 1.5rem;
-
-      &> * {
-        margin: 0;
-      }
-    }
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
@@ -198,30 +239,108 @@
         margin-bottom: 16px;
       }
 
-      .box {
-        display: inline-block;
-        width: 74px;
-        height: 40px;
-        border-radius: 2px;
-        background-color: #ffffff;
-        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-        margin-right: 24px;
-
-        input {
-          width: 100%;
-          border: none;
+      .item-cost {
+        padding-bottom: 16px;
         }
 
-        input::-webkit-contacts-auto-fill-button {
-          visibility: hidden;
-          display: none !important;
-          pointer-events: none;
-          position: absolute;
-          right: 0;
-        }
+        .cost {
+          height: 40px;
+          font-size: 1.25rem;
+          font-weight: bold;
+          vertical-align: middle;
+          padding: 8px 20px 8px 20px;
+
+          &.gems {
+            color: $green-10;
+            background-color: rgba(36, 204, 143, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+          }
+
+          &.gold {
+            color: $yellow-5;
+            background-color: rgba(255, 190, 93, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+          }
+
+          &.hourglasses {
+            color: $hourglass-color;
+            background-color: rgba(41, 149, 205, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+            }
+          }
+
+    .total-row {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+    }
+
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
       }
     }
 
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      height: 24px;
+      line-height: 1.71;
+      padding-right: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+    }
+
+  span.svg-icon.inline.icon-20 {
+      height: 20px;
+      width: 20px;
+      margin-right: 4px;
+      vertical-align: middle;
+    }
+
+  span.svg-icon.inline.icon-24 {
+    height: 24px;
+    width: 24px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
+  span.svg-icon.inline.icon-32 {
+    height: 32px;
+    width: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
     @media only screen and (max-width: 1000px) {
       .modal-dialog {
         max-width: 80%;
@@ -234,9 +353,10 @@
       }
     }
   }
+}
 </style>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
   .value {
@@ -260,7 +380,7 @@
       color: $hourglass-color;
     }
   }
-</style>
+</style> -->
 
 <script>
 import moment from 'moment';
@@ -272,6 +392,8 @@ import svgExperience from '@/assets/svg/experience.svg';
 import svgGem from '@/assets/svg/gem.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import currencyMixin from '../_currencyMixin';
@@ -280,6 +402,7 @@ import buyMixin from '@/mixins/buy';
 import numberInvalid from '@/mixins/numberInvalid';
 import PinBadge from '@/components/ui/pinBadge';
 import CountdownBanner from '../countdownBanner';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import questDialogContent from './questDialogContent';
 import QuestRewards from './questRewards';
@@ -293,6 +416,7 @@ export default {
     PinBadge,
     questDialogContent,
     CountdownBanner,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
   props: {
@@ -301,6 +425,7 @@ export default {
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -312,9 +437,11 @@ export default {
         clock: svgClock,
         close: svgClose,
         experience: svgExperience,
-        gem: svgGem,
+        gems: svgGem,
         gold: svgGold,
-        hourglass: svgHourglasses,
+        hourglasses: svgHourglasses,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       isPinned: false,
@@ -339,8 +466,8 @@ export default {
     },
     currencyIcon () {
       if (this.priceType === 'gold') return this.icons.gold;
-      if (this.priceType === 'hourglasses') return this.icons.hourglass;
-      return this.icons.gem;
+      if (this.priceType === 'hourglasses') return this.icons.hourglasses;
+      return this.icons.gems;
     },
     endDate () {
       return moment(this.item.event.end);

website/client/src/components/shops/quests/questDialogContent.vue

@@ -33,17 +33,17 @@
 
   h3 {
     color: $gray-10;
-    margin-bottom: 0.25rem;
+    margin-bottom: 4pxrem;
   }
 
   .quest-image {
     margin: 0 auto;
-    margin-bottom: 1em;
-    margin-top: 1.5em;
+    margin-bottom: 16px;
+    margin-top: 24px;
   }
 
   .text {
-    margin-bottom: 1rem;
+    margin: 16px 16px;
     overflow-y: auto;
     text-overflow: ellipsis;
   }
@@ -54,10 +54,10 @@
     line-height: 1.71;
     color: $gray-50;
     text-align: center;
-    margin-bottom: 0.5rem;
+    margin-bottom: 8px;
 
     ::v-deep .user-label {
-      font-size: 14px;
+      font-size: 0.875rem;
     }
   }
 

website/client/src/components/shops/quests/questRewards.vue

@@ -177,9 +177,6 @@ export default {
   @import '~@/assets/scss/colors.scss';
 
   .quest-rewards {
-    margin-left: -1rem;
-    margin-right: -1rem;
-
     background-color: $gray-700;
   }
 

website/client/src/components/static/clearBrowserData.vue

@@ -7,13 +7,19 @@
         <br>
         <p class="text-center">
           <button
+            id="buttonClearBrowserData"
             class="btn btn-lg btn-danger"
-            popover-trigger="mouseover"
-            :popover="$t('localStorageClearExplanation')"
             @click="clearLocalStorage()"
           >
             {{ $t('localStorageClear') }}
           </button>
+          <b-popover
+            target="buttonClearBrowserData"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('localStorageClearExplanation')"
+          />
         </p>
         <br>
         <p v-html="$t('localStorageTryNext', localStorageTryNext) "></p>

website/client/src/components/static/faq.vue

@@ -17,6 +17,19 @@
           class="faq-question"
         >
           <h2
+            v-once
+            v-if="index === 0"
+          >
+            {{ $t('general') }}
+          </h2>
+          <h2
+            v-once
+            v-if="entry.heading === 'party-with-friends'"
+            id="parties"
+          >
+            {{ $t('parties') }}
+          </h2>
+          <h3
             v-once
             v-b-toggle="entry.heading"
             role="tab"
@@ -24,7 +37,7 @@
             @click="handleClick($event)"
           >
             {{ entry.question }}
-          </h2>
+          </h3>
           <b-collapse
             :id="entry.heading"
             :visible="isVisible(entry.heading)"
@@ -49,25 +62,36 @@
 </template>
 
 <style lang='scss' scoped>
-  .card-body {
-    margin-bottom: 1em;
+  h2 {
+    color: #34313a;
+    border-bottom: 1px solid #e1e0e3;
+    margin-top: 24px;
+    padding-bottom: 16px;
   }
 
-  .faq-question h2 {
-    cursor: pointer;
-  }
+  .faq-question {
+    a {
+      text-decoration: none;
+      color: #4F2A93;
+    }
 
-  .faq-question .card-body {
-    padding: 0;
-  }
+    h3 {
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 1.75;
+      cursor: pointer;
 
-  .static-wrapper .faq-question h2 {
-    margin: 0 0 16px 0;
-  }
+      &:hover {
+        text-decoration: underline;
+      }
+    }
 
-  .faq-question a {
-    text-decoration: none;
-    color: #4F2A93;
+    .card-body {
+      padding: 0;
+      font-size: 14px;
+      line-height: 1.71;
+      margin-bottom: 1em;
+    }
   }
 
   @media only screen and (max-width: 768px) {

website/client/src/components/static/home.vue

@@ -354,6 +354,9 @@
 
 <style lang='scss'>
 @import '~@/assets/scss/static.scss';
+  #front .form-text a {
+    color: $white !important;
+  }
 </style>
 
 <style lang="scss" scoped>
@@ -362,10 +365,6 @@
 @import url('https://fonts.googleapis.com/css?family=Varela+Round');
 
   #front {
-    .form-text a {
-      color: $white !important;
-    }
-
     .container-fluid {
       margin: 0;
     }

website/client/src/components/static/pressKit.vue

@@ -165,10 +165,6 @@ export default {
           question: 'pkQuestion7',
           answer: 'pkAnswer7',
         },
-        {
-          question: 'pkQuestion8',
-          answer: 'pkAnswer8',
-        },
       ],
     });
   },

website/client/src/components/static/staticWrapper.vue

@@ -198,10 +198,6 @@
       color: $purple-200;
     }
 
-    li, p {
-      font-size: 16px;
-    }
-
     .media img {
       margin: 1em;
     }

website/client/src/components/tasks/column.vue

@@ -355,6 +355,7 @@ import Task from './task';
 import ClearCompletedTodos from './clearCompletedTodos';
 import buyMixin from '@/mixins/buy';
 import sync from '@/mixins/sync';
+import externalLinks from '@/mixins/externalLinks';
 import { mapState, mapActions, mapGetters } from '@/libs/store';
 import shopItem from '../shops/shopItem';
 import BuyQuestModal from '@/components/shops/quests/buyQuestModal.vue';
@@ -384,7 +385,7 @@ export default {
     shopItem,
     draggable,
   },
-  mixins: [buyMixin, notifications, sync],
+  mixins: [buyMixin, notifications, sync, externalLinks],
   // @TODO Set default values for props
   // allows for better control of props values
   // allows for better control of where this component is called
@@ -520,7 +521,12 @@ export default {
     // Get Category Filter Labels
     this.typeFilters = getFilterLabels(this.type, this.challenge);
     // Set default filter for task column
-    this.activateFilter(this.type);
+
+    if (this.challenge) {
+      this.activateFilter(this.type);
+    } else {
+      this.activateFilter(this.type, this.user.preferences.tasks.activeFilter[this.type], true);
+    }
   },
   mounted () {
     this.setColumnBackgroundVisibility();
@@ -534,6 +540,10 @@ export default {
       if (this.activeFilter.label !== 'complete2') return;
       this.loadCompletedTodos();
     });
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   beforeDestroy () {
     this.$root.$off('buyModal::boughtItem');
@@ -656,7 +666,7 @@ export default {
     taskSummary (task) {
       this.$emit('taskSummary', task);
     },
-    activateFilter (type, filter = '') {
+    activateFilter (type, filter = '', skipSave = false) {
       // Needs a separate API call as this data may not reside in store
       if (type === 'todo' && filter === 'complete2') {
         if (this.group && this.group._id) {
@@ -672,14 +682,16 @@ export default {
       // as default filter for daily
       // and set the filter as 'due' only when the component first
       // loads and not on subsequent reloads.
-      if (
-        type === 'daily' && filter === '' && !this.challenge
-        && this.user.preferences.dailyDueDefaultView
-      ) {
+      if (type === 'daily' && filter === '' && !this.challenge) {
         filter = 'due'; // eslint-disable-line no-param-reassign
       }
 
       this.activeFilter = getActiveFilter(type, filter, this.challenge);
+
+      if (!skipSave && !this.challenge) {
+        const propertyToUpdate = `preferences.tasks.activeFilter.${type}`;
+        this.$store.dispatch('user:set', { [propertyToUpdate]: filter });
+      }
     },
     setColumnBackgroundVisibility () {
       this.$nextTick(() => {

website/client/src/components/tasks/task.vue

@@ -6,6 +6,7 @@
         'groupTask': task.group.id,
         'task-not-editable': !teamManagerAccess,
         'task-not-scoreable': showTaskLockIcon,
+        'link-exempt': !isChallengeTask && !isGroupTask,
       }, `type_${task.type}`
       ]"
       @click="castEnd($event, task)"
@@ -240,7 +241,7 @@
             >
               <div
                 v-b-tooltip.hover.bottom="$t('dueDate')"
-                class="svg-icon calendar"
+                class="svg-icon calendar my-auto"
                 v-html="icons.calendar"
               ></div>
               <span>{{ formatDueDate() }}</span>
@@ -700,7 +701,7 @@
 
   .icons {
     margin-top: 4px;
-    color: $gray-300;
+    color: $gray-100;
     font-style: normal;
 
     &-right {
@@ -759,7 +760,7 @@
   }
 
   .due-overdue {
-    color: $red-50;
+    color: $maroon-10;
   }
 
   .calendar.svg-icon {
@@ -898,7 +899,7 @@
   }
 </style>
 <!-- eslint-enable max-len -->
-
+<!-- eslint-disable-next-line vue/component-tags-order -->
 <script>
 import moment from 'moment';
 import { v4 as uuid } from 'uuid';
@@ -1125,13 +1126,13 @@ export default {
       return moment.duration(endOfDueDate.diff(endOfToday));
     },
     checkIfOverdue () {
-      return this.calculateTimeTillDue().asDays() <= 0;
+      return this.calculateTimeTillDue().asDays() < 0;
     },
     formatDueDate () {
-      const timeTillDue = this.calculateTimeTillDue();
-      const dueIn = timeTillDue.asDays() === 0 ? this.$t('today') : timeTillDue.humanize(true);
-
-      return this.task.date && this.$t('dueIn', { dueIn });
+      if (moment().isSame(this.task.date, 'day')) {
+        return this.$t('today');
+      }
+      return moment(this.task.date).format(this.user.preferences.dateFormat.toUpperCase());
     },
     edit (e, task) {
       if (this.isRunningYesterdailies) return;

website/client/src/components/tasks/yesterdailyModal.vue

@@ -83,6 +83,7 @@
 <script>
 import moment from 'moment';
 import { mapState } from '@/libs/store';
+import externalLinks from '@/mixins/externalLinks';
 import scoreTask from '@/mixins/scoreTask';
 import sync from '@/mixins/sync';
 import Task from './task';
@@ -93,7 +94,7 @@ export default {
     Task,
     LoadingSpinner,
   },
-  mixins: [scoreTask, sync],
+  mixins: [externalLinks, scoreTask, sync],
   props: {
     yesterDailies: {
       type: Array,
@@ -108,6 +109,11 @@ export default {
       dueDate: moment().subtract(1, 'days'),
     };
   },
+  updated () {
+    window.setTimeout(() => {
+      this.handleExternalLinks();
+    }, 500);
+  },
   computed: {
     ...mapState({ user: 'user.data' }),
     tasksByType () {

website/client/src/components/ui/closeX.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="modal-close"
+    @click="$emit('close')"
+  >
+    <div
+      class="svg-icon svg-close color"
+      v-html="icons.close"
+    >
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .modal-close {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+
+    .svg-close {
+      width: 18px;
+      height: 18px;
+      vertical-align: middle;
+      opacity: 0.75;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+</style>
+
+<script>
+import close from '@/assets/svg/close.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close,
+      }),
+    };
+  },
+};
+</script>

website/client/src/components/userLink.vue

@@ -2,13 +2,13 @@
   <router-link
     v-if="displayName"
     v-b-tooltip.hover.top="tierTitle"
-    class="leader user-link"
+    class="leader user-link d-flex"
     :to="{'name': 'userProfile', 'params': {'userId': id}}"
     :class="levelStyle()"
   >
     {{ displayName }}
     <div
-      class="svg-icon"
+      class="svg-icon icon-12"
       v-html="tierIcon()"
     ></div>
   </router-link>
@@ -37,10 +37,15 @@
       color: $gray-50;
     }
 
+    &[class*="tier"] .svg-icon {
+      margin-top: 5px;
+    }
+    &.npc .svg-icon {
+      margin-top: 4px;
+    }
+
     .svg-icon {
-      width: 10px;
-      display: inline-block;
-      margin-left: .5em;
+      margin-left: 6px;
 
       &:empty {
         display: none;

website/client/src/components/userMenu/profile.vue

@@ -759,6 +759,7 @@ import challenge from '@/assets/svg/challenge.svg';
 import member from '@/assets/svg/member-icon.svg';
 import staff from '@/assets/svg/tier-staff.svg';
 import error404 from '../404';
+import externalLinks from '../../mixins/externalLinks';
 import { userCustomStateMixin } from '../../mixins/userState';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
@@ -772,7 +773,7 @@ export default {
     profileStats,
     error404,
   },
-  mixins: [userCustomStateMixin('userLoggedIn')],
+  mixins: [externalLinks, userCustomStateMixin('userLoggedIn')],
   props: ['userId', 'startingPage'],
   data () {
     return {
@@ -862,8 +863,12 @@ export default {
   mounted () {
     this.loadUser();
     this.oldTitle = this.$store.state.title;
+    this.handleExternalLinks();
     this.selectPage(this.startingPage);
   },
+  updated () {
+    this.handleExternalLinks();
+  },
   beforeDestroy () {
     if (this.oldTitle) {
       this.$store.dispatch('common:setTitle', {

website/client/src/components/userMenu/profileStats.vue

@@ -190,14 +190,10 @@
         class="col-12 col-md-6"
       >
         <div class="row col-12 stats-column">
-          <div class="col-12 col-md-4 attribute-label">
-            <span
-              class="hint"
-              :popover-title="$t(statInfo.title)"
-              popover-placement="right"
-              :popover="$t(statInfo.popover)"
-              popover-trigger="mouseenter"
-            ></span>
+          <div
+            :id="`${stat}-information`"
+            class="col-12 col-md-4 attribute-label"
+          >
             <div
               class="stat-title"
               :class="stat"
@@ -206,6 +202,13 @@
             </div>
             <strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
           </div>
+          <b-popover
+            :target="`${stat}-information`"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t(statInfo.popover)"
+          />
           <div class="col-12 col-md-6">
             <ul class="bonus-stats">
               <li>
@@ -355,7 +358,7 @@ export default {
       },
 
       allocateStatsList: {
-        str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
+        str: { title: 'allocateStr', popover: 'strText', allocatepop: 'allocateStrPop' },
         int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
         con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
         per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
@@ -364,7 +367,7 @@ export default {
       stats: {
         str: {
           title: 'strength',
-          popover: 'strengthText',
+          popover: 'strText',
         },
         int: {
           title: 'intelligence',

website/client/src/components/userMenu/stats.vue

@@ -146,17 +146,19 @@
           :key="stat"
           class="row"
         >
-          <div class="col-4">
-            <span
-              class="hint"
-              :popover-title="$t(statInfo.title)"
-              popover-placement="right"
-              :popover="$t(statInfo.popover)"
-              popover-trigger="mouseenter"
-            >
-              <strong>{{ $t(statInfo.title) }}</strong>
-            </span>
+          <div 
+            class="col-4"
+            :id="statInfo.title"
+          >
+            <strong> {{ $t(statInfo.title)}} </strong>
             <strong>: {{ statsComputed[stat] }}</strong>
+            <b-popover
+              :target="statInfo.title"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t(statInfo.popover)"
+            />
           </div>
           <div class="col-6">
             <ul class="bonus-stats">
@@ -183,27 +185,38 @@
             </ul>
           </div>
         </div>
-        <div v-if="user.stats.buffs.stealth">
+        <div 
+          v-if="user.stats.buffs.stealth"
+          id="stealthBuff"
+        >
           <strong
             v-once
             class="hint"
-            :popover-title="$t('stealth')"
-            popover-trigger="mouseenter"
-            popover-placement="right"
-            :popover="$t('stealthNewDay')"
           >{{ $t('stealth') }}</strong>
           <strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
+          <b-popover
+            target="stealthBuff"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('stealthNewDay')"
+          />
         </div>
-        <div v-if="user.stats.buffs.streaks">
+        <div
+          v-if="user.stats.buffs.streaks"
+          id="streaksFrozenBuff"
+        >
           <div>
-            <strong
-              class="hint"
-              popover-title="$t('streaksFrozen')"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('streaksFrozenText')"
-            ></strong>
-            {{ $t('streaksFrozen') }}
+            <strong>
+              {{ $t('streaksFrozen') }}
+            </strong>
+            <b-popover
+              target="streaksFrozenBuff"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t('streaksFrozenText')"
+            />
           </div>
         </div>
       </div>
@@ -237,19 +250,27 @@
             >
               {{ $t('noMoreAllocate') }}
             </p>
-            <p v-if="user.stats.points || userLevel100Plus">
+            <p 
+              v-if="user.stats.points || userLevel100Plus"
+              id="pointAllocation"
+            >
               <strong class="inline">{{ user.stats.points }}&nbsp;</strong>
-              <strong
-                class="hint"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t('levelPopover')"
-              >{{ $t('unallocated') }}</strong>
+              <strong> {{ $t('unallocated') }} </strong>
+              <b-popover
+                target="pointAllocation"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t('levelPopover')"
+              />
             </p>
           </div>
           <div>
             <fieldset class="auto-allocate">
-              <div class="checkbox">
+              <div 
+                id="preferenceAutomaticAllocation"
+                class="checkbox"
+              >
                 <label>
                   <input
                     v-model="user.preferences.automaticAllocation"
@@ -259,19 +280,24 @@
                       'preferences.allocationMode': 'taskbased'
                     })"
                   >
-                  <span
-                    class="hint"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                    :popover="$t('autoAllocationPop')"
-                  >{{ $t('autoAllocation') }}</span>
+                  <b-popover
+                    target="preferenceAutomaticAllocation"
+                    triggers="hover focus"
+                    placement="right"
+                    :prevent-overflow="false"
+                    :content="$t('autoAllocationPop')"
+                  />
+                  {{ $t('autoAllocation') }}
                 </label>
               </div>
               <form
                 v-if="user.preferences.automaticAllocation"
                 style="margin-left:1em"
               >
-                <div class="radio">
+                <div 
+                  id="optionFlatAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
@@ -280,15 +306,22 @@
                       value="flat"
                       @change="set({'preferences.allocationMode': 'flat'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('evenAllocationPop')"
-                    >{{ $t('evenAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('evenAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionFlatAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('evenAllocationPop')"
+                    />
                   </label>
                 </div>
-                <div class="radio">
+                <div 
+                  id="optionClassAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
@@ -297,47 +330,63 @@
                       value="classbased"
                       @change="set({'preferences.allocationMode': 'classbased'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('classAllocationPop')"
-                    >{{ $t('classAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('classAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionClassAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('classAllocationPop')"
+                    />
                   </label>
                 </div>
-                <div class="radio">
+                <div 
+                  id="optionTaskAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
                       type="radio"
                       name="allocationMode"
-                      value="taskbased"
+                      value="classbased"
                       @change="set({'preferences.allocationMode': 'taskbased'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('taskAllocationPop')"
-                    >{{ $t('taskAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('taskAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionTaskAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('taskAllocationPop')"
+                    />
                   </label>
                 </div>
               </form>
               <div
                 v-if="user.preferences.automaticAllocation
                   && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)"
+                id="buttonDistributePoints"
               >
                 <button
                   class="btn btn-primary btn-xs"
-                  popover-trigger="mouseenter"
-                  popover-placement="right"
-                  :popover="$t('distributePointsPop')"
                   @click="allocateNow({})"
                 >
                   <span class="glyphicon glyphicon-download"></span>
                   &nbsp;
                   {{ $t('distributePoints') }}
                 </button>
+                <b-popover
+                  target="buttonDistributePoints"
+                  triggers="hover focus"
+                  placement="right"
+                  :prevent-overflow="false"
+                  :content="$t('distributePointsPop')"
+                />
               </div>
             </fieldset>
           </div>
@@ -346,28 +395,35 @@
             :key="stat"
             class="row"
           >
-            <div class="col-8">
-              <span
-                class="hint"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t(statInfo.popover)"
-              ></span>
+            <div
+              :id="`${stat}-info`"
+              class="col-8"
+            >
               {{ $t(statInfo.title) + user.stats[stat] }}
+              <b-popover
+                :target="`${stat}-info`"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t(statInfo.popover)"
+              />
             </div>
             <div
               v-if="user.stats.points"
+              :id="`${stat}-allocate`"
               class="col-4"
               @click="allocate(stat)"
             >
-              <button
-                class="btn btn-primary"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t(statInfo.allocatepop)"
-              >
+              <button class="btn btn-primary">
                 +
               </button>
+              <b-popover
+                :target="`${stat}-allocate`"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t(statInfo.allocatePop)"
+              />
             </div>
           </div>
         </div>

website/client/src/main.js

@@ -33,9 +33,15 @@ setUpLogging();
 setupAnalytics(); // just create queues for analytics, no scripts loaded at this time
 const store = getStore();
 
-export default new Vue({
+const vueInstance = new Vue({
   el: '#app',
   router,
   store,
   render: h => h(AppComponent),
 });
+
+export default vueInstance;
+
+window.externalLink = url => {
+  vueInstance.$root.$emit('habitica:external-link', url);
+};

website/client/src/mixins/externalLinks.js

@@ -0,0 +1,36 @@
+import some from 'lodash/some';
+
+export default {
+  methods: {
+    handleExternalLinks () {
+      const { TRUSTED_DOMAINS } = process.env;
+      const allLinks = document.getElementsByTagName('a');
+
+      for (let i = 0; i < allLinks.length; i += 1) {
+        const link = allLinks[i];
+        let domainIndex = link.href.indexOf('www');
+        if (domainIndex !== -1 && domainIndex < 9) {
+          domainIndex += 4;
+        } else {
+          domainIndex = link.href.indexOf('//') + 2;
+        }
+
+        if ((link.classList.value.indexOf('external-link') === -1)
+          && (!link.offsetParent || link.offsetParent.classList.value.indexOf('link-exempt') === -1)
+          && domainIndex !== 1
+          && !some(TRUSTED_DOMAINS.split(','), domain => link.href.indexOf(domain) === domainIndex)) {
+          link.classList.add('external-link');
+          link.addEventListener('click', e => {
+            if (e.ctrlKey || e.metaKey) {
+              return;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+
+            window.externalLink(link.href);
+          });
+        }
+      }
+    },
+  },
+};

website/client/src/mixins/foolPet.js

@@ -40,15 +40,15 @@ export default {
         'Dragon',
         'Cactus',
       ];
-      if (!pet) return 'Pet-Cactus-Virtual';
+      if (!pet) return 'Pet-TigerCub-TeaShop';
       if (SPECIAL_PETS.indexOf(pet) !== -1) {
-        return 'Pet-Wolf-Virtual';
+        return 'Pet-Dragon-TeaShop';
       }
       const species = pet.slice(0, pet.indexOf('-'));
       if (includes(BASE_PETS, species)) {
-        return `Pet-${species}-Virtual`;
+        return `Pet-${species}-TeaShop`;
       }
-      return 'Pet-Fox-Virtual';
+      return 'Pet-BearCub-TeaShop';
     },
   },
 };

website/client/src/mixins/numberInvalid.js

@@ -1,7 +1,9 @@
 export default {
   computed: {
     numberInvalid () {
-      return this.selectedAmountToBuy < 1 || !Number.isInteger(this.selectedAmountToBuy);
+      const inputNumber = Number(this.selectedAmountToBuy);
+      return inputNumber < 1
+      || !Number.isInteger(inputNumber);
     },
   },
 };

website/client/src/mixins/spells.js

@@ -114,7 +114,7 @@ export default {
       this.castCancel();
 
       // the selected member doesn't have the flags property which sets `cardReceived`
-      if (spell.pinType !== 'card') {
+      if (spell.pinType !== 'card' && spell.bulk !== true) {
         try {
           spell.cast(this.user, target, {});
         } catch (e) {

website/client/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import * as Analytics from '@/libs/analytics';
 import getStore from '@/store';
 import handleRedirect from './handleRedirect';
 
@@ -72,13 +73,14 @@ const ItemsPage = () => import(/* webpackChunkName: "inventory" */'@/components/
 const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'@/components/inventory/equipment/index');
 const StablePage = () => import(/* webpackChunkName: "inventory" */'@/components/inventory/stable/index');
 
-// Guilds
+// Guilds & Parties
 const GuildIndex = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/index');
 const TavernPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/tavern');
 const MyGuilds = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/myGuilds');
 const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/discovery');
 const GroupPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/group');
 const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/groupPlan');
+const LookingForParty = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/lookingForParty');
 
 // Group Plans
 const GroupPlanIndex = () => import(/* webpackChunkName: "group-plans" */ '@/components/group-plans/index');
@@ -157,6 +159,7 @@ const router = new VueRouter({
       ],
     },
     { name: 'party', path: '/party', component: GroupPage },
+    { name: 'lookingForParty', path: '/looking-for-party', component: LookingForParty },
     { name: 'groupPlan', path: '/group-plans', component: GroupPlansAppPage },
     {
       name: 'groupPlanDetail',
@@ -433,6 +436,19 @@ router.beforeEach(async (to, from, next) => {
     }
   }
 
+  if (to.name === 'party') {
+    router.app.$root.$emit('update-party');
+  }
+
+  if (to.name === 'lookingForParty') {
+    Analytics.track({
+      hitType: 'event',
+      eventName: 'View Find Members',
+      eventAction: 'View Find Members',
+      eventCategory: 'behavior',
+    }, { trackOnClient: true });
+  }
+
   // Redirect old guild urls
   if (to.hash.indexOf('#/options/groups/guilds/') !== -1) {
     const splits = to.hash.split('/');

website/client/src/store/actions/party.js

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { loadAsyncResource } from '@/libs/asyncResource';
 
 export function getMembers (store, forceLoad = false) {
@@ -23,3 +24,14 @@ export function getParty (store, forceLoad = false) {
     forceLoad,
   });
 }
+
+export async function lookingForParty (store, payload) {
+  let response;
+  if (payload && payload.page) {
+    response = await axios.get(`api/v4/looking-for-party?page=${payload.page}`);
+  } else {
+    response = await axios.get('api/v4/looking-for-party');
+  }
+
+  return response.data.data;
+}

website/client/tests/unit/components/tasks/column.spec.js

@@ -21,6 +21,18 @@ describe('Task Column', () => {
         getters: {
           'tasks:getFilteredTaskList': () => [],
         },
+
+        state: {
+          user: {
+            data: {
+              preferences: {
+                tasks: {
+                  activeFilter: {},
+                },
+              },
+            },
+          },
+        },
       },
       mocks,
       stubs,
@@ -76,7 +88,20 @@ describe('Task Column', () => {
         'tasks:getFilteredTaskList': () => () => habits,
       };
 
-      const store = new Store({ getters });
+      const store = new Store({
+        getters,
+        state: {
+          user: {
+            data: {
+              preferences: {
+                tasks: {
+                  activeFilter: {},
+                },
+              },
+            },
+          },
+        },
+      });
 
       wrapper = makeWrapper({ store });
     });

website/client/tests/unit/components/tasks/task.spec.js

@@ -1,88 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import moment from 'moment';
-
-import Task from '@/components/tasks/task.vue';
-import Store from '@/libs/store';
-
-const localVue = createLocalVue();
-localVue.use(Store);
-
-describe('Task', () => {
-  let wrapper;
-
-  function makeWrapper (additionalTaskData = {}, additionalUserData = {}) {
-    return shallowMount(Task, {
-      propsData: {
-        task: {
-          group: {},
-          ...additionalTaskData,
-        },
-      },
-      store: {
-        state: {
-          user: {
-            data: {
-              preferences: {},
-              ...additionalUserData,
-            },
-          },
-        },
-        getters: {
-          'tasks:getTaskClasses': () => ({}),
-          'tasks:canEdit': () => ({}),
-          'tasks:canDelete': () => ({}),
-        },
-      },
-      mocks: { $t: (key, params) => key + (params ? JSON.stringify(params) : '') },
-      directives: { 'b-tooltip': {} },
-      localVue,
-    });
-  }
-
-  it('returns a vue instance', () => {
-    wrapper = makeWrapper();
-    expect(wrapper.isVueInstance()).to.be.true;
-  });
-
-  describe('Due date calculation', () => {
-    let clock;
-
-    function setClockTo (time) {
-      const now = moment(time);
-      clock = sinon.useFakeTimers(now.toDate());
-      return now;
-    }
-
-    afterEach(() => {
-      clock.restore();
-    });
-
-    it('formats due date to today if due today', () => {
-      const now = setClockTo('2019-09-17T17:57:00+02:00');
-      wrapper = makeWrapper({ date: now });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"today"}');
-    });
-
-    it('formats due date to tomorrow if due tomorrow', () => {
-      const now = setClockTo('2012-06-12T14:17:28Z');
-      wrapper = makeWrapper({ date: now.add(1, 'day') });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in a day"}');
-    });
-
-    it('formats due date to 5 days if due in 5 days', () => {
-      const now = setClockTo();
-      wrapper = makeWrapper({ date: now.add(5, 'days') });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in 5 days"}');
-    });
-
-    it('formats due date to tomorrow if today but before dayStart', () => {
-      const now = setClockTo('2019-06-12T04:23:37+02:00');
-      wrapper = makeWrapper({ date: now.add(8, 'hours') }, { preferences: { dayStart: 7 } });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in a day"}');
-    });
-  });
-});

website/client/vue.config.js

@@ -27,6 +27,7 @@ const envVars = [
   'APPLE_AUTH_CLIENT_ID',
   'AMPLITUDE_KEY',
   'LOGGLY_CLIENT_TOKEN',
+  'TRUSTED_DOMAINS',
   // TODO necessary? if yes how not to mess up with vue cli? 'NODE_ENV'
 ];
 

website/common/locales/ach/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/af/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/ar/achievements.json

@@ -144,5 +144,8 @@
     "achievementPolarProModalText": "لقد جمعت كل الحيوانات الأليفة القطبية!",
     "achievementBoneToPick": "جامع العظام",
     "achievementBoneToPickText": "فقست جميع الحيوانات الأليفة الهيكلية المغامرة والكلاسيكية!",
-    "achievementBoneToPickModalText": "لقد جمعت كل الحيوانات الأليفة الهيكلية المغامرة والكلاسيكية!"
+    "achievementBoneToPickModalText": "لقد جمعت كل الحيوانات الأليفة الهيكلية المغامرة والكلاسيكية!",
+    "achievementPlantParent": "والد النبات",
+    "achievementPlantParentText": "فقست جميع الحيوانات الأليفة النباتية في الألوان القياسية: الصبار والتريلنج!",
+    "achievementPlantParentModalText": "لقد جمعت كل الحيوانات الأليفة النباتية!"
 }

website/common/locales/ar/backgrounds.json

@@ -648,5 +648,19 @@
     "backgroundHauntedPhotoText": "صورة مسكونة",
     "backgroundHauntedPhotoNotes": "تجد نفسك محاصرًا في عالم أحادي اللون لصورة مسكونة.",
     "backgroundUndeadHandsText": "أيدي الزومبي",
-    "backgroundUndeadHandsNotes": "حاول الهروب من براثن أيدي الزومبي."
+    "backgroundUndeadHandsNotes": "حاول الهروب من براثن أيدي الزومبي.",
+    "backgrounds022022": "المجموعة 93: صدرت في فبراير 2022",
+    "backgroundFrozenPolarWatersText": "المياه القطبية المجمدة",
+    "backgroundFrozenPolarWatersNotes": "استكشف المياه القطبية المجمدة.",
+    "backgroundWinterCanyonText": "وادي شتوي",
+    "backgroundWinterCanyonNotes": "اذهب في مغامرة في وادي شتوي!",
+    "backgroundIcePalaceText": "قصر الجليد",
+    "backgrounds012022": "المجموعة 92: صدرت في يناير 2022",
+    "backgroundSnowyFarmText": "مزرعة ثلجية",
+    "backgroundMeteorShowerText": "دش النيزك",
+    "backgroundMeteorShowerNotes": "شاهد العرض الليلي المبهر لدش النيزك.",
+    "backgroundPalmTreeWithFairyLightsText": "شجرة نخيل مع أضواء زخرفية",
+    "backgroundSnowyFarmNotes": "تأكد من أن الجميع آمنون ودافئون في مزرعتك الثلجية.",
+    "backgroundIcePalaceNotes": "احكم في قصر الجليد.",
+    "backgroundPalmTreeWithFairyLightsNotes": "قف بجانب شجرة نخيل ملفوفة بأضواء زخرفية."
 }

website/common/locales/ar/communityguidelines.json

@@ -1,5 +1,4 @@
 {
-
     "tavernCommunityGuidelinesPlaceholder": "Friendly reminder: this is an all-ages chat, so please keep content and language appropriate! Consult the Community Guidelines in the sidebar if you have questions.",
     "lastUpdated": "آخر تحديث:",
     "commGuideHeadingWelcome": "أهلاً وسهلاً بك في Habitica!",
@@ -7,7 +6,7 @@
     "commGuidePara002": "To help keep everyone safe, happy, and productive in the community, we do have some guidelines. We have carefully crafted them to make them as friendly and easy-to-read as possible. Please take the time to read them before you start chatting.",
     "commGuidePara003": "تنطبق هذه القواعد على جميع المساحات الإجتماعية التي نستخدمها، بما في ذلك (ولكن لا تقتصر على) Trello، GitHub، Transifex و Wikia (أي الwiki). في بعض الأحيان، سوف تنشأ حالات غير متوقعة، مثل مصدراً جديداً من الصراع أو ظهور مستحضراً للأرواح الشرية. عندما يحدث ذلك، يجوز للمشرفين تعديل هذه المبادئ التوجيهية للحفاظ على سلامة المجتمع من التهديدات الجديدة. ولكن لا تخف: سيتم إعلامك عن طريق إعلان من الآنسة Bailey إذا تغيرت المبادئ التوجيهية.",
     "commGuideHeadingInteractions": "التفاعل في Habitica",
-    "commGuidePara015": "Habitica has two kinds of social spaces: public, and private. Public spaces include the Tavern, Public Guilds, GitHub, Trello, and the Wiki. Private spaces are Private Guilds, Party chat, and Private Messages. All Display Names must comply with the public space guidelines. To change your Display Name, go on the website to User > Profile and click on the \"Edit\" button.",
+    "commGuidePara015": "يحتوي Habitica على نوعين من الفضاءات الاجتماعية: العامة والخاصة. تشمل الفضاءات العامة التي يمكن الوصول إليها الحانوت والمنتديات العامة و GitHub و Trello والويكي. الفضاءات الخاصة هي الأندية الخاصة والدردشة الجماعية والرسائل الخاصة. يجب على جميع أسماء العرض وأسماء المستخدمين @ اتباع إرشادات الفضاء العام. لتغيير اسم العرض و / أو اسم المستخدم @ ، انتقل إلى القائمة> الإعدادات> الملف الشخصي على الهاتف المحمول. على الويب ، انتقل إلى المستخدم> الإعدادات.",
     "commGuidePara016": "عند التنقل ما بين الأماكن العامة في Habitica، هناك بعض القواعد العامة للحفاظ على سعادة وسلامة الجميع. ستكون هذه القواعد سهلة عليك أيها المغامر!",
     "commGuideList02A": "<strong>Respect each other</strong>. Be courteous, kind, friendly, and helpful. Remember: Habiticans come from all backgrounds and have had wildly divergent experiences. This is part of what makes Habitica so cool! Building a community means respecting and celebrating our differences as well as our similarities. Here are some easy ways to respect each other:",
     "commGuideList02B": "<strong>التزم بجميع <a href='/static/terms' target='_blank'>الشروط والأحكام</a></strong>.",

website/common/locales/ar/faq.json

@@ -1,11 +1,11 @@
 {
     "frequentlyAskedQuestions": "الأسئلة الأكثر تكراراً",
     "faqQuestion0": "أنا محتار. من أين استطيع أن احصل على نظرة عامة؟",
-    "iosFaqAnswer0": "First, you'll set up tasks that you want to do in your everyday life. Then, as you complete the tasks in real life and check them off, you'll earn experience and gold. Gold is used to buy equipment and some items, as well as custom rewards. Experience causes your character to level up and unlock content such as Pets, Skills, and Quests! You can customize your character under Menu > Customize Avatar.\n\n Some basic ways to interact: click the (+) in the upper-right-hand corner to add a new task. Tap on an existing task to edit it, and swipe left on a task to delete it. You can sort tasks using Tags in the upper-left-hand corner, and expand and contract checklists by clicking on the checklist bubble.",
+    "iosFaqAnswer0": "أولاً ، ستقوم بإعداد المهام التي تريد القيام بها في حياتك اليومية. ثم ، بمجرد الانتهاء من المهام في الحياة الحقيقية وتحققها ، ستكسب الخبرة والذهب. يتم استخدام الذهب لشراء المعدات وبعض العناصر ، بالإضافة إلى المكافآت المخصصة. يؤدي الخبرة إلى صعود شخصيتك وفتح محتوى مثل الحيوانات الأليفة والمهارات والمهام! يمكنك تخصيص شخصيتك في القائمة> تخصيص الصورة الرمزية.\n\n بعض الطرق الأساسية للتفاعل: انقر على (+) في الزاوية العلوية اليمنى لإضافة مهمة جديدة. انقر فوق المهمة الموجودة لتحريرها ، واسحب إلى اليسار على المهمة لحذفها. يمكنك فرز المهام باستخدام العلامات في الزاوية العلوية اليسرى ، وتوسيع وطي قوائم الاختيار عن طريق النقر على فقاعة قائمة الاختيارات.",
     "androidFaqAnswer0": "First, you'll set up tasks that you want to do in your everyday life. Then, as you complete the tasks in real life and check them off, you'll earn experience and gold. Gold is used to buy equipment and some items, as well as custom rewards. Experience causes your character to level up and unlock content such as Pets, Skills, and Quests! You can customize your character under Menu > [Inventory >] Avatar.\n\n Some basic ways to interact: click the (+) in the lower-right-hand corner to add a new task. Tap on an existing task to edit it, and swipe left on a task to delete it. You can sort tasks using Tags in the upper-right-hand corner, and expand and contract checklists by clicking on the checklist count box.",
     "webFaqAnswer0": "First, you'll set up tasks that you want to do in your everyday life. Then, as you complete the tasks in real life and check them off, you'll earn Experience and Gold. Gold is used to buy equipment and some items, as well as custom rewards. Experience causes your character to level up and unlock content such as pets, skills, and quests! For more detail, check out a step-by-step overview of the game at [Help -> Overview for New Users](https://habitica.com/static/overview).",
     "faqQuestion1": "كيف أضيف مهماتي؟",
-    "iosFaqAnswer1": "Good Habits (the ones with a +) are tasks that you can do many times a day, such as eating vegetables. Bad Habits (the ones with a -) are tasks that you should avoid, like biting nails. Habits with a + and a - have a good choice and a bad choice, like taking the stairs vs. taking the elevator. Good Habits award experience and gold. Bad Habits subtract health.\n\n Dailies are tasks that you have to do every day, like brushing your teeth or checking your email. You can adjust the days that a Daily is due by tapping to edit it. If you skip a Daily that is due, your avatar will take damage overnight. Be careful not to add too many Dailies at once!\n\n To-Dos are your To-Do list. Completing a To-Do earns you gold and experience. You never lose health from To-Dos. You can add a due date to a To-Do by tapping to edit.",
+    "iosFaqAnswer1": "العادات الجيدة (تلك التي تحتوي على علامة \"+\") هي المهام التي يمكنك القيام بها عدة مرات في اليوم، مثل تناول الخضروات. العادات السيئة (تلك التي تحتوي على علامة \"-\") هي المهام التي يجب عليك تجنبها، مثل عض الأظافر. والعادات التي تحتوي على علامة \"+\" و \"-\" لديها خيار جيد وخيار سيئ، مثل استخدام الدرج بدلاً من المصعد.\n\nالعادات الجيدة تمنحك خبرة وذهب. والعادات السيئة تقلل من صحتك.\n\nالمهام اليومية هي المهام التي يجب عليك القيام بها كل يوم، مثل تنظيف أسنانك أو التحقق من بريدك الإلكتروني. يمكنك تعديل تواريخ المهام اليومية بالنقر لتحريرها. إذا تخطيت مهمة يومية محددة، فسيتلقى أفاتارك ضررًا خلال الليل. كن حذرًا من عدم إضافة العديد من المهام اليومية في وقت واحد!\n\nالمهام التي يجب القيام بها هي قائمة المهام الخاصة بك. إكمال المهام يمنحك الذهب والخبرة. لن تفقد أبدًا صحتك بسبب هذه المهام. يمكنك إضافة تاريخ استحقاق للمهام التي يجب القيام بها بالنقر لتحريرها.",
     "androidFaqAnswer1": "Good Habits (the ones with a +) are tasks that you can do many times a day, such as eating vegetables. Bad Habits (the ones with a -) are tasks that you should avoid, like biting nails. Habits with a + and a - have a good choice and a bad choice, like taking the stairs vs. taking the elevator. Good Habits award experience and gold. Bad Habits subtract health.\n\n Dailies are tasks that you have to do every day, like brushing your teeth or checking your email. You can adjust the days that a Daily is due by tapping to edit it. If you skip a Daily that is due, your character will take damage overnight. Be careful not to add too many Dailies at once!\n\n To-Dos are your To-Do list. Completing a To-Do earns you gold and experience. You never lose health from To-Dos. You can add a due date to a To-Do by tapping to edit.",
     "webFaqAnswer1": "* Good Habits (the ones with a :heavy_plus_sign:) are tasks that you can do many times a day, such as eating vegetables. Bad Habits (the ones with a :heavy_minus_sign:) are tasks that you should avoid, like biting nails. Habits with a :heavy_plus_sign: and a :heavy_minus_sign: have a good choice and a bad choice, like taking the stairs vs. taking the elevator. Good Habits award Experience and Gold. Bad Habits subtract Health.\n* Dailies are tasks that you have to do every day, like brushing your teeth or checking your email. You can adjust the days that a Daily is due by clicking the pencil item to edit it. If you skip a Daily that is due, your avatar will take damage overnight. Be careful not to add too many Dailies at once!\n* To-Dos are your To-Do list. Completing a To-Do earns you Gold and Experience. You never lose Health from To-Dos. You can add a due date to a To-Do by clicking the pencil icon to edit.",
     "faqQuestion2": "ما هي أمثلة المهمات؟",

website/common/locales/ar/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/ar/questscontent.json

@@ -1,11 +1,11 @@
 {
     "questEvilSantaText": "سانتا الموقع بالفخ",
-    "questEvilSantaNotes": "You hear agonized roars deep in the icefields. You follow the growls - punctuated by the sound of cackling - to a clearing in the woods, where you see a fully-grown polar bear. She's caged and shackled, fighting for her life. Dancing atop the cage is a malicious little imp wearing a castaway costume. Vanquish Trapper Santa, and save the beast!",
+    "questEvilSantaNotes": "تسمع زئيرًا متألمة في عمق حقول الجليد. تتبع النموات - المفصولة بصوت الضحك - إلى مساحة صافية في الغابة ، حيث ترى دبًا قطبيًا ناضجًا تمامًا. إنها مسجونة ومقيدة ، تحارب من أجل حياتها. يرقص فوق القفص عفريت صغيرة شريرة ترتدي زي الناجي. اهزم صياد سانتا وانقذ الوحش! <br> <br> <strong> ملاحظة </strong>: \"صياد سانتا\" يمنح إنجازًا قابلًا للتكديس للمهمة ولكنه يعطي جبلًا نادرًا يمكن إضافته إلى طاولة الخيل الخاصة بك مرة واحدة.",
     "questEvilSantaCompletion": "Trapper Santa squeals in anger, and bounces off into the night. The grateful she-bear, through roars and growls, tries to tell you something. You take her back to the stables, where Matt Boch the Beast Master listens to her tale with a gasp of horror. She has a cub! He ran off into the icefields when mama bear was captured.",
     "questEvilSantaBoss": "سانتا الموقع بالفخ",
     "questEvilSantaDropBearCubPolarMount": "دب قطبي (مركب)",
-    "questEvilSanta2Text": "البحث عن الشبل",
-    "questEvilSanta2Notes": "When Trapper Santa captured the polar bear mount, her cub ran off into the icefields. You hear twig-snaps and snow crunch through the crystalline sound of the forest. Paw prints! You start racing to follow the trail. Find all the prints and broken twigs, and retrieve the cub!",
+    "questEvilSanta2Text": "ابحث عن الشبل",
+    "questEvilSanta2Notes": "عندما اعتقل صياد السانتا الدب القطبي، هرب صغيرها إلى حقول الجليد. تسمع صوت تكسر أغصان الشجر وصوت الثلج يتكسر بينما تجوب الغابة. آثار بصمات الكفوف! تبدأ بالجري لمتابعة الأثر. ابحث عن جميع الأثر والأغصان المكسورة واسترد الصغير!<br><br><strong>ملاحظة</strong>: تمنح \"البحث عن الصغير\" إنجازًا لمهمة يمكن تراكمه ولكن يمنح حيوانًا أليفًا نادرًا يمكن إضافته إلى مستودعك مرة واحدة فقط.",
     "questEvilSanta2Completion": "You've found the cub! It will keep you company forever.",
     "questEvilSanta2CollectTracks": "مسارات",
     "questEvilSanta2CollectBranches": "أغصان مكسورة",

website/common/locales/ar/subscriber.json

@@ -136,5 +136,8 @@
     "cancelSubInfoGoogle": "الرجاء الانتقال إلى \"الحساب\"> قسم \"الاشتراكات\" في متجر Google Play لإلغاء اشتراكك أو لمعرفة تاريخ انتهاء إشتراكك إذا كنت قد ألغيته بالفعل. هذه الشاشة غير قادرة على إظهار ما إذا كان قد تم إلغاء اشتراكك.",
     "organization": "منظمة",
     "giftASubscription": "إهداء إشتراك",
-    "viewSubscriptions": "عرض الإشتراكات"
+    "viewSubscriptions": "عرض الإشتراكات",
+    "howManyGemsSend": "كم عدد الجواهر التي ترغب في إرسالها؟",
+    "howManyGemsPurchase": "كم عدد الأحجار الكريمة التي ترغب في شرائها؟",
+    "needToPurchaseGems": "هل تحتاج إلى شراء جواهر كهدية؟"
 }

website/common/locales/be/achievements.json

@@ -1,8 +1,8 @@
 {
-  "achievement": "Achievement",
-  "onwards": "Onwards!",
-  "levelup": "By accomplishing your real life goals, you leveled up and are now fully healed!",
-  "reachedLevel": "You Reached Level <%= level %>",
-  "achievementLostMasterclasser": "Quest Completionist: Masterclasser Series",
-  "achievementLostMasterclasserText": "Completed all sixteen quests in the Masterclasser Quest Series and solved the mystery of the Lost Masterclasser!"
+    "achievement": "Дасягненьне",
+    "onwards": "Наперад!",
+    "levelup": "By accomplishing your real life goals, you leveled up and are now fully healed!",
+    "reachedLevel": "You Reached Level <%= level %>",
+    "achievementLostMasterclasser": "Quest Completionist: Masterclasser Series",
+    "achievementLostMasterclasserText": "Completed all sixteen quests in the Masterclasser Quest Series and solved the mystery of the Lost Masterclasser!"
 }

website/common/locales/be/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/be/settings.json

@@ -1,6 +1,6 @@
 {
-    "settings": "Settings",
-    "language": "Language",
+    "settings": "Налады",
+    "language": "Мова",
     "americanEnglishGovern": "In the event of a discrepancy in the translations, the American English version governs.",
     "helpWithTranslation": "Would you like to help with the translation of Habitica? Great! Then visit <a href=\"/groups/guild/7732f64c-33ee-4cce-873c-fc28f147a6f7\">the Aspiring Linguists Guild</a>!",
     "stickyHeader": "Sticky header",

website/common/locales/bn/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/ca/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/cs/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/da/groups.json

@@ -340,5 +340,23 @@
     "singleCompletion": "Single - Completes when any assigned user finishes",
     "allAssignedCompletion": "All - Completes when all assigned users finish",
     "pmReported": "Tak, fordi du rapporterede denne besked.",
-    "features": "Funktioner"
+    "features": "Funktioner",
+    "invitedToPartyBy": "<a href=\"/profile/<%- userId %>\" target=\"_blank\">@<%- userName %></a> har inviteret dig til holdet <span class=\"notification-bold\"><%- party %></span>",
+    "PMUserDoesNotReceiveMessages": "Denne bruger modtager ikke længere private beskeder",
+    "blockedToSendToThisUser": "Du kan ikke sende til denne spiller da du har blokeret denne spiller.",
+    "blockYourself": "Du kan ikke blokere dig selv",
+    "selectGift": "Vælg Gave",
+    "sendGiftToWhom": "Hvem vil du gerne sende en gave til?",
+    "PMDisabled": "Slå Private Beskeder fra",
+    "editGuild": "Rediger Klan",
+    "sendGiftTotal": "I alt:",
+    "usernameOrUserId": "Indtast @brugernavn eller Bruger ID",
+    "sendGiftLabel": "Vil du gerne sende en gavebesked?",
+    "giftMessageTooLong": "Maximum længe for gavebeskeden er <%= maxGiftMessageLength %>.",
+    "userWithUsernameOrUserIdNotFound": "Brugernavn eller Bruger ID findes ikke.",
+    "editParty": "Rediger Hold",
+    "leaveGuild": "Forlad Klan",
+    "joinGuild": "Tilslut Klan",
+    "PMUnblockUserToSendMessages": "Fjern denne brugers blokering for at sende og modtage beskeder.",
+    "selectSubscription": "Vælg Abonnement"
 }

website/common/locales/de/achievements.json

@@ -141,5 +141,8 @@
     "achievementWoodlandWizardText": "Du hast alle Standard-Farben der Waldkreaturen ausgebrütet: Dachs, Bär, Hirsch, Fuchs, Frosch, Igel, Eule, Schnecke, Eichhörnchen und Bäumling!",
     "achievementBoneToPickModalText": "Du hast alle klassischen und Quest-Skeletthaustiere gesammelt!",
     "achievementBoneToPick": "Ein harter Knochen",
-    "achievementBoneToPickText": "Hat alle klassischen und Quest-Skeletthaustiere ausgebrütet!"
+    "achievementBoneToPickText": "Hat alle klassischen und Quest-Skeletthaustiere ausgebrütet!",
+    "achievementPolarProText": "Hat alle Standardfarben der Polar-Haustiere ausgebrütet: Bär, Fuchs, Pinguin, Wal und Wolf!",
+    "achievementPolarPro": "Polar-Profi",
+    "achievementPolarProModalText": "Du hast alle Polar-Haustiere gesammelt!"
 }