Update client UI to use GraphQL for payment methods

[aldeed]

Work

Update client UI to use GraphQL for payment methods

• In operator UI, use paymentMethods query to get the full list of payment methods and show them along with enable/disable toggle on the operator Payment page
• For determining which credit card forms to show in checkout, use availablePaymentMethods query to get the full list of available payment methods for a shop.
• In operator UI, use enabledPaymentMethodForShop mutation when the toggle for a payment method is changed.

[aldeed]

Here are the places in the UI code that need updating:

/imports/plugins/core/payments/client/checkout/payment/methods.js Update enabledPayments function to use the availablePaymentMethods query. This will likely require using some reactive state since it's an async request. Might need to transform the response data a bit before returning it from that function.

/imports/plugins/core/payments/client/settings/settings.js

• Update paymentMethodOptions to use paymentMethods query. This will likely require using some reactive state since it's an async request. Might need to transform the response data a bit before returning it from that function.
• Update the "change input[name=enabled]" handler to call the enabledPaymentMethodForShop mutation instead of both Meteor.call that are currently there.

For all of this, you'll need to use the simpleClient because it's Blaze code. To do this:

• Add the client mutation and queries in the folders in /imports/plugins/core/graphql/lib and then import all three into /imports/plugins/core/graphql/lib/helpers/simpleClient.js, following the pattern there to add them to mutations or queries object.
• Then import simpleGraphQLClient from there and call simpleGraphQLClient.mutations.enabledPaymentMethodForShop(...).then(...) for example. You can see this used in /imports/plugins/included/payments-example/client/checkout/containers/ExampleIOUPaymentForm.js and a few other places

[aldeed]

For the queries, when you need to reactively set the lists after getting them from the server, you can use the pattern found in /imports/plugins/included/payments-stripe/client/checkout/stripe.js for example.

In onCreated:

this.state = new ReactiveDict();

After the query results come:

this.state.set("paymentMethods", paymentMethods);

In the template helpers:

const paymentMethods = Template.instance().state.get("paymentMethods");