Highlight overdue/late payments in admin subscriptions list

[haszari]

Fixes #260

Description

Occasionally subscriptions can show as Active status when payment is overdue, in particular with offsite billing (e.g. WCPay Subscriptions using Stripe Billing).

The goal of this PR is to highlight active subscriptions that may have overdue or missed payment issues.

The existing i info button / tooltip component now shows red if payment is overdue. The tooltip message reads: Subscription payment overdue.

This could help merchants take action, e.g. recover payment or suspend.

Note this is a low-risk tweak to help mitigate this situation with minimal change to the existing UI. This issue is relatively rare in WCPay Subscriptions (estimated affecting 1-5% of merchants), so it's not worth making any more extensive changes right now.

Other options were considered, and could be improvements in future:

• Use a more modern icon (e.g. Gutenberg component).
• Add a new column for complex gateway-related info. Currently we're using a tooltip for two things (see below). This kind of info may be useful elsewhere in UI and/or for filtering.
  1. Indicate renewals are processed offsite – e.g. PayPal or WCPay Subscriptions.
  2. Indicate payment may be overdue (as of this PR).
• Use a new, specific status when subscriptions are overdue for payment.

Above screenshot shows both info (1 offsite renewal) and (2 overdue payment). Red icon is only used for overdue, and overdue payment message is displayed first and in bold, to disambiguate & highlight most important issue. When payment is overdue, the renewal mechanism (offsite vs tokenised onsite) is important info, so deliberately including that in tooltip when applicable.

How to test this PR

1. Ensure you have some subscription products. Can use WC Subscriptions or WCPay Subscriptions. Tip: use daily subscription term so you have more renewal events to test with over time :)
2. Purchase a subscription or set up a subscription.
3. Prevent payment on renewal, or simulate this, for example:
   • Manual subscription - no auto renewal, will go overdue on renewal date.
   • Hack subscription next payment date in the past - set _schedule_next_payment post meta (aka subscription meta).
4. Go to wp-admin > Dashboard > Subscriptions. Any overdue subscriptions should show red icon.

Product impact

• [x] Added changelog entry (or does not apply)
• [x] Will this PR affect WooCommerce Subscriptions? yes/no/tbc, add issue ref
• [x] Will this PR affect WooCommerce Payments? yes/no/tbc, add issue ref
• n/a Added deprecated functions, hooks or classes to the spreadsheet

[haszari]

Hitting pause on this PR. I'm switching approach, focus on adding logging and/or order notes for suspend / pause collection requests in WCPay client, to help diagnose the root cause affecting these stores.

[haszari]

Hitting pause on this PR. I'm switching approach, focus on adding logging and/or order notes for suspend / pause collection requests in WCPay client, to help diagnose the root cause affecting these stores.

Unblocked, will implement subtle red icon design: https://github.com/Automattic/woocommerce-subscriptions-core/issues/260#issuecomment-1387697410

[haszari]

Currently looks like this, using existing icon:

At a minimum I'm thinking we need to only show a single combined icon + tooltip in each row - tbc. Updated

Would be good to use a modern icon from wp components / gutenberg, will investigate options. However the existing icon + tooltip UX is most consistent so may move forward with that.

[haszari]

Requesting review from Helix and also @james-allan second opinion since he's up to speed on the wider context here.

[haszari]

Thanks for the instructive feedback @james-allan - ready for another review/test, if all good feel free to merge if I'm not around.

[james-allan]

Changes look good to me and test well. In line with your comment above, I'll go ahead and merge this. 😄