Scaffold Thank with Google module setup flow logic for different scenarios

[felixarntz]

The TwG module setup comes with a few different scenarios that a user can be in, depending on whether they already have a TwG publication and where it is in the approval process. Since the TwG API to provide that information is not yet available, this will initially be testable using an upcoming version of the Site Kit tester plugin.

---

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

Acceptance criteria

The Thank with Google SetupMain component should be prepared for the full TwG module setup and its different scenarios, without implementing the actual UI. Below are some details. For reference, see the Figma file, however keep in mind that the purpose of this issue is not at all to implement the UI, only to implement the logic.

• The viewComponent should be based on the following logic relying on the getCurrentPublication() selector from Implement publications selectors in modules/thank-with-google store #5454:
  • If the modules/thank-with-google store hasErrors(), display the corresponding StoreErrorNotices component.
  • Else if the current publication is undefined (i.e. loading), display a ProgressBar.
  • Else if the current publication is null (i.e. there is none), display a new component SetupCreatePublication.
  • Else if the current publication's state is ACTION_REQUIRED, display a new component SetupPublicationActionRequired.
  • Else if the current publication's state is PENDING_VERIFICATION, display a new component SetupPublicationPendingVerification.
  • Else if the current publication's state is ACTIVE and the TwG publicationID setting is not already set to this publication, display a new component SetupPublicationActive.
  • Else (i.e. if the current publication's state is ACTIVE and the TwG publicationID setting is set to this publication), display a new component SetupCustomize.
• Each of the above "new" components should be scaffolded so that they contain just some text (e.g. with the component name itself) to allow testing that the correct component is rendered. A few additional requirements for specific components follow:
  • The SetupPublicationActive component should in addition include a primary CTA button Customize Thank with Google at the bottom of the screen which on click sets the TwG publicationID setting to the publication ID of the current publication (i.e. getCurrentPublication().publicationId field). Per the above logic, this will then trigger the UI to change to show SetupCustomize.
  • The SetupCustomize component should receive the finishSetup callback as a required prop and include a primary CTA button Configure Thank with Google at the bottom of the screen which on click submits the changes in the modules/thank-with-google store and then calls the finishSetup callback. The button should be disabled if the store ! canSubmitChanges (similar to the existing TwG SetupForm component has it).
• The existing TwG SetupForm component should be deleted as it is no longer used.
• Storybook stories for each of the above scenarios should be implemented under Modules > Thank with Google > Setup.

Implementation Brief

Create the following functional components in assets/js/modules/thank-with-google/components/setup directory:

• SetupCreatePublication that renders - <div>TODO: UI to create publication - SetupCreatePublication</div>
• SetupPublicationActionRequired that renders - <div>TODO: UI for publication action required - SetupPublicationActionRequired</div>
• SetupPublicationPendingVerification that renders - <div>TODO: UI for publication pending verification - SetupPublicationPendingVerification</div>
• SetupPublicationActive with the following details:
  • Renders <div>TODO: UI for setup publication active - SetupPublicationActive</div>
  • At the bottom, render a Button component with the translated copy Customize Thank with Google.
  • Create a callback function using useCallback.
  • That should set the getCurrentPublication().publicationId by dispatching the setPublicationID() action of modules/thank-with-google store.
  • Pass the callback function to the onClick prop of the Button component.
• SetupCustomize with the following details:
  • It should receive a required prop finishSetup as a callback function.
  • Renders <div>TODO: UI for setup customize - SetupCustomize</div>
  • At the bottom, render a Button component with the translated copy Configure Thank with Google.
  • The button should be disabled using the canSubmitChanges selector of the modules/thank-with-google store.
  • Create a callback function handleSubmit using useCallback.
  • That should submit the changes by dispatching the submitChanges() action of the modules/thank-with-google store.
  • Call the finishSetup callback function.
  • Pass the handleSubmit callback function to the onClick prop of the Button component.

In assets/js/modules/thank-with-google/components/setup/SetupMain.js, the viewComponent should be set based on the following logic:

• Check for errors using the hasErrors() selector of modules/thank-with-google store.
• If there are errors, set the StoreErrorNotices component to viewComponent and pass the moduleSlug and storeName as props.
• Get the publicationID from the getPublicationID selector of modules/thank-with-google store.
• Get the current publication from the getCurrentPublication() selector of modules/thank-with-google store.
• If the current publication is undefined i.e., not loaded yet, set the ProgressBar component to viewComponent.
• If the current publication is null (i.e. there is none), set the SetupCreatePublication component to viewComponent.
• If the current publication's state is ACTION_REQUIRED, set the SetupPublicationActionRequired component to viewComponent.
• If the current publication's state is PENDING_VERIFICATION, set the SetupPublicationPendingVerification component to viewComponent.
• If the current publication's state is ACTIVE and the publicationID is not already set/available, set the SetupPublicationActive component to viewComponent.
• If the current publication's state is ACTIVE and the publicationID is already set/available, set the SetupCustomize component to viewComponent.

Remove SetupForm related files

• Remove assets/js/modules/thank-with-google/components/setup/SetupForm.js.
• Remove assets/js/modules/thank-with-google/components/setup/SetupForm.test.js.
• Remove assets/js/modules/thank-with-google/components/setup/SetupForm.stories.js.

Test Coverage

• Create a new file assets/js/modules/thank-with-google/components/setup/SetupMain.stories.js.
• In that file, add stories for each of the above scenarios.
• It should be implemented under Modules > Thank with Google > Setup.
• Jest tests for the logic that render the component would also be good to add, if straightforward.

QA Brief

• Ensure the newly added stories for the TwG module setup matches the AC for the different scenarios.
• For the CR, the stories can be tested here.
• For QA, once the PR is merged to develop the stories can be tested here
• Note: This PR doesn't apply UI/style changes. This is purely for scaffolding the setup flow logic for different scenarios.

Changelog entry

• Scaffold Thank with Google module setup flow logic for different scenarios.

[tofumatt]

IB ✅

[jimmymadon]

@felixarntz @tofumatt @hussain-t Very minor naming suggestion for consistency: is there any reason we removed the SetupForm component and are using SetupCustomize instead. In other modules, like analytics, where the setup options and settings options are similar and editable as 'forms', we have used SetupForm and SettingsForm respectively.

[mohitwp]

QA update ✅

• Verified stories here as per AC.
• Stories are implemented as per AC.