Skip to content

Conversation

@JorgeMucientes
Copy link
Contributor

@JorgeMucientes JorgeMucientes commented Nov 8, 2024

Closes: #12894

⚠️ Depends on FluxC changes

Description

Adds a new input text field in the Blaze campaign creation flow to edit the CTA text of the ad. It also updates the style of the ad CTA to match the Blaze ad style.

Testing information

  1. Log into a site with Blaze enabled
  2. Trigger Blaze campaign creation flow
  3. Once suggestions are loaded, click on Edit Ad button
  4. Check the input text "Call to action" is prefilled for all 3 suggestions.
  5. Edit the value of it and save it
  6. Check the ad preview is updated with the edited value
  7. Create the campaign and load the campaign detail review. Verify the ad CTA shows the value you entered.

The tests that have been performed

The above

Images/gif

editCTA.mp4

Changes applied to ad CTA:

defaultButton.mp4
  • I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

  • The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
  • Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
  • Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

@JorgeMucientes JorgeMucientes marked this pull request as draft November 8, 2024 16:55
@dangermattic
Copy link
Collaborator

dangermattic commented Nov 8, 2024

1 Warning
⚠️ This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Nov 8, 2024

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.
App Name WooCommerce-Wear Android
Platform⌚️ Wear OS
FlavorJalapeno
Build TypeDebug
Commit819562f
Direct Downloadwoocommerce-wear-prototype-build-pr12899-819562f.apk

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Nov 8, 2024

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

App Name WooCommerce Android
Platform📱 Mobile
FlavorJalapeno
Build TypeDebug
Commit819562f
Direct Downloadwoocommerce-prototype-build-pr12899-819562f.apk

@JorgeMucientes JorgeMucientes added the feature: blaze Related to the Blaze project label Nov 11, 2024
@JorgeMucientes JorgeMucientes added this to the 21.2 milestone Nov 11, 2024
@JorgeMucientes JorgeMucientes added the type: task An internally driven task. label Nov 11, 2024
@JorgeMucientes
Copy link
Contributor Author

Since the Ad in Blaze web shows the CTA in blue and under the description, I think we should replicate that exact same UI.

Screenshot 2024-11-11 at 10 56 07

I'll proceed to apply those changes in this same PR

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Nov 11, 2024

Project dependencies changes

The following changes in project dependencies were detected (configuration vanillaReleaseRuntimeClasspath):

list
Upgraded Dependencies
org.wordpress.fluxc.plugins:woocommerce:trunk-cc17141a0e910d5b808ba6bbfb4b7d393d3517a0, (changed from 2.99.1)
org.wordpress.fluxc:fluxc-annotations:trunk-cc17141a0e910d5b808ba6bbfb4b7d393d3517a0, (changed from 2.99.1)
org.wordpress:fluxc:trunk-cc17141a0e910d5b808ba6bbfb4b7d393d3517a0, (changed from 2.99.1)
tree
-+--- org.wordpress:fluxc:2.99.1
-|    +--- org.jetbrains.kotlin:kotlin-parcelize-runtime:1.9.25
-|    |    +--- org.jetbrains.kotlin:kotlin-stdlib:1.9.25 (*)
-|    |    \--- org.jetbrains.kotlin:kotlin-android-extensions-runtime:1.9.25
-|    |         \--- org.jetbrains.kotlin:kotlin-stdlib:1.9.25 (*)
-|    +--- androidx.exifinterface:exifinterface:1.0.0 -> 1.3.6
-|    |    \--- androidx.annotation:annotation:1.2.0 -> 1.8.0 (*)
-|    +--- androidx.security:security-crypto:1.0.0 -> 1.1.0-alpha03
-|    |    +--- androidx.annotation:annotation:1.1.0 -> 1.8.0 (*)
-|    |    +--- com.google.crypto.tink:tink-android:1.5.0
-|    |    \--- androidx.collection:collection:1.1.0 -> 1.4.0 (*)
-|    +--- com.squareup.okhttp3:okhttp-urlconnection:4.9.0
-|    |    +--- com.squareup.okhttp3:okhttp:4.9.0 -> 4.12.0 (*)
-|    |    \--- org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.4.10 -> 1.9.10 (*)
-|    +--- com.google.code.gson:gson:2.8.5 -> 2.10.1
-|    +--- org.apache.commons:commons-text:1.10.0 (*)
-|    +--- androidx.room:room-runtime:2.6.1 (*)
-|    +--- androidx.room:room-ktx:2.6.1
-|    |    +--- androidx.room:room-common:2.6.1 (*)
-|    |    +--- androidx.room:room-runtime:2.6.1 (*)
-|    |    +--- org.jetbrains.kotlin:kotlin-stdlib:1.8.22 -> 1.9.25 (*)
-|    |    +--- org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.1 -> 1.8.1 (*)
-|    |    +--- androidx.room:room-common:2.6.1 (c)
-|    |    \--- androidx.room:room-runtime:2.6.1 (c)
-|    +--- com.google.dagger:dagger:2.51.1
-|    |    \--- javax.inject:javax.inject:1
-|    +--- org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.1 (*)
-|    +--- org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1 (*)
-|    +--- org.wordpress:wellsql:2.0.0
-|    |    +--- androidx.annotation:annotation:1.2.0 -> 1.8.0 (*)
-|    |    \--- org.wordpress.wellsql:wellsql-annotations:2.0.0
-|    +--- org.wordpress.fluxc:fluxc-annotations:2.99.1
-|    +--- org.greenrobot:eventbus:3.3.1 (*)
-|    +--- org.greenrobot:eventbus-java:3.3.1
-|    +--- com.squareup.okhttp3:okhttp:4.9.0 -> 4.12.0 (*)
-|    +--- com.android.volley:volley:1.1.1 -> 1.2.0
-|    +--- androidx.paging:paging-runtime:2.1.2
-|    |    +--- androidx.paging:paging-common:2.1.2
-|    |    |    +--- androidx.annotation:annotation:1.0.0 -> 1.8.0 (*)
-|    |    |    \--- androidx.arch.core:core-common:2.0.0 -> 2.2.0 (*)
-|    |    +--- androidx.arch.core:core-runtime:2.0.0 -> 2.2.0 (*)
-|    |    +--- androidx.lifecycle:lifecycle-runtime:2.0.0 -> 2.7.0 (*)
-|    |    +--- androidx.lifecycle:lifecycle-livedata:2.0.0 -> 2.7.0 (*)
-|    |    \--- androidx.recyclerview:recyclerview:1.0.0 -> 1.3.2 (*)
-|    +--- com.goterl:lazysodium-android:5.0.2
-|    +--- net.java.dev.jna:jna:5.5.0
-|    \--- org.jetbrains.kotlin:kotlin-stdlib:1.9.25 (*)
++--- org.wordpress:fluxc:trunk-cc17141a0e910d5b808ba6bbfb4b7d393d3517a0
+|    +--- org.jetbrains.kotlin:kotlin-parcelize-runtime:1.9.25
+|    |    +--- org.jetbrains.kotlin:kotlin-stdlib:1.9.25 (*)
+|    |    \--- org.jetbrains.kotlin:kotlin-android-extensions-runtime:1.9.25
+|    |         \--- org.jetbrains.kotlin:kotlin-stdlib:1.9.25 (*)
+|    +--- androidx.exifinterface:exifinterface:1.0.0 -> 1.3.6
+|    |    \--- androidx.annotation:annotation:1.2.0 -> 1.8.0 (*)
+|    +--- androidx.security:security-crypto:1.0.0 -> 1.1.0-alpha03
+|    |    +--- androidx.annotation:annotation:1.1.0 -> 1.8.0 (*)
+|    |    +--- com.google.crypto.tink:tink-android:1.5.0
+|    |    \--- androidx.collection:collection:1.1.0 -> 1.4.0 (*)
+|    +--- com.squareup.okhttp3:okhttp-urlconnection:4.9.0
+|    |    +--- com.squareup.okhttp3:okhttp:4.9.0 -> 4.12.0 (*)
+|    |    \--- org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.4.10 -> 1.9.10 (*)
+|    +--- com.google.code.gson:gson:2.8.5 -> 2.10.1
+|    +--- org.apache.commons:commons-text:1.10.0 (*)
+|    +--- androidx.room:room-runtime:2.6.1 (*)
+|    +--- androidx.room:room-ktx:2.6.1
+|    |    +--- androidx.room:room-common:2.6.1 (*)
+|    |    +--- androidx.room:room-runtime:2.6.1 (*)
+|    |    +--- org.jetbrains.kotlin:kotlin-stdlib:1.8.22 -> 1.9.25 (*)
+|    |    +--- org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.1 -> 1.8.1 (*)
+|    |    +--- androidx.room:room-common:2.6.1 (c)
+|    |    \--- androidx.room:room-runtime:2.6.1 (c)
+|    +--- com.google.dagger:dagger:2.51.1
+|    |    \--- javax.inject:javax.inject:1
+|    +--- org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.1 (*)
+|    +--- org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1 (*)
+|    +--- org.wordpress:wellsql:2.0.0
+|    |    +--- androidx.annotation:annotation:1.2.0 -> 1.8.0 (*)
+|    |    \--- org.wordpress.wellsql:wellsql-annotations:2.0.0
+|    +--- org.wordpress.fluxc:fluxc-annotations:trunk-cc17141a0e910d5b808ba6bbfb4b7d393d3517a0
+|    +--- org.greenrobot:eventbus:3.3.1 (*)
+|    +--- org.greenrobot:eventbus-java:3.3.1
+|    +--- com.squareup.okhttp3:okhttp:4.9.0 -> 4.12.0 (*)
+|    +--- com.android.volley:volley:1.1.1 -> 1.2.0
+|    +--- androidx.paging:paging-runtime:2.1.2
+|    |    +--- androidx.paging:paging-common:2.1.2
+|    |    |    +--- androidx.annotation:annotation:1.0.0 -> 1.8.0 (*)
+|    |    |    \--- androidx.arch.core:core-common:2.0.0 -> 2.2.0 (*)
+|    |    +--- androidx.arch.core:core-runtime:2.0.0 -> 2.2.0 (*)
+|    |    +--- androidx.lifecycle:lifecycle-runtime:2.0.0 -> 2.7.0 (*)
+|    |    +--- androidx.lifecycle:lifecycle-livedata:2.0.0 -> 2.7.0 (*)
+|    |    \--- androidx.recyclerview:recyclerview:1.0.0 -> 1.3.2 (*)
+|    +--- com.goterl:lazysodium-android:5.0.2
+|    +--- net.java.dev.jna:jna:5.5.0
+|    \--- org.jetbrains.kotlin:kotlin-stdlib:1.9.25 (*)
-\--- org.wordpress.fluxc.plugins:woocommerce:2.99.1
-     +--- org.wordpress:fluxc:2.99.1 (*)
-     +--- com.google.code.gson:gson:2.8.5 -> 2.10.1
-     +--- com.google.dagger:dagger:2.51.1 (*)
-     +--- org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.1 (*)
-     +--- org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1 (*)
-     +--- androidx.room:room-runtime:2.6.1 (*)
-     +--- org.wordpress:wellsql:2.0.0 (*)
-     +--- org.wordpress.fluxc:fluxc-annotations:2.99.1
-     +--- androidx.room:room-ktx:2.6.1 (*)
-     \--- org.jetbrains.kotlin:kotlin-stdlib:1.9.25 (*)
+\--- org.wordpress.fluxc.plugins:woocommerce:trunk-cc17141a0e910d5b808ba6bbfb4b7d393d3517a0
+     +--- org.wordpress:fluxc:trunk-cc17141a0e910d5b808ba6bbfb4b7d393d3517a0 (*)
+     +--- com.google.code.gson:gson:2.8.5 -> 2.10.1
+     +--- com.google.dagger:dagger:2.51.1 (*)
+     +--- org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.1 (*)
+     +--- org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1 (*)
+     +--- androidx.room:room-runtime:2.6.1 (*)
+     +--- org.wordpress:wellsql:2.0.0 (*)
+     +--- org.wordpress.fluxc:fluxc-annotations:trunk-cc17141a0e910d5b808ba6bbfb4b7d393d3517a0
+     +--- androidx.room:room-ktx:2.6.1 (*)
+     \--- org.jetbrains.kotlin:kotlin-stdlib:1.9.25 (*)

Comment on lines 256 to 266
Text(
text = stringResource(
id = string.blaze_campaign_edit_ad_characters_remaining,
viewState.descriptionCharactersRemaining
),
style = MaterialTheme.typography.caption,
color = colorResource(id = color.color_on_surface_disabled),
modifier = Modifier
.padding(top = dimensionResource(id = dimen.minor_100))
.fillMaxWidth()
)
Copy link
Member

Choose a reason for hiding this comment

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

Not a review, but just a suggestion here, instead of using a separate Text field here, we can simplify this by using the helper argument of the WCOutlinedTextField, it should then prevent design discrepancies between this screen and other screens where we use the same pattern.

The helper can be used to show an error if we pass isError = true, this could be helpful if we want to follow what iOS does by showing it as error when the value is empty (This is a point that I think we should fix for Android, as empty values are accepted for tagline and description, where they shouldn't be).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point @hichamboushaba I've applied your suggestion to keep the component's experience consistent across the different screens.
Also added support for the case where either tagline or description are empty.

@codecov-commenter
Copy link

codecov-commenter commented Nov 11, 2024

Codecov Report

Attention: Patch coverage is 30.76923% with 27 lines in your changes missing coverage. Please review.

Project coverage is 40.19%. Comparing base (c8db73c) to head (819562f).
Report is 23 commits behind head on trunk.

Files with missing lines Patch % Lines
...reation/ad/BlazeCampaignCreationEditAdViewModel.kt 8.69% 21 Missing ⚠️
...om/woocommerce/android/ui/blaze/BlazeRepository.kt 50.00% 3 Missing ⚠️
...n/preview/BlazeCampaignCreationPreviewViewModel.kt 70.00% 0 Missing and 3 partials ⚠️
Additional details and impacted files
@@            Coverage Diff            @@
##              trunk   #12899   +/-   ##
=========================================
  Coverage     40.18%   40.19%           
  Complexity     5804     5804           
=========================================
  Files          1259     1259           
  Lines         71561    71589   +28     
  Branches       9980     9984    +4     
=========================================
+ Hits          28760    28773   +13     
- Misses        40168    40181   +13     
- Partials       2633     2635    +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@JorgeMucientes JorgeMucientes added the status: do not merge Dependent on another PR, ready for review but not ready for merge. label Nov 11, 2024
@hichamboushaba hichamboushaba self-assigned this Nov 12, 2024
Copy link
Member

@hichamboushaba hichamboushaba left a comment

Choose a reason for hiding this comment

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

Nice work @JorgeMucientes, code looks good, and changes worked overall well, I found two minor issues, but I'm pre-approving.
The first issue is a in the comment below, and the other is about updating the logic of the "Suggested by AI" label, it keeps showing even if we edit the CTA field, I believe we need to update this logic to account for it too.

@JorgeMucientes JorgeMucientes removed the status: do not merge Dependent on another PR, ready for review but not ready for merge. label Nov 13, 2024
# Conflicts:
#	WooCommerce/src/main/kotlin/com/woocommerce/android/ui/blaze/creation/preview/BlazeCampaignCreationPreviewViewModel.kt
@JorgeMucientes
Copy link
Contributor Author

Thanks for the review and the input @hichamboushaba I fixed both of the issues.

@JorgeMucientes JorgeMucientes merged commit b60474a into trunk Nov 14, 2024
15 checks passed
@JorgeMucientes JorgeMucientes deleted the issue/12894-blaze-cta-text-input branch November 14, 2024 08:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature: blaze Related to the Blaze project type: task An internally driven task.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support new input field to edit Blaze Ad main CTA

6 participants