Feature/sortable reward area (#9930)

* Client POC

We need to wrap each draggable region it its own div or else the
"draggable" element will conflict with each other. This screws up the
styling but that is totally fixable

* Ah that ref was being used after all, changing back

* Scaffold out a new callback for when we drag these things

Next is going to be the hard part: I need to save the sort order for
these to the database. I don't even know if there is a schema but hey
this is the best place to start

* Firefox caching is the problem: don't actually need the wrapper div

So I guess I should try this in chrome and see how it works then come
back to firefox and figure out what the heck is going on

* Scaffolding out our API call to save the sort order

The endpoint doesn't exist yet so we will need to add that

* Ok we are now calling our API endpoint to reorder these things

Of course it doesn't exist yet so you get a 404 when you try, but that
is ok

* Defining api endpoint, a work in progress

In particular I really had ought to use _id for these too, it appears
that the primary way we detect order doesn't even use "key" at all.

* Switching to using the pinned item UUID

This has much better results, but of course the server and client logic
don't match now. Will have to keep working on my splice to make sure
that they are the same

* I thought this would fix our server/client mismatch but it is not it

Something is really wrong with my logic somewhere, maybe I need to
update the db step?

* Moving this logic to the "user" rather than "tasks" and key off path

Path is unique and is less finiky than dealing with string comparisons
with ids. Unfortunately everything is still not working... I suppose
user.update() doesn't care about the position?

* This client code caused quite a lot of problems if you dragged fast

We don't really need it it seems, so off it goes

* Updating markup and CSS so it actually looks good.

Everything is working horray!!

I did just notice the following bug: the popover text sometimes makes it
very annoying to drag because you can't drop over it@

* Cleaning up my comments in the API section user.js

I had a lot of TODOS that are mostly done now

* Fixing a spacing code standards thing

* Turns out we never use type, so we should remove this from the API call

* Adding pinnedItemsOrder into the user schema

And disabling my call in the frontend before I do any more damage

* Halfway to using pinnedItemsOrder

This isn't working yet but it is not going to break it horribly like it
was before.

* Hooking up inAppRewards to always produce sorted information

It is suspicially working right now even though I have not added the
seasonal stuff logic yet...

* Updating the comments in user.js in movedPinnedItem

It turns out that my bandaid fix to just get the ball rolling perfectly
does what I need it to do when we have a length discrepancy. So we are
getting much closer to the final product, just need lots of testing

* Cleaning up code standards kinds of things

* Yay, this fixes the popover issue

I hope this is the right "vue" way to do things, because I tried a bunch
of other things that definately were not the right way to do it. And
this appears to work too

* ** Partial Work ** Starting tests on api call for draggable items

Doesn't work, doesn't compile so don't include in PR!

* Test failing still...

This is worth a save. The api call grabs the seasonal items too, so we
can't get away from using the common functions and calls here to get the
actual list of items

* Okay have the first test passing

Need to clean up my linter problems though

* Planning out the next two tests and fixing my format problems

* 2nd Test case written, this time with the "more" odd case

* Making sure that we didn't mess with pinned items

* Huh... this test doesn't give me the expected result

Drat, I guess I found a bug

* Throw an error when we put garbage in our api call.

Well, before we got user.pinnedItemsOrder filled with a bunch of "null"
entries which is not ideal. it still worked, but isn't this confusing
enough already?

* Cleaning up the multitude of linting problems thanks gulp :)

* Writing tests for inAppRewards.js, but something is wrong

* Fixing my linting errors in inAppRewards tests

These tests still do not run though, so they may fail and I would not
know

* Applying Negue's fixes to inAppRewards.js test

It never occured to me that we shouldn't try to reach the database while
in the common tests. Well, we shouldn't do that, we should use the
common.helpers instead. Thanks!

test/common/libs/inAppRewards.js

@@ -0,0 +1,84 @@
+import {
+  generateUser,
+} from '../../helpers/common.helper';
+import getOfficialPinnedItems from '../../../website/common/script/libs/getOfficialPinnedItems.js';
+import inAppRewards from '../../../website/common/script/libs/inAppRewards';
+
+describe('inAppRewards', () => {
+  let user;
+  let officialPinnedItems;
+  let officialPinnedItemPaths;
+  let testPinnedItems;
+  let testPinnedItemsOrder;
+
+  beforeEach(() => {
+    user = generateUser();
+    officialPinnedItems = getOfficialPinnedItems(user);
+
+    officialPinnedItemPaths = [];
+    // officialPinnedItems are returned in { type: ..., path:... } format but we just need the paths for testPinnedItemsOrder
+    if (officialPinnedItems.length > 0) {
+      officialPinnedItemPaths = officialPinnedItems.map(item => item.path);
+    }
+
+    testPinnedItems = [
+      { type: 'armoire', path: 'armoire' },
+      { type: 'potion', path: 'potion' },
+      { type: 'marketGear', path: 'gear.flat.weapon_warrior_1' },
+      { type: 'marketGear', path: 'gear.flat.head_warrior_1' },
+      { type: 'marketGear', path: 'gear.flat.armor_warrior_1' },
+      { type: 'hatchingPotions', path: 'hatchingPotions.Golden' },
+      { type: 'marketGear', path: 'gear.flat.shield_warrior_1' },
+      { type: 'card', path: 'cardTypes.greeting' },
+      { type: 'potion', path: 'hatchingPotions.Golden' },
+      { type: 'card', path: 'cardTypes.thankyou' },
+      { type: 'food', path: 'food.Saddle' },
+    ];
+
+    testPinnedItemsOrder = [
+      'hatchingPotions.Golden',
+      'cardTypes.greeting',
+      'armoire',
+      'gear.flat.weapon_warrior_1',
+      'gear.flat.head_warrior_1',
+      'cardTypes.thankyou',
+      'gear.flat.armor_warrior_1',
+      'food.Saddle',
+      'gear.flat.shield_warrior_1',
+      'potion',
+    ];
+
+    // For this test put seasonal items at the end so they stay out of the way
+    testPinnedItemsOrder = testPinnedItemsOrder.concat(officialPinnedItemPaths);
+  });
+
+  it('returns the pinned items in the correct order', () => {
+    user.pinnedItems = testPinnedItems;
+    user.pinnedItemsOrder = testPinnedItemsOrder;
+
+    let result = inAppRewards(user);
+
+    expect(result[2].path).to.eql('armoire');
+    expect(result[9].path).to.eql('potion');
+  });
+
+  it('does not return seasonal items which have been unpinned', () => {
+    if (officialPinnedItems.length === 0) {
+      return; // if no seasonal items, this test is not applicable
+    }
+
+    let testUnpinnedItem = officialPinnedItems[0];
+    let testUnpinnedPath = testUnpinnedItem.path;
+    let testUnpinnedItems = [
+      { type: testUnpinnedItem.type, path: testUnpinnedPath},
+    ];
+
+    user.pinnedItems = testPinnedItems;
+    user.pinnedItemsOrder = testPinnedItemsOrder;
+    user.unpinnedItems = testUnpinnedItems;
+
+    let result = inAppRewards(user);
+    let itemPaths = result.map(item => item.path);
+    expect(itemPaths).to.not.include(testUnpinnedPath);
+  });
+});