== User story
As an advanced contributor, I would like to know when my workflows can be simplified
== Designs
| taps on Talk (or History, Desktop, etc.) | page transitions, drawer appears, taps on "Enable..." | advanced mode enabled, toast displays
| {F29605075} | {F29605482} | {F29605385}
This flow needs to be discussed with engineering. The main questions are:
# is it possible to limit the amount of times we show these to people? I think the ideal logic would be that it happens the first time you tap any of the given button/hooks. Example: you tap "Talk" (for the first time since this has been enabled), the drawer appears, you press "No thanks". Next time you tap "Talk" the drawer would not appear, however if you tapped "History" it would.
# is it possible to turn the setting on without going to the settings page?
- If so, can we have a custom toast message, (e.g. "Advanced contributions mode is now enabled. You can turn it off in your settings.") rather than the generic "Settings were saved." message.?
# should the drawer/dialog should appear before or after the page transitions to the intended destination (e.g. the Talk or History page)? We discussed at our offsite that appearing after you've arrived at your destination might be less intrusive/disruptive, however if we can ensure that it will only appear once it might be more effective if it appears before the page transitions (in the case of a user tapping on the "Desktop" link this would be necessary).
- is it possible to show this drawer without dimming the screen and blocking other clicks? More like an optional little panel than a blocking dialog/modal.
== Acceptance Criteria
[] Display toast/modal when user performs any of the following actions on the mobile site: selecting talk link at the bottom of the page, selecting the history page link, selecting the desktop link
[] Toast/modal must only display once
[] Nice to have: nice to have: we still show the toast that says where you can try it out/how to turn it off
[] Selecting "Enable advanced mode" will turn on AMC (without requiring user to go to the settings page)
[] Desktop link:
- Selecting "Enable advanced mode" will turn on AMC. It will not open the desktop version of the site
- Selecting "no thanks" will turn on the desktop version of the site
[] Talk link:
- Selecting "Enable advanced mode" will turn on AMC. It will then load the talk modal
- Selecting "no thanks" will load the talk modal
[] History link:
- Selecting "Enable advanced mode" will turn on AMC. It will then load the AMC history page
- Selecting "no thanks" will load the mobile history page
== Open questions/concerns
- We currently lazy load the drawer. When the user selects a link and is eligible to see the drawer, what should we do while the drawer is loading?
- Do nothing?
- Show the drawer immediately and make use of the [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/src/mobile.startup/promisedView.js | promisedView ]] pattern?
- Remove the lazy loading and eager load the drawer (will add to the initial JS payload)?
- Currently when the user selects "No thanks", the drawer will simply hide. For this task, we need the drawer to hide and also perform an action (e.g. load the talk modal). This could be relatively easy to do by adding a `onHide` callback param to the [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/a6299dbfda06c5305f8b68cb239817bdd986dfbf/src/mobile.startup/promoCampaign/promoCampaign.js#L91 | `showIfEligible` method ]] and having the client pass in that param. Something similar could be done with the "Enable advanced mode" button to perform an action, however that AC is much tricker to fulfill because of the page redirection that happens and the fact that that redirection only currently supports redirecting to page titles (hash/query params are not currently supported). I have a [[ https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/531588/ | patch ]] that would add support for this, but I'm not sure how robust it is.
== Dev notes
The general code needed to show the drawer for a given action will probably look something like this:
1) Add new action to [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/e3646c15466db8755cdaa5f7cbc5fae511abf4d9/src/mobile.startup/amcOutreach/amcOutreach.js#L10-L12 | ACTIONS object ]] in `mobile.startup/amcOutreach/amcOutreach.js`. The `onLoad` action has already been added here. It can be anything, but make sure the key and value are the same.
2) Export `mobile.startup/amcOutreach/amcOutreach.js` in `mobile.startup.js` so that Minerva can access it
3) When something triggers an action in Minerva (e.g. talk overlay shows), the following code will be needed:
```
var mobile = M.require( 'mobile.startup' );
var promoCampaign = mobile.amcOutreach.loadCampaign();
promoCampaign.showIfEligible( mobile.amcOutreach.ACTIONS.whateverNewAction );
```
You can check out the [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/e3646c15466db8755cdaa5f7cbc5fae511abf4d9/src/mobile.init/mobile.init.js#L140-L141 | `onLoad` action in mobile.init ]] as an example.