Fix styling of upsell banner in sidebar

[oswian]

Fixes https://github.com/Automattic/martech/issues/2745

Initial discussion in Slack: p1708512826252879-slack-C0BNMNMNG

Proposed Changes

Styling fix for the upsell banner:

• The 'x' button is now visible
• The text now wraps onto next line without a large gap after 'sale'

Before	After

Testing Instructions

Note: this is the first time I've used my backend sandbox for testing a Calypso change. When providing testing instructions in this scenario:

• Do we usually provide a link to the backend diff (like I've done below) for the reviewer to run on their sandbox? Or do we have a way to test against someone else's sandbox with our local Calypso?
• Is there a way to use a particular backend/sandbox with the 'Calypso Live' link that's generated for the PR?

Any suggestions/guidance, greatly appreciated 🙏

---

In order to display this particular upsell banner in Calypso, the easiest approach I found was to hardcode a change on my sandbox to return the required banner config. Here is the backend diff I used on my sandbox: D139438-code.

Once you have your local Calypso pointing at your updated sandbox:

1. Create or use a simple site (I don't believe the sandbox works with atomic sites?)
2. Visit /plans/:site and check that you can see the upsell banner in the sidebar
3. Check that the 'x' button is visible and the text wraps as per the above screenshot

Pre-merge Checklist

• [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
• [ ] https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
• [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• [ ] Have you checked for TypeScript, React or other console errors?
• [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-99052

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-99052&env=jetpack

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/styling-of-upsell-banner-with-dismiss-button on your sandbox.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[southp]

Great questions :)

Do we usually provide a link to the backend diff (like I've done below) for the reviewer to run on their sandbox? Or do we have a way to test against someone else's sandbox with our local Calypso?

Yes, if there has to be an accompanied diff, this is the way to go. We can test it against someone else's sandbox for sure by pointing the needed domains to the IP of their sandbox, but I wouldn't recommend that since it will require the owner to maintain a live SSH connection. Also, thanks for investing extra effort into streamling the testing experience :)

Is there a way to use a particular backend/sandbox with the 'Calypso Live' link that's generated for the PR?

No, there is no existing way to configuer a Calypso Live instance to a certain sandbox, so we will still have to play with our hosting files in this case.

[southp]

It works for me functionally, but somehow the dismiss button is misaligned for me. It's not the case in the screenshot though. @oswian could you help me double check? Once we sort this out, it will be good to go :)

[oswian]

Thanks for the review @southp.

It works for me functionally, but somehow the dismiss button is misaligned for me. It's not the case in the screenshot though.

Great catch. Forgot to push that change 🤦. Updated: f6a4c03bd818f0fc32f27dc1f6bd2aca68c3059a

[oswian]

🤔 Hmm, seeing a build error on the step: Build Calypso Apps (WPCom Plugins)

The build log doesn't suggest the changes here are the cause.

I'll rebase and see if that does the trick.

[oswian]

I'll rebase and see if that does the trick.

Rebase did not resolve the build error. This makes sense - I see there is a build error on trunk.

@southp I've reached out in Slack (p1708993540108429-slack-C02DQP0FP) to the PR author. Is there any other process I should follow in this scenario?

[oswian]

That should be all that's needed. Since it's unrelated to this PR and isn't blocking, please feel free to deploy it.

Ok will do 👍