Move Cookie/Legal Copy to translations json

Author: catarak

client/modules/IDE/components/About.jsx

@@ -155,7 +155,7 @@ function About(props) {
               aria-hidden="true"
               focusable="false"
             />
-            Privacy Policy
+            {t('About.PrivacyPolicy')}
           </Link>
         </p>
         <p className="about__content-column-list">
@@ -165,7 +165,7 @@ function About(props) {
               aria-hidden="true"
               focusable="false"
             />
-            Terms of Use
+            {t('About.TermsOfUse')}
           </Link>
         </p>
         <p className="about__content-column-list">
@@ -175,7 +175,7 @@ function About(props) {
               aria-hidden="true"
               focusable="false"
             />
-            Code of Conduct
+            {t('About.CodeOfConduct')}
           </Link>
         </p>
       </div>

client/modules/IDE/pages/Legal.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { browserHistory } from 'react-router';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
 import PrivacyPolicy from './PrivacyPolicy';
 import TermsOfUse from './TermsOfUse';
 import CodeOfConduct from './CodeOfConduct';
@@ -30,6 +31,7 @@ const TabTitle = styled.p`
 
 function Legal({ location }) {
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const { t } = useTranslation();
   useEffect(() => {
     if (location.pathname === '/privacy-policy') {
       setSelectedIndex(0);
@@ -60,13 +62,13 @@ function Legal({ location }) {
       <Tabs selectedIndex={selectedIndex} onSelect={onSelect}>
         <StyledTabList>
           <Tab>
-            <TabTitle>Privacy Policy</TabTitle>
+            <TabTitle>{t('Legal.PrivacyPolicy')}</TabTitle>
           </Tab>
           <Tab>
-            <TabTitle>Terms of Use</TabTitle>
+            <TabTitle>{t('Legal.TermsOfUse')}</TabTitle>
           </Tab>
           <Tab>
-            <TabTitle>Code of Conduct</TabTitle>
+            <TabTitle>{t('Legal.CodeOfConduct')}</TabTitle>
           </Tab>
         </StyledTabList>
         <TabPanel>

client/modules/User/components/CookieConsent.jsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import ReactGA from 'react-ga';
 import { Transition } from 'react-transition-group';
 import { Link } from 'react-router';
+import { Trans, useTranslation } from 'react-i18next';
 import getConfig from '../../../utils/getConfig';
 import { setUserCookieConsent } from '../actions';
 import { remSize, prop, device } from '../../../theme';
@@ -76,6 +77,7 @@ function CookieConsent() {
   const [cookieConsent, setBrowserCookieConsent] = useState('none');
   const [inProp, setInProp] = useState(false);
   const dispatch = useDispatch();
+  const { t } = useTranslation();
 
   function initializeCookieConsent() {
     if (user.authenticated) {
@@ -157,29 +159,23 @@ function CookieConsent() {
       {(state) => (
         <CookieConsentContainer state={state}>
           <CookieConsentDialog role="dialog" tabIndex="0">
-            {/* <button aria-label="Close" tabIndex="0"></button> */}
-            <CookieConsentHeader>Cookies</CookieConsentHeader>
+            <CookieConsentHeader>{t('Cookies.Header')}</CookieConsentHeader>
             <CookieConsentContent>
               <CookieConsentCopy>
-                The p5.js Editor uses cookies. Some are essential to the website
-                functionality and allow you to manage an account and
-                preferences. Others are not essential—they are used for
-                analytics and allow us to learn more about our community.{' '}
-                <strong>
-                  We never sell this data or use it for advertising.
-                </strong>{' '}
-                You can decide which cookies you would like to allow, and learn
-                more in our <Link to="/privacy-policy">Privacy Policy</Link>.
+                <Trans
+                  i18nKey="Cookies.Body"
+                  components={[<Link to="/privacy-policy" />]}
+                />
               </CookieConsentCopy>
               <CookieConsentButtons>
                 <Button
                   kind={Button.kinds.secondary}
                   onClick={acceptAllCookies}
                 >
-                  Allow All
+                  {t('Cookies.AllowAll')}
                 </Button>
                 <Button onClick={acceptEssentialCookies}>
-                  Allow Essential
+                  {t('Cookies.AllowEssential')}
                 </Button>
               </CookieConsentButtons>
             </CookieConsentContent>
@@ -189,6 +185,5 @@ function CookieConsent() {
     </Transition>
   );
 }
-// TODO need to merge browser cookie with user when u login
 
 export default CookieConsent;

translations/locales/en-US/translations.json

@@ -96,7 +96,10 @@
     "Resources": "Resources",
     "Libraries": "Libraries",
     "Forum": "Forum",
-    "Examples": "Examples"
+    "Examples": "Examples",
+    "PrivacyPolicy": "Privacy Policy",
+    "TermsOfUse": "Terms of Use",
+    "CodeOfConduct": "Code of Conduct"
   },
   "Toast": {
     "OpenedNewSketch": "Opened new sketch.",
@@ -599,5 +602,16 @@
   },
   "Explorer": {
     "Files": "Files"
+  },
+  "Cookies": {
+    "Header": "Cookies",
+    "Body": "The p5.js Editor uses cookies. Some are essential to the website functionality and allow you to manage an account and preferences. Others are not essential—they are used for analytics and allow us to learn more about our community. <strong> We never sell this data or use it for advertising. </strong> You can decide which cookies you would like to allow, and learn more in our <0>Privacy Policy<0>.",
+    "AllowAll": "Allow All",
+    "AllowEssential": "Allow Essential"
+  },
+  "Legal": {
+    "PrivacyPolicy": "Privacy Policy",
+    "TermsOfUse": "Terms of Use",
+    "CodeOfConduct": "Code of Conduct"
   }
 }