From 22be72092ace27b7c4a9505dbd8ab8ebf55eadbe Mon Sep 17 00:00:00 2001
From: piet0024 <n.pietrantonio0024@live.com>
Date: Tue, 3 Nov 2020 15:17:19 -0500
Subject: [PATCH 1/8] WIP GEDS Audit feature

---
 .../profile/profileCard/GEDSAudit.js          | 460 ++++++++++++++++++
 .../profile/profileCard/GQLProfileCard.js     |  22 +-
 src/gql/profile.js                            |   6 +
 src/utils/isGovEmail.js                       |  73 +++
 4 files changed, 557 insertions(+), 4 deletions(-)
 create mode 100644 src/components/profile/profileCard/GEDSAudit.js
 create mode 100644 src/utils/isGovEmail.js

diff --git a/src/components/profile/profileCard/GEDSAudit.js b/src/components/profile/profileCard/GEDSAudit.js
new file mode 100644
index 0000000..5e0d848
--- /dev/null
+++ b/src/components/profile/profileCard/GEDSAudit.js
@@ -0,0 +1,460 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import LocalizedComponent
+  from '@gctools-components/react-i18n-translation-webpack';
+
+import { ApolloConsumer } from 'react-apollo';
+
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  Row,
+  Col,
+  Form,
+  FormGroup,
+  Label,
+  Alert
+} from 'reactstrap';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+
+import { INTEGRATION } from '../../../gql/profile';
+
+const AuditSelector = (props) => {
+  const {
+    field,
+    inputName,
+    gedsValue,
+    paasValue,
+  } = props;
+
+  return (
+    <div className="alert alert-info border-0">
+      <FormGroup tag="fieldset" className="mb-0">
+        <div className="font-weight-bold">
+          {field}
+        </div>
+        <small className="text-muted">
+          Please select data
+        </small>
+        <div>
+          <Label htmlFor={`${inputName}-1`}>
+            <input
+              type="radio"
+              id={`${inputName}-1`}
+              name={inputName}
+              className="mr-1"
+              disabled
+            />
+            {gedsValue} - <b>GEDS</b>
+          </Label>
+        </div>
+        <div>
+          <Label htmlFor={`${inputName}-2`}>
+            <input
+              type="radio"
+              id={`${inputName}-2`}
+              name={inputName}
+              className="mr-1"
+              disabled
+            />
+            {paasValue} - <b>Directory</b>
+          </Label>
+        </div>
+        <div>
+          <Label htmlFor={`${inputName}-n`}>
+            <input
+              type="radio"
+              id={`${inputName}-n`}
+              name={inputName}
+              className="mr-1"
+              disabled
+            />
+            Other
+          </Label>
+        </div>
+        <div>
+          <Label htmlFor={`${inputName}-input`}>
+            Other Input
+          </Label>
+          <input
+            type="text"
+            id={`${inputName}-input`}
+            name={`${inputName}-input`}
+            className="ml-1"
+            disabled
+          />
+        </div>
+      </FormGroup>
+    </div>
+  );
+};
+
+class GEDSAudit extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false,
+      gName: '',
+      gTitleEn: '',
+      gTitleFr: '',
+      gOfficePhone: '',
+      gMobilePhone: '',
+      gStreetAddress: '',
+      gCity: '',
+      gProvince: '',
+      gPostalCode: '',
+      gCountry: '',
+      gOrganization: '',
+    };
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      modal: !this.state.modal,
+    });
+  }
+
+  render() {
+    const formatGAddress = `
+      ${this.state.gStreetAddress}
+      ${this.state.gCity}
+      ${this.state.gProvince}
+      ${this.state.gCountry}
+      ${this.state.gPostalCode}
+    `;
+    const formatPAddress = (this.props.profile.address) && `
+      ${this.props.profile.address.streetAddress}
+      ${this.props.profile.address.city}
+      ${this.props.profile.address.province}
+      ${this.props.profile.address.country}
+      ${this.props.profile.address.postalCode}
+    `;
+    const diffs = [];
+    if (this.state.gName !== this.props.profile.name) {
+      diffs.push('auditName');
+    }
+    if (this.state.gTitleEn !== this.props.profile.titleEn) {
+      diffs.push('titleEn');
+    }
+    if (this.state.gTitleFr !== this.props.profile.titleFr) {
+      diffs.push('titleFr');
+    }
+    if (this.state.gOfficePhone !== this.props.profile.officePhone) {
+      diffs.push('auditPhone');
+    }
+    if (this.state.gMobilePhone !== this.props.profile.mobilePhone) {
+      diffs.push('auditMobile');
+    }
+    if (formatGAddress !== formatPAddress) {
+      diffs.push('auditAddress');
+    }
+    // eslint-disable-next-line
+    if (this.state.gOrganization !== this.props.profile.team.organization.nameEn) {
+      diffs.push('auditOrg');
+    }
+    const diffList = (diffs) ?
+      diffs.map(d => (
+        <li key={`${d}-key`}>
+          <a href={`#${d}-1`}>
+            {d}
+          </a>
+        </li>
+      )) : (
+        <div>
+          <FontAwesomeIcon
+            icon={faCheck}
+            className="text-success mr-1"
+          />
+          Your data is the same
+        </div>
+      );
+    return (
+      <ApolloConsumer>
+        {client => (
+          <div className="mr-2">
+            {
+              // Check for email pattern
+            }
+            <Button
+              onClick={async () => {
+                const { data } = await client.query({
+                  query: INTEGRATION,
+                  variables: {
+                    email: this.props.profile.email,
+                    source: 'GEDS',
+                  },
+                });
+                console.log(data);
+                this.setState({
+                  // eslint-disable-next-line
+                  gName: `${data.integration.en.gn} ${data.integration.en.sn}`,
+                  gTitleEn: data.integration.en.title,
+                  gTitleFr: data.integration.fr.title,
+                  gOfficePhone: data.integration.en.tn,
+                  gMobilePhone: '',
+                  gStreetAddress: data.integration.en.address,
+                  gCity: data.integration.en.city,
+                  gProvince: data.integration.en.province,
+                  gPostalCode: data.integration.en.pc,
+                  gCountry: data.integration.en.country,
+                  gOrganization: data.integration.en.department,
+                });
+                this.toggle();
+              }}
+            >
+              GEDS AUDIT
+            </Button>
+            <Modal
+              isOpen={this.state.modal}
+              toggle={this.toggle}
+              className="modal-lg"
+            >
+              <ModalHeader>
+                GEDS AUDIT
+              </ModalHeader>
+              <ModalBody>
+                <Row>
+                  <Col>
+                    <Alert color="info">
+                      {
+                        (diffs.length > 1) &&
+                          <div>There are diffs</div>
+                      }
+                      <ul>
+                        {diffList}
+                      </ul>
+                      {
+                        // if no diffs
+                      }
+                    </Alert>
+                    <Form>
+                      <div className="border p-2">
+                        <div className="font-weight-bold mb-3">
+                          Directory Information
+                        </div>
+                        <div>
+                          {
+                            // eslint-disable-next-line
+                            (this.state.gName === this.props.profile.name) ?
+                              <div className="pb-2">
+                                <FontAwesomeIcon
+                                  icon={faCheck}
+                                  className="text-success mr-1"
+                                />
+                                {this.props.profile.name}
+                              </div> :
+                              <AuditSelector
+                                field="Name"
+                                inputName="name"
+                                gedsValue={this.state.gName}
+                                paasValue={this.props.profile.name}
+                              />
+                          }
+                        </div>
+                        <div>
+                          {
+                            /*
+                            same string ? Display string :
+                            Display inputs
+                            */
+                            // eslint-disable-next-line
+                            (this.state.gTitleEn === this.props.profile.titleEn) ?
+                              <span className="pb-2">
+                                <FontAwesomeIcon
+                                  icon={faCheck}
+                                  className="text-success mr-1"
+                                />
+                                {this.props.profile.titleEn}
+                              </span> :
+                              <AuditSelector
+                                field="Job Title - English"
+                                inputName="titleEn"
+                                gedsValue={this.state.gTitleEn}
+                                paasValue={this.props.profile.titleEn}
+                              />
+                          }
+                        </div>
+                        <div>
+                          {
+                            // eslint-disable-next-line
+                            (this.state.gTitleEn === this.props.profile.titleEn) ?
+                              <div className="pb-2">
+                                <FontAwesomeIcon
+                                  icon={faCheck}
+                                  className="text-success mr-1"
+                                />
+                                {this.props.profile.titleFr}
+                              </div> :
+                              <AuditSelector
+                                field="Job Title - French"
+                                inputName="titleFr"
+                                gedsValue={this.state.gTitleFr}
+                                paasValue={this.props.profile.titleFr}
+                              />
+                          }
+                        </div>
+                        <div>
+                          {
+                            /**
+                             * Email should be correct
+                             */
+                          }
+                          <div className="pb-2">
+                            <FontAwesomeIcon
+                              icon={faCheck}
+                              className="text-success mr-1"
+                            />
+                            {this.props.profile.email}
+                          </div>
+                        </div>
+                        <div>
+                          {
+                            // eslint-disable-next-line
+                            (this.state.gOfficePhone === this.props.profile.officePhone) ?
+                              <div className="pb-2">
+                                <FontAwesomeIcon
+                                  icon={faCheck}
+                                  className="text-success mr-1"
+                                />
+                                {this.props.profile.officePhone}
+                              </div> :
+                              <AuditSelector
+                                field="Office Phone"
+                                inputName="auditPhone"
+                                gedsValue={this.state.gOfficePhone}
+                                paasValue={this.props.profile.officePhone}
+                              />
+                          }
+                        </div>
+                        <div>
+                          {
+                            // eslint-disable-next-line
+                            (this.state.gMobilePhone === this.props.profile.mobilePhone) ?
+                              <div className="pb-2">
+                                <FontAwesomeIcon
+                                  icon={faCheck}
+                                  className="text-success mr-1"
+                                />
+                                {this.props.profile.mobilePhone}
+                              </div> :
+                              <AuditSelector
+                                field="Mobile Phone"
+                                inputName="auditMobile"
+                                gedsValue={this.state.gMobilePhone}
+                                paasValue={this.props.profile.mobilePhone}
+                              />
+                          }
+                        </div>
+                        <div>
+                          {
+                            // eslint-disable-next-line
+                            (formatGAddress === formatPAddress) ?
+                              <div className="pb-2">
+                                <FontAwesomeIcon
+                                  icon={faCheck}
+                                  className="text-success mr-1"
+                                />
+                                {formatPAddress}
+                              </div> :
+                              <AuditSelector
+                                field="Office Address"
+                                inputName="auditAddress"
+                                gedsValue={formatGAddress}
+                                paasValue={formatPAddress}
+                              />
+                          }
+                        </div>
+                      </div>
+                      <div className="border mt-2 p-2">
+                        <div className="font-weight-bold mb-3">
+                          Department
+                        </div>
+                        <div>
+                          {
+                            // eslint-disable-next-line
+                            (this.state.gOrganization === this.props.profile.team.organization.nameEn) ?
+                              <div>
+                                <FontAwesomeIcon
+                                  icon={faCheck}
+                                  className="text-success mr-1"
+                                />
+                                {this.props.profile.team.organization.nameEn}
+                              </div> :
+                              <AuditSelector
+                                field="Department"
+                                inputName="auditOrg"
+                                gedsValue={this.state.gOrganization}
+                                paasValue={
+                                  this.props.profile.team.organization.nameEn
+                                }
+                              />
+                          }
+                        </div>
+                      </div>
+                    </Form>
+                  </Col>
+                </Row>
+              </ModalBody>
+            </Modal>
+          </div>
+        )}
+      </ApolloConsumer>
+    );
+  }
+}
+
+AuditSelector.defaultProps = {
+  field: '',
+  inputName: '',
+  gedsValue: '',
+  paasValue: '',
+};
+
+AuditSelector.propTypes = {
+  field: PropTypes.string,
+  inputName: PropTypes.string,
+  gedsValue: PropTypes.string,
+  paasValue: PropTypes.string,
+};
+
+GEDSAudit.defaultProps = {
+  profile: undefined,
+};
+
+GEDSAudit.propTypes = {
+  profile: PropTypes.shape({
+    name: PropTypes.string,
+    email: PropTypes.string,
+    titleEn: PropTypes.string,
+    titleFr: PropTypes.string,
+    officePhone: PropTypes.string,
+    mobilePhone: PropTypes.string,
+    address: PropTypes.shape({
+      streetAddress: PropTypes.string,
+      city: PropTypes.string,
+      province: PropTypes.string,
+      postalCode: PropTypes.string,
+      country: PropTypes.string,
+    }),
+    team: PropTypes.shape({
+      organization: PropTypes.shape({
+        id: PropTypes.string,
+        nameEn: PropTypes.string,
+        nameFr: PropTypes.string,
+      }),
+    }),
+    supervisor: PropTypes.shape({
+      gcID: PropTypes.string,
+      name: PropTypes.string,
+      titleEn: PropTypes.string,
+      titleFr: PropTypes.string,
+    }),
+  }),
+};
+
+export default LocalizedComponent(GEDSAudit);
diff --git a/src/components/profile/profileCard/GQLProfileCard.js b/src/components/profile/profileCard/GQLProfileCard.js
index 933bcf6..b1e5572 100644
--- a/src/components/profile/profileCard/GQLProfileCard.js
+++ b/src/components/profile/profileCard/GQLProfileCard.js
@@ -11,9 +11,11 @@ import { Card, CardBody, CardTitle } from 'reactstrap';
 
 import LocalizedProfileCardDisplay from './ProfileCardDisplay';
 import LocalizedEditProfile from './EditProfile';
+import LocalizedGEDSAudit from './GEDSAudit';
 import Loading from './Loading';
 import GQLYourInfoApprovalStatus from './GQLYourInfoApprovalStatus';
 
+import isGovEmail from '../../../utils/isGovEmail';
 import { GET } from '../../../gql/profile';
 
 const mapStateToProps = ({ user }) => {
@@ -62,6 +64,8 @@ export const GQLProfileCard = (props) => {
         if (loading) return <Loading />;
         if (error) return `Error!: ${error}`;
         const userInfo = (!data) ? '' : data.profiles[0];
+        // Check for a valid GC email
+        const canAudit = isGovEmail(userInfo.email);
         return (
           <Card style={style.card}>
             {userInfo ? (
@@ -74,10 +78,20 @@ export const GQLProfileCard = (props) => {
                   <CardTitle className="profile-card-title d-flex">
                     <h2 className="mr-auto">{__('Profile')}</h2>
                     {canEdit ?
-                      <LocalizedEditProfile
-                        profile={userInfo}
-                        token={accessToken}
-                      /> : ''}
+                      <div className="d-flex">
+                        {
+                          canAudit &&
+                            <LocalizedGEDSAudit
+                              profile={userInfo}
+                              gcID={userInfo.gcID}
+                              email={userInfo.email}
+                            />
+                        }
+                        <LocalizedEditProfile
+                          profile={userInfo}
+                          token={accessToken}
+                        />
+                      </div> : ''}
                   </CardTitle>
                   {canEdit && (
                     <GQLYourInfoApprovalStatus
diff --git a/src/gql/profile.js b/src/gql/profile.js
index ea0244d..3c49975 100644
--- a/src/gql/profile.js
+++ b/src/gql/profile.js
@@ -91,6 +91,12 @@ query profileSearchQuery($name: String!) {
   }
 }`;
 
+export const INTEGRATION = gql`
+query profileIntegrationQuery($email: EmailAddress!, 
+  $source: IntegrationSources!) {
+    integration(email: $email, source: $source)
+}`;
+
 export const GET_YOUR_TEAM_APPROVAL = gql`
 query getYourApproval($gcIDSubmitter: gcIDProfileInput!) {
   approvals(
diff --git a/src/utils/isGovEmail.js b/src/utils/isGovEmail.js
new file mode 100644
index 0000000..7f6a006
--- /dev/null
+++ b/src/utils/isGovEmail.js
@@ -0,0 +1,73 @@
+const domains = [
+  'cmhc-schl.gc.ca',
+  'cfmws.com',
+  'cbc.ca',
+  // ola.org,
+  'ccc.ca',
+  'forces.gc.ca',
+  'ccohs.ca',
+  // investpsp.ca,
+  // invcanada.ca,
+  '.gc.ca',
+  // glpa-apgl.com,
+  // museedelaguerre.ca,
+  // warmuseum.ca,
+  'nature.ca',
+  // quai21.ca,
+  // pier21.ca,
+  // museedelhistoire.ca,
+  // historymuseum.ca,
+  // viarail.ca,
+  // wdbridge.com,
+  'scc.ca',
+  // seaway.ca,
+  'mint.ca',
+  // sct-trp.ca,
+  'onf.ca',
+  'nfb.ca',
+  'ncc-ccn.ca',
+  // mentalhealthcommission.ca,
+  'crdi.ca',
+  'idrc.ca',
+  'ijc.org',
+  // trc.ca,
+  'federalbridge.ca',
+  'fcc-fac.ca',
+  'edc.ca',
+  // destinationcanada.com,
+  // ctc-cct.ca,
+  // elections.ca,
+  // droitsdelapersonne.ca,
+  // humanrights.ca,
+  // schl.ca,
+  // cmhc.ca,
+  // techno-science.ca,
+  // postescanada.ca,
+  // canadapost.ca,
+  // clc.ca,
+  // Innovation.ca,
+  // cdic.ca,
+  // conseildesarts.ca,
+  // canadacouncil.ca,
+  // bdc.ca,
+  'bankofcanada.ca',
+  'bank-banque-canada.ca',
+  // aecl.ca,
+  // asiapacific.ca,
+  'canada.ca',
+];
+
+let govEmail = false;
+
+const isGovEmail = (email) => {
+  domains.map((value) => {
+    if (email.includes(value)) {
+      govEmail = true;
+    }
+    return null;
+  });
+
+  return govEmail;
+};
+
+export default isGovEmail;

From 8ee1e84187a004b1387636b4e8d13e91e30dc3c2 Mon Sep 17 00:00:00 2001
From: piet0024 <n.pietrantonio0024@live.com>
Date: Wed, 4 Nov 2020 14:40:33 -0500
Subject: [PATCH 2/8] adding language strings

---
 .../profile/profileCard/GEDSAudit.js.po       | 85 +++++++++++++++++++
 .../profile/profileCard/GEDSAudit.js.po       | 85 +++++++++++++++++++
 .../profile/profileCard/GEDSAudit.js          | 56 ++++++++----
 3 files changed, 208 insertions(+), 18 deletions(-)
 create mode 100644 i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
 create mode 100644 i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po

diff --git a/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po b/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
new file mode 100644
index 0000000..883eda4
--- /dev/null
+++ b/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
@@ -0,0 +1,85 @@
+
+msgid ""
+msgstr ""
+"Project-Id-Version: PROJECT VERSION\n"
+"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
+"POT-Creation-Date: 2019-04-16 13:18-0400\n"
+"PO-Revision-Date: 2019-02-13 10:51-0500\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language: en_CA\n"
+"Language-Team: en_CA <LL@li.org>\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Generated-By: Babel 2.6.0\n"
+
+#: 28:67 src/components/profile/profileCard/ProfileCardDisplay.js
+msgid "Please select data"
+msgstr ""
+
+msgid "Other"
+msgstr ""
+
+msgid "Other Value"
+msgstr ""
+
+msgid "Your data is the same"
+msgstr ""
+
+msgid "GEDS Audit"
+msgstr ""
+
+msgid "GEDS Audit"
+msgstr ""
+
+msgid "There are differences"
+msgstr ""
+
+msgid "Directory Information"
+msgstr ""
+
+msgid "Name"
+msgstr ""
+
+msgid "Job Title - English"
+msgstr ""
+
+msgid "Job Title - French"
+msgstr ""
+
+msgid "Office Phone"
+msgstr ""
+
+msgid "Mobile Phone"
+msgstr ""
+
+msgid "Office Address"
+msgstr ""
+
+msgid "Department"
+msgstr ""
+
+msgid "Department"
+msgstr ""
+
+msgid "auditName"
+msgstr "Name"
+
+msgid "titleEn"
+msgstr "Job Title - English"
+
+msgid "titleFr"
+msgstr "Job Title - French"
+
+msgid "auditPhone"
+msgstr "Office Phone"
+
+msgid "auditMobile"
+msgstr "Mobile Phone"
+
+msgid "auditAddress"
+msgstr "Office Address"
+
+msgid "auditOrg"
+msgstr "Department"
diff --git a/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po b/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
new file mode 100644
index 0000000..18760d8
--- /dev/null
+++ b/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
@@ -0,0 +1,85 @@
+
+msgid ""
+msgstr ""
+"Project-Id-Version: PROJECT VERSION\n"
+"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
+"POT-Creation-Date: 2019-04-16 13:18-0400\n"
+"PO-Revision-Date: 2019-02-13 10:51-0500\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language: fr_CA\n"
+"Language-Team: fr_CA <LL@li.org>\n"
+"Plural-Forms: nplurals=2; plural=(n > 1)\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Generated-By: Babel 2.6.0\n"
+
+#: 28:67 src/components/profile/profileCard/ProfileCardDisplay.js
+msgid "Please select data"
+msgstr ""
+
+msgid "Other"
+msgstr ""
+
+msgid "Other Value"
+msgstr ""
+
+msgid "Your data is the same"
+msgstr ""
+
+msgid "GEDS Audit"
+msgstr ""
+
+msgid "GEDS Audit"
+msgstr ""
+
+msgid "There are differences"
+msgstr ""
+
+msgid "Directory Information"
+msgstr ""
+
+msgid "Name"
+msgstr ""
+
+msgid "Job Title - English"
+msgstr ""
+
+msgid "Job Title - French"
+msgstr ""
+
+msgid "Office Phone"
+msgstr ""
+
+msgid "Mobile Phone"
+msgstr ""
+
+msgid "Office Address"
+msgstr ""
+
+msgid "Department"
+msgstr ""
+
+msgid "Department"
+msgstr ""
+
+msgid "auditName"
+msgstr ""
+
+msgid "titleEn"
+msgstr ""
+
+msgid "titleFr"
+msgstr ""
+
+msgid "auditPhone"
+msgstr ""
+
+msgid "auditMobile"
+msgstr ""
+
+msgid "auditAddress"
+msgstr ""
+
+msgid "auditOrg"
+msgstr ""
diff --git a/src/components/profile/profileCard/GEDSAudit.js b/src/components/profile/profileCard/GEDSAudit.js
index 5e0d848..064cd3f 100644
--- a/src/components/profile/profileCard/GEDSAudit.js
+++ b/src/components/profile/profileCard/GEDSAudit.js
@@ -38,7 +38,7 @@ const AuditSelector = (props) => {
           {field}
         </div>
         <small className="text-muted">
-          Please select data
+          {__('Please select data')}
         </small>
         <div>
           <Label htmlFor={`${inputName}-1`}>
@@ -73,12 +73,12 @@ const AuditSelector = (props) => {
               className="mr-1"
               disabled
             />
-            Other
+            {__('Other')}
           </Label>
         </div>
         <div>
           <Label htmlFor={`${inputName}-input`}>
-            Other Input
+            {__('Other Value')}
           </Label>
           <input
             type="text"
@@ -161,7 +161,28 @@ class GEDSAudit extends Component {
       diffs.map(d => (
         <li key={`${d}-key`}>
           <a href={`#${d}-1`}>
-            {d}
+            {
+              (d === 'auditName') &&
+                <span>{__('auditName')}</span>
+            }{
+              (d === 'titleEn') &&
+                <span>{__('titleEn')}</span>
+            }{
+              (d === 'titleFr') &&
+                <span>{__('titleFr')}</span>
+            }{
+              (d === 'auditPhone') &&
+                <span>{__('auditPhone')}</span>
+            }{
+              (d === 'auditMobile') &&
+                <span>{__('auditMobile')}</span>
+            }{
+              (d === 'auditAddress') &&
+                <span>{__('auditAddress')}</span>
+            }{
+              (d === 'auditOrg') &&
+                <span>{__('auditOrg')}</span>
+            }
           </a>
         </li>
       )) : (
@@ -170,7 +191,7 @@ class GEDSAudit extends Component {
             icon={faCheck}
             className="text-success mr-1"
           />
-          Your data is the same
+          {__('Your data is the same')}
         </div>
       );
     return (
@@ -189,7 +210,6 @@ class GEDSAudit extends Component {
                     source: 'GEDS',
                   },
                 });
-                console.log(data);
                 this.setState({
                   // eslint-disable-next-line
                   gName: `${data.integration.en.gn} ${data.integration.en.sn}`,
@@ -207,7 +227,7 @@ class GEDSAudit extends Component {
                 this.toggle();
               }}
             >
-              GEDS AUDIT
+              {__('GEDS Audit')}
             </Button>
             <Modal
               isOpen={this.state.modal}
@@ -215,7 +235,7 @@ class GEDSAudit extends Component {
               className="modal-lg"
             >
               <ModalHeader>
-                GEDS AUDIT
+                {__('GEDS Audit')}
               </ModalHeader>
               <ModalBody>
                 <Row>
@@ -223,7 +243,7 @@ class GEDSAudit extends Component {
                     <Alert color="info">
                       {
                         (diffs.length > 1) &&
-                          <div>There are diffs</div>
+                          <div>{__('There are differences')}</div>
                       }
                       <ul>
                         {diffList}
@@ -235,7 +255,7 @@ class GEDSAudit extends Component {
                     <Form>
                       <div className="border p-2">
                         <div className="font-weight-bold mb-3">
-                          Directory Information
+                          {__('Directory Information')}
                         </div>
                         <div>
                           {
@@ -249,7 +269,7 @@ class GEDSAudit extends Component {
                                 {this.props.profile.name}
                               </div> :
                               <AuditSelector
-                                field="Name"
+                                field={__('Name')}
                                 inputName="name"
                                 gedsValue={this.state.gName}
                                 paasValue={this.props.profile.name}
@@ -272,7 +292,7 @@ class GEDSAudit extends Component {
                                 {this.props.profile.titleEn}
                               </span> :
                               <AuditSelector
-                                field="Job Title - English"
+                                field={__('Job Title - English')}
                                 inputName="titleEn"
                                 gedsValue={this.state.gTitleEn}
                                 paasValue={this.props.profile.titleEn}
@@ -291,7 +311,7 @@ class GEDSAudit extends Component {
                                 {this.props.profile.titleFr}
                               </div> :
                               <AuditSelector
-                                field="Job Title - French"
+                                field={__('Job Title - French')}
                                 inputName="titleFr"
                                 gedsValue={this.state.gTitleFr}
                                 paasValue={this.props.profile.titleFr}
@@ -324,7 +344,7 @@ class GEDSAudit extends Component {
                                 {this.props.profile.officePhone}
                               </div> :
                               <AuditSelector
-                                field="Office Phone"
+                                field={__('Office Phone')}
                                 inputName="auditPhone"
                                 gedsValue={this.state.gOfficePhone}
                                 paasValue={this.props.profile.officePhone}
@@ -343,7 +363,7 @@ class GEDSAudit extends Component {
                                 {this.props.profile.mobilePhone}
                               </div> :
                               <AuditSelector
-                                field="Mobile Phone"
+                                field={__('Mobile Phone')}
                                 inputName="auditMobile"
                                 gedsValue={this.state.gMobilePhone}
                                 paasValue={this.props.profile.mobilePhone}
@@ -362,7 +382,7 @@ class GEDSAudit extends Component {
                                 {formatPAddress}
                               </div> :
                               <AuditSelector
-                                field="Office Address"
+                                field={__('Office Address')}
                                 inputName="auditAddress"
                                 gedsValue={formatGAddress}
                                 paasValue={formatPAddress}
@@ -372,7 +392,7 @@ class GEDSAudit extends Component {
                       </div>
                       <div className="border mt-2 p-2">
                         <div className="font-weight-bold mb-3">
-                          Department
+                          {__('Department')}
                         </div>
                         <div>
                           {
@@ -386,7 +406,7 @@ class GEDSAudit extends Component {
                                 {this.props.profile.team.organization.nameEn}
                               </div> :
                               <AuditSelector
-                                field="Department"
+                                field={__('Department')}
                                 inputName="auditOrg"
                                 gedsValue={this.state.gOrganization}
                                 paasValue={

From c968c796ec99a0e799aeb7d148f0e94bba46b171 Mon Sep 17 00:00:00 2001
From: piet0024 <n.pietrantonio0024@live.com>
Date: Thu, 5 Nov 2020 10:38:43 -0500
Subject: [PATCH 3/8] loading state and cleanup

---
 .../profile/profileCard/GEDSAudit.js          | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/profile/profileCard/GEDSAudit.js b/src/components/profile/profileCard/GEDSAudit.js
index 064cd3f..72fcb29 100644
--- a/src/components/profile/profileCard/GEDSAudit.js
+++ b/src/components/profile/profileCard/GEDSAudit.js
@@ -19,7 +19,7 @@ import {
 } from 'reactstrap';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 import { INTEGRATION } from '../../../gql/profile';
 
@@ -98,6 +98,7 @@ class GEDSAudit extends Component {
     super(props);
     this.state = {
       modal: false,
+      loading: false,
       gName: '',
       gTitleEn: '',
       gTitleFr: '',
@@ -198,11 +199,11 @@ class GEDSAudit extends Component {
       <ApolloConsumer>
         {client => (
           <div className="mr-2">
-            {
-              // Check for email pattern
-            }
             <Button
               onClick={async () => {
+                this.setState({
+                  loading: true,
+                });
                 const { data } = await client.query({
                   query: INTEGRATION,
                   variables: {
@@ -225,9 +226,22 @@ class GEDSAudit extends Component {
                   gOrganization: data.integration.en.department,
                 });
                 this.toggle();
+                this.setState({
+                  loading: false,
+                });
               }}
+              disabled={this.state.loading}
             >
-              {__('GEDS Audit')}
+              {
+                (this.state.loading) ?
+                  <FontAwesomeIcon
+                    icon={faSpinner}
+                    spin
+                  /> :
+                  <span>
+                    {__('GEDS Audit')}
+                  </span>
+              }
             </Button>
             <Modal
               isOpen={this.state.modal}

From 28ff232091fbdd96dc61047acca76286b7de395d Mon Sep 17 00:00:00 2001
From: piet0024 <n.pietrantonio0024@live.com>
Date: Wed, 18 Nov 2020 14:44:04 -0500
Subject: [PATCH 4/8] WIP GEDS Audit mutation

---
 .../profile/profileCard/GEDSAudit.js          | 431 +++++++++++-------
 1 file changed, 265 insertions(+), 166 deletions(-)

diff --git a/src/components/profile/profileCard/GEDSAudit.js b/src/components/profile/profileCard/GEDSAudit.js
index 72fcb29..424a50c 100644
--- a/src/components/profile/profileCard/GEDSAudit.js
+++ b/src/components/profile/profileCard/GEDSAudit.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import LocalizedComponent
   from '@gctools-components/react-i18n-translation-webpack';
 
-import { ApolloConsumer } from 'react-apollo';
+import { ApolloConsumer, Mutation } from 'react-apollo';
 
 import {
   Button,
@@ -21,7 +21,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
 
-import { INTEGRATION } from '../../../gql/profile';
+import { INTEGRATION, EDIT, prepareEditProfile } from '../../../gql/profile';
 
 const AuditSelector = (props) => {
   const {
@@ -29,6 +29,7 @@ const AuditSelector = (props) => {
     inputName,
     gedsValue,
     paasValue,
+    changeFunc,
   } = props;
 
   return (
@@ -47,7 +48,8 @@ const AuditSelector = (props) => {
               id={`${inputName}-1`}
               name={inputName}
               className="mr-1"
-              disabled
+              onChange={changeFunc}
+              value={gedsValue}
             />
             {gedsValue} - <b>GEDS</b>
           </Label>
@@ -59,7 +61,8 @@ const AuditSelector = (props) => {
               id={`${inputName}-2`}
               name={inputName}
               className="mr-1"
-              disabled
+              onChange={changeFunc}
+              value={paasValue}
             />
             {paasValue} - <b>Directory</b>
           </Label>
@@ -71,7 +74,8 @@ const AuditSelector = (props) => {
               id={`${inputName}-n`}
               name={inputName}
               className="mr-1"
-              disabled
+              onChange={changeFunc}
+              value="Other"
             />
             {__('Other')}
           </Label>
@@ -85,7 +89,6 @@ const AuditSelector = (props) => {
             id={`${inputName}-input`}
             name={`${inputName}-input`}
             className="ml-1"
-            disabled
           />
         </div>
       </FormGroup>
@@ -112,6 +115,7 @@ class GEDSAudit extends Component {
       gOrganization: '',
     };
     this.toggle = this.toggle.bind(this);
+    this.handleChange = this.handleChange.bind(this);
   }
 
   toggle() {
@@ -120,6 +124,36 @@ class GEDSAudit extends Component {
     });
   }
 
+  handleChange(e) {
+    const { name, value, id } = e.target;
+
+    if (name === 'auditAddress') {
+      if (id === 'auditAddress-1') {
+        this.setState({
+          streetAddress: this.state.gStreetAddress,
+          city: this.state.gCity,
+          province: this.state.gProvince,
+          country: this.state.gCountry,
+          postalCode: this.state.gPostalCode,
+        });
+      } else if (id === 'auditAddress-2') {
+        this.setState({
+          streetAddress: this.props.profile.address.streetAddress,
+          city: this.props.profile.address.city,
+          province: this.props.profile.address.province,
+          country: this.props.profile.address.country,
+          postalCode: this.props.profile.address.postalCode,
+        });
+      }
+    } else {
+      this.setState({
+        [name]: value,
+      });
+    }
+    console.log(`${name} and ${value}`);
+    console.log(this.state);
+  }
+
   render() {
     const formatGAddress = `
       ${this.state.gStreetAddress}
@@ -239,7 +273,7 @@ class GEDSAudit extends Component {
                     spin
                   /> :
                   <span>
-                    {__('GEDS Audit')}
+                    {__('GEDS Audit')} - (BETA)
                   </span>
               }
             </Button>
@@ -266,171 +300,233 @@ class GEDSAudit extends Component {
                         // if no diffs
                       }
                     </Alert>
-                    <Form>
-                      <div className="border p-2">
-                        <div className="font-weight-bold mb-3">
-                          {__('Directory Information')}
-                        </div>
-                        <div>
-                          {
-                            // eslint-disable-next-line
-                            (this.state.gName === this.props.profile.name) ?
-                              <div className="pb-2">
-                                <FontAwesomeIcon
-                                  icon={faCheck}
-                                  className="text-success mr-1"
-                                />
-                                {this.props.profile.name}
-                              </div> :
-                              <AuditSelector
-                                field={__('Name')}
-                                inputName="name"
-                                gedsValue={this.state.gName}
-                                paasValue={this.props.profile.name}
-                              />
-                          }
-                        </div>
-                        <div>
-                          {
-                            /*
-                            same string ? Display string :
-                            Display inputs
-                            */
-                            // eslint-disable-next-line
-                            (this.state.gTitleEn === this.props.profile.titleEn) ?
-                              <span className="pb-2">
-                                <FontAwesomeIcon
-                                  icon={faCheck}
-                                  className="text-success mr-1"
-                                />
-                                {this.props.profile.titleEn}
-                              </span> :
-                              <AuditSelector
-                                field={__('Job Title - English')}
-                                inputName="titleEn"
-                                gedsValue={this.state.gTitleEn}
-                                paasValue={this.props.profile.titleEn}
-                              />
-                          }
-                        </div>
-                        <div>
-                          {
-                            // eslint-disable-next-line
-                            (this.state.gTitleEn === this.props.profile.titleEn) ?
+                    <Mutation
+                      mutation={EDIT}
+                      onError={(error) => {
+                        console.log(error);
+                      }}
+                      context={
+                        {
+                          headers: {
+                            integrationsource: 'GEDS',
+                          },
+                        }
+                      }
+                    >
+                      {(modifyProfile, { loading }) => (
+                        <Form
+                          onSubmit={(e) => {
+                            e.preventDefault();
+                            const {
+                              auditName, titleEn, titleFr,
+                              auditPhone, auditMobile,
+                              streetAddress, city, province,
+                              postalCode, country,
+                            } = this.state;
+                            modifyProfile(prepareEditProfile({
+                              gcID: this.props.profile.gcID,
+                              auditName,
+                              email: this.props.profile.email,
+                              titleEn,
+                              titleFr,
+                              auditPhone,
+                              auditMobile,
+                              streetAddress,
+                              city,
+                              province,
+                              postalCode,
+                              country,
+                            }));
+                          }}
+                        >
+                          <div className="border p-2">
+                            <div className="font-weight-bold mb-3">
+                              {__('Directory Information')}
+                            </div>
+                            <div>
+                              {
+                                // eslint-disable-next-line
+                                (this.state.gName === this.props.profile.name) ?
+                                  <div className="pb-2">
+                                    <FontAwesomeIcon
+                                      icon={faCheck}
+                                      className="text-success mr-1"
+                                    />
+                                    {this.props.profile.name}
+                                  </div> :
+                                  <AuditSelector
+                                    field={__('Name')}
+                                    inputName="name"
+                                    gedsValue={this.state.gName}
+                                    paasValue={this.props.profile.name}
+                                    changeFunc={this.handleChange}
+                                  />
+                              }
+                            </div>
+                            <div>
+                              {
+                                /*
+                                same string ? Display string :
+                                Display inputs
+                                */
+                                // eslint-disable-next-line
+                                (this.state.gTitleEn === this.props.profile.titleEn) ?
+                                  <span className="pb-2">
+                                    <FontAwesomeIcon
+                                      icon={faCheck}
+                                      className="text-success mr-1"
+                                    />
+                                    {this.props.profile.titleEn}
+                                  </span> :
+                                  <AuditSelector
+                                    field={__('Job Title - English')}
+                                    inputName="titleEn"
+                                    gedsValue={this.state.gTitleEn}
+                                    paasValue={this.props.profile.titleEn}
+                                    changeFunc={this.handleChange}
+                                  />
+                              }
+                            </div>
+                            <div>
+                              {
+                                // eslint-disable-next-line
+                                (this.state.gTitleEn === this.props.profile.titleEn) ?
+                                  <div className="pb-2">
+                                    <FontAwesomeIcon
+                                      icon={faCheck}
+                                      className="text-success mr-1"
+                                    />
+                                    {this.props.profile.titleFr}
+                                  </div> :
+                                  <AuditSelector
+                                    field={__('Job Title - French')}
+                                    inputName="titleFr"
+                                    gedsValue={this.state.gTitleFr}
+                                    paasValue={this.props.profile.titleFr}
+                                    changeFunc={this.handleChange}
+                                  />
+                              }
+                            </div>
+                            <div>
+                              {
+                                /**
+                                 * Email should be correct
+                                 */
+                              }
                               <div className="pb-2">
                                 <FontAwesomeIcon
                                   icon={faCheck}
                                   className="text-success mr-1"
                                 />
-                                {this.props.profile.titleFr}
-                              </div> :
-                              <AuditSelector
-                                field={__('Job Title - French')}
-                                inputName="titleFr"
-                                gedsValue={this.state.gTitleFr}
-                                paasValue={this.props.profile.titleFr}
-                              />
-                          }
-                        </div>
-                        <div>
-                          {
-                            /**
-                             * Email should be correct
-                             */
-                          }
-                          <div className="pb-2">
-                            <FontAwesomeIcon
-                              icon={faCheck}
-                              className="text-success mr-1"
-                            />
-                            {this.props.profile.email}
+                                {this.props.profile.email}
+                              </div>
+                            </div>
+                            <div>
+                              {
+                                // eslint-disable-next-line
+                                (this.state.gOfficePhone === this.props.profile.officePhone) ?
+                                  <div className="pb-2">
+                                    <FontAwesomeIcon
+                                      icon={faCheck}
+                                      className="text-success mr-1"
+                                    />
+                                    {this.props.profile.officePhone}
+                                  </div> :
+                                  <AuditSelector
+                                    field={__('Office Phone')}
+                                    inputName="auditPhone"
+                                    gedsValue={this.state.gOfficePhone}
+                                    paasValue={this.props.profile.officePhone}
+                                    changeFunc={this.handleChange}
+                                  />
+                              }
+                            </div>
+                            <div>
+                              {
+                                // eslint-disable-next-line
+                                (this.state.gMobilePhone === this.props.profile.mobilePhone) ?
+                                  <div className="pb-2">
+                                    <FontAwesomeIcon
+                                      icon={faCheck}
+                                      className="text-success mr-1"
+                                    />
+                                    {this.props.profile.mobilePhone}
+                                  </div> :
+                                  <AuditSelector
+                                    field={__('Mobile Phone')}
+                                    inputName="auditMobile"
+                                    gedsValue={this.state.gMobilePhone}
+                                    paasValue={this.props.profile.mobilePhone}
+                                    changeFunc={this.handleChange}
+                                  />
+                              }
+                            </div>
+                            <div>
+                              {
+                                // eslint-disable-next-line
+                                (formatGAddress === formatPAddress) ?
+                                  <div className="pb-2">
+                                    <FontAwesomeIcon
+                                      icon={faCheck}
+                                      className="text-success mr-1"
+                                    />
+                                    {formatPAddress}
+                                  </div> :
+                                  <AuditSelector
+                                    field={__('Office Address')}
+                                    inputName="auditAddress"
+                                    gedsValue={formatGAddress}
+                                    paasValue={formatPAddress}
+                                    changeFunc={this.handleChange}
+                                  />
+                              }
+                            </div>
                           </div>
-                        </div>
-                        <div>
-                          {
-                            // eslint-disable-next-line
-                            (this.state.gOfficePhone === this.props.profile.officePhone) ?
-                              <div className="pb-2">
-                                <FontAwesomeIcon
-                                  icon={faCheck}
-                                  className="text-success mr-1"
-                                />
-                                {this.props.profile.officePhone}
-                              </div> :
-                              <AuditSelector
-                                field={__('Office Phone')}
-                                inputName="auditPhone"
-                                gedsValue={this.state.gOfficePhone}
-                                paasValue={this.props.profile.officePhone}
-                              />
-                          }
-                        </div>
-                        <div>
-                          {
-                            // eslint-disable-next-line
-                            (this.state.gMobilePhone === this.props.profile.mobilePhone) ?
-                              <div className="pb-2">
-                                <FontAwesomeIcon
-                                  icon={faCheck}
-                                  className="text-success mr-1"
-                                />
-                                {this.props.profile.mobilePhone}
-                              </div> :
-                              <AuditSelector
-                                field={__('Mobile Phone')}
-                                inputName="auditMobile"
-                                gedsValue={this.state.gMobilePhone}
-                                paasValue={this.props.profile.mobilePhone}
-                              />
-                          }
-                        </div>
-                        <div>
-                          {
-                            // eslint-disable-next-line
-                            (formatGAddress === formatPAddress) ?
-                              <div className="pb-2">
-                                <FontAwesomeIcon
-                                  icon={faCheck}
-                                  className="text-success mr-1"
-                                />
-                                {formatPAddress}
-                              </div> :
-                              <AuditSelector
-                                field={__('Office Address')}
-                                inputName="auditAddress"
-                                gedsValue={formatGAddress}
-                                paasValue={formatPAddress}
-                              />
-                          }
-                        </div>
-                      </div>
-                      <div className="border mt-2 p-2">
-                        <div className="font-weight-bold mb-3">
-                          {__('Department')}
-                        </div>
-                        <div>
-                          {
-                            // eslint-disable-next-line
-                            (this.state.gOrganization === this.props.profile.team.organization.nameEn) ?
-                              <div>
-                                <FontAwesomeIcon
-                                  icon={faCheck}
-                                  className="text-success mr-1"
-                                />
-                                {this.props.profile.team.organization.nameEn}
-                              </div> :
-                              <AuditSelector
-                                field={__('Department')}
-                                inputName="auditOrg"
-                                gedsValue={this.state.gOrganization}
-                                paasValue={
-                                  this.props.profile.team.organization.nameEn
-                                }
-                              />
-                          }
-                        </div>
-                      </div>
-                    </Form>
+                          <div className="border mt-2 p-2">
+                            <div className="font-weight-bold mb-3">
+                              {__('Department')}
+                            </div>
+                            <div>
+                              {
+                                // eslint-disable-next-line
+                                (this.state.gOrganization === this.props.profile.team.organization.nameEn) ?
+                                  <div>
+                                    <FontAwesomeIcon
+                                      icon={faCheck}
+                                      className="text-success mr-1"
+                                    />
+                                    {
+                                      // eslint-disable-next-line
+                                      this.props.profile.team.organization.nameEn
+                                    }
+                                  </div> :
+                                  <AuditSelector
+                                    field={__('Department')}
+                                    inputName="auditOrg"
+                                    gedsValue={this.state.gOrganization}
+                                    paasValue={
+                                      // eslint-disable-next-line
+                                      this.props.profile.team.organization.nameEn
+                                    }
+                                    changeFunc={this.handleChange}
+                                  />
+                              }
+                            </div>
+                          </div>
+                          <div className="profile-card-footer">
+                            <Button
+                              size="sm"
+                              className="float-right"
+                              type="submit"
+                              color="primary"
+                              disabled={loading}
+                            >
+                              Save
+                            </Button>
+                          </div>
+                        </Form>
+                      )}
+                    </Mutation>
                   </Col>
                 </Row>
               </ModalBody>
@@ -447,6 +543,7 @@ AuditSelector.defaultProps = {
   inputName: '',
   gedsValue: '',
   paasValue: '',
+  changeFunc: () => {},
 };
 
 AuditSelector.propTypes = {
@@ -454,6 +551,7 @@ AuditSelector.propTypes = {
   inputName: PropTypes.string,
   gedsValue: PropTypes.string,
   paasValue: PropTypes.string,
+  changeFunc: PropTypes.func,
 };
 
 GEDSAudit.defaultProps = {
@@ -462,6 +560,7 @@ GEDSAudit.defaultProps = {
 
 GEDSAudit.propTypes = {
   profile: PropTypes.shape({
+    gcID: PropTypes.string,
     name: PropTypes.string,
     email: PropTypes.string,
     titleEn: PropTypes.string,

From 9b2216ef686b8559d1d5d631947972272b3f4ee8 Mon Sep 17 00:00:00 2001
From: piet0024 <n.pietrantonio0024@live.com>
Date: Tue, 24 Nov 2020 14:21:05 -0500
Subject: [PATCH 5/8] Adding translations

---
 .../profile/profileCard/GEDSAudit.js.po       |  6 ++---
 .../profile/profileCard/GEDSAudit.js.po       | 24 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po b/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
index 883eda4..645d61d 100644
--- a/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
+++ b/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
@@ -16,7 +16,7 @@ msgstr ""
 
 #: 28:67 src/components/profile/profileCard/ProfileCardDisplay.js
 msgid "Please select data"
-msgstr ""
+msgstr "Please select the correct information"
 
 msgid "Other"
 msgstr ""
@@ -25,7 +25,7 @@ msgid "Other Value"
 msgstr ""
 
 msgid "Your data is the same"
-msgstr ""
+msgstr "You Directory and GEDS information are the same"
 
 msgid "GEDS Audit"
 msgstr ""
@@ -34,7 +34,7 @@ msgid "GEDS Audit"
 msgstr ""
 
 msgid "There are differences"
-msgstr ""
+msgstr "We have found differences in the following information:"
 
 msgid "Directory Information"
 msgstr ""
diff --git a/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po b/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
index 18760d8..7f7bf33 100644
--- a/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
+++ b/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
@@ -16,7 +16,7 @@ msgstr ""
 
 #: 28:67 src/components/profile/profileCard/ProfileCardDisplay.js
 msgid "Please select data"
-msgstr ""
+msgstr "Veuillez sélectionner les renseignements exacts"
 
 msgid "Other"
 msgstr ""
@@ -25,37 +25,37 @@ msgid "Other Value"
 msgstr ""
 
 msgid "Your data is the same"
-msgstr ""
+msgstr "Votre répertoire et les renseignements du SAGE sont les mêmes"
 
 msgid "GEDS Audit"
-msgstr ""
+msgstr "Vérification du SAGE"
 
 msgid "GEDS Audit"
-msgstr ""
+msgstr "Vérification du SAGE"
 
 msgid "There are differences"
-msgstr ""
+msgstr "Nous avons constaté des différences dans les renseignements suivants :"
 
 msgid "Directory Information"
-msgstr ""
+msgstr "Renseignements du répertoire"
 
 msgid "Name"
-msgstr ""
+msgstr "Nom"
 
 msgid "Job Title - English"
-msgstr ""
+msgstr "Titre du poste - Anglais"
 
 msgid "Job Title - French"
-msgstr ""
+msgstr "Titre du poste - Français"
 
 msgid "Office Phone"
-msgstr ""
+msgstr "Téléphone"
 
 msgid "Mobile Phone"
-msgstr ""
+msgstr "Cellulaire"
 
 msgid "Office Address"
-msgstr ""
+msgstr "Adresse au travail"
 
 msgid "Department"
 msgstr ""

From 1cbe982ae9ab7b05361f92bd08133b61eb2e75f0 Mon Sep 17 00:00:00 2001
From: piet0024 <n.pietrantonio0024@live.com>
Date: Mon, 30 Nov 2020 13:52:41 -0500
Subject: [PATCH 6/8] update mutation state fix + small cleanup

---
 .../profile/profileCard/GEDSAudit.js          | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/profile/profileCard/GEDSAudit.js b/src/components/profile/profileCard/GEDSAudit.js
index 424a50c..d516468 100644
--- a/src/components/profile/profileCard/GEDSAudit.js
+++ b/src/components/profile/profileCard/GEDSAudit.js
@@ -150,8 +150,6 @@ class GEDSAudit extends Component {
         [name]: value,
       });
     }
-    console.log(`${name} and ${value}`);
-    console.log(this.state);
   }
 
   render() {
@@ -296,9 +294,6 @@ class GEDSAudit extends Component {
                       <ul>
                         {diffList}
                       </ul>
-                      {
-                        // if no diffs
-                      }
                     </Alert>
                     <Mutation
                       mutation={EDIT}
@@ -312,11 +307,25 @@ class GEDSAudit extends Component {
                           },
                         }
                       }
+                      onCompleted={() => {
+                        this.setState({
+                          loading: false,
+                          modal: false,
+                        });
+                      }}
                     >
                       {(modifyProfile, { loading }) => (
                         <Form
                           onSubmit={(e) => {
                             e.preventDefault();
+                            // updating the state
+                            this.handleChange({
+                              target: {
+                                name: 'update',
+                                val: 'update',
+                                id: 'update',
+                              },
+                            });
                             const {
                               auditName, titleEn, titleFr,
                               auditPhone, auditMobile,
@@ -325,12 +334,12 @@ class GEDSAudit extends Component {
                             } = this.state;
                             modifyProfile(prepareEditProfile({
                               gcID: this.props.profile.gcID,
-                              auditName,
+                              name: auditName,
                               email: this.props.profile.email,
                               titleEn,
                               titleFr,
-                              auditPhone,
-                              auditMobile,
+                              officePhone: auditPhone,
+                              mobilePhone: auditMobile,
                               streetAddress,
                               city,
                               province,
@@ -390,7 +399,7 @@ class GEDSAudit extends Component {
                             <div>
                               {
                                 // eslint-disable-next-line
-                                (this.state.gTitleEn === this.props.profile.titleEn) ?
+                                (this.state.gTitleFr === this.props.profile.titleFr) ?
                                   <div className="pb-2">
                                     <FontAwesomeIcon
                                       icon={faCheck}

From 52666b76c0adb739c8719faebcccedf82738e6b8 Mon Sep 17 00:00:00 2001
From: piet0024 <n.pietrantonio0024@live.com>
Date: Tue, 8 Dec 2020 11:35:30 -0500
Subject: [PATCH 7/8] update other form + phone pattern

---
 .../profile/profileCard/GEDSAudit.js          | 86 +++++++++++++------
 1 file changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/components/profile/profileCard/GEDSAudit.js b/src/components/profile/profileCard/GEDSAudit.js
index d516468..6e80d2a 100644
--- a/src/components/profile/profileCard/GEDSAudit.js
+++ b/src/components/profile/profileCard/GEDSAudit.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import PropTypes from 'prop-types';
 import LocalizedComponent
   from '@gctools-components/react-i18n-translation-webpack';
@@ -32,6 +32,7 @@ const AuditSelector = (props) => {
     changeFunc,
   } = props;
 
+  const [otherSel, setOtherSel] = useState(false);
   return (
     <div className="alert alert-info border-0">
       <FormGroup tag="fieldset" className="mb-0">
@@ -48,7 +49,10 @@ const AuditSelector = (props) => {
               id={`${inputName}-1`}
               name={inputName}
               className="mr-1"
-              onChange={changeFunc}
+              onChange={(e) => {
+                changeFunc(e);
+                setOtherSel(false);
+              }}
               value={gedsValue}
             />
             {gedsValue} - <b>GEDS</b>
@@ -61,36 +65,64 @@ const AuditSelector = (props) => {
               id={`${inputName}-2`}
               name={inputName}
               className="mr-1"
-              onChange={changeFunc}
+              onChange={(e) => {
+                changeFunc(e);
+                setOtherSel(false);
+              }}
               value={paasValue}
             />
             {paasValue} - <b>Directory</b>
           </Label>
         </div>
-        <div>
-          <Label htmlFor={`${inputName}-n`}>
-            <input
-              type="radio"
-              id={`${inputName}-n`}
-              name={inputName}
-              className="mr-1"
-              onChange={changeFunc}
-              value="Other"
-            />
-            {__('Other')}
-          </Label>
-        </div>
-        <div>
-          <Label htmlFor={`${inputName}-input`}>
-            {__('Other Value')}
-          </Label>
-          <input
-            type="text"
-            id={`${inputName}-input`}
-            name={`${inputName}-input`}
-            className="ml-1"
-          />
-        </div>
+        {
+          // Don't show other option for address
+        }
+        {inputName !== 'auditAddress' &&
+          <span>
+            <div>
+              <Label htmlFor={`${inputName}-n`}>
+                <input
+                  type="radio"
+                  id={`${inputName}-n`}
+                  name={inputName}
+                  className="mr-1"
+                  onChange={() => {
+                    setOtherSel(true);
+                  }}
+                  value="Other"
+                />
+                {__('Other')}
+              </Label>
+            </div>
+            {otherSel &&
+              <div>
+                <Label htmlFor={`${inputName}-input`}>
+                  {__('Other Value')}
+                </Label>
+                <input
+                  type="text"
+                  id={`${inputName}-input`}
+                  name={inputName}
+                  className="ml-1"
+                  pattern={
+                    // eslint-disable-next-line
+                    (inputName === 'auditPhone' || inputName === 'auditMobile') &&
+                    '^[+]?[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4,6}$'
+                  }
+                  onChange={(e) => {
+                    changeFunc({
+                      target: {
+                        name: e.target.name,
+                        value: e.target.value,
+                        id: e.target.id,
+                      },
+                    });
+                  }}
+                />
+              </div>
+            }
+          </span>
+        }
       </FormGroup>
     </div>
   );

From d74336d57309f0faf3e965c2b143f749d4032ec2 Mon Sep 17 00:00:00 2001
From: piet0024 <n.pietrantonio0024@live.com>
Date: Mon, 14 Dec 2020 14:18:28 -0500
Subject: [PATCH 8/8] updating language

---
 .../profile/profileCard/GEDSAudit.js.po       |  9 ++++++++
 .../profile/profileCard/GEDSAudit.js.po       | 17 ++++++++++----
 .../profile/profileCard/GEDSAudit.js          | 23 +++++++++++++------
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po b/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
index 645d61d..dd012b1 100644
--- a/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
+++ b/i18n/en_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
@@ -33,6 +33,12 @@ msgstr ""
 msgid "GEDS Audit"
 msgstr ""
 
+msgid "GEDS"
+msgstr ""
+
+msgid "Directory"
+msgstr ""
+
 msgid "There are differences"
 msgstr "We have found differences in the following information:"
 
@@ -83,3 +89,6 @@ msgstr "Office Address"
 
 msgid "auditOrg"
 msgstr "Department"
+
+msgid "Save"
+msgstr ""
diff --git a/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po b/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
index 7f7bf33..7c6653f 100644
--- a/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
+++ b/i18n/fr_CA/LC_MESSAGES/src/components/profile/profileCard/GEDSAudit.js.po
@@ -19,10 +19,10 @@ msgid "Please select data"
 msgstr "Veuillez sélectionner les renseignements exacts"
 
 msgid "Other"
-msgstr ""
+msgstr "Autre"
 
 msgid "Other Value"
-msgstr ""
+msgstr "Autre"
 
 msgid "Your data is the same"
 msgstr "Votre répertoire et les renseignements du SAGE sont les mêmes"
@@ -33,6 +33,12 @@ msgstr "Vérification du SAGE"
 msgid "GEDS Audit"
 msgstr "Vérification du SAGE"
 
+msgid "GEDS"
+msgstr "SAGE"
+
+msgid "Directory"
+msgstr "Annuiare"
+
 msgid "There are differences"
 msgstr "Nous avons constaté des différences dans les renseignements suivants :"
 
@@ -58,10 +64,10 @@ msgid "Office Address"
 msgstr "Adresse au travail"
 
 msgid "Department"
-msgstr ""
+msgstr "Ministère"
 
 msgid "Department"
-msgstr ""
+msgstr "Ministère"
 
 msgid "auditName"
 msgstr ""
@@ -83,3 +89,6 @@ msgstr ""
 
 msgid "auditOrg"
 msgstr ""
+
+msgid "Save"
+msgstr "Sauvegarder les changements"
diff --git a/src/components/profile/profileCard/GEDSAudit.js b/src/components/profile/profileCard/GEDSAudit.js
index 6e80d2a..875118b 100644
--- a/src/components/profile/profileCard/GEDSAudit.js
+++ b/src/components/profile/profileCard/GEDSAudit.js
@@ -55,7 +55,7 @@ const AuditSelector = (props) => {
               }}
               value={gedsValue}
             />
-            {gedsValue} - <b>GEDS</b>
+            {gedsValue} - <b>{__('GEDS')}</b>
           </Label>
         </div>
         <div>
@@ -71,7 +71,7 @@ const AuditSelector = (props) => {
               }}
               value={paasValue}
             />
-            {paasValue} - <b>Directory</b>
+            {paasValue} - <b>{__('Directory')}</b>
           </Label>
         </div>
         {
@@ -417,7 +417,9 @@ class GEDSAudit extends Component {
                                       icon={faCheck}
                                       className="text-success mr-1"
                                     />
-                                    {this.props.profile.titleEn}
+                                    <span lang="en">
+                                      {this.props.profile.titleEn}
+                                    </span>
                                   </span> :
                                   <AuditSelector
                                     field={__('Job Title - English')}
@@ -437,7 +439,9 @@ class GEDSAudit extends Component {
                                       icon={faCheck}
                                       className="text-success mr-1"
                                     />
-                                    {this.props.profile.titleFr}
+                                    <span lang="fr">
+                                      {this.props.profile.titleFr}
+                                    </span>
                                   </div> :
                                   <AuditSelector
                                     field={__('Job Title - French')}
@@ -537,8 +541,13 @@ class GEDSAudit extends Component {
                                       className="text-success mr-1"
                                     />
                                     {
-                                      // eslint-disable-next-line
-                                      this.props.profile.team.organization.nameEn
+                                      (localizer.lang === 'en_CA') ? (
+                                        // eslint-disable-next-line
+                                        this.props.profile.team.organization.nameEn
+                                      ) : (
+                                        // eslint-disable-next-line
+                                        this.props.profile.team.organization.nameFr
+                                      )
                                     }
                                   </div> :
                                   <AuditSelector
@@ -562,7 +571,7 @@ class GEDSAudit extends Component {
                               color="primary"
                               disabled={loading}
                             >
-                              Save
+                              {__('Save')}
                             </Button>
                           </div>
                         </Form>