From 36d374fb4e86a4ffcd3a89807436f63e5f719b45 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Fri, 12 Feb 2021 04:01:57 -0600
Subject: [PATCH] fix(i18n): localize cert dates in correct format (#41041)

Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
---
 client/src/client-only-routes/ShowCertification.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/client/src/client-only-routes/ShowCertification.js b/client/src/client-only-routes/ShowCertification.js
index 192a13ad0a..e40d01f453 100644
--- a/client/src/client-only-routes/ShowCertification.js
+++ b/client/src/client-only-routes/ShowCertification.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import format from 'date-fns/format';
 import { Grid, Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
 
 import ShowProjectLinks from './ShowProjectLinks';
@@ -28,11 +27,15 @@ import { certMap } from '../../src/resources/certAndProjectMap';
 import { createFlashMessage } from '../components/Flash/redux';
 import standardErrorMessage from '../utils/standardErrorMessage';
 import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage';
+import { langCodes } from '../../i18n/allLangs';
+import { clientLocale } from '../../../config/env.json';
 
 import RedirectHome from '../components/RedirectHome';
 import { Loader, Spacer } from '../components/helpers';
 import { isEmpty } from 'lodash';
 
+const localeCode = langCodes[clientLocale];
+
 const propTypes = {
   cert: PropTypes.shape({
     username: PropTypes.string,
@@ -326,7 +329,13 @@ const ShowCertification = props => {
             <Col md={7} sm={12}>
               <div data-cy='issue-date' className='issue-date'>
                 {t('certification.issued')}&nbsp;
-                <strong>{format(certDate, 'MMMM d, y')}</strong>
+                <strong>
+                  {certDate.toLocaleString([localeCode, 'en-US'], {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                  })}
+                </strong>
               </div>
             </Col>
           </header>