Implement card support - on the mobile client side

[AnnieMungai]

• On the top right hand side menu on the child's profile, add Report lost or damaged card.

(image updated 6 Nov)

• In this screenshot, the pulldown text looks a little small. That could go wider if needed.
• The pulldown menu button labels should be consistently sentence case
• I think this pulldown needs dividers to group the options (which might also mean reordering) since that list is getting long. I haven't seen this list before, but it's unwieldy. Who has context on what all of these things do @AnnieMungai?

---

• Tapping on the Report lost or damaged card will open a confirmation dialogue.
• Report lost or damaged card? (Confirmation dialogue title)
• Report the child card as lost or damaged. A new card will be ordered for the child. (Confirmation dialogue message)
• Options/Action buttons: Report lost or damaged card and Cancel.

(image updated 6 Nov)
See the example below of a confirmation dialogue:

• Selecting Cancel will navigate back to the child profile without making any changes
• Selecting Report lost or damaged card will close the window and an android toaster message will show: Card reported as lost or damaged. A new card will be ordered. It will also set the card status to needs_card in the child client JSON Object. Example can be seen [here] (Sample Client Object with printed status added #55) See this issue Implement Card Statuses #82
• Once a new card has been ordered, the Report lost or damaged card option on the child profile will de-activate/ be disabled. The disabled state is greyed out. @AnnieMungai Roger: I think we can communicate the reason for this disabled state in a few different ways. I would like to do the easiest way. Is there someone I can talk to about this when it's being built?
• For a new child registration, the Report lost or damaged card option is inactive/disabled. (Roger: previous point applies for this as well)
• Scanning QR code on a child's card activates the Report lost or damaged card option on the child profile. This applies for both new registrations and ordered cards.

[rowo]

@AnnieMungai this leans pretty heavily on the "order" language. I just want to make sure the team doesn't think the client will have an issue with it. My initial recommendation was a smaller shift where you would still use the "Report lost or damaged card" (if this is what the client has seen already) and then that changes to "Card ordered" or something like that in it's disabled state because this is a general term that can be used for new registrations. But I also think the order language works too.

[AnnieMungai]

@rowo I would go with Report lost or damaged card on the android end for the client to tap on. However, the Order new card language inside the confirmation dialogue works well.
Is it possible to have mock-ups with the updated content?

[rowo]

@AnnieMungai

• I made a few updates to the first comment. Please take a look. The wording wasn't updated in the text to what you were suggesting. I don't think it's appropriate to mix the text from interaction and the confirmation, so I changed it all to the report lost or damage language.
• Where we could introduce the order language more is in the disabled state. I'd like to talk to an engineer when they work on this to choose the easiest way to do this that still makes sense.
• On that final point, I don't believe it's scanning the card that updates the pulldown. Scanning the card changes the status. Then the status change to "Does not need card" changes the button the active. But I may be wrong.

[rowo]

Update from Nov 17

Roger to provide mockups for:

• Updated label (no date for now)
• Label is inactive state
• If click dialog, then a toaster or snackbar (Elly to send image of how it works for adverse event)

[rowo]

@ellykits Here are images for the above:

@AnnieMungai I don't know the exactly messaging that should appear in this toaster, but I feel like it can provide some information to an unsure user about what is going on. Right now I jut put "A new card is on order and will be delivered after printing." Not sure if they know how long things typically take, but that would be nice.

[AnnieMungai]

@rowo right now we do not know how long things will typically take. It might become clearer with time.

[ellykits]

@rowo @AnnieMungai Following up on the UI mockup provided above, in our previous meeting, my feedback was based on the assumptions of things I thought would work but had not tried. On the contrary some are not possible unless I do custom tweaks which I do not think is necessary when there are other options. Here are my findings:

1. A disabled menu item cannot listen to any event - meaning we cannot show a Toast/Snackbar notification when the user clicks the option (unless we keep it enabled).

2. Menu item titles cannot be wrapped into 2 lines (also long text on action menu is not recommended as per Material Design guideline). My initial thinking was this could be possible by using new line character on the string, however for menus, the newline character is treated as space.

For number 2 we can can explore the option of changing the message to Card ordered or something plus the date it was ordered. For number 1 we can decide whether to disable the option with the new message and no iteraction, or we can activate it to make it responsive to click events.

[ellykits]

Here is a screenshot

[AnnieMungai]

To make this text shorter, we can make the in-active text to read New card ordered on [date card status changed]. @ellykits will that be short enough? cc @rowo
Also, @ellykits will the active text remain Report lost or damaged card?

@rowo I have also noted the comment on the list being long - and may require deviders - anything with the term edit, edits the child data entered in the app, anything with the word report - reports an event that happened to the child, and the Change status makes the child active, inactive, lost-to-follow-up or archives a wrongly entered record or a child with 2 records.

[AnnieMungai]

v0.1.5-debug

Looks great!