Open zutigrm opened 3 weeks ago
AC ✔️
@zutigrm IB ✅ moving to EB
@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.
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
@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.
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
Implementation Brief
assets/js/components/user-input/util/constants.js
getUserInputAnswersDescription
getUserInputAnswers
, do the same here, but map the descriptions, as shown in the figmaUSER_INPUT_ANSWERS_PURPOSE
, as this is the only group which includes descriptions for now.assets/js/components/user-input/UserInputQuestionnaire.js
descriptions
prop to the component rendering site purpose answers https://github.com/google/site-kit-wp/blob/8a6a275c708b3f2efbdb7cd809ae0dc792351b6e/assets/js/components/user-input/UserInputQuestionnaire.js#L169 and pass value retrieved fromgetUserInputAnswersDescription
UserInputQuestionInfo
, will now render static text for all questions. Removetitle
andquestionNumber
props fromUserInputQuestionWrapper
component, and use staticdescription
from figma for all occurrences of this component.title
andquestionNumber
inUserInputQuestionInfo
should be removed, as they won't be needed any moreassets/js/components/user-input/UserInputSelectOptions.js
descriptions
optionSlug
and pass it asdescription
prop to existing item component https://github.com/google/site-kit-wp/blob/8a6a275c708b3f2efbdb7cd809ae0dc792351b6e/assets/js/components/user-input/UserInputSelectOptions.js#L169assets/js/components/user-input/UserInputQuestionWrapper.js
remove usage oftitle
and renderUserInputQuestionInfo
unconditionally and removetitle
prop fromUserInputQuestionInfo
assets/js/components/user-input/UserInputQuestionInfo.js
title
andgooglesitekit-user-input__question-number
markup andquestionNumber
, and move it to theassets/js/components/user-input/UserInputApp.js
assets/js/components/user-input/UserInputApp.js
PageHeader
CORE_FORMS
datastore, by retrieving the data and storing in sayFORM_USER_INPUT_QUESTION_NUMBER
assets/js/components/user-input/UserInputQuestionnaire.js
nextCallback
andbackCallback
to store the currently active step (numerical step, not the slug) inFORM_USER_INPUT_QUESTION_NUMBER
ProgressBar
component to match the new look in the designassets/sass/components/user-input/googlesitekit-user-input-questions.scss
to apply any needed changesRemove the "Review your answers" step
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 aSpinnerButton
instead of a standardButton
: https://github.com/google/site-kit-wp/blob/db3699f1b5503195665a0e84a976d621bd44f3c7/assets/js/components/user-input/UserInputQuestionWrapper.js#L81-L89isSavingUserInputSettings
andisNavigating
selectors, passing the resulting boolean todisabled
andisSaving
prop on the new spinner button.assets/js/components/user-input/UserInputQuestionnaire.js
:onSaveClick
function fromassets/js/components/user-input/UserInputPreview.js
into this component.nextCallback
use in the finalUserInputSelectOptions
to callonSaveClick
instead and use thecomplete
prop instead of thenext
prop in theUserInputQuestionWrapper
component. https://github.com/google/site-kit-wp/blob/db3699f1b5503195665a0e84a976d621bd44f3c7/assets/js/components/user-input/UserInputQuestionnaire.js#L227-L238ErrorNotice
for any change submission errors to show in a fixed position banner. https://github.com/google/site-kit-wp/blob/db3699f1b5503195665a0e84a976d621bd44f3c7/assets/js/components/user-input/UserInputPreview.js#L181assets/js/components/user-input/UserInputPreview.js
component.preview
slug panel in this app.Test Coverage
QA Brief
Changelog entry