Automattic / Automattic/wp-calypso
Auditing: storage add-on UI issues
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 2k
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 552
Description
### 1. The same add-on cannot be repurchased from `/add-ons` after cancelling.
https://github.com/Automattic/wp-calypso/assets/1842898/0751018a-5f87-4dd2-bd20-906e341ee2f0
1. Purchase a storage add-on from /add-ons
2. Cancel it from the purchase management page
3. Go to /add-ons again. The button will stay as "Manage add-on", while it should be "Buy add-on".
From a quick glance, using transaction history to determine whether one has owned an active storage add-on is wrong. This issue will also cause other anomalies in /plans, but I didn't include them here since the root cause is the same. This might potentially relate to Automattic/martech#2418.
### 2. A user can't buy the 50G add-on and then buy the 100G add-on

As shown here, my test Business site owning a 50G add-on can't buy the 100G add-on since it's absent. In /plans, it's even more confusing since I can select it but it will show me "Contact Support"

It should be available since the maximum storage is 200G. From a quick glance of the code, the way `exceedsSiteStorageLimits` computed is wrong.
### 3. The confusing "Contact Support" button when owning a storage add-on.
When owning a storage add-on, picking a lower-tier storage in /plans will show "Contact support":

it also applies to a higher-tier plan:

This relates to Automattic/martech#1458. However, even with the Downgrade button, it won't be less confusing. My recommendation is to simply hide the lower-tier storage options in `/plans`, which is not the best place to downgrade anyway.
### 4. Inconsistent price combining of the spotlight plan card
https://github.com/Automattic/wp-calypso/assets/1842898/7519a65b-c25d-4105-992d-9fc67760bbee
As demonstrated above, when we first select a storage add-on before owning one, it shows the combined price in the spotlight plan card. After that, it turns into just the plan price with some flickering between texts.
I'm not sure what's the best behavior here. It's confusing to me to show the combined price, since there is a "+X / month" under the dropdown. I'd prefer us to show them separately, sort of like the final state in the screencast. However, that doesn't align with how the other places in /plans work.
@vinimotaa Could you share your insights here? I'd be grateful.
### 5. Runtime error by typing certain keystrokes
See https://github.com/Automattic/wp-calypso/issues/82546
### 6. The drop-down state is shared between sites.
https://github.com/Automattic/wp-calypso/assets/1842898/29078107-dd09-486e-8cca-d9a5bb8537b5
As demonstrated above, the drop-down state stays after changing sites. This _might_ be fine, but I'm still documenting it here in case it actually causes other issues.
Contributor guide
Research direction
Start by reproducing the reported states in /add-ons and /plans, using the purchase, cancellation, site-switching, and storage-tier steps in the issue. Review the code paths involving exceedsSiteStorageLimits and the referenced runtime-error issue 82546. Done means the confirmed storage add-on states and pricing behavior are consistent, with any unresolved behavior explicitly scoped.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, payments
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100