feat: i18n user interface (#40306)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/templates/Challenges/projects/SolutionForm.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 
 import { Form } from '../../../components/formHelpers';
 import {
@@ -14,24 +15,10 @@ const propTypes = {
   description: PropTypes.string,
   isSubmitting: PropTypes.bool,
   onSubmit: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
   updateSolutionForm: PropTypes.func.isRequired
 };
 
-// back end challenges and front end projects use a single form field
-const solutionField = [{ name: 'solution', label: 'Solution Link' }];
-const backEndProjectFields = [
-  { name: 'solution', label: 'Solution Link' },
-  { name: 'githubLink', label: 'GitHub Link' }
-];
-
-const options = {
-  types: {
-    solution: 'url',
-    githubLink: 'url'
-  },
-  required: ['solution']
-};
-
 export class SolutionForm extends Component {
   constructor(props) {
     super(props);
@@ -45,10 +32,28 @@ export class SolutionForm extends Component {
     this.props.onSubmit();
   }
   render() {
-    const { isSubmitting, challengeType, description } = this.props;
+    const { isSubmitting, challengeType, description, t } = this.props;
+
+    // back end challenges and front end projects use a single form field
+    const solutionField = [
+      { name: 'solution', label: t('learn.solution-link') }
+    ];
+    const backEndProjectFields = [
+      { name: 'solution', label: t('learn.solution-link') },
+      { name: 'githubLink', label: t('learn.github-link') }
+    ];
+
+    const options = {
+      types: {
+        solution: 'url',
+        githubLink: 'url'
+      },
+      required: ['solution']
+    };
+
     const buttonCopy = isSubmitting
-      ? 'Submit and go to my next challenge'
-      : "I've completed this challenge";
+      ? t('learn.submit-and-go')
+      : t('learn.i-completed');
 
     let formFields = solutionField;
     let solutionLink = 'ex: ';
@@ -107,4 +112,4 @@ export class SolutionForm extends Component {
 
 SolutionForm.propTypes = propTypes;
 
-export default SolutionForm;
+export default withTranslation()(SolutionForm);