Add logic to trigger modal once user input questions have been updated

[zutigrm]

Feature Description

Following the implementation of new modal in #9438 this issue should connect the trigger for that modal, once site purpose question is changed in the Key metrics admin settings. Once the save button is clicked, and answer was modified, modal should be triggered

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Once the site purpose question is changed by the user in the Key metrics admin settings and the save button is clicked, it should open the new modal implemented in the Implement a new modal component showing current vs new tailored suggestions #9438.
  • Modal should be triggered only when conversionReporting feature flag is enabled

Implementation Brief

• In assets/js/components/user-input/UserInputPreviewGroup.js
  • Include new prop onChange
  • Update submitChanges callback, invoke onChange prop if present within the if( ! response.error ) conditional check
• Update assets/js/components/user-input/UserInputPreview.js
  • Add local state [isModalOpen, setIsModalOpen] for example, with default value of false
  • Include onChange prop to the

    site-kit-wp/assets/js/components/user-input/UserInputPreview.js

    Lines 145 to 146 in 14f36cc

    	<UserInputPreviewGroup
    	slug={ USER_INPUT_QUESTIONS_PURPOSE }

    • In the callback, return early if conversionReporting feature flag is not enabled, otherwise set a isModalOpen local state to true
  • Include ConfirmSitePurposeChangeModal component, wrapped within Portal component, so it is appended in the body outside the settings container.
    • Pass the isModalOpen value to the dialogActive
    • For onClose prop, use callback that resets isModalOpen to false

Test Coverage

• No update needed

QA Brief

• Set up Site Kit with tailored metrics (not user selected). Note the site purpose selected.
• Navigate to Site Kit > Settings > Admin.
• Within the Key Metrics settings group, edit the site purpose and change the value. Click Apply Changes.
• The Tailored metric suggestions modal should display, showing current vs new metrics.
• Dismissing the modal via the keep changes CTA should not change the site purpose, and it should remain as prior.
• Updating the metric selection via the Update metric selection CTA should apply the changes, and the modal should reflect future changes made to the site purpose.
• An example of the modal is shown in the screenshot below.

Changelog entry

• Add modal of tailored metrics to User Input Questionnaire.

[10upsimon]

@zutigrm AC LGTM, moving to IB

[eugene-manuilov]

@zutigrm, I think it would be better to add a new prop onChange to the UserInputPreviewGroup component that will let us execute a callback when the setting is changed. Then use this prop for the corresponding question and display the new modal dialog in the UserInputPreview component without dealing with the CORE_UI state.

[zutigrm]

@eugene-manuilov makes sense, thanks. I updated IB to reflect this approach

[eugene-manuilov]

Thanks, IB ✔

[10upsimon]

Adding an update following internal sync and comms with @zutigrm:

The logic needed to be tweaked as the current user input options are saved to the user input settings store, they're just not persisted. This affects the modal logic (specifically due to how we retrieve the user input values) as the old vs new would always be the same in this case.

The solution was to introduce a temporary form and set the old/current site purpose. This value is in turn used in the modal to get the current values against the existing purpose slug stored in the temporary form store. The temporary form is reset on modal save so the logic can be repeated for future changes.

[10upsimon]

Flagging further that additional logic needed to be introduced to the modal that resets the user input settings site purpose value to the prior purpose if the user dismisses the metric updates in the modal.

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Tested when 'conversionReporting' feature flag disabled and verified that Modal not triggered only when conversionReporting feature flag is disabled.
• Tested when 'conversionReporting' feature flag enabled and verified that Modal triggered when conversionReporting feature flag is enabled.
• Verified that clicking on 'Keep current selection' CTA or outside the modal do not change the purpose of the site.
• Verified that clicking on 'Update metrics selection' change the purpose and metrics selection as per selected purpose on main dashboard.
• Verified that once the site purpose question is changed by the user in the Key metrics admin settings and the save button is clicked, it open the new modal implemented in the Implement a new modal component showing current vs new tailored suggestions #9438.

Recording.1571.mp4

Recording.1572.mp4