Add table of SMS/Voice support dynamically loaded from IDP

.circleci/config.yml

@@ -68,7 +68,7 @@ jobs:
           name: Run htmlproofer (no external links)
           command: bundle exec scripts/htmlproofer --internal
 
-  accessibility:
+  e2e:
     docker:
       - image: cimg/ruby:2.7-browsers
     environment:
@@ -148,7 +148,7 @@ workflows:
       - test-external-links:
           requires:
             - build
-      - accessibility:
+      - e2e:
           requires:
             - build
   daily-external-link-checker:

_config.yml

@@ -16,6 +16,11 @@ contact_form_captcha_enabled: true
 contact_form_action: "https://webto.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8"
 contact_form_orgid: "00DU0000000Leux"
 
+# Used to load country code support
+idp_base_url: https://secure.login.gov
+# for local development:
+# idp_base_url: http://localhost:3000
+
 # Pages
 collections_dir: content
 collections:

_includes/country_support_table.html

@@ -0,0 +1,44 @@
+{% comment %}
+Should include these translations as includes:
+- heading_country
+- heading_dialing_code
+- heading_sms
+- heading_voice
+- option_yes
+- option_no
+{% endcomment %}
+
+<div
+  class="js-country-support"
+  data-idp-base-url="{{ site.idp_base_url }}"
+  data-translation-option-yes="{{ include.option_yes }}"
+  data-translation-option-no="{{ include.option_no }}"
+  hidden
+>
+  <span hidden data-item="icon-success" class="svg-wrapper svg-success">{% include svg/font-awesome-check-circle-solid.svg %}</span>
+  <span hidden data-item="icon-error" class="svg-wrapper svg-error">{% include svg/font-awesome-times-circle-solid.svg %}</span>
+  <table class="usa-table--borderless usa-table--sticky-header">
+    <thead>
+      <tr>
+        <th scope="col" class="usa-table--sticky-header--heading">{{ include.heading_country }}</th>
+        <th scope="col" class="usa-table--sticky-header--heading">{{ include.heading_dialing_code }}</th>
+        <th scope="col" class="usa-table--sticky-header--heading">{{ include.heading_sms }}</th>
+        <th scope="col" class="usa-table--sticky-header--heading">{{ include.heading_voice }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr data-item="template-row">
+        <td data-item="country"></td>
+        <td data-item="dialing-code"></td>
+        <td data-item="sms">
+          <span class="margin-right-05" data-item="icon" aria-hidden="true"></span>
+          <span data-item="text"></span>
+        </td>
+        <td data-item="voice">
+          <span class="margin-right-05" data-item="icon" aria-hidden="true"></span>
+          <span data-item="text"></span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

_includes/one_account_banner.html

@@ -1,6 +1,6 @@
 {% if page.url == '/create-an-account/' %}
   {% assign link_class = 'usa-button usa-button--big' %}
-  {% assign link_url = 'https://secure.login.gov/sign_up/enter_email' %}
+  {% assign link_url = site.idp_base_url | append: '/sign_up/enter_email' %}
   {% capture link_content %}
     {{ site.data.[page.lang].settings.banner.one-account-for-govt.create }}
   {% endcapture %}

_includes/sign_in.html

@@ -1,6 +1,6 @@
 <a
   class="{{include.mobile}} usa-button sign-in-logo"
-  href="https://secure.login.gov/{% if page.lang!= 'en' %}{{page.lang}}{% endif %}"
+  href="{{ site.idp_base_url }}/{% if page.lang!= 'en' %}{{page.lang}}{% endif %}"
   title="Login.gov"
   aria-label="Login.gov"
   tabindex="0"

_sass/_colors.scss

@@ -12,3 +12,6 @@ $blue-mid: color("primary-dark");
 $navy: color("primary-darker");
 
 $red: color("secondary");
+
+$error: color("error");
+$success: color("success");

_sass/components/_sticky-table.scss

@@ -0,0 +1,10 @@
+.usa-table--sticky-header {
+  position: relative;
+
+  .usa-table--sticky-header--heading,
+  thead th.usa-table--sticky-header--heading {
+    background-color: $white;
+    position: sticky;
+    top: 0;
+  }
+}

_sass/components/_svg.scss

@@ -12,3 +12,11 @@
     fill: $grey;
   }
 }
+
+.svg-success {
+  color: $success;
+}
+
+.svg-error {
+  color: $error;
+}

_sass/components/all.scss

@@ -18,3 +18,5 @@
 @import "layout";
 @import "box-info";
 @import "card";
+
+@import "sticky-table";

assets/js/country_support.js

@@ -0,0 +1,104 @@
+/**
+ * @typedef Country
+ * @property {string} name
+ * @property {string} country_code The international dialing code (ex "1" for the US)
+ * @property {boolean} supports_sms
+ * @property {boolean} supports_voice
+ */
+
+/**
+ * @typedef CountrySupport
+ * @property {Record<string,Country>} countries
+ */
+
+/**
+ * @example
+ *   prettyDialingCode('1') => '+1'
+ *   prettyDialingCode('1234') => '+1-234'
+ *   prettyDialingCode('789') => '+789'
+ * @param {string} dialingCode
+ * @return {string}
+ */
+const prettyDialingCode = (dialingCode) => {
+  if (dialingCode.length > 1 && dialingCode.indexOf('1') === 0) {
+    return `+1-${dialingCode.slice(1)}`;
+  }
+  return `+${dialingCode}`;
+};
+
+/**
+ * @typedef {(input: RequestInfo, init?: RequestInit) => Promise<Response>} Fetch
+ */
+
+/**
+ * @param {HTMLElement} elem
+ * @param {Fetch} fetch
+ */
+function loadCountrySupportTable(elem, fetch) {
+  const tbody = elem.querySelector('tbody');
+  const templateRow = elem.querySelector('[data-item=template-row]');
+  const successIcon = elem.querySelector('[data-item=icon-success]');
+  const errorIcon = elem.querySelector('[data-item=icon-error]');
+  if (!tbody || !templateRow || !successIcon || !errorIcon) {
+    return;
+  }
+
+  const { idpBaseUrl, translationOptionYes, translationOptionNo } = elem.dataset;
+
+  /**
+   * @param {HTMLElement} cell
+   * @param {boolean} enabled
+   */
+  const updateCell = (cell, enabled) => {
+    cell.querySelector('[data-item=text]').innerText = enabled
+      ? translationOptionYes
+      : translationOptionNo;
+
+    const clonedIcon = (enabled ? successIcon : errorIcon).cloneNode(true);
+    clonedIcon.hidden = false;
+    cell.querySelector('[data-item=icon]').appendChild(clonedIcon);
+  };
+
+  fetch(`${idpBaseUrl || ''}/api/country-support`)
+    .then((response) => response.json())
+    .then((/** @type {CountrySupport} */ { countries }) => {
+      Object.entries(countries)
+        .sort(([_isoCodeA, { name: a }], [_isoCodeB, { name: b }]) => a.localeCompare(b))
+        .forEach(
+          ([
+            isoCode,
+            {
+              name,
+              country_code: countryCode,
+              supports_sms: supportsSms,
+              supports_voice: supportsVoice,
+            },
+          ]) => {
+            const row = templateRow.cloneNode(true);
+
+            row.querySelector('[data-item=country]').innerText = `${name} (${isoCode})`;
+            row.querySelector('[data-item=dialing-code]').innerText = prettyDialingCode(
+              countryCode,
+            );
+            updateCell(row.querySelector('[data-item=sms]'), supportsSms);
+            updateCell(row.querySelector('[data-item=voice]'), supportsVoice);
+            tbody.appendChild(row);
+          },
+        );
+
+      tbody.removeChild(templateRow);
+      elem.hidden = false;
+    });
+}
+
+/** @type {Promise<Fetch>} */
+const fetchPromise =
+  'fetch' in window
+    ? new Promise((resolve) => resolve(window.fetch))
+    : import(/* webpackChunkName: "whatwg-fetch" */ 'whatwg-fetch').then(({ fetch }) => fetch);
+
+fetchPromise.then((fetch) => {
+  Array.from(document.querySelectorAll('.js-country-support')).forEach((elem) =>
+    loadCountrySupportTable(elem, fetch),
+  );
+});

babel.config.json

@@ -1,8 +1,23 @@
 {
-  "presets": [["@babel/preset-env", { "targets": { "ie": "11" } }]],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": 3,
+        "targets": { "ie": "11" }
+      }
+    ]
+  ],
   "env": {
     "test": {
       "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
     }
-  }
+  },
+  "overrides": [
+    {
+      "test": "node_modules",
+      "sourceType": "unambiguous"
+    }
+  ]
 }

content/_en/help/manage-your-account/add-or-change-your-authentication-method.md

@@ -2,7 +2,7 @@
 layout: help
 title: Add or change your authentication method
 category: manage-your-account
-order: 6
+order: 7
 ---
 [An authentication method](https://login.gov/help/get-started/authentication-options/) is an additional layer of security for your account. We recommend having at least two authentication methods for your account in case you lose one method.
 

content/_en/help/manage-your-account/international-phone-support.md

@@ -0,0 +1,20 @@
+---
+layout: help
+title: International phone number support
+category: manage-your-account
+order: 5
+scripts:
+  - /assets/js/build/country_support.js
+---
+
+<noscript>
+  We need JavaScript in order to load the list of supported countries.
+</noscript>
+
+{% include country_support_table.html
+           heading_country="Country"
+           heading_dialing_code="Dialing Code"
+           heading_sms="Supports SMS"
+           heading_voice="Supports Voice"
+           option_yes="Yes"
+           option_no="No" %}

content/_en/help/manage-your-account/relink-your-accounts.md

@@ -2,7 +2,7 @@
 layout: help
 title: "Relink your accounts "
 category: manage-your-account
-order: 5
+order: 6
 ---
 If you have problems signing in to a Login.gov partner website after changing your email address, then it is possible the partner linked your account to a different email address. You may want to relink your account to access your information or profile on the partner website. 
 

content/_es/help/manage-your-account/add-or-change-your-authentication-method.md

@@ -1,7 +1,7 @@
 ---
 title: Añadir o cambiar el método de autenticación
 category: manage-your-account
-order: 6
+order: 7
 ---
 [Un método de autenticación](https://login.gov/es/help/get-started/authentication-options/) es una medida adicional de seguridad para tu cuenta. Te aconsejamos que tengas al menos dos métodos de autenticación para tu cuenta en caso de que pierdas uno de ellos.
 

content/_es/help/manage-your-account/international-phone-support.md

@@ -0,0 +1,20 @@
+---
+layout: help
+title: Soporte de número de teléfono internacional
+category: manage-your-account
+order: 5
+scripts:
+  - /assets/js/build/country_support.js
+---
+
+<noscript>
+  Necesitamos JavaScript para cargar la lista de países admitidos.
+</noscript>
+
+{% include country_support_table.html
+           heading_country="País"
+           heading_dialing_code="Codigo para marcar"
+           heading_sms="Compatible con SMS"
+           heading_voice="Admite marcación por voz"
+           option_yes="Sí"
+           option_no="No" %}

content/_es/help/manage-your-account/relink-your-accounts.md

@@ -2,7 +2,7 @@
 layout: help
 category: manage-your-account
 title: "Revincular tus cuentas"
-order: 5
+order: 6
 ---
 Si tienes problemas para iniciar sesión en un sitio web asociado a Login.gov después de cambiar tu dirección de correo electrónico, es posible que dicho socio haya vinculado tu cuenta a una dirección de correo electrónico diferente. Puede que desees volver a vincular tu cuenta para acceder a tu información o perfil en el sitio web asociado. 
 

content/_fr/help/manage-your-account/add-or-change-your-authentication-method.md

@@ -1,7 +1,7 @@
 ---
 title: "Ajouter ou modifier votre méthode d’authentification "
 category: manage-your-account
-order: 6
+order: 7
 ---
 [Une méthode d’authentification](https://login.gov/fr/help/get-started/authentication-options/) est une couche supplémentaire de sécurité pour votre compte. Nous vous recommandons d’avoir au moins deux méthodes d’authentification pour votre compte au cas où vous en perdriez une. 
 

content/_fr/help/manage-your-account/international-phone-support.md

@@ -0,0 +1,20 @@
+---
+layout: help
+title: Prise en charge des numéros de téléphone internationaux
+category: manage-your-account
+order: 5
+scripts:
+  - /assets/js/build/country_support.js
+---
+
+<noscript>
+  Nous avons besoin de JavaScript pour charger la liste des pays pris en charge.
+</noscript>
+
+{% include country_support_table.html
+           heading_country="Pays"
+           heading_dialing_code="Indicatif"
+           heading_sms="Prend en charge les SMS"
+           heading_voice="Prend en charge la numérotation vocale"
+           option_yes="Oui"
+           option_no="Non" %}

content/_fr/help/manage-your-account/relink-your-accounts.md

@@ -2,7 +2,7 @@
 layout: help
 category: manage-your-account
 title: "Relier tes comptes"
-order: 5
+order: 6
 ---
 Si tu rencontres des problèmes pour te connecter à un site Web partenaire de Login.gov après avoir changé ton adresse électronique, il se peut que le partenaire ait lié ton compte à une adresse électronique différente. Au cas où tu souhaiterais relier ton compte pour accéder à tes informations ou à ton profil sur le site Web partenaire, sache que c’est possible.