2535: Consolidate Ad Creation #2623
Conversation
…onsolidate-ad-creation-ccf-merged
github-actions
bot
added
the
changelog: update
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feature/2459-campaign-creation-flow #2623 +/- ##
=====================================================================
- Coverage 62.6% 61.8% -0.8%
=====================================================================
Files 319 327 +8
Lines 5063 5106 +43
Branches 1232 1242 +10
=====================================================================
- Hits 3171 3156 -15
- Misses 1718 1768 +50
- Partials 174 182 +8
Flags with carried forward coverage won't be shown. Click here to find out more.
|
…creation-ccf-onboarding-merged Merge onboarding improvements branch into consolidated ad
…onsolidate-ad-creation-ccf-merged
There was a problem hiding this comment.
I think these updates are looking pretty good and are testing well for me locally. Left one suggestion, but marking as approved and ready for another QA pass.
One note for QA that should be kept in mind is that when this PR is tested with billing not approved, you'll see the billing setup card on this form as well as a duplicate billing step when creating your first campaigns from the dashboard, until #2536 is completed.
js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
Outdated
Show resolved
Hide resolved
QA/Test Report- ✅Testing Environment -
Test Results - Followed the testing instructions, acceptance criteria, and tested all possible ways to create, edit, and manage paid ad campaigns. All tests were passed when billing was not set, with billing set, and other use cases. Next Step- Ready to Code Review(Woo) |
| { isOnboardingFlow && <PaidAdsFeaturesSection /> } | ||
|
|
||
| <PaidAdsSetupSections | ||
| onStatesReceived={ handleOnStatesReceived } | ||
| campaign={ campaign } | ||
| countryCodes={ countryCodes } | ||
| loadCampaignFromClientSession={ isOnboardingFlow } | ||
| showCampaignPreviewCard={ | ||
| trackingContext === 'setup-ads' || | ||
| trackingContext === 'create-ads' | ||
| } |
There was a problem hiding this comment.
As per the first acceptance criteria:
When a user is on the "Create your paid campaign" step of the "Set up paid ads" flow, they will see the same form used on the "Create a campaign" step of the "Get started..." onboarding flow.
I would like to confirm what the scope of the “same form” is, after all, they are currently presented differently in the campaign preview.
There was a problem hiding this comment.
The "same form" means that we will use the same component for both forms so that the requirements of each input section are consistent. The main difference is that the PaidAdsFeaturesSection should only be shown during onboarding.
There was a problem hiding this comment.
Thanks for the explanation.
I would suggest rephrasing it a little bit to avoid having “When a user …, they will see …” wording that confuses its goal of just having to share components in development. Or, clarify the goal is to have the same UI as before the change.
js/src/components/paid-ads/ads-campaign/paid-ads-setup-sections.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
✅ Verified the changes from a user perspective and confirmed that creating, editing, and managing paid ad campaigns from all desired screens is working without any errors.
✅ When billing is not set up, the merchant is unable to complete the setup process, as expected.
✅ All cases defined in Acceptance Criteria works as expected.
| */ | ||
|
|
||
| /** | ||
| * @typedef {import('.~/components/paid-ads/ads-campaign/paid-ads-setup-sections').PaidAdsData} PaidAdsData |
There was a problem hiding this comment.
This file doesn't have the PaidAdsData type definition.
| * @param {JSX|(PaidAdsData) =>JSX} [props.skipButton] A React element or function to render the "Skip" button. If a function is passed, it receives the paid ads data and returns the button element. | ||
| * @param {JSX|(AdaptiveFormContext, PaidAdsData) =>JSX} [props.continueButton] A React element or function to render the "Continue" button. If a function is passed, it receives the form context and paid ads data and returns the button element. It handles submission logic in the form. |
There was a problem hiding this comment.
There are some issues in these JSDoc:
JSXis a type namespace rather than a type.- Due to the limitation of the
npm run doc:trackingscript, the function type needs to be placed ahead of another one. For example, swapstring | () => booleanto() => boolean | string. Otherwise, the script can't parse it.ERROR: Unable to parse a tag's type expression for source file js/src/components/paid-ads/ads-campaign/ads-campaign.js in line 29 with tag title "param" and text "{JSX|(module:components/paid-ads/ads-campaign/ads-campaign~PaidAdsData) =>JSX} [props .skipButton] A React element or function to render the "Skip" button. If a function is passed, it receives the paid ads data and returns the button element.": Invalid type expression "JSX|(module:components/paid-ads/ads-campaign/ads-campaign~PaidAdsData) =>JSX": Expected "!", "$", "'", "*", ".", "...", "0", "?", "@", "Function", "\"", "\\", "_", "break", "case", "catch", "class", "const", "continue", "debugger", "default", "delete", "do", "else", "enum", "export", "extends", "false", "finally", "for", "function", "if", "implements", "import", "in", "instanceof", "interface", "let", "new", "null", "package", "private", "protected", "public", "return", "static", "super", "switch", "this", "throw", "true", "try", "typeof", "undefined", "var", "void", "while", "with", "yield", "{", Unicode letter number, Unicode lowercase letter, Unicode modifier letter, Unicode other letter, Unicode titlecase letter, Unicode uppercase letter, or [1-9] but "(" found. - Their implementation doesn't pass a
PaidAdsDataas a function parameter. - The
props.continueButtondoesn't actually handle submission logic in the form in this component, and it's not always expected that the consumer side will use it to submit a form.
There was a problem hiding this comment.
JSDoc updated @eason9487 . Thanks for catching that.
| continueButton, | ||
| } ) { | ||
| const formContext = useAdaptiveFormContext(); | ||
| const { data: countryCodes } = useTargetAudienceFinalCountryCodes(); |
There was a problem hiding this comment.
This countryCodes may lead to incorrect budget recommendation text and amount when editing an existing campaign having different target audience countries than the current ones in the free listings setup.
For example, given a campaign was created with one country code but is being edited after the free listings setup has been updated to have two country codes, the recommendation text will be incorrect:
- Expected: Most merchants targeting Taiwan set a daily budget of 12 USD
- Received: Most merchants targeting similar countries set a daily budget of 17 USD
Kapture.2024-10-10.at.15.46.15.mp4
There was a problem hiding this comment.
@eason9487 This should be fixed now. We are now passing the displayCountries property of a campaign.
https://github.com/woocommerce/google-listings-and-ads/pull/2623/files#diff-e44a2cf9e5c408b79fc5c34e07b13864077ddae579701d8834647bca62494ccdR99
| showCampaignPreviewCard={ | ||
| trackingContext === 'setup-ads' || | ||
| trackingContext === 'create-ads' | ||
| } |
There was a problem hiding this comment.
Before this PR, the preview card is shown as well when editing campaign.
There was a problem hiding this comment.
Now that the AdsCampaign component has become more flexible and simple to use, however, there are still a few factors that can be polished.
- Render logic depending on a prop named
trackingContextseems inappropriate. isOnboardingFlowandtrackingContextcould be consolidated and lifted to a higher abstraction level.PaidAdsSetupSectionsis now purer and contains only one section.- Even if there is no need to render a
BillingCardwhen creating or editing campaign, a redundant API request will still be sent to get the billing status.
Suggestions to further simplify the logic and divide component responsibilities:
- Remove
isOnboardingFlowprop and renametrackingContexttocontext.contextaccepts one more possible string value, such as'setup-mc'. to indicate it's being used in onboarding- Declare render condition variables within the components, for example:
const isOnboardingFlow = context === 'setup-mc'; const showBillingCard = context === 'setup-mc' || context === 'setup-ads';
- Remove
PaidAdsSetupSectionsto reduce the complexity of a layer of components.- Move the API request of getting billing status and
SpinnerCardback to theBillingCardcomponent - Moe the rest to the
AdsCampaigncomponent and use the above render condition variables, for example:<BudgetSection formProps={ formContext } countryCodes={ /* value for this prop needs to consider another comment */ } > { showBillingCard && <BillingCard /> } { ! isOnboardingFlow && <CampaignPreviewCard /> } </BudgetSection>
- Move the API request of getting billing status and
There was a problem hiding this comment.
Thanks for the suggestions @eason9487 . Makes sense. Updated!
| initialCampaign={ paidAds } | ||
| validate={ validateCampaign } | ||
| onChange={ ( _, values, isValid ) => { | ||
| setPaidAds( { ...paidAds, ...values, isValid } ); |
There was a problem hiding this comment.
Previously, the form component was under several layers of this component, so it required a more cumbersome way to retrieve the form data and validation state.
Now this component is wrapped by CampaignAssetsForm, so all handling related to using paidAds and calling setPaidAds should be able to be removed.
- The
paidAds.amountvalue can be replaced withformContext.values.amount - The
paidAds.isValidstate can be replaced withformContext.isValidForm
There was a problem hiding this comment.
Sounds good. Updated.
| @@ -133,6 +135,7 @@ const CreatePaidAdsCampaign = () => { | |||
| countryCodes: initialCountryCodes, | |||
There was a problem hiding this comment.
The audience section has been completely removed from campaign creation, so it would be better to decouple the countryCodes from the form component.
There was a problem hiding this comment.
Similar to #2623 (comment).
There was a problem hiding this comment.
Similar to #2623 (comment).
| await expect( | ||
| page.getByRole( 'link', { | ||
| name: 'click here instead', | ||
| } ) | ||
| ).toBeVisible(); |
There was a problem hiding this comment.
Is it necessary to remove this assertion?
There was a problem hiding this comment.
Not sure why it was removed in first place. I restored it 👍
…onsolidate-ad-creation-ccf-merged
|
@ankitguptaindia Can you kindly test the changes please? I also added items to double check in the QAB. Extra issues to test: |
Changes proposed in this Pull Request:
Closes #2535 .
Replace this with a good description of your changes & reasoning.
Detailed test instructions:
Extra issues to test:
Additional details:
Changelog entry