@huckleberry-inc/address 4.3.0

package/README.md

@@ -0,0 +1,151 @@
+# `@shopify/address`
+
+> [!CAUTION]
+>
+> `@shopify/address` is deprecated.
+>
+> Shopifolk, see
+> [Shopify/quilt-internal](https://github.com/shopify/quilt-internal) for
+> information on the latest packages available for use internally.
+
+[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
+[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Faddress.svg)](https://badge.fury.io/js/%40shopify%2Faddress)
+![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/%40shopify%2Faddress.svg)
+
+Address utilities for formatting addresses.
+
+## Installation
+
+```bash
+yarn add @shopify/address
+```
+
+## API Reference
+
+- `country` field in Address is expected to be of format ISO 3166-1 alpha-2, eg. CA / FR / JP
+
+### `AddressFormatter` class
+
+Show an address:
+
+```ts
+import AddressFormatter from '@shopify/address';
+
+const address = {
+  company: 'Shopify',
+  firstName: '恵子',
+  lastName: '田中',
+  address1: '八重洲1-5-3',
+  address2: '',
+  city: '目黒区',
+  province: 'JP-13',
+  zip: '100-8994',
+  country: 'JP',
+  phone: '',
+};
+
+const addressFormatter = new AddressFormatter('ja');
+await addressFormatter.format(address);
+/* =>
+  日本
+  〒100-8994東京都目黒区八重洲1-5-3
+  Shopify
+  田中恵子様
+ */
+
+await addressFormatter.getOrderedFields('CA');
+/* =>
+  [
+    ['firstName', 'lastName'],
+    ['company'],
+    ['address1'],
+    ['address2'],
+    ['city'],
+    ['country', 'province', 'zip'],
+    ['phone']
+  ]
+ */
+```
+
+#### `constructor(private locale: string)`
+
+Instantiate the AddressFormatter by passing it a locale.
+
+#### `updateLocale(locale: string)`
+
+Update the current locale of the formatter. Following requests will be in the given locale.
+
+#### `async .getCountry(countryCode: string): Promise<Country>`
+
+Loads and returns data about a given country in the current locale. Country and province names are localized. Province names are sorted based on the locale.
+
+#### `async .getCountries(): Promise<Country[]>`
+
+Loads and returns data for all countries in the current locale. Countries are sorted based on the locale. Zones are also ordered based on the locale.
+
+#### `async .getZoneName(countryCode: string, zoneCode: string): Promise<string>`
+
+This returns the names of the provinces or regions for the specified country, displayed in the language that is currently set.
+
+#### `async .getOrderedFields(countryCode): Promise<FieldName[][]>`
+
+Returns how to order address fields for a country code. Fetches the country if not already cached.
+
+#### `async .format(address: Address): Promise<string[]>`
+
+Given an address, returns the address ordered for multiline rendering. Uses the `formatAddress` sync API in the background.
+
+#### `AddressFormatter.resetCache(): void`
+
+Resets the internal cache. Useful to avoid side-effects in test suite.
+
+### Sync API
+
+If you already have the input data ready, like a `Country` object, you can use the sync API to get the result right away.
+
+The following functions can be imported as stand-alone utilities.
+
+#### `formatAddress(address: Address, country: Country): string[]`
+
+Given an address and a country, returns the address ordered for multiline rendering. e.g.:
+
+```typescript
+['Shopify', 'Lindenstraße 9-14', '10969 Berlin', 'Germany'];
+```
+
+#### `buildOrderedFields(country: Country): FieldName[][]`
+
+Returns how to order address fields for a specific country.
+
+Eg.:
+
+```typescript
+[
+  ['firstName', 'lastName'],
+  ['company'],
+  ['address1'],
+  ['address2'],
+  ['city'],
+  ['country', 'province', 'zip'],
+  ['phone'],
+];
+```
+
+## Testing
+
+If your component uses this package and you want to test it with mock API calls you can use the following:
+
+```ts
+import {fetch} from '@shopify/jest-dom-mocks';
+import {mockCountryRequests} from '@shopify/address/tests';
+import AddressFormatter from '@shopify/address';
+
+beforeEach(() => {
+  AddressFormatter.resetCache(); // to avoid side-effects.
+  mockCountryRequests();
+});
+afterEach(fetch.restore);
+```
+
+Note: Only FR / JA and EN are mocked.

package/build/cjs/AddressFormatter.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var format = require('./format.js');
+var loader = require('./loader.js');
+
+const ORDERED_COUNTRIES_CACHE = new Map();
+class AddressFormatter {
+  /**
+   * Useful in tests or any situation where the cache has undesirable
+   * side-effects.
+   */
+  static resetCache() {
+    ORDERED_COUNTRIES_CACHE.clear();
+  }
+  constructor(locale) {
+    this.locale = locale;
+    this.locale = locale;
+  }
+  updateLocale(locale) {
+    this.locale = locale;
+  }
+  async getCountry(countryCode, {
+    includeHiddenZones = false
+  } = {}) {
+    const country = this.loadCountryFromCache(countryCode, includeHiddenZones);
+    if (country) return country;
+    return loader.loadCountry(this.locale, countryCode, {
+      includeHiddenZones
+    });
+  }
+  async getCountries({
+    includeHiddenZones = false
+  } = {}) {
+    const cacheKey = this.cacheKey(this.locale, includeHiddenZones);
+    const cachedCountries = ORDERED_COUNTRIES_CACHE.get(cacheKey);
+    if (cachedCountries) return cachedCountries;
+    const countries = await loader.loadCountries(this.locale, {
+      includeHiddenZones
+    });
+    ORDERED_COUNTRIES_CACHE.set(cacheKey, countries);
+    return countries;
+  }
+  async getZoneName(countryCode, zoneCode) {
+    const country = await this.getCountry(countryCode);
+    const countryZone = country.zones.find(item => item.code === zoneCode);
+    if (!(countryZone !== null && countryZone !== void 0 && countryZone.name)) return undefined;
+    return countryZone.name;
+  }
+
+  /* Returns the address ordered in an array based based on the country code
+   * Eg.:
+   *   [
+   *     'Shopify',
+   *     'First Name Last Name',
+   *     'Address 1',
+   *     'address2',
+   *     'Montréal',
+   *     'Canada Quebec H2J 4B7',
+   *     '514 444 3333'
+   *   ]
+   */
+  async format(address) {
+    const country = await this.getCountry(address.country);
+    return format.formatAddress(address, country);
+  }
+
+  /* Returns an array that shows how to order fields based on the country code
+   * Eg.:
+   *   [
+   *     ['company'],
+   *     ['firstName', 'lastName'],
+   *     ['address1'],
+   *     ['address2'],
+   *     ['city'],
+   *     ['country', 'province', 'zip'],
+   *     ['phone']
+   *   ]
+   */
+  async getOrderedFields(countryCode) {
+    const country = await this.getCountry(countryCode);
+    return format.buildOrderedFields(country);
+  }
+  cacheKey(locale, includeHiddenZones) {
+    /* Cache list of countries per locale, both with and without hidden zones included */
+    return `${locale}-${includeHiddenZones}`;
+  }
+  loadCountryFromCache(countryCode, includeHiddenZones) {
+    const cachedCountries = ORDERED_COUNTRIES_CACHE.get(this.cacheKey(this.locale, includeHiddenZones));
+    if (!cachedCountries) return null;
+    return cachedCountries.find(({
+      code
+    }) => code === countryCode);
+  }
+}
+
+exports["default"] = AddressFormatter;

package/build/cjs/format.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utilities = require('./utilities.js');
+
+const LINE_DELIMITER = '_';
+const DEFAULT_FORM_LAYOUT = '{firstName}{lastName}_{company}_{address1}_{address2}_{city}_{country}{province}{zip}_{phone}';
+const DEFAULT_SHOW_LAYOUT = '{lastName} {firstName}_{company}_{address1} {address2}_{city} {province} {zip}_{country}_{phone}';
+
+/**
+ * When it's time to render any address, use this function so that it's properly
+ * formatted for the country's locale.
+ *
+ * ```typescript
+ * ['Shopify', 'Lindenstraße 9-14', '10969 Berlin', 'Germany'];
+ * ```
+ * @returns all lines of a formatted address as an array of strings.
+ */
+function formatAddress(address, country) {
+  const layout = country.formatting.show || DEFAULT_SHOW_LAYOUT;
+  return layout.split(LINE_DELIMITER).map(lineTemplate => utilities.renderLineTemplate(country, lineTemplate, address).trim());
+}
+
+/**
+ * In an edit form, this function can be used to properly order all the input
+ * fields.
+ *
+ * ```typescript
+ * [
+ *   ['firstName', 'lastName'],
+ *   ['company'],
+ *   ['address1'],
+ *   ['address2'],
+ *   ['city'],
+ *   ['country', 'province', 'zip'],
+ *   ['phone'],
+ * ];
+ * ```
+ */
+function buildOrderedFields(country) {
+  const format = country ? country.formatting.edit : DEFAULT_FORM_LAYOUT;
+  return format.split(LINE_DELIMITER).map(lineTemplate => {
+    const result = lineTemplate.match(utilities.FIELD_REGEXP);
+    if (!result) {
+      return [];
+    }
+    return result.map(field => utilities.FIELDS_MAPPING[field]);
+  });
+}
+
+exports.buildOrderedFields = buildOrderedFields;
+exports.formatAddress = formatAddress;

package/build/cjs/graphqlQuery.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const query = `
+query countries($locale: SupportedLocale!) {
+  getCountries(locale: $locale) {
+    name
+    code
+    continent
+    phoneNumberPrefix
+    autocompletionField
+    provinceKey
+    labels {
+      address1
+      address2
+      city
+      company
+      country
+      firstName
+      lastName
+      phone
+      postalCode
+      zone
+    }
+    optionalLabels {
+      address2
+    }
+    formatting {
+      edit
+      show
+    }
+    zones {
+      name
+      code
+    }
+  }
+}
+
+query country($countryCode: SupportedCountry!, $locale: SupportedLocale!) {
+  getCountry(countryCode: $countryCode, locale: $locale) {
+    name
+    code
+    continent
+    phoneNumberPrefix
+    autocompletionField
+    provinceKey
+    labels {
+      address1
+      address2
+      city
+      company
+      country
+      firstName
+      lastName
+      phone
+      postalCode
+      zone
+    }
+    optionalLabels {
+      address2
+    }
+    formatting {
+      edit
+      show
+    }
+    zones {
+      name
+      code
+    }
+  }
+}
+`;
+var query$1 = query;
+
+exports["default"] = query$1;

package/build/cjs/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addressConsts = require('@huckleberry-inc/address-consts');
+var loader = require('./loader.js');
+var format = require('./format.js');
+var AddressFormatter = require('./AddressFormatter.js');
+
+
+
+exports.CountryLoaderError = loader.CountryLoaderError;
+exports.loadCountries = loader.loadCountries;
+exports.loadCountry = loader.loadCountry;
+exports.buildOrderedFields = format.buildOrderedFields;
+exports.formatAddress = format.formatAddress;
+exports["default"] = AddressFormatter["default"];
+Object.keys(addressConsts).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return addressConsts[k]; }
+	});
+});

package/build/cjs/loader.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addressConsts = require('@huckleberry-inc/address-consts');
+var graphqlQuery = require('./graphqlQuery.js');
+
+const loadCountries = memoizeAsync(async (locale, {
+  includeHiddenZones = false
+} = {}) => {
+  const response = await fetch(addressConsts.GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: addressConsts.HEADERS,
+    body: JSON.stringify({
+      query: graphqlQuery["default"],
+      operationName: addressConsts.GraphqlOperationName.Countries,
+      variables: {
+        locale: locale.replace(/-/, '_').toUpperCase(),
+        includeHiddenZones
+      }
+    })
+  });
+  const countries = await response.json();
+  if (!('data' in countries) && 'errors' in countries) {
+    throw new CountryLoaderError(countries);
+  }
+  return countries.data.countries;
+});
+const loadCountry = memoizeAsync(async (locale, countryCode, {
+  includeHiddenZones = false
+} = {}) => {
+  const response = await fetch(addressConsts.GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: addressConsts.HEADERS,
+    body: JSON.stringify({
+      query: graphqlQuery["default"],
+      operationName: addressConsts.GraphqlOperationName.Country,
+      variables: {
+        countryCode,
+        locale: locale.replace(/-/, '_').toUpperCase(),
+        includeHiddenZones
+      }
+    })
+  });
+  const country = await response.json();
+  if (!('data' in country) && 'errors' in country) {
+    throw new CountryLoaderError(country);
+  }
+  return country.data.country;
+});
+class CountryLoaderError extends Error {
+  constructor(errors) {
+    const errorMessage = errors.errors.map(error => error.message).join('; ');
+    super(errorMessage);
+  }
+}
+function memoizeAsync(asyncFunction) {
+  const cache = {};
+  return (...args) => {
+    const stringifiedArgs = JSON.stringify(args);
+    if (!cache[stringifiedArgs]) {
+      cache[stringifiedArgs] = asyncFunction.apply(this, args);
+    }
+    return cache[stringifiedArgs];
+  };
+}
+
+exports.CountryLoaderError = CountryLoaderError;
+exports.loadCountries = loadCountries;
+exports.loadCountry = loadCountry;

package/build/cjs/node_modules/@shopify/address-consts/build/esm/index.mjs.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.FieldName = void 0;
+(function (FieldName) {
+  FieldName["FirstName"] = "firstName";
+  FieldName["LastName"] = "lastName";
+  FieldName["Country"] = "country";
+  FieldName["City"] = "city";
+  FieldName["PostalCode"] = "zip";
+  FieldName["Zone"] = "province";
+  FieldName["Address1"] = "address1";
+  FieldName["Address2"] = "address2";
+  FieldName["Phone"] = "phone";
+  FieldName["Company"] = "company";
+})(exports.FieldName || (exports.FieldName = {}));
+const GRAPHQL_ENDPOINT = 'https://atlas.shopifysvc.com/graphql';
+exports.GraphqlOperationName = void 0;
+
+/* eslint-disable @typescript-eslint/naming-convention */
+(function (GraphqlOperationName) {
+  GraphqlOperationName["Countries"] = "countries";
+  GraphqlOperationName["Country"] = "country";
+})(exports.GraphqlOperationName || (exports.GraphqlOperationName = {}));
+const HEADERS = {
+  'Content-Type': 'application/json',
+  'Access-Control-Allow-Origin': '*'
+};
+
+exports.GRAPHQL_ENDPOINT = GRAPHQL_ENDPOINT;
+exports.HEADERS = HEADERS;

package/build/cjs/packages/address/src/AddressFormatter.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var format = require('./format.js');
+var loader = require('./loader.js');
+
+const ORDERED_COUNTRIES_CACHE = new Map();
+class AddressFormatter {
+  /**
+   * Useful in tests or any situation where the cache has undesirable
+   * side-effects.
+   */
+  static resetCache() {
+    ORDERED_COUNTRIES_CACHE.clear();
+  }
+  constructor(locale) {
+    this.locale = locale;
+    this.locale = locale;
+  }
+  updateLocale(locale) {
+    this.locale = locale;
+  }
+  async getCountry(countryCode, {
+    includeHiddenZones = false
+  } = {}) {
+    const country = this.loadCountryFromCache(countryCode, includeHiddenZones);
+    if (country) return country;
+    return loader.loadCountry(this.locale, countryCode, {
+      includeHiddenZones
+    });
+  }
+  async getCountries({
+    includeHiddenZones = false
+  } = {}) {
+    const cacheKey = this.cacheKey(this.locale, includeHiddenZones);
+    const cachedCountries = ORDERED_COUNTRIES_CACHE.get(cacheKey);
+    if (cachedCountries) return cachedCountries;
+    const countries = await loader.loadCountries(this.locale, {
+      includeHiddenZones
+    });
+    ORDERED_COUNTRIES_CACHE.set(cacheKey, countries);
+    return countries;
+  }
+  async getZoneName(countryCode, zoneCode) {
+    const country = await this.getCountry(countryCode);
+    const countryZone = country.zones.find(item => item.code === zoneCode);
+    if (!(countryZone !== null && countryZone !== void 0 && countryZone.name)) return undefined;
+    return countryZone.name;
+  }
+
+  /* Returns the address ordered in an array based based on the country code
+   * Eg.:
+   *   [
+   *     'Shopify',
+   *     'First Name Last Name',
+   *     'Address 1',
+   *     'address2',
+   *     'Montréal',
+   *     'Canada Quebec H2J 4B7',
+   *     '514 444 3333'
+   *   ]
+   */
+  async format(address) {
+    const country = await this.getCountry(address.country);
+    return format.formatAddress(address, country);
+  }
+
+  /* Returns an array that shows how to order fields based on the country code
+   * Eg.:
+   *   [
+   *     ['company'],
+   *     ['firstName', 'lastName'],
+   *     ['address1'],
+   *     ['address2'],
+   *     ['city'],
+   *     ['country', 'province', 'zip'],
+   *     ['phone']
+   *   ]
+   */
+  async getOrderedFields(countryCode) {
+    const country = await this.getCountry(countryCode);
+    return format.buildOrderedFields(country);
+  }
+  cacheKey(locale, includeHiddenZones) {
+    /* Cache list of countries per locale, both with and without hidden zones included */
+    return `${locale}-${includeHiddenZones}`;
+  }
+  loadCountryFromCache(countryCode, includeHiddenZones) {
+    const cachedCountries = ORDERED_COUNTRIES_CACHE.get(this.cacheKey(this.locale, includeHiddenZones));
+    if (!cachedCountries) return null;
+    return cachedCountries.find(({
+      code
+    }) => code === countryCode);
+  }
+}
+
+exports["default"] = AddressFormatter;

package/build/cjs/packages/address/src/format.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utilities = require('./utilities.js');
+
+const LINE_DELIMITER = '_';
+const DEFAULT_FORM_LAYOUT = '{firstName}{lastName}_{company}_{address1}_{address2}_{city}_{country}{province}{zip}_{phone}';
+const DEFAULT_SHOW_LAYOUT = '{lastName} {firstName}_{company}_{address1} {address2}_{city} {province} {zip}_{country}_{phone}';
+
+/**
+ * When it's time to render any address, use this function so that it's properly
+ * formatted for the country's locale.
+ *
+ * ```typescript
+ * ['Shopify', 'Lindenstraße 9-14', '10969 Berlin', 'Germany'];
+ * ```
+ * @returns all lines of a formatted address as an array of strings.
+ */
+function formatAddress(address, country) {
+  const layout = country.formatting.show || DEFAULT_SHOW_LAYOUT;
+  return layout.split(LINE_DELIMITER).map(lineTemplate => utilities.renderLineTemplate(country, lineTemplate, address).trim());
+}
+
+/**
+ * In an edit form, this function can be used to properly order all the input
+ * fields.
+ *
+ * ```typescript
+ * [
+ *   ['firstName', 'lastName'],
+ *   ['company'],
+ *   ['address1'],
+ *   ['address2'],
+ *   ['city'],
+ *   ['country', 'province', 'zip'],
+ *   ['phone'],
+ * ];
+ * ```
+ */
+function buildOrderedFields(country) {
+  const format = country ? country.formatting.edit : DEFAULT_FORM_LAYOUT;
+  return format.split(LINE_DELIMITER).map(lineTemplate => {
+    const result = lineTemplate.match(utilities.FIELD_REGEXP);
+    if (!result) {
+      return [];
+    }
+    return result.map(field => utilities.FIELDS_MAPPING[field]);
+  });
+}
+
+exports.buildOrderedFields = buildOrderedFields;
+exports.formatAddress = formatAddress;