fix(timetrav): pinning, mobile order

website/client/src/components/creatorIntro.vue

@@ -166,7 +166,7 @@
           v-if="!filterBackgrounds"
           class="row text-center title-row"
         >
-          <strong>{{ backgroundShopSets[1].text }}</strong>
+          <strong>{{ backgroundShopSets[0].text }}</strong>
         </div>
         <div
           v-if="!filterBackgrounds"
@@ -174,14 +174,14 @@
         >
           <div
             v-if="showPlainBackgroundBlurb(
-              backgroundShopSets[1].identifier, backgroundShopSets[1].items
+              backgroundShopSets[0].identifier, backgroundShopSets[0].items
             )"
             class="col-12"
           >
             {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
           </div>
           <div
-            v-for="bg in backgroundShopSets[1].items"
+            v-for="bg in backgroundShopSets[0].items"
             :key="bg.key"
             class="col-2"
             :popover-title="bg.text"
@@ -201,14 +201,14 @@
           v-if="!filterBackgrounds"
           class="row text-center title-row"
         >
-          <strong>{{ backgroundShopSets[0].text }}</strong>
+          <strong>{{ backgroundShopSets[1].text }}</strong>
         </div>
         <div
           v-if="!filterBackgrounds"
           class="row title-row"
         >
           <div
-            v-for="bg in backgroundShopSets[0].items"
+            v-for="bg in backgroundShopSets[1].items"
             :key="bg.key"
             class="col-4 text-center customize-option background-button"
             :popover-title="bg.text"

website/common/locales/en/subscriber.json

@@ -180,7 +180,7 @@
     "notEnoughHourglasses": "You don't have enough Mystic Hourglasses.",
     "hourglassBuyEquipSetConfirm": "Buy this full set of items for 1 Mystic Hourglass?",
     "hourglassBuyItemConfirm": "Buy this item for 1 Mystic Hourglass?",
-    "backgroundsAlreadyOwned": "Background already owned.",
+    "backgroundAlreadyOwned": "Background already owned.",
     "petsAlreadyOwned": "Pet already owned.",
     "mountsAlreadyOwned": "Mount already owned.",
     "typeNotAllowedHourglass": "Item type not supported for purchase with Mystic Hourglass. Allowed types: <%= allowedTypes %>",

website/common/script/content/appearance/backgrounds.js

@@ -955,6 +955,26 @@ const backgrounds = {
       notes: t('backgroundSnowglobeNotes'),
     },
   },
+  timeTravelBackgrounds: {
+    airship: {
+      text: t('backgroundAirshipText'),
+      notes: t('backgroundAirshipNotes'),
+      price: 1,
+      currency: 'hourglasses',
+    },
+    clocktower: {
+      text: t('backgroundClocktowerText'),
+      notes: t('backgroundClocktowerNotes'),
+      price: 1,
+      currency: 'hourglasses',
+    },
+    steamworks: {
+      text: t('backgroundSteamworksText'),
+      notes: t('backgroundSteamworksNotes'),
+      price: 1,
+      currency: 'hourglasses',
+    },
+  },
   incentiveBackgrounds: {
     violet: {
       text: t('backgroundVioletText'),
@@ -987,26 +1007,6 @@ const backgrounds = {
       currency: 'loginIncentive',
     },
   },
-  timeTravelBackgrounds: {
-    airship: {
-      text: t('backgroundAirshipText'),
-      notes: t('backgroundAirshipNotes'),
-      price: 1,
-      currency: 'hourglasses',
-    },
-    clocktower: {
-      text: t('backgroundClocktowerText'),
-      notes: t('backgroundClocktowerNotes'),
-      price: 1,
-      currency: 'hourglasses',
-    },
-    steamworks: {
-      text: t('backgroundSteamworksText'),
-      notes: t('backgroundSteamworksNotes'),
-      price: 1,
-      currency: 'hourglasses',
-    },
-  },
 };
 /* eslint-enable quote-props */
 

website/common/script/ops/buy/hourglassPurchase.js

@@ -8,6 +8,8 @@ import {
   NotAuthorized,
 } from '../../libs/errors';
 import errorMessage from '../../libs/errorMessage';
+import getItemInfo from '../../libs/getItemInfo';
+import { removeItemByPath } from '../pinnedGearUtils';
 
 export default function purchaseHourglass (user, req = {}, analytics, quantity = 1) {
   const key = get(req, 'params.key');
@@ -29,6 +31,9 @@ export default function purchaseHourglass (user, req = {}, analytics, quantity =
 
     user.purchased.background[key] = true;
     user.purchased.plan.consecutive.trinkets -= 1;
+    const itemInfo = getItemInfo(user, 'background', content.backgroundsFlat[key]);
+    removeItemByPath(user, itemInfo.path);
+
     if (user.markModified) user.markModified('purchased.background');
   } else if (type === 'quests') {
     if (!content.quests[key] || content.quests[key].category !== 'timeTravelers') throw new NotAuthorized(i18n.t('notAllowedHourglass', req.language));