UX Updates to User Input Questionnaire

[zutigrm]

Feature Description

User input questionnaire needs to be updated, following the new UX design updates which are bringing a bit of polishing to the existing component. Minor functionality updates are required given the removal of the "Review your answers" step.

---

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

Acceptance criteria

• Existing user input questionnaire component is updated to match the figma design
• The final "Review your answers" step is removed, and current save logic attached thereto is transferred to the last answer screen where the "Complete setup" CTA will match the current save behaviour.

Implementation Brief

• Update assets/js/components/user-input/util/constants.js
  • Include new helper function getUserInputAnswersDescription
    • Similarly how answers are mapped now in getUserInputAnswers, do the same here, but map the descriptions, as shown in the figma
    • For now map this only for the USER_INPUT_ANSWERS_PURPOSE, as this is the only group which includes descriptions for now.
• In assets/js/components/user-input/UserInputQuestionnaire.js
  • include new descriptions prop to the component rendering site purpose answers

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

    Line 169 in 8a6a275

    <UserInputSelectOptions

    and pass value retrieved from getUserInputAnswersDescription
  • In new design the left panel that renders UserInputQuestionInfo, will now render static text for all questions. Remove title and questionNumber props from UserInputQuestionWrapper component, and use static description from figma for all occurrences of this component.
    • Usage of title and questionNumber in UserInputQuestionInfo should be removed, as they won't be needed any more
• Update assets/js/components/user-input/UserInputSelectOptions.js
  • Include new prop descriptions
  • Extract the proper description based on the optionSlug and pass it as description prop to existing item component

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

    Line 169 in 8a6a275

    <ListComponent { ...props }>

• In assets/js/components/user-input/UserInputQuestionWrapper.js remove usage of title and render UserInputQuestionInfo unconditionally and remove title prop from UserInputQuestionInfo
• in assets/js/components/user-input/UserInputQuestionInfo.js
  • Remove title and googlesitekit-user-input__question-number markup and questionNumber, and move it to the assets/js/components/user-input/UserInputApp.js
• In assets/js/components/user-input/UserInputApp.js
  • Move the question number to the above the PageHeader
  • Implement the question number count using the CORE_FORMS datastore, by retrieving the data and storing in say FORM_USER_INPUT_QUESTION_NUMBER
  • Remove subtitle
• In assets/js/components/user-input/UserInputQuestionnaire.js
  • Update nextCallback and backCallback to store the currently active step (numerical step, not the slug) in FORM_USER_INPUT_QUESTION_NUMBER
  • Adjust the ProgressBar component to match the new look in the design
• Update the styles in assets/sass/components/user-input/googlesitekit-user-input-questions.scss to apply any needed changes
  • Have in mind that footer should be sticky at the bottom and takes full screen width

Remove the "Review your answers" step

• Update assets/js/components/user-input/UserInputQuestionWrapper.js add a new prop, complete, when passed the copy of the field should be "Complete setup" by rendering a new block, using a SpinnerButton instead of a standard Button:
  

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

  Lines 81 to 89 in db3699f

  	{ next && (
  	<Button
  	className="googlesitekit-user-input__buttons--next"
  	onClick={ next }
  	disabled={ hasErrorForAnswer( values ) }
  	>
  	{ __( 'Next', 'google-site-kit' ) }
  	</Button>
  	) }

  • This button should be disabled and show a spinner while answers are being saved by using the isSavingUserInputSettings and isNavigating selectors, passing the resulting boolean to disabled and isSaving prop on the new spinner button.
• Update assets/js/components/user-input/UserInputQuestionnaire.js:
  • Move the onSaveClick function from assets/js/components/user-input/UserInputPreview.js into this component.
  • Replace the nextCallback use in the final UserInputSelectOptions to call onSaveClick instead and use the complete prop instead of the next prop in the UserInputQuestionWrapper component.
    

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

    Lines 227 to 238 in db3699f

    	next={ nextCallback }
    	back={ backCallback }
    	error={ error }
    	>
    	<UserInputSelectOptions
    	slug={ USER_INPUT_QUESTIONS_GOALS }
    	max={
    	USER_INPUT_MAX_ANSWERS[ USER_INPUT_QUESTIONS_GOALS ]
    	}
    	options={ USER_INPUT_ANSWERS_GOALS }
    	next={ nextCallback }
    	showInstructions

• Refactor the ErrorNotice for any change submission errors to show in a fixed position banner.
  

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

  Line 181 in db3699f

  { error && <ErrorNotice error={ error } /> }

• Remove the now unused assets/js/components/user-input/UserInputPreview.js component.
• Remove all uses and references to the preview slug panel in this app.

Test Coverage

• Update any failing VRT
  • Take special note of the changes to the user input questionnaire regarding removal of the "Review your answers" step.
• Update any failing test

QA Brief

• Check the updated designs for the User Input Questionnaire in storybook confirming it matches the Figma designs.
• Test the User Input Questionnaire by going to Settings -> Admin Settings -> Personalize your metrics (in the Key Metrics panel).
  • To test the error banner you can run the following code in the developer console:

  googlesitekit.data.dispatch('core/user').receiveError(
  	{
  		code: 'test_code',
  		message: 'Test error message',
  		data: {
  			reason: '',
  		},
  	},
  	'saveUserInputSettings',
  	[]
  )
  

• Confirm there are no regressions in the Key Metrics section and editing the user input questions in the settings after setup.

Changelog entry

• Improved the design of the User Input Questionnaire.

[eugene-manuilov]

AC ✔️

[10upsimon]

@zutigrm IB ✅ moving to EB

[benbowler]

@zutigrm comment for your attention here, should I split the "Sell products or services" into the two new categories that are now in Figma?

Without doing this the copy for the description for this combined option will need to be created.

[benbowler]

Based on call 7 October 2024, it would be best to stick to the combined question "Sell products or services" we use now if possible.

In this case I need new approved copy for that answer.

CC @sigal-teller @10upsimon @zutigrm

[10upsimon]

@benbowler following a sync with @sigal-teller , the decision to remove the final "Review answers" screen was made a while back in response to a UXR study. I am going to update AC, and upon approval, the IB as well.

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified and compared Storybook Story with Figma.
• Verified complete user input flow and KMW functionality for regression.
• Verified user input flow admin settings.
• Verified user input flow settings for multiple admins.
• Verified main, view only and secondary admin dashboard and settings.

@benbowler

Issue 1 : Padding between radio button and content is not same as figma.

Figma -

Storybook

Issue 2 : The story is displaying "The question is answered by: Admin name" for the wrong question. It should show this text for the first question instead of the third.

PASS CASES

Error state

[benbowler]

Hey @mohitwp, I've created a follow up to update the gap between the radio and content and fixed the stories to correctly show the multi admin case.

[wpdarren]

QA Update ✅

• Padding between radio button and content is same as figma.
• The story is no longer displaying "The question is answered by: Admin name" for the wrong question. It showed this text for the first question instead of the third.