Fix: Downgrade button should open support

[ddc22]

Fixes: Automattic/martech#1458

1. Higher Tier Plans:
   • When a user is on a higher-tier plan, lower-tier plans should display a "Contact Support" button.
   • Clicking this button opens the support discussion chat.
   • The decision to use "Contact Support" instead of "Downgrade" was made for consistency and clarity.

Why are these changes being made?

• Post purchase plan buttons were not showing properly.

Testing Instructions

• Purchase a higher tier plan
• Go to /plans page
• Make sure the downgrade button works
• Also go through other flows (onboarding,launch site) flows to make sure the button does not.

Higher Tier Plan purchase

1.	Purchase a higher-tier plan.
2.	Go to the /plans page.
3.	Ensure the “Contact Support” button appears for lower-tier plans.
4.	Click the “Contact Support” button and confirm it opens the support discussion chat.

Onboarding Flow

1.	Go through the `/start` onboarding flow
2.      Reach the plans step
3.      Buttons should not be changed from production
4.      Try scrolling and also check the comparison grid buttons

Launch Site Flow

1.	Create a brand new site on a free plan, free domain
2.     Then try launching the site 
3.     Reach the plans step
4.	Make sure the buttons match production

Free Plan Check

1.	Create a brand new site on a free plan, free domain
2.     Then try launching the site 
3.     Reach the plans step
4.	Make sure the buttons match production

Pre-merge Checklist

• [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
• [ ] Have you written new tests 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-113638

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-113638&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~143 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
jetpack-app                +262 B  (+0.1%)     +143 B  (+0.1%)
update-design-flow         +122 B  (+0.0%)     +104 B  (+0.0%)
plugins                    +122 B  (+0.0%)     +104 B  (+0.0%)
plans                      +122 B  (+0.0%)     +104 B  (+0.0%)
link-in-bio-tld-flow       +122 B  (+0.0%)     +104 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~104 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected       +122 B  (+0.0%)     +104 B  (+0.1%)
async-load-signup-steps-plans                         +122 B  (+0.0%)     +104 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[ddc22]

Thanks @oswian I changed the color as adviced in the ticket 👍 I opted to change Downgrade to Contact Support because clicking on contact supports open an AI assistance which might confuse some people if we just mention Downgrade without any context.

Also @oswian were you able to test other flows? (I forgot to mention in the test plan) this change can easily effect a few other flow buttons 😬 ... Let me know if you can go through a few yourself (I've done a few already)

[oswian]

I changed the color as adviced in the ticket

Hmm, I'm still seeing the filled buttons. Perhaps the change hasn't been pushed, as I don't see any new commits?

I opted to change Downgrade to Contact Support because clicking on contact supports open an AI assistance which might confuse some people if we just mention Downgrade without any context.

Ah, let me clarify. What I was referring to was that on production, there's a difference between the labelling between the 'Free' plan and these others:

With this PR, they are all now 'Contact Support'. The consistent labelling makes sense to me, but I wanted to draw attention to it as it wasn't mentioned in the description. Maybe the difference in labelling on production is a bug?

Also @oswian were you able to test other flows? (I forgot to mention in the test plan) this change can easily effect a few other flow buttons 😬 ... Let me know if you can go through a few yourself (I've done a few already)

Sure, happy to test additional flows. The testing instructions are a bit fuzzy, though, which makes me a little worried that we don't have a high degree of confidence around how/where this change might introduce issues. Do you think you could add more detail? More detail = more confidence I can provide with testing.

Eg.

make sure the button does not change anything

Could you clarify 'does not change anything'? Screenshots highlighting the effected buttons would be really helpful.

[southp]

Thanks for getting it up and running so quickly, @ddc22 :) Seeing it in action, I believe our original solution to address the issue no longer work.

There are two main concerns in this downgrading CTA:

1. It's unclear like @simison documented here: https://github.com/Automattic/wp-calypso/issues/79285
2. It's not actionable, that's why we want it to lead to the immediate action instead of letting users explore themselves.

Here is a screencast of myself trying to use this functionality to downgrade:

https://github.com/Automattic/wp-calypso/assets/1842898/cbbec5ee-2977-413d-ba12-4fdaa13690d0

1. It's still unclear. I still don't understand why the CTAs are "Contact support". There used to be a tooltip explaining, so it might help to bring it back. However, even with it, I still don't think the users can understand easily.
2. It's worse than non-actionable since the Wappu AI has put me into the worst kind of no-way-out support maze.

I think we need to step back and come up with something else. @vinimotaa could you help us share your insights here? I'd be grateful.

[ddc22]

@southp Yes the only way I could downgrade was to talk to wapu and then thumbs down wapu feedback. Then I was shown the actual support dialog.

I opted to ship this thinking this was better than the status quo but you are right that it might lead to more confusion.

[southp]

Thanks for being open about it 🙇🏼 I'm moving this to Blocked column for now until we've got a better solution. Given the support pipeline is different now, we might also need to consult from the HE side.

[ddc22]

Hey @southp @oswian with https://github.com/Automattic/wp-calypso/pull/91925/commits/c16b67696b89406501d5b8c27f2acb04e7b5beec, this should be resolved. Can you have another look?

Also note that I split the change to Contact owner to a different PR https://github.com/Automattic/wp-calypso/pull/92015

[southp]

Oh yeah, it's much better now. Thanks for finding the way to really contact HEs:

https://github.com/Automattic/wp-calypso/assets/1842898/031d0734-746d-4209-a604-970378de7c00

However, I'm still feeling the line-up of "Contact support" buttons is quite confusing. Adding a tooltip may help, but it won't help on mobile. I know I tend to be the one who advocates for launching first & learning fast, but let's hold on and wait for @vinimotaa 's insight a bit longer this time :)

[vinimotaa]

Hi folks, I had a crack on this today, and here are my thoughts.

Button Text and Placement:

• I suggest changing the buttons under low-tier plans to say "Downgrade" instead of "Contact Support." This aligns with the user's mental model of upgrading or downgrading plans.
• Open question; Do we really need to show "Free plan" for paid users? I'd maintain the visibility of the "Free" plan only for users on the Free plan or those whose plans have expired. This avoids confusion for users on paid plans.

Button Styling:

• Style the "Downgrade" button as an outlined button with "Grey 60" font color to make it a visible but secondary call-to-action (CTA). This helps distinguish it from primary CTAs like "Upgrade" or "Get Business."

Triggering the AI Assistant (Wapuu):

• When a user clicks the "Downgrade" button, trigger the Wapuu AI assistant with a pre-loaded message specific to the plan they are downgrading from. The message should include the consequences of downgrading, tailored to each plan, followed by a generic message encouraging users to contact support if they are ready to proceed.

Example Message for Wapuu AI Assistant

Creator Plan Downgrade Example: "Hello, I am Wapuu, WordPress.com’s AI assistant!

I understand you want to downgrade your plan. To downgrade your site's plan from the Creator plan, please be aware of the following consequences:

• You will lose access to plugins, third-party themes, and other advanced features available on the Creator plan.
• Any plugins or third-party themes installed will be removed, and your site will revert to how it looked before activating the Creator plan's features.
• Your site will be set to private so you can review it before making it public on the new plan.
• Pages, posts, and media files will be preserved, but any content built with plugins will be lost.

If you are ready to proceed with the downgrade, please get in touch with our support team.

Contact WordPress.com Support (CTA button)"

[southp]

Thanks for the design, @vinimotaa . It looks like a much polished experience and we will evaluate it from here :)

Open question; Do we really need to show "Free plan" for paid users? I'd maintain the visibility of the "Free" plan only for users on the Free plan or those whose plans have expired. This avoids confusion for users on paid plans.

Good question. @aneeshd16 actually proposed a general version of it here: pau2Xa-63h-p2. I think this is an idea worth testing outside of this PR :) The only concern I have is regarding that we are using "everything in ..., includes:" copy to convey the idea that a higher-tier plan includes all the features of the lower-tier ones. By not showing the lower-tier plans, I'm wondering if we'd also obscure too much of the feature list from the users –– it might actually be a good thing though, and that's why I think we need to test it :)

[aneeshd16]

Thanks @vinimotaa!

There is one more case that is fixed via this PR: https://github.com/Automattic/wp-calypso/pull/92015

Essentially, the "Contact Owner" button also follows the disabled button pattern. I shared some thoughts here: https://github.com/Automattic/wp-calypso/pull/92015#issuecomment-2194605181

It would be great if you have any suggestions on how to handle this!

[aneeshd16]

Triggering the AI Assistant (Wapuu):

When a user clicks the "Downgrade" button, trigger the Wapuu AI assistant with a pre-loaded message specific to the plan they are downgrading from. The message should include the consequences of downgrading, tailored to each plan, followed by a generic message encouraging users to contact support if they are ready to proceed.

Hi @Automattic/vertex! I was wondering if you could provide some guidance on how to achieve this in the help centre.

[alshakero]

Hi Aneesh! You already did the heavy lifting of opening the Help Center. What I would do is the following:

1. I would add another state item here that's called odieIinitalmessage. Then add an action creator that changes it and a selector that grabs it.
2. Then I would grab its value here and pass it to Odie here.
3. Then you can make a map of plan => message in your code and call setIOdieInitialMessage action creator that you created in step 1 with the matching messaging.

Please ping me to review.

[aneeshd16]

Thanks @alshakero! The steps you mentioned result in a pre-filled message that the user can send.

However, for this use case, we need Wapuu to send a pre-determined response to the user with a "Contact Support" CTA below it, like in this screenshot:

TBH, I don't know if this is possible since Wapuu's responses are AI-generated.

[alshakero]

@aneeshd16 Oh sorry I misunderstood. That's totally possible.

1. Hardcode the message you want here under another slug.
2. Replace the action creator I recommended above with odieBotNameSlug so you're able to set the slug with your value.
3. Pass the store value here.
4. Add another helper here called getOdieInitialPromptContext than returns { flags: forward_to_human_support: true } if the slug matches the one you added.
5. Call the new helper here to set the default context value. Make sure your new help returns undefined if the slug doesn't match.

[chriskmnds]

@aneeshd16 Oh sorry I misunderstood. That's totally possible.

1. Hardcode the message you want here under another slug.
2. Replace the action creator I recommended above with odieBotNameSlug so you're able to set the slug with your value.
3. Pass the store value here.
4. Add another helper here called getOdieInitialPromptContext than returns { flags: forward_to_human_support: true } if the slug matches the one you added.
5. Call the new helper here to set the default context value. Make sure your new help returns undefined if the slug doesn't match.

Wouldn't it be easier if we could pass initialPromptText into OdieAssistantProvider from here. Then pass that value through from the plans page (or do the whole "push to onboarding store then grab from help-center" cycle, which feels a bit unnecessary). It looks like the alternative is to either query the store from odie-client or hardcode a plan-to-string index there - both sound bit off, that odie-client package needs to know about any of that 🤔

It's a random abstract thought - please feel free to ignore. I haven't looked deeper :-)

[alshakero]

The plans page doesn't have access to Odie client, nor the Help Center for that matter. The Help Center is like the notifications' widget, it's always there, and you're just requesting it to do the things you want.

You can render your own instance and pass these values, but then you'd have to manage a ton of state. My suggestion consumes, and slightly extends, the Help Center API.

[chriskmnds]

The plans page doesn't have access to Odie client, nor the Help Center for that matter. The Help Center is like the notifications' widget, it's always there, and you're just requesting it to do the things you want.

You can render your own instance and pass these values, but then you'd have to manage a ton of state. My suggestion consumes, and slightly extends, the Help Center API.

I think my suggestion merely extends from yours. Where you mentioned:

Pass the store value here.

I suggested passing the initial prompt text in the same way. That way odie-client doesn't query some onboarding (or other) store for that plan-specific prompt, or in general know/host more than it needs

[aneeshd16]

Downgrade flows can be handled in few different ways, so I have started the discussion here: pau2Xa-699-p2

[matticbot]

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

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

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/downgrade-button on your sandbox.

[a8ci18n]

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

[aneeshd16]

Thanks for the review @southp!

However, I feel this is a special case that I'm fine with us shipping without waiting on translation.

I agree, especially since this PR blocks further work (https://github.com/Automattic/wp-calypso/pull/92015). I am shipping it now. 🙂

[a8ci18n]

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

[a8ci18n]

Translation for this Pull Request has now been finished.