Implement navigation and tracking for Campaigns dashboard card

[AjeshRPai]

Part of
#18521
#18525

Description

This PR implements the tracking and click logic in the Campaigns Card

This PR implements the following click events and the tracking associated with it in Campaigns card

• Navigating to Campaign listing page on card click
• Navigate to Blaze Flow Creation on Create Campaign Click
• Navigate to Campaign Details on Campaigns item click

Also Implements the Site Menu Navigation

• Navigate to Campaign listing page when blaze_campaigns is enabled
• Navigate to Blaze Creation flow when blaze_campaigns is disabled

Also note that I have added the Skeleton classes for Campaign listing page and Detail page in this PR. There is no need to test these classes as of now since the logic will change in these classes

To test

Hide is working as expected, and my site refresh indicator is shown

• Go to the Jetpack app with the account not having campaigns
• Go to dashboard
• Hide promo card
• Verify that my site is refreshed and the card is hidden

Tracking is working as expected when the promo card shown

• Go to the Jetpack app with the account not having campaigns
• Go to dashboard
• Verify promo card is not shown
• 🔵 Tracked: my_site_dashboard_card_shown, Properties: {"type":"promote_with_blaze","subtype":"no_campaigns"}

Tracking is working as expected when the campaigns card shown

• Go to the Jetpack app with an account having campaigns
• Go to dashboard
• 🔵 Tracked: my_site_dashboard_card_shown, Properties: {"type":"promote_with_blaze","subtype":"campaigns"}

Click on the Menu item - Blaze campaign enabled

• Go to the Jetpack app with an account having campaigns
• Go to dashboard
• Click on Menu item - Blaze
• Verify that the user is navigated to the Campaigns listing page
• Verify that the tracking event is fired
• 🔵 Tracked: blaze_entry_point_tapped, Properties: {"source":"menu_item"}
• 🔵 Tracked: blaze_campaign_list_opened, Properties: {"source":"menu_item"}

Click on the Menu item - Blaze campaign disabled

• Go to the Jetpack app with an account having campaigns
• Go to dashboard
• Click on Menu item - Blaze
• Verify that the user is navigated to the Campaigns listing page
• Verify that the tracking event is fired
• 🔵 Tracked: blaze_entry_point_tapped, Properties: {"source":"menu_item"}
• 🔵 Tracked: blaze_overlay_displayed, Properties: {"source":"menu_item"}

Click on the Dashboard Card - Blaze Campaign

• Go to the Jetpack app with an account having campaigns
• Go to dashboard
• Click on Create Campaign
• Verify that the user is navigated to Blaze Flow
• 🔵 Tracked: blaze_entry_point_tapped, Properties: {"source":"dashboard_card"}
• 🔵 Tracked: blaze_overlay_displayed, Properties: {"source":"dashboard_card"}
• Repeat steps 1-2
• Click on Campaign item
• Verify event is tracked 🔵 Tracked: blaze_campaign_details_opened, Properties: {"source":"dashboard_card"}
• Click on the dashboard card
• Verify event tracked - 🔵 Tracked: blaze_campaign_list_opened, Properties: {"source":"dashboard_card"}

Ripple effect and Padding, Verify that the BlazeCampaignCard UI is as expected - compare it with the PR or Figma design

I had to re-arrange and add some columns in BlazeCampaignCard.
This is due to the fact that the click ripple of the view doesn’t fill the padding of the view in which click behavior is added. So adding padding to the column and setting it clickable makes the ripple to only fill the content. In order to fix that, I moved the padding from the parent column to the child view and set the parent clickable which makes the entire content to have the ripple effect.

Merge Instructions

• Make sure that Implements: The styling of the Blaze Campaigns Card #18768 is merged
• Update with trunk if needed
• Merge as normal

Regression Notes

1. Potential unintended areas of impact

• Blaze Card - Promo card and Campaign card is not shown in correct time
• Blaze Card UI is not correct
• Click and tracking for the card is not correct

2. What I did to test those areas of impact (or what existing automated tests I relied on)

• Unit tests and Manual tests

3. What automated tests I added (or what prevented me from doing so)

• Added unit tests

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• Talkback.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• Large and small screen sizes. (Tablet and smaller phones)
• Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

[wpmobilebot]

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

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18783-329c3ef
	Commit	329c3ef
	Direct Download	wordpress-prototype-build-pr18783-329c3ef.apk

Note: Google Login is not supported on these builds.

[wpmobilebot]

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

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18783-329c3ef
	Commit	329c3ef
	Direct Download	jetpack-prototype-build-pr18783-329c3ef.apk

Note: Google Login is not supported on these builds.

[zwarm]

@AjeshRPai - things are looking good. A few small refactor areas. My compose knowledge is very low, so it's hard for me to say the code is efficient, but it works. :)

[peril-wordpress-mobile]

	Warnings
⚠️	PR has more than 300 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS