Merge pull request #3313 from reactioncommerce/fix-unreported-spencer…

…-translation-component-undefined

(fix): Translation component issue returning undefined instead of defaultValue

imports/plugins/core/ui/client/components/translation/translation.js

@@ -8,6 +8,22 @@ const Translation = ({ i18nKey, defaultValue, ...rest }) => {
   const key = i18nKey || camelCase(defaultValue);
   const translation = i18next.t(key, { defaultValue });
 
+  // i18next returns 'undefined' if the default value happens to be the key for a set of definitions
+  // ```
+  // "components": {
+  //    "componentDef": "Translated Component Def"
+  // }
+  // ```
+  // In this case, a request for i18next.t("components", "defaultValue") will return undefined
+  // but i18next.t("components.componentDef", "defaultValue") will return correctly
+  //
+  // This checks to see if translation is undefined and returns the default value instead
+  if (typeof translation === "undefined") {
+    return (
+      <span {...rest}>{defaultValue}</span>
+    );
+  }
+
   return (
     <span {...rest}>{translation}</span>
   );