Address validation GraphQL

[aldeed]

Resolves #issueNumber
Impact: breaking
Type: feature

Changes

• New "addressValidation" GraphQL query to replace address validation Meteor method
• New API for registering address validation services from plugins
• New example address validation plugin

Breaking changes

Breaking changes to how address validation works. Affects all plugins that provide address validation and all clients that validate addresses.

Testing

Example plugin and GQL query

1. Spin up Reaction, log in as an admin, open the Shop panel and select the "Address Validation" section.
2. Select "Test Validation" from the select and add the service.
   • You can select a country from the list or leave blank.
3. The Test Validation service should now be available via the GQL query addressValidation.
4. Test the query using GraphiQL, use different postal codes to get different data back (e.g., "10234" = invalid w/ 1 error and 1 suggestion, "34234" = invalid w/ 5 errors & 3 suggestions, "90210" = valid w/ 0 errors & 0 suggestions).
5. Test the query using an address with a non-supported country code to see empty results returned.

QUERY:

query validateAddress($address: AddressInput!, $shopId: ID!) {
  addressValidation(address: $address, shopId: $shopId) {
    suggestedAddresses{
      address1
      address2
      city
      postal
      country
      region
    }
    validationErrors {
      type
      source
      summary
      details
    }
  }
}

Registering a custom validation plugin

1. Create a directory in /imports/plugins/custom/ for a test validation plugin.
2. Create register.js and addressValidation.js files, restart reactions and log in as an admin.
3. Your newly created validation plugin should be available in the "Address Validation" Shop panel.

TEST FILES:

// addressValidation.js
export default function addressValidation({ address }) {
  return {
    suggestedAddresses: [],
    validationErrors: []
  };
}

// register.js
import Reaction from "/imports/plugins/core/core/server/Reaction";
import addressValidation from "./addressValidation.js";

Reaction.registerPackage({
  label: "PR Validation Test",
  name: "pr-validation-test",
  autoEnable: true,
  addressValidationServices: [
    {
      displayName: "PR Test",
      functions: {
        addressValidation
      },
      name: "pr",
      supportedCountryCodes: ["US", "IN"]
    }
  ]
});

Review the docs

1. I've added some quick documentation around using the test validation plugin as a mock for building UI as well as some thoughts on how a 3rd party service might be used within a custom validaiton plugin.

[aldeed]

I reviewed but cannot approve since I created it. 👍