Fix ECE button displayed on synced subscription variations

[Mayisha]

Fixes #3607

Changes proposed in this Pull Request:

ECE buttons should be hidden if the subscription is synchronized. In variable subscriptions with synced and non-synced variations, ECE button still appears when switched to a synced variation. This PR fixes the issue by checking if getSelectedProductData response has an error.

Testing instructions

• Create a variable subscription product with 2 variations (Blue and Red) and a sign up free.
• Make the Blue variation synchronized (i.e on 10th day).
• Enable the ECE feature flag.
• As a shopper go to the product page.
• Notice that, in develop branch the ECE button is displayed for both variations.
• Confirm that in this branch the ECE button is displayed only for the unsynced variation (Red).

[annemirasol]

@Mayisha TIL synced subscriptions! 🙌

1. During testing, I found a flow that still displayed the ECE buttons even when synced variation is selected:

   1. Go to product page.
   2. Select Blue (synced).
   3. Notice ECE buttons disappear.
   4. Click "Sign up now" button.
   5. Notice page is reloaded, Blue is selected, and ECE buttons are visible.

2. Also, I don't quite get the reason -- why are we hiding ECE for synced subs? If "Due Today" is not 0.00 and if we allow payment via other payment methods, shouldn't we also allow payment via ECE?

[Mayisha]

Thanks @annemirasol for the feedback.

During testing, I found a flow that still displayed the ECE buttons even when synced variation is selected:

Good finding 👍 I totally missed this issue. I have fixed it in e680de2. The validVariationSelected is used in PRB also to check if the selected product is supported for PRB payments. We had this attribute set for ECE also in the backend but missed checking it on the frontend.

Also, I don't quite get the reason -- why are we hiding ECE for synced subs? If "Due Today" is not 0.00 and if we allow payment via other payment methods, shouldn't we also allow payment via ECE?

We are hiding ECE for synced subs only on the product page. According to the is_invalid_subscription_product function, for synced subs

this limitation only applies to the product page as we cannot calculate totals correctly

According to the function if you select Never (charge the full recurring amount at sign-up) in the subscription settings ( WooCommerce > Settings > Subscriptions), the ECE button should be present.

[annemirasol]

We are hiding ECE for synced subs only on the product page. According to the is_invalid_subscription_product function, for synced subs

this limitation only applies to the product page as we cannot calculate totals correctly

@Mayisha I don't see the ECE buttons in the cart and checkout pages, when a synced sub is in the cart. Is this expected?

(I can see them with the non-synced sub.)

According to the function if you select Never (charge the full recurring amount at sign-up) in the subscription settings ( WooCommerce > Settings > Subscriptions), the ECE button should be present.

Verified 👍 I see them if we're charging full amount.

[Mayisha]

@Mayisha I don't see the ECE buttons in the cart and checkout pages, when a synced sub is in the cart. Is this expected?

Upon checking the is_invalid_subscription_product function again, this seems expected as per this comment and this condition.

this limitation only applies to the product page as we cannot calculate totals correctly

This statement is actually for the virtual synced subscription only as per this comment and this condition.
Apologies for the confusion.

Note: I have referenced the lines from the function in the payment request class where the function was originally added.

[annemirasol]

This statement is actually for the virtual synced subscription only as per this comment and this condition.

I see, thanks for clarifying that!

Flow:

1. Go to product page.
2. Select Blue, ECE gets hidden.
3. Select Red, ECE remains hidden.

Maybe a wcStripeECE.show(); needs to be in the else clause of if (response.error)?