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

Free Listings + Paid Ads: Add the Google Ads account setup section #1654

Conversation

eason9487
Copy link
Member

@eason9487 eason9487 commented Aug 26, 2022

Changes proposed in this Pull Request:

This PR implements the 📌 Google Ads account section in #1610.

  • Tweak the copywriting and layouts for Google Ads account cards, and add an external link to the connected cards for opening Google Ads management page.
  • Handle the page redirection for the AD_WORDS authorization of Google account from Google Ads account card in the onboarding flow.
  • Add a disconnect button to Google Ads account card for switching accounts.
  • Add the Google Ads account setup section to step 4 of the onboarding flow.
  • Optional invalidate the related state in wp-data store after Google Ads account is disconnected.

This PR also fixes two issues:

  • Fix the switch button at the footer is clickable when connecting a Google Ads account.
  • Fix the incorrect :active CSS style for disabled AppButton

Screenshots:

Kapture.2022-08-26.at.17.17.23.mp4

Detailed test instructions:

  1. Use GLA's connection test page to disconnect Google account, and then reconnect it without authorizing the AD_WORDS permission.
  2. Go to step 4 of the onboarding flow.
  3. Test the re-authorizing flow to request the AD_WORDS permission.
  4. Create/connect to a Google Ads account.
  5. Disconnect the Google Ads account via the current UI.
  6. Connect to/create a Google Ads account.

💡 When re-entering step 4, the previously selected "continue setting up paid ads" state is reset. Keeping the selected state will be developed in another PR.

Changelog entry

Fix - The "Or, create a new Google Ads account" button at the footer of the Google Ads account setup is clickable when connecting an existing account.
Fix - The incorrect active status style for a disabled button.

@eason9487 eason9487 added the changelog: fix Took care of something that wasn't working. label Aug 26, 2022
@eason9487 eason9487 requested a review from a team August 26, 2022 10:42
@eason9487 eason9487 self-assigned this Aug 26, 2022
@github-actions github-actions bot added changelog: add A new feature, function, or functionality was added. type: enhancement The issue is a request for an enhancement. labels Aug 26, 2022
@eason9487 eason9487 removed type: enhancement The issue is a request for an enhancement. changelog: add A new feature, function, or functionality was added. labels Aug 26, 2022
Base automatically changed from add/1610-paid-ads-features-section to feature/1610-streamlined-onboarding August 30, 2022 03:18

/**
* @param {Object} props React props
* @param {string} props.additionalScopeEmail
* @fires gla_google_account_connect_button_click with `{ action: 'scope', context: 'setup-ads' }`
*/
const AuthorizeAds = ( { additionalScopeEmail } ) => {
const nextPageName = glaData.mcSetupComplete ? 'setup-ads' : 'setup-mc';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💅 Maybe we can replace this string with constants like SETUP_ADS_PAGE and SETUP_MC_PAGE

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case, I think it's no need to declare additional constants. They are not duplicated in the same scope of uses. The 'setup-ads' below this file belong to another semantic and use of context, except that they happen to be the same value.

In terms of the whole codebase, whether to create shared constants for event tracking properties such as the context will be another 📜 topic.

// - Google Ads account connection
// - Campaign data
// - Billing setup
const disabledComplete = completing === 'skip-ads';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💅 Id use this skip-ads as a constant SKIP_ADS

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per the suggestion in #1649 (comment), I have added constants in 0e65308 and c08364f.

Copy link
Contributor

@puntope puntope left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ LGTM

  • I tested normal workflow and Iw as able to create new Ads account, selected existing account and switch accounts
  • I tested by removing permissions for Ad management and I saw the Allow access button which is working
  • UI match figma

💅 Left some minor comments in code
💅 Missing tests

@eason9487 eason9487 merged commit cf68d7a into feature/1610-streamlined-onboarding Aug 30, 2022
@eason9487 eason9487 deleted the add/1610-google-ads-account-section branch August 30, 2022 09:17
@eason9487 eason9487 added changelog: add A new feature, function, or functionality was added. and removed changelog: fix Took care of something that wasn't working. labels Oct 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changelog: add A new feature, function, or functionality was added.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants