Add/upsell titan

[divyamrastogi]

Changes proposed in this Pull Request

• Start showing the Titan "Get Email" banner in the primary cards area on the Home page.

• Add a TitanBanner.js task to the primary cards

Testing instructions

1. Add the talk-to/wp-calypso repo as a remote - git remote add titan https://github.com/talk-to/wp-calypso.git
2. Fetch the add/upsell-titan branch from the Titan repo: git fetch titan add/upsell-titan
3. Add the following line to client/my-sites/customer-home/main.jsx on L99:

<Primary cards={ [ 'home-task-upsell-titan' ] } />

4. Click on "My Home" on the sidebar. You should see the Titan Upsell Banner on the Customer Home page

Caveats

The task home-task-upsell-titan will be obtained from the server.

Screenshot

Titan Upsell Banner on Customer Home Page:

Resources

• Design resources: https://www.figma.com/proto/h9Vnr8v7bYB7fvIJ9FvGYs/Customer-Home-Checklist-(Copy)?node-id=763%3A1&viewport=282%2C308%2C0.06280452013015747&scaling=scale-down&page-id=759%3A16689
• pcDL0W-ad-p2
• pcDL0W-ar-p2

cc: @daledupreez

[daledupreez]

Overall, this is looking good!

I have added a number of comments, some of which are minor, and some are more core to the intended logic for the card.

I also want to note that I am not sure either of the TODOs on the PR description are necessary:

[] Conditionally show the TitanBanner
[] Fetch show/hide logic from data layer using redux state

One general note for future PRs is to use even more verbose branch names. add/upsell-titan could hit conflicts if we don't specify what kind of upsell we're adding. Something like add/customer-home-titan-upsell would be a bit more self-descriptive and unlikely to collide with anything else. (Can you tell I am a bit neurotic?!)

As a final note, please add some more verbose testing instructions so the next reviewer(s) can actually see the code in action.

From my side, I did the following:

1. I added the talk-to/wp-calypso repo as a remote (I called it titan): git remote add titan https://github.com/talk-to/wp-calypso.git
2. I fetched the add/upsell-titan branch from the Titan repo: git fetch titan add/upsell-titan
3. I modified client/my-sites/customer-home/main.jsx on L105 as follows:

-					<Primary cards={ layout.primary } />
+					<Primary cards={ [ 'home-task-upsell-titan' ] } />

4. I ran yarn and then yarn start
5. I navigated to the home page and verified that the card appeared and looked OK. (I didn't click through as I know that part needs work!)

[daledupreez]

I think we can have this fully controlled by the server logic, to be honest.

I think it will be simpler to remove the conditional logic and the comment for now, as well as the commented out import of config on line 10. We can add them back in if we want to, but it will be cleaner in the meantime without the clutter. 😁

[daledupreez]

This proposed code block fetches the following pieces of state/data that we're going to need in the JSX below:

1. The slug for the current site (which is the primary/default domain)
2. The path to the email comparison page for that site slug (which we are also assuming is the primary domain and the domain we want to sell Titan for)

Suggested change

	const siteSlug = useSelector( getSelectedSiteSlug ); // getSelectedSiteSlug should be imported from 'calypso/state/ui/selectors'
	const emailComparisonPath = emailManagementPath( siteSlug, siteSlug ); // emailManagementPath should be imported from 'calypso/my-sites/email/paths'

[divyamrastogi]

I'm guessing you meant to import and call emailManagement function from calypso/my-sites/email/paths.

[divyamrastogi]

Thank you Dale, this helped me understand a bit more about how to fetch data from the store.

[daledupreez]

Sorry about the wrong function name! 😳 You worked it out despite my poor directions!

[daledupreez]

We definitely need to update this logic to load the email comparison page in the current window.

Suggested change

	actionUrl="https://www.cloudflare.com/pg-lp/cloudflare-for-wordpress-dot-com?utm_source=wordpress.com&utm_medium=affiliate&utm_campaign=paygo_2021-02_a8_pilot&utm_content=home"
	actionTarget="_blank"
	actionUrl={ emailComparisonPath }

[daledupreez]

Thanks for the quick fixes!

I still have one outstanding item for the link/button opening in a new window.

I would still love to understand the translation bits as well, might come in handy further down the line.

I wasn't able to respond to this comment inline, but the way we handle translations is that for each merged PR, we identify and extract any new strings and then queue them up for translation - that occurs asynchronously.

As part of the translation process, one of the key ingredients is adding a screenshot. Once we've confirmed the language, I am going to request that you add a screenshot to the description. (It also helps reviewers to confirm what they expect to see!)

Finally, please do add testing instructions so that if one of our colleagues picks this up on Monday, they're actually able to make headway. 😁

[daledupreez]

We can drop the trailing comment here.

[daledupreez]

Sorry about the wrong function name! 😳 You worked it out despite my poor directions!

[daledupreez]

I think we should not specify actionTarget at all -- I think we should be loading this in the same window/tab, not a new one. (actionTarget="_blank" would launch the link in a new tab/window, just to be clear.)

[divyamrastogi]

Yeah, I guess we don't need it to open in a new window.

[divyamrastogi]

One more query @daledupreez , is it expected that the "Hide this" option in the Task won't work right now? Do we need some more integration to enable this?

[daledupreez]

I think it depends on how you're mocking/injecting the card. I am not sure if you're doing that the same way I was or not.

The standard logic here requests the next card from the server, which should now flag the Titan card as hidden. Without that piece, we're unlikely to see the next card. You should be able to verify that we make the API call to hide the card with the appropriate time window.

[daledupreez]

Thanks again for the quick fixes!

I've pinged our marketing teams RE the copy, and it sounds like there are some changes they want us to make. I'll hold off on approving this until we get those changes into place, at which point we can add detailed testing instructions and a screenshot.

[daledupreez]

I've just re-tested and everything looks good to me!

The only cleanup item left before we can deploy this is to remove the image we're not using any more.

[daledupreez]

Can we remove this file? Seeing as we've switched to an existing image, I don't think we need this one!

[daledupreez]

LGTM! 🚀 I'll kick off the tests and get the deploy process moving!

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/5925891

Thank you @divyamrastogi for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.