Collapsible payment section

[Sperling-0]

• Make PaymentSection collapsible

  • Add initial state to PaymentSection
  • Display summary, summary with payment type and full form depending on existing payment information
  • Connect store to PaymentSection

• Hide individual parts in Payment Components

  • Add property to Payment Component that displays the parts that should be shown, by default we show all parts
  • Show only payment type in PaymentSection with display state 'showSummaryAndPaymentType'

Ticket: https://phabricator.wikimedia.org/T368526

[Abban]

Hopefully this helps you get unblocked

[moiikana]

Tip

you could rebase this with git rebase --onto combine-donation-pages collapsible-payment-section^

[moiikana]

I don't remember whether we discussed something in the daily about that, but in the payment summary at the bottom there is still the "via"/"per" text showing up wrongly (when the payment type is not selected yet).

This is happening in the components in the summary_content/ folder.

Besides that this looks good to go

[gbirke]

I don't remember whether we discussed something in the daily about that, but in the payment summary at the bottom there is still the "via"/"per" text showing up wrongly (when the payment type is not selected yet).

This is happening in the components in the summary_content/ folder.

Besides that this looks good to go

We discussed it in the daily and since the incomplete payment info is only shown to people who a) come from a mailing and b) immediately scroll to the bottom without filling the form, we decided to spin off this improvement into a separate ticket, T376311, and deploy the new form as-is.

[Abban]

A handy way to avoid having to pass parameters to getWrapper is to set them manually in the test:

const wrapper = getWrapper();
await wrapper.setProps( { displaySections: [ 'amount', 'interval', 'paymentType' ] } );

[Abban]

👀