White Card 27224:Giving Widget 2.0: Update configuration page to display whitelists correctly in Preview page

[dsgallagher]

Overview: This task is to allow any user to access their Giving Widget configuration page, make amendments to the beneficiaries, click the View Widget button and see the amended list of beneficiaries on the Preview page. This task necessitates that the user "save" the configuration if two conditions are met: 1. They make a change to the beneficiaries of the widget AND 2. there is more than one beneficiary selected for the widget. A confirmation dialog box should display if both of the conditions are met that asks the user if they wish to save the updated configuration - this dialog box should NOT display if the beneficiaries are unchanged by the user. If the user confirms they want to save the changes, we need to then impose a 60 second delay whilst Solar updates the whitelist - a spinning loading icon with text should display in this time. Once the time is elapsed, the interface should once again be usable and the user can click the View Widget option to see the updated whitelist in the widget. A general update is also required as part of this card - to include a second flag that user has unsaved changes just below the Action buttons - to minimize the risk of users NOT clicking Save.

Business reasoning:

Damien and Ivan Mihajlovic had a discussion on 24 Nov 2017 over Skype about the issue of whitelists not displaying in the Preview page - i.e. the Preview page of the Giving Widget V.2 does not update for more than one beneficiary unless Save is clicked - and even then, there is a time delay before the whitelist can display correctly. Correcting this was deemed to be complex and require a discussion with backend guys such as Miroslav and would likely require something like a temporary whitelist or pseudo-whitelist. This complex approach was deemed unnecessary to fulfill what is a relatively minor issue so agreement was reached that a simpler and less complex approach could be taken.

UATs Dependencies:

• White Card 27199:Giving Widget 2.0: Update Widget Preview page for Custom Image option

• White Card 15040:DUI: Add functional preview from configuration page

Preconditions:

• User is logged in as individual, company or nonprofit
• User is making a change to the beneficiaries of the giving widget
• User has selected more than one beneficiary for the giving widget

Deliverables:

• Update the Giving Widget configuration page to allow any user (individual, company, nonprofit) to amend a whitelist and then view the whitelisted widget correctly on the Preview page - this necessitates that the user "save" the configuration if two conditions are met: 1. They make a change to the beneficiaries of the widget AND 2. there is more than one beneficiary selected for the widget
• A confirmation dialog box should display if both of the conditions are met that asks the user if they wish to save the updated configuration
• This dialog box should NOT display if the beneficiaries are unchanged by the user
• If the user confirms they want to save the changes, we need to then impose a 60 second delay whilst Solar updates the whitelist - a spinning loading icon with text should display in this time
• Once the time is elapsed, the interface should once again be usable and the user can click the View Widget option to see the updated whitelist in the widget
• General update to configuration page - include a second flag that user has unsaved changes just below the Action buttons

UATs:

Note: This task is not relevant to Giving Widget Version 1

1. Any logged in user (individual, company, nonprofit) accesses the Giving Widget configuration page and does the following:

• User edits the beneficiaries in the selection component that either creates or amends a whitelist
• The following UATs are only relevant if two conditions are met:
• User makes a change to the beneficiaries of the widget AND
• There is more than one beneficiary selected for the widget
• If the user makes any other edits that does not change the benficiaries, there should be NO change in the current behaviour so following UATs are not relevant (apart from UAT 10)
• If the user makes a change to the beneficiaries that reduces the beneficiaries list to 1 nonprofit or fundraiser, there should be NO change in the current behaviour i.e. this update should happen immediately

2. Once the beneficiaries in the selection component have been amended (and is still multiple beneficiaries), the user clicks the "View Widget" button and a confirmation dialog box displays that asks the user if they wish to save the updated configuration:

• Mockup: GW2_Configuration_Page_Changed_Beneficiaries_Confirmation_Dialog.png
• Important: This dialog box should NOT display if the beneficiaries are unchanged by the user OR if the user makes a change to the beneficiaries that reduces the beneficiaries list to 1 nonprofit or fundraiser (preview page should be able to display immediately in these cases with no delay and no requirement to click save)
• Style: Standard warning style orange dialog in blackout overlay effect
• Text: As follows - note that paragraphs 1 & 2 are normal font with line break between para 1 and para 2 and between para 2 and dialog question / the dialog question should be in bold font:

Your selected beneficiaries have changed. To view the updated widget, you will need to save your changes.

Saving your changes can take up to 1 minute and will update your live Giving Widget wherever it displays.

Would you like to save your changes now?

• Button on left: Yes
• Link on right: Cancel

3. If the user confirms they want to save the changes - i.e. they click Yes, the dialog box should close, the user's whitelist should be updated with the amended beneficiaries and the Giving Widget configuration should be updated with all amendments - as if the user had clicked the Save button on the configuration page

4. Because Solar needs time to update the whitelist, we need to impose a 60 second delay to restrict the user from clicking the View Widget button:

• For 60 seconds, the View Widget button should be replaced with a text string: Please wait 1 minute – once completed, you can view your updated widget.
• Note: previously this card suggested that the interface should be inaccessible and display spinning loading icon but QA want the interface still accessible - especially the Selection component so we have updated this UAT now to free up the interface
• User under this new condition can still interact with the interface whilst the loading is going on - if they click Save while loading is still going on, a new Save is instigated and the 1 minute count begins anew
• Mockup: GW2_Configuration_Page_Update_Multiple_Beneficiaries_Loading.png

5. Once 1 minute elapses, the View Widget button redisplays and the user can proceed to click it to open the Preview page

• The user can now view the updated whitelist in the widget on the Preview page
• Note: If the user does not click the View Widget button at this stage but instead makes MORE amendments to the beneficiaries (as per the conditions mentioned in UAT 1) and THEN clicks the View Widget button, the dialog box should once again display and repeat the updating process

6. A general update is also required as part of this card - to include a second flag that user has unsaved changes just below the Action buttons:

• At present, if there is any change to the configuration of the Giving Widget on the configuration page, a flag is generated to tell the user that they have unsaved changes - this displays in the top left of the configuration page as per attached "GW2_Configuration_Page_Unsaved_Changes_Message_Example.png"
• We want to minimize the risk of users NOT clicking Save so a second duplicate flag should also now display just below the Action buttons as per GW2_Configuration_Page_Unsaved_Changes_Message_Duplicate_Bottom.png

Use case ends

Data Populator Requirements: None Feature Management Requirements: None Privacy Requirements: None Activity Feeds/Email Notifications Requirements: None

[dsgallagher]

Ivan Mihajlovic 30 November 2017 UI review done. Score is 13 points.

---

2017-11-29 Simon Some comments from skype chat with Ivan.

1. we may be able to construct something similar from existing patterns.

• data model validates if whitelist has changed, has > 1 entry before
• standard confirmation dialog (with simplified text)
• on success - syncs area. if submitted whitelist >1 returns an in-progress indicator with more text explaining length of delay, which syncs after delay to return updated form

2. suggest that page-modified flag also sets a leave page alert (do articles do this already?)

DG 28 Nov 2017

To Ivan for score and review