Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement TwG setup UI for publication in review scenario #5527

Closed
felixarntz opened this issue Jul 8, 2022 · 5 comments
Closed

Implement TwG setup UI for publication in review scenario #5527

felixarntz opened this issue Jul 8, 2022 · 5 comments
Labels
Module: Thank with Google Thank with Google module related issues P0 High priority Type: Enhancement Improvement of an existing feature

Comments

@felixarntz
Copy link
Member

felixarntz commented Jul 8, 2022

Follow-up to #5455: The actual UI for the SetupPublicationPendingVerification component should be implemented based on the Figma design.


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

Acceptance criteria

Implementation Brief

In assets/js/modules/thank-with-google/components/setup/SetupPublicationPendingVerification.js. This component is being implemented in #5455:

  • Render the SetupPublicationScreen component (which is being implemented in Implement TwG setup UI for publication setup completed scenario #5525) with the following props:
    • title - "Reviewing your account application"
    • description - "We received your request to create a Thank with Google account. Check again for updates to your status."
    • Render the Link component as children with the translated copy "Check your status". It should have the following props:
      • href - https://publishercenter.google.com/
      • external - true
      • ariaLabel - "Check your status on Thank with Google Publisher Center"
    • Fix the link styles to match the Figma design.

Test Coverage

  • Verify the SetupMain component story for this scenario works as expected.

QA Brief

  • QAing this would require making sure the Thank with Google publication setup "no publication yet" scenario is according to the Figma design as mentioned in the AC.
  • The latest Figma design iteration should be used. The latest iteration is four. It can be found here.
  • For CR, this story can be used for verification.
  • For QA, this story can be used for verification.

Changelog entry

  • Implement the Thank with Google setup UI for the publication in review scenario.
@felixarntz felixarntz added P0 High priority Type: Enhancement Improvement of an existing feature Module: Thank with Google Thank with Google module related issues labels Jul 8, 2022
@felixarntz felixarntz self-assigned this Jul 8, 2022
@felixarntz felixarntz removed their assignment Jul 8, 2022
@hussain-t hussain-t assigned hussain-t and unassigned hussain-t Jul 11, 2022
@tofumatt tofumatt self-assigned this Jul 12, 2022
@tofumatt
Copy link
Collaborator

IB ✅

@tofumatt tofumatt removed their assignment Jul 12, 2022
@nfmohit nfmohit assigned nfmohit and unassigned nfmohit Jul 21, 2022
@nfmohit nfmohit mentioned this issue Jul 21, 2022
18 tasks
@nfmohit nfmohit removed their assignment Jul 21, 2022
@wpdarren wpdarren self-assigned this Jul 25, 2022
@wpdarren
Copy link
Collaborator

wpdarren commented Jul 25, 2022

QA Update: ⚠️

@nfmohit a few observations to highlight.

  1. There's a bit of confusion between the AC, IB and Figma designs for the Check your status According to the AC it should be a text link, but on the Figma it's a button and in the IB it says fix the link styles to match the Figma design. Please could confirm if it should be a button or text link?

  2. In the IB it says that the link should be External - true - does this mean that we should have the external link icon?

@nfmohit
Copy link
Collaborator

nfmohit commented Jul 25, 2022

Thank you for spotting this @wpdarren!

I believe the AC and IB were written using the second iteration of the Figma design, which I followed mistakenly as well. I'm moving this back to execution to add a new PR updating the button design to match with the latest iteration (iteration four).

@nfmohit nfmohit assigned aaemnnosttv and unassigned nfmohit Jul 26, 2022
@aaemnnosttv
Copy link
Collaborator

Ready for another pass @wpdarren 👍

@aaemnnosttv aaemnnosttv assigned wpdarren and unassigned aaemnnosttv Jul 26, 2022
@wpdarren
Copy link
Collaborator

QA Update: ✅

Verified:

  • The SetupPublicationPendingVerification component has its UI implemented from Figma design.
  • The secondary button should technically be a simple link, for now pointing to https://publishercenter.google.com/ (opening in a new tab).
  • The SetupPublicationScreen component renders with the following props:
    • Title - Reviewing your account application
    • Description - We received your request to create a Thank with Google account. Check again for updates to your status.
    • The translated copy is Check your status :
    • The link href is - https://publishercenter.google.com/
    • Accessibility ariaLabel - Check your status on Thank with Google Publisher Center
Screenshots

image
image
image

Note: there are some font type/size differences and these were also flagged in 5528 The response was that what we are seeing is correct, because the figma are focused on GM3, and we've gone with how we display other module splash screens.

@wpdarren wpdarren removed their assignment Jul 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Module: Thank with Google Thank with Google module related issues P0 High priority Type: Enhancement Improvement of an existing feature
Projects
None yet
Development

No branches or pull requests

7 participants