fix(client): Correct logic to show premium pets

Fixes #7888

website/client/js/controllers/inventoryCtrl.js

@@ -357,6 +357,34 @@ habitrpg.controller("InventoryCtrl",
     $scope.timeTravelersCategories = Shared.shops.getTimeTravelersCategories(user);
     $scope.seasonalShopCategories = Shared.shops.getSeasonalShopCategories(user);
 
+    $scope.shouldShowPremiumPetRow = function (potion) {
+      potion = Content.premiumHatchingPotions[potion];
+
+      if (!potion) {
+        return false;
+      }
+      if (user.items.hatchingPotions[potion.key] > 0) {
+        return true;
+      }
+      if (potion.canBuy()) {
+        return true;
+      }
+
+      var pets = Object.keys(user.items.pets);
+      var hasAPetOfPotion = pets.find(function (pet) {
+        return pet.indexOf(potion.key) !== -1;
+      });
+
+      return hasAPetOfPotion;
+    };
+
+    $scope.shouldShowPremiumPetSection = function () {
+      var potions = Content.premiumHatchingPotions;
+      return Object.keys(potions).find(function (potion) {
+        return $scope.shouldShowPremiumPetRow(potions[potion].key);
+      });
+    };
+
     function _updateDropAnimalCount(items) {
       $scope.petCount = Shared.count.beastMasterProgress(items.pets);
       $scope.mountCount = Shared.count.mountMasterProgress(items.mounts);

website/views/options/inventory/pets.jade

@@ -25,11 +25,11 @@ mixin petList(eggSource, potionSource)
         h4 {{:: env.t('stableBeastMasterProgress', { number: beastMasterProgress }) }}
   .row: .col-md-12
     +petList(env.Content.dropEggs,env.Content.dropHatchingPotions)
-  .row: .col-md-12
+  .row(ng-if="::shouldShowPremiumPetSection()"): .col-md-12
     h4=env.t('magicPets')
     menu.pets(type='list')
       each potion in env.Content.premiumHatchingPotions
-        li.customize-menu
+        li.customize-menu(ng-if="::shouldShowPremiumPetRow('#{potion.key}')")
           menu
             each egg in env.Content.dropEggs
               - pet = egg.key+"-"+potion.key