Kuwait Theme: Activity Check-in component

[FaithDaka]

PR Checklist

• PR title descriptive (can be used in release notes)

Description

plh_activity_check_in created and styled. Corresponding debug sheet: Link

Author Notes

(updated by @jfmcquade)

plh_activity_check_in component with the following parameter_list:

• title: The title of the component attached to the bottom
• locked_icon_asset: Icon that appears next to the title while the component is locked
• locked_image_asset: Illustration that appears while component is locked
• unlocked_icon_asset: Icon that appears next to the title while the component is unlocked
• unlocked_image_asset: Illustration that appears while component is unlocked
• countdown_start_date: The date from which the countdown is initially started
• countdown_days: The number of days after the start date that the activity is unlocked
• countdown_text_list: A list of text strings relating to the number of days left to countdown, in order from fewest to most
  • Whilst it would be better to construct a string dynamically to display the calculated number of days remaining, the limitations of translation means that this is currently the best option. For example, there is no way to construct a string dynamically that reflects the different grammar in different languages between, for example, "in 1 day" and "in 2 days", a difference which will vary by language.

Git Issues

Closes #2539

Screenshots

Design	Locked Component	Unlocked Component

Component demo sheet:
@jfmcquade:

For this demo sheet, I had originally intended to allow testers to set the start date by adding a user inputted value to the current date. However, attempting to do so revealed a bug, see #2622

comp_plh_activity_check_in

debug.date.now.mov

[jfmcquade]

Nice to have this scaffolded out. I assume you're seeing the logic for handling the countdown and unlock as a placeholder that should be replaced by logic that connects to our real system of handling this data? @esmeetewinkel is that something that has been discussed/thought through already, or shall we add it to our meeting agenda?

I would also say that it probably makes sense to style the component to be centred within its div. Laying out the element so that it sits to the side of another element is something that should be handled at the authoring level (i.e. by putting the elements inside a display_group component).

[esmeetewinkel]

I'm not sure how you're proposing to author the "days left". One way that would be intuitive to me is that the component can have a parameter (maybe unlock_at) which is a timestamp of the moment of unlocking. If this parameter value is

• falsy (undefined or empty string): don't show the "days left" progress bar + text. Button is disabled.
  
• a time stamp in the future: compute how many days left and display progress bar + text. Button is disabled.
  
• a time stamp in the past: don't show the "days left" progress bar + text. Button is enabled.
  

Edited: thinking about it further I think we also need something like a start_countdown_at parameter

[jfmcquade]

Thanks for the review @esmeetewinkel

I've pushed the following changes

• Removed the error thrown when the start date is undefined
• Fixed the logic so that an undefined start date will properly cause the component to be "locked"
• Fixed the styling so that it appears more consistent in context, see screenshots below

When the title text has to wrap onto multiple lines the styling isn't perfect, but it is an improvement:

[esmeetewinkel]

Thanks @jfmcquade, looking lots better and I can confirm the error has disappeared + item locks correctly when timestamp doesn't exist.

The only display that doesn't look great yet is the one where the countdown bar is displayed. Would it make sense to tweak that to the current image dimensions or better to leave as-is?

[jfmcquade]

The only display that doesn't look great yet is the one where the countdown bar is displayed. Would it make sense to tweak that to the current image dimensions or better to leave as-is?

Should be a quick fix to get it look it nicer, but I'm going to merge as-is for now and will follow up later today after working through other higher priority issues