Collecting customer data

In the context of a custom checkout experience, collecting and handling customer information is a critical aspect. In this guide, we will be using the Afosto Storefront JavaScript client to gather and process data such as customer contact information, shipping and billing details.

Contact

The first step involves defining the necessary information about the customer. The required fields include email, givenName, familyName, and isGuest, with additionalName being optional.

```js
const contactData = {
  email: 'customer@afosto.com',
  isGuest: true,
  givenName: 'John',
  additionalName: 'Michael',
  familyName: 'Appleseed',
};

If you're dealing with an existing customer, you can use their ID instead of the contact object.

## Organisation

For business orders, an organisation entity may also be added to the customer. This requires the name, isGuest and administration.email fields, with ccNumber and registration fields being optional.

const organisationData = {
  name: 'Afosto',
  isGuest: true,
  administration: {
    email: 'organisation@afosto.com',
  },
  ccNumber: '123456789',
  registration: {
    countryCode: 'NL',
    number: 'NL123B456789',
  }
};

## Phone number

Next, we can add a phone number to the customer and the cart.

const phoneNumberData = {
  countryCode: 'NL',
  number: '0507119519',
};

## Shipping address

The final piece of data to be collected is the shipping and billing address. Both addresses share the same format and include the required fields: countryCode, locality, postalCode, addressLine1, thoroughfare, and premiseNumber. 

const shippingAddressData = {
  countryCode: 'NL',
  locality: 'Groningen',
  administrativeArea: 'Groningen',
  postalCode: '9723JA',
  addressLine1: 'Kieler Bocht 15C',
  addressLine2: null,
  premiseNumber: '15',
  premiseNumberSuffix: 'C',
  thoroughfare: 'Kieler bocht',
  givenName: 'John',
  additionalName: 'Michael',
  familyName: 'Appleseed',
  organisation: 'Afosto',
};

## Billing address

You can reuse the same object for the billing address or define a different address.

const billingAddressData = {
  ...shippingAddressData,
  // or define a different address with the same fields
};

## Add information to cart

With this data stored, it's time to create a GraphQL mutation to add the information to the cart. This mutation combines multiple operations such as creating a customer, adding a phone number, and assigning shipping and billing addresses. Although these mutations are combined in this example, they can be used separately.

The example below illustrates how to merge the collected data into a single mutation.

import StorefrontClient, { gql, CoreCartFragment } from '@afosto/storefront';

const client = StorefrontClient({
  storefrontToken: 'STOREFRONT_TOKEN',
});

// get the cart id from the search params
const params = new URL(document.location).searchParams;
const cartId = params.get('cart_id');

const contactData = {
  // contact data
};
const organisationData = {
  // organisation data
};
const phoneNumberData = {
  // phone number data
};
const shippingAddressData = {
  // shipping address data
};
const billingAddressData = {
  // billing address data
}

// Combine the addresses into an object for easy reuse
const addressingData = {
  billing: billingAddressData,
  shipping: shippingAddressData,
};

// merge data

 into the contact and organisation and combine
// contact and organisation into a customer object.
const customerData = {
  contact: {
    ...contactData,
    phoneNumber: phoneNumberData,
  },
  organisation: {
    ...organisationData,
    phoneNumber: phoneNumberData,
  },
};

const variables = {
  customerInput: { cartId, customer: customerData },
  phoneNumberInput: { cartId, phoneNumber: phoneNumberData },
  shippingAddressInput: { address: shippingAddressData, cartId, type: 'ADDRESS' },
  billingAddressInput: { address: billingAddressData, cartId },
  // optional fields to use for fetching pickup points in the return data
  countryCode: billingAddressData?.countryCode,
  postalCode: billingAddressData?.postalCode,
};

const query = gql`
  mutation AddInformationToCart(
    $customer_input: AddCustomerToCartInput!
    $phone_number_input: AddPhoneNumberToCartInput!
    $shipping_address_input: AddShippingAddressToCartInput!
    $billing_address_input: AddBillingAddressToCartInput!
    $country_code: String!
    $postal_code: String!
  ) {
    addCustomerToCart(input: $customer_input) {
      cart {
        id
      }
    }
    addPhoneNumberToCart(input: $phone_number_input) {
      cart {
        id
      }
    }
    addShippingAddressToCart(input: $shipping_address_input) {
      cart {
        id
      }
    }
    addBillingAddressToCart(input: $billing_address_input) {
      cart {
        options {
          shipping {
            methods {
              id
              name
              description
              instruction
              carrier
              is_pickup_point
              pickup_points(country_code: $country_code, postal_code: $postal_code) {
                id
                name
                carrier
                distance
                address {
                  country_code
                  administrative_area
                  locality
                  postal_code
                  address_line_1
                  thoroughfare
                  premise_number
                  premise_number_suffix
                }
              }
              pricing {
                fixed
                percentage
              }
            }
          }
        }
        shipping {
          method {
            id
          }
        }
        ...CoreProjectionFields
      }
    }
  }
`;

const response = await client.query(query, variables);

And there you have it. With the Afosto Storefront JavaScript client, collecting and managing customer information becomes a simple and streamlined process.