Implement UI for new AdSense setup main components

[felixarntz]

This issue is for actually implementing the UI (and a bit off extra logic) for the enhanced AdSense setup flow main components that were introduced in #4758.

---

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

Acceptance criteria

• The SetupCreateAccount component from Scaffold (logic for) new AdSense setup main components #4758 should have its UI implemented as follows:
  • It should be almost an exact copy of the existing (V1) SetupAccountCreate component (not reusing the existing component), with just a few wording adjustments:
    • The main body text (i.e. the one above the user profile info) should be replaced with: Once you create your account, Site Kit will place AdSense code on every page across your site. This means your site will be automatically optimized to help you earn money from your content.
    • The CTA button text should be replaced with: Create AdSense account (same as today, but lowercase "a")
• The SetupSelectAccount component from Scaffold (logic for) new AdSense setup main components #4758 should have its UI implemented as follows:
  • It should be an exact copy of the existing (V1) SetupAccountSelect component (not reusing the existing component).
• The UI implemented here can be tested via the Storybook stories introduced in Scaffold (logic for) new AdSense setup main components #4758, and it should be ensured it looks correct there (in case e.g. any additional data needs to be bootstrapped in the Storybook configuration).

Implementation Brief

• Using assets/js/modules/adsense/components/setup/v2/SetupCreateAccount.js,
  • Copy over the code from assets/js/modules/adsense/components/setup/SetupAccountCreate.js to the file with the text changes as per the AC.
• Using assets/js/modules/adsense/components/setup/v2/SetupSelectAccount.js,
  • Copy over the code from assets/js/modules/adsense/components/setup/SetupSelectAccount.js to the file.
• Update assets/js/modules/adsense/components/setup/v2/SetupMain.stories.js to include stories where above components are rendered.

Test Coverage

• No new tests to be added.

QA Brief

• Verify the changes met AC and IB.
• Verify the stories render SetupCreateAccount and SetupSelectAccount components as expected.

Changelog entry

• Add UI for new AdSense components.

[asvinb]

@felixarntz Just some clarification when the AC says:

not reusing the existing component
I've assumed that it means not updating assets/js/modules/adsense/components/setup/v2/SetupCreateAccount.js and assets/js/modules/adsense/components/setup/v2/SetupSelectAccount.js but to copy the code over.

Let me know if am correct in my assumption.

[felixarntz]

@asvinb Your IB is correct - my point was that the code should be copied over from the V1 components, and the V2 components should not use the V1 components (for example the V2 SetupCreateAccount component should not render/return the V1 <SetupAccountCreate /> in any case).

IB ✅

[wpdarren]

QA Update: ❌

@hussain-t As you can see from the screenshot below the CTA button text is in uppercase. According to the AC, it probably shouldn't be. It does appear as uppercase on V1, but would like to check.

The CTA button text should be replaced with: Create AdSense account (same as today, but lowercase "a")

I also feel this ticket should also be QA:Eng because of the IB checks included in the QAB. Will add the label once it passes our initial testing.

[hussain-t]

As you can see from the screenshot below the CTA button text is in uppercase. According to the AC, it probably shouldn't be. It does appear as uppercase on V1, but would like to check.

@wpdarren, all the buttons should be in uppercase to keep it consistent with the current styles. cc: @asvinb

[wpdarren]

QA Update: ✅

Verified:

• Main body text is be replaced with:
  Once you create your account, Site Kit will place AdSense code on every page across your site. This means your site will be automatically optimized to help you earn money from your content.

• The V2 story does look fine with no errors but we do not have anything to compare it with. Difficult to test on a site as we don't have a Google account with two AdSense accounts.

Have added QA:Eng label on for testing the IB.

[techanvil]

QA ✅

QA:Eng:

• Confirmed the IB has been implemented as specced.
• Nb, the relevant stories had previously been created in the PR Enhancement/4758 new adsense setup #4959 along with placeholder components, so no Storybook changes were here, these placeholders being fleshed out in the present issue.