Update the auto-renew toggle to use a link on Purchase Details

[dzver]

This component is used in several places. All other places should remain intact.

The change will replace the Toggle component with an On/Off button in the middle of the Auto-renew ON copy.

Proposed Changes

• The Auto-renew toggle should be visible as a link on the purchase details page.
• There should be no link if the user doesn't own the upgrade
• Domain Management and Email Management that also use this toggle should be unaffected

This is how it works with the purchase owner: https://user-images.githubusercontent.com/82778/191526566-15ec4e91-48d5-4919-9acc-6a58fbd31202.mov

And this is how it looks with another admin account:

Testing Instructions

• Buy a plan, domain, and email with the store sandbox
• Go to /me/purchases, then to a purchase detail of one of these upgrades (or any other)
• Try clicking on the new link and make sure the auto-renew goes on and off
• Go to Domain Management. Make sure the toggle is unchanged there
• Go to Email Management. Make sure the toggle is also unchanged
• Add another user to your test site. Make sure they see no clickable toggles anywhere

Pre-merge Checklist

• [ ] 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)?

Related to #

[github-actions[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~103 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
site-purchases       +212 B  (+0.0%)      +64 B  (+0.0%)
purchases            +212 B  (+0.0%)      +64 B  (+0.0%)
email                +178 B  (+0.0%)      +39 B  (+0.0%)
domains              +178 B  (+0.0%)      +48 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.

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.

[southp]

I've confirmed that it works as the test plan described. The code also looks good to me, but there is one accessibility issue: I can't focus on the new anchor-like button by tabbing, and the cursor doesn't change into a clickable pointer when hovering the mouse cursor onto it:

I suppose the both might be the same issue, so the above screencast only demonstrates the cursor part :)

[a8ci18n]

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

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

[DavidRothstein]

recent update to the PR

Which changed the modal title that is shown after clicking "ON" from "Before you go..." to "Turn off auto-renew" (for future reference).

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.