feat: Ability to shift courses dates if deadlines have been missed

[shafqat-muneer]

Jira Ticket: LEARNER-9781: iOS - Ability to shift courses dates if deadlines have been missed

Github Issues: #161

Light Mode	Dark Mode

[shafqat-muneer]

• Getting response validation failed error for course course-v1:USMx+PGPM661.3x+2T2022 while getting course dates status.
• It would be nice if dates status info view appear with animation like resume course.
• Please remove all the temp files pushed like [.mocky3C3F2BD4-1ED2-461C-96E3-33CAE5082F47/.config.yml.tmp](https://github.com/openedx/openedx-app-ios/pull/288/files#diff-ae688431c3fdb1778a03a28b5d0af9281947494db8d4c254fe74bcce1cf97637)

Done with 2nd and 3rd point. The first one pertains to error handling and should be addressed in a distinct pull request, as it is unrelated to the modifications made in this pull request.

[volodymyr-chekyrta]

I haven't finished the review yet, but most of the code looks good.

I have a slight concern about this view. It doesn't look like a notification or alert from the Open edX mobile design system. Button with no rounded corners, the X button paddings.

@marcotuts @sdaitzman, could you please take a look from a design perspective?

[moiz994]

I haven't finished the review yet, but most of the code looks good. I have a slight concern about this view. It doesn't look like a notification or alert from the Open edX mobile design system. Button with no rounded corners, the X button paddings. image @marcotuts @sdaitzman, could you please take a look from a design perspective?

@volodymyr-chekyrta Regarding the above message, we are trying to display a message in the form of a snack bar similar to Adroid's native snack bar. Currently, it's replicating what the live application shows and I don't think such a component exists in the schema design system. Let me reach out to marco and sam on slack to finalize the approach for this.

[volodymyr-chekyrta]

I haven't finished the review yet, but most of the code looks good. I have a slight concern about this view. It doesn't look like a notification or alert from the Open edX mobile design system. Button with no rounded corners, the X button paddings. image @marcotuts @sdaitzman, could you please take a look from a design perspective?

@volodymyr-chekyrta Regarding the above message, we are trying to display a message in the form of a snack bar similar to Adroid's native snack bar. Currently, it's replicating what the live application shows and I don't think such a component exists in the schema design system. Let me reach out to marco and sam on slack to finalize the approach for this.

@moiz994 We have this type of view in the profile and a few other screens. Paddings are different, and all buttons have rounded corners. We can discuss it tomorrow at the Mobile Design Weekly meeting.

[moiz994]

I haven't finished the review yet, but most of the code looks good. I have a slight concern about this view. It doesn't look like a notification or alert from the Open edX mobile design system. Button with no rounded corners, the X button paddings. image @marcotuts @sdaitzman, could you please take a look from a design perspective?

@volodymyr-chekyrta Regarding the above message, we are trying to display a message in the form of a snack bar similar to Adroid's native snack bar. Currently, it's replicating what the live application shows and I don't think such a component exists in the schema design system. Let me reach out to marco and sam on slack to finalize the approach for this.

@moiz994 We have this type of view in the profile and a few other screens. Paddings are different, and all buttons have rounded corners. We can discuss it tomorrow at the Mobile Design Weekly meeting.

Thanks for sharing, @volodymyr-chekyrta! I can't find these components in the figma design file but I think the team is updating the snack bar to match this styling.

[sdaitzman]

Thanks for flagging this for design review. I added this to our mobile design weekly agenda for tomorrow, and can add the missing snack bar component in Figma. I also think the snack bar background in dark mode should be darker to improve contrast and match the rest of the app, will make sure to include that change in Figma:

I also wonder if the upgrade suggestion messages should include an inline upgrade button to offer a clear path to upgrades?

Everything else looks good to me!

[shafqat-muneer]

@sdaitzman I have implemented the snackbarInfoAlert background to accommodate both darker and lighter modes of alerts. Please assess whether the changes appear to be an enhancement. Light Mode: Dark Mode:

Regarding second point of inline upgrade button, it's intentional because:

Mobile payments are not implemented yet and to avoid breaking appstore guidelines, upgrade button is hidden, which leads user to payments

[sdaitzman]

Thanks, @shafqat-muneer. Makes sense about mobile payments.

Unfortunately, using light text on the info background actually has a worse contrast ratio.

I've created an early rough draft of this bottom dialog in Figma this morning, screenshots attached below. I want to run this by the mobile design weekly group tomorrow morning, then will follow up with any design updates to get this unblocked quickly.

[volodymyr-chekyrta]

@shafqat-muneer, at the Mobile Design Weekly meeting, we discussed and agreed on a design for the "Due Dates Shifted" view/snackbar. It's coming soon; @sdaitzman is working on it.

[sdaitzman]

@shafqat-muneer here is the proposed design, attached and viewable in Figma. When the user shifts due dates from within the Course tab, the dialog should include the button to View All Dates. When the user shifts due dates from within the CTA inside the Dates tab, the dialog should not include a View All Dates button.

Also want to make sure to note the wider dialog, which helps to distinguish this snack bar view from the content underneath.

With View All Dates, for within the Course tab

Without View All Dates, for within the Dates tab

In-context within Course tab (Figma link)	In-context within Dates tab (Figma link)

[shafqat-muneer]

@sdaitzman Thank you for the design review and for providing all necessary details. 👏 I will address the change and share details.

[shafqat-muneer]

@sdaitzman @volodymyr-chekyrta snackbar design has been updated.	Light Mode Course Tab	Dark Mode Course Tab

Light Mode Dates Tab	Dark Mode Dates Tab

[sdaitzman]

Thanks @shafqat-muneer, this looks great!

[volodymyr-chekyrta]

👍 🚀 🔥

[shafqat-muneer]

@volodymyr-chekyrta @saeedbashir Feedback addressed 🎉