React Image Integration

app/assets/config/manifest.js

@@ -3,6 +3,7 @@
 //= link application.css
 
 //= link i18n-strings.js
+//= link asset-strings.js
 //= link email.css
 //= link es5-shim.min.js
 //= link html5shiv.js

app/assets/javascripts/application.js

@@ -1,2 +1,3 @@
 //= require i18n-strings
 //= require local-time
+//= require asset-strings

app/assets/javascripts/asset-strings.js.erb

@@ -0,0 +1,12 @@
+window.LoginGov = window.LoginGov || {}
+<% image_keys = [
+    'idv/phone.png'
+] %>
+
+window.LoginGov.AssetStrings = {
+  images: {}
+};
+
+<% image_keys.each do |key| %>
+  window.LoginGov.AssetStrings.images['<%=key %>'] = '<%= ActionController::Base.helpers.image_path(key) %>';
+<% end %>

app/assets/javascripts/i18n-strings.js.erb

@@ -45,7 +45,8 @@ window.LoginGov = window.LoginGov || {};
   'zxcvbn.feedback.this_is_a_very_common_password',
   'zxcvbn.feedback.this_is_similar_to_a_commonly_used_password',
   'zxcvbn.feedback.for_a_stronger_password_use_a_few_words_separated_by_spaces_but_avoid_common_phrases',
-  'zxcvbn.feedback.use_a_longer_keyboard_pattern_with_more_turns'
+  'zxcvbn.feedback.use_a_longer_keyboard_pattern_with_more_turns',
+  'doc_auth.headings.welcome'
 ] %>
 
 window.LoginGov.I18n = {

app/javascript/app/document-capture/components/document-capture.jsx

@@ -1,5 +1,11 @@
+import React from 'react';
+import useI18n from '../hooks/use-i18n';
+import { useImage } from '../hooks/use-assets';
+
 function DocumentCapture() {
-  return 'Document Capture';
+  const t = useI18n();
+  const imageTag = useImage();
+  return <img src={imageTag('idv/phone.png')} alt={t('doc_auth.headings.welcome')} />;
 }
 
 export default DocumentCapture;

app/javascript/app/document-capture/context/assets.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AssetContext = createContext({});
+
+export default AssetContext;

app/javascript/app/document-capture/context/i18n.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const I18nContext = createContext({});
+
+export default I18nContext;

app/javascript/app/document-capture/hooks/use-assets.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import AssetContext from '../context/assets';
+
+function useImage() {
+  const strings = useContext(AssetContext);
+  const imageStrings = strings.images || {};
+  const imageTag = (key) => {
+    const resolvedImage = imageStrings[key];
+    return resolvedImage !== undefined ? resolvedImage : key;
+  };
+  return imageTag;
+}
+
+export { useImage };

app/javascript/app/document-capture/hooks/use-i18n.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import I18nContext from '../context/i18n';
+
+function useI18n() {
+  const strings = useContext(I18nContext);
+  const t = (key) => (Object.prototype.hasOwnProperty.call(strings, key) ? strings[key] : key); // eslint-disable-line
+  return t;
+}
+
+export default useI18n;

app/javascript/packs/document-capture.jsx

@@ -1,10 +1,18 @@
 import React from 'react';
 import { render } from 'react-dom';
 import DocumentCapture from '../app/document-capture/components/document-capture';
+import AssetContext from '../app/document-capture/context/assets';
+import I18nContext from '../app/document-capture/context/i18n';
+
+const { I18n: i18n, AssetStrings } = window.LoginGov;
 
 const appRoot = document.getElementById('document-capture-form');
 appRoot.innerHTML = '';
 render(
-  <DocumentCapture />,
+  <AssetContext.Provider value={AssetStrings}>
+    <I18nContext.Provider value={i18n.strings[i18n.currentLocale()]}>
+      <DocumentCapture />
+    </I18nContext.Provider>
+  </AssetContext.Provider>,
   appRoot,
 );

spec/javascripts/app/document-capture/components/document-capture-spec.jsx

@@ -7,10 +7,9 @@ describe('document-capture/components/document-capture', () => {
   useDOM();
 
   it('renders', () => {
-    const { getByText } = render(<DocumentCapture />);
+    const { getByAltText } = render(<DocumentCapture />);
 
-    const button = getByText('Document Capture');
-
-    expect(button).to.be.ok();
+    const img = getByAltText('doc_auth.headings.welcome');
+    expect(img).to.be.ok();
   });
 });

spec/javascripts/app/document-capture/context/i18n-spec.jsx

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import { render } from '@testing-library/react';
+import I18nContext from '../../../../../app/javascript/app/document-capture/context/i18n';
+import { useDOM } from '../../../support/dom';
+
+describe('document-capture/context/i18n', () => {
+  useDOM();
+
+  const ContextValue = () => JSON.stringify(useContext(I18nContext));
+
+  it('defaults to empty object', () => {
+    const { container } = render(<ContextValue />);
+
+    expect(container.textContent).to.equal('{}');
+  });
+});

spec/javascripts/app/document-capture/hooks/use-i18n-spec.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import I18nContext from '../../../../../app/javascript/app/document-capture/context/i18n';
+import useI18n from '../../../../../app/javascript/app/document-capture/hooks/use-i18n';
+import { useDOM } from '../../../support/dom';
+
+describe('document-capture/hooks/use-i18n', () => {
+  useDOM();
+
+  const LocalizedString = ({ stringKey }) => useI18n()(stringKey);
+
+  it('returns localized key value', () => {
+    const { container } = render(
+      <I18nContext.Provider value={{ sample: 'translation' }}>
+        <LocalizedString stringKey="sample" />
+      </I18nContext.Provider>,
+    );
+
+    expect(container.textContent).to.equal('translation');
+  });
+
+  it('falls back to key value', () => {
+    const { container } = render(<LocalizedString stringKey="sample" />);
+
+    expect(container.textContent).to.equal('sample');
+  });
+});