Habitica: Group Plans task approval list needs information about task types, better formatting

[Alys]

When a member of a group plan completes a task that requires approval, the group leader sees the approvals as shown in the screenshot below.

1. It's not possible to tell whether the tasks are Habits, Dailies, To-Dos, or Rewards. In the case below, for the first two tasks, one is a Habit and one a Daily. There needs to be an indication of task type.
2. For Habits, it's also not possible to tell if the member clicked the plus or minus button, which is important to know for correctly approving it. It should state whether plus or minus was clicked.
3. There should also be more distinction for the name of the task. At the moment, it blends in with the user information (the task names for the first two tasks here are "clean your room").
4. Markdown and emoji in the task title should be rendered.

Note that there is currently an issue with negative clicks on group plans Habits being treated as positive clicks (https://github.com/HabitRPG/habitica/issues/8676). It's possible that point 2 above can't be fixed until that issue is fixed (e.g., if the approval screen currently can't tell if plus or minus was clicked).

[jsjoeio]

Hi! May I start working on this now?

[Alys]

@jjprevite Yes, thank you! Comment here if you have questions about it.

[jsjoeio]

@Alys I'm trying to create a Group Plan in my test environment. How do I bypass the Credit Card/Amazon Pay on the Upgrade to group plans page(http://localhost:3000/#/options/groups/group-plans)?

My thought process for solving this issue is:
1) create a Group Plan
2) invite other users to Group
3) on their accounts, have them add tasks to Group Task List
4) login to Group Plan Leader and view Group Plan task approval list
5) inspect code on Chrome to locate source code and see how everything interacts
6) figure out the best way indicate a task type so that a Group Leader knows which is which
7) fix other issues

P.S. - should I be asking you this question or would you prefer I start in the guild and then ask? (Sorry, this is my first time contributing so I'm still learning the ropes!)

[Alys]

@jjprevite I believe it's possible to create a test Stripe account, which would give you keys to put into config.json to replace the placeholder text below. You could then use fake credit card details to make purchases. Details should be at https://stripe.com/docs/testing

"STRIPE_API_KEY":"aaaabbbbccccddddeeeeffff00001111",
"STRIPE_PUB_KEY":"22223333444455556666777788889999",

You can also create a guild or party normally and then upgrade it to have a group plan by using a mongodb update command to change the group's purchased object to this:

"purchased" : {
    "plan" : {
        "customerId" : "group-unlimited",
        "dateCreated" : ISODate("2017-01-01T01:01:01.001Z"),
        "dateTerminated" : null,
        "dateUpdated" : ISODate("2017-01-01T01:01:01.001Z"),
        "owner" : "your test account User ID goes here",
        "paymentMethod" : "Group Unlimited",
        "planId" : "group_monthly",
        "subscriptionId" : "",
        "consecutive" : {
            "trinkets" : 0,
            "gemCapExtra" : 0,
            "offset" : 0,
            "count" : 0
        },
        "mysteryItems" : [ ],
        "gemsBought" : 0,
        "extraMonths" : 0,
        "quantity" : 6
    }
}