From 94fafe661d49f0fcca05d836f3d52fbe6cf17e7f Mon Sep 17 00:00:00 2001 From: ahtesham-quraish Date: Mon, 27 Mar 2023 19:06:38 +0500 Subject: [PATCH] fix: add Zendesk SDK Get rid of Zendesk which is being loaded by network call and integrate Zendesk SDK VAN-1343 --- .env.development | 2 + package-lock.json | 31 ++++++++--- package.json | 3 +- public/index.html | 55 ------------------- src/MainApp.jsx | 3 +- src/common-components/Zendesk.jsx | 53 ++++++++++++++++++ src/common-components/index.jsx | 1 + src/common-components/messages.jsx | 10 ++++ src/common-components/tests/Zendesk.test.jsx | 17 ++++++ .../tests/__snapshots__/Zendesk.test.jsx.snap | 54 ++++++++++++++++++ src/config/index.js | 2 + 11 files changed, 167 insertions(+), 64 deletions(-) create mode 100644 src/common-components/Zendesk.jsx create mode 100644 src/common-components/tests/Zendesk.test.jsx create mode 100644 src/common-components/tests/__snapshots__/Zendesk.test.jsx.snap diff --git a/.env.development b/.env.development index 871269aa..88d97308 100644 --- a/.env.development +++ b/.env.development @@ -33,3 +33,5 @@ AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK='http://localhost:1999/welcome' # ***** Miscellaneous ***** APP_ID='' MFE_CONFIG_API_URL='' +ZENDESK_KEY='' +ZENDESK_LOGO_URL='' diff --git a/package-lock.json b/package-lock.json index b3c7678d..d90a734c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,8 @@ "react-responsive": "8.2.0", "react-router": "5.3.4", "react-router-dom": "5.3.4", - "redux": "4.2.1", + "react-zendesk": "^0.1.13", + "redux": "4.2.0", "redux-logger": "3.0.6", "redux-mock-store": "1.5.4", "redux-saga": "1.2.2", @@ -23818,6 +23819,14 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-zendesk": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/react-zendesk/-/react-zendesk-0.1.13.tgz", + "integrity": "sha512-9UNzzgdgC8nr2nZ13PNudspUClZZgsnS3FofnuGK1I7+yDPNAP8iDFD2WSQRJmYDAzH+mTlVB4K+G8lY1/0B+w==", + "dependencies": { + "prop-types": "^15.7.2" + } + }, "node_modules/read-babelrc-up": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-babelrc-up/-/read-babelrc-up-1.1.0.tgz", @@ -23948,9 +23957,9 @@ } }, "node_modules/redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", "dependencies": { "@babel/runtime": "^7.9.2" } @@ -46465,6 +46474,14 @@ "prop-types": "^15.6.2" } }, + "react-zendesk": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/react-zendesk/-/react-zendesk-0.1.13.tgz", + "integrity": "sha512-9UNzzgdgC8nr2nZ13PNudspUClZZgsnS3FofnuGK1I7+yDPNAP8iDFD2WSQRJmYDAzH+mTlVB4K+G8lY1/0B+w==", + "requires": { + "prop-types": "^15.7.2" + } + }, "read-babelrc-up": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-babelrc-up/-/read-babelrc-up-1.1.0.tgz", @@ -46569,9 +46586,9 @@ } }, "redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", "requires": { "@babel/runtime": "^7.9.2" } diff --git a/package.json b/package.json index 25c4556a..ea17fa92 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,8 @@ "react-responsive": "8.2.0", "react-router": "5.3.4", "react-router-dom": "5.3.4", - "redux": "4.2.1", + "react-zendesk": "^0.1.13", + "redux": "4.2.0", "redux-logger": "3.0.6", "redux-mock-store": "1.5.4", "redux-saga": "1.2.2", diff --git a/public/index.html b/public/index.html index de609b8b..6e8dd17e 100644 --- a/public/index.html +++ b/public/index.html @@ -13,61 +13,6 @@ src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js" > <% } %> - <% if (process.env.ZENDESK_KEY) { %> - - - <% } %>
diff --git a/src/MainApp.jsx b/src/MainApp.jsx index 274e143a..d563ccb6 100755 --- a/src/MainApp.jsx +++ b/src/MainApp.jsx @@ -6,7 +6,7 @@ import { Helmet } from 'react-helmet'; import { Redirect, Route, Switch } from 'react-router-dom'; import { - Logistration, NotFoundPage, registerIcons, UnAuthOnlyRoute, + Logistration, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk, } from './common-components'; import configureStore from './data/configureStore'; import { @@ -32,6 +32,7 @@ const MainApp = () => ( + {getConfig().ZENDESK_KEY && } diff --git a/src/common-components/Zendesk.jsx b/src/common-components/Zendesk.jsx new file mode 100644 index 00000000..3489149d --- /dev/null +++ b/src/common-components/Zendesk.jsx @@ -0,0 +1,53 @@ +import React from 'react'; + +import { getConfig } from '@edx/frontend-platform'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import Zendesk from 'react-zendesk'; + +import messages from './messages'; + +const ZendeskHelp = () => { + const { formatMessage } = useIntl(); + const setting = { + cookies: true, + webWidget: { + contactOptions: { + enabled: false, + }, + chat: { + suppress: false, + }, + contactForm: { + ticketForms: [ + { + id: 360003368814, + subject: false, + fields: [{ id: 'description', prefill: { '*': '' } }], + }, + ], + selectTicketForm: { + '*': formatMessage(messages.selectTicketForm), + }, + attachments: true, + }, + helpCenter: { + originalArticleButton: true, + }, + answerBot: { + suppress: false, + contactOnlyAfterQuery: true, + title: { '*': formatMessage(messages.supportTitle) }, + avatar: { + url: getConfig().ZENDESK_LOGO_URL, + name: { '*': formatMessage(messages.supportTitle) }, + }, + }, + }, + }; + + return ( + + ); +}; + +export default ZendeskHelp; diff --git a/src/common-components/index.jsx b/src/common-components/index.jsx index f25c2697..43223bb7 100644 --- a/src/common-components/index.jsx +++ b/src/common-components/index.jsx @@ -12,3 +12,4 @@ export { storeName } from './data/selectors'; export { default as FormGroup } from './FormGroup'; export { default as PasswordField } from './PasswordField'; export { default as Logistration } from './Logistration'; +export { default as Zendesk } from './Zendesk'; diff --git a/src/common-components/messages.jsx b/src/common-components/messages.jsx index 5df3fa74..1bf52e53 100644 --- a/src/common-components/messages.jsx +++ b/src/common-components/messages.jsx @@ -102,6 +102,16 @@ const messages = defineMessages({ defaultMessage: 'Finish creating your account', description: 'Heading that appears above form when user is trying to create account using social auth', }, + supportTitle: { + id: 'zendesk.supportTitle', + description: 'Title for the support button', + defaultMessage: 'edX Support', + }, + selectTicketForm: { + id: 'zendesk.selectTicketForm', + description: 'Select ticket form', + defaultMessage: 'Please choose your request type:', + }, }); export default messages; diff --git a/src/common-components/tests/Zendesk.test.jsx b/src/common-components/tests/Zendesk.test.jsx new file mode 100644 index 00000000..f424b733 --- /dev/null +++ b/src/common-components/tests/Zendesk.test.jsx @@ -0,0 +1,17 @@ +import { IntlProvider } from '@edx/frontend-platform/i18n'; +import renderer from 'react-test-renderer'; + +import Zendesk from '../Zendesk'; + +jest.mock('react-zendesk', () => 'Zendesk'); + +describe('Zendesk Help', () => { + it('should match login page third party auth alert message snapshot', () => { + const tree = renderer.create( + + + , + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/common-components/tests/__snapshots__/Zendesk.test.jsx.snap b/src/common-components/tests/__snapshots__/Zendesk.test.jsx.snap new file mode 100644 index 00000000..2f9f41ce --- /dev/null +++ b/src/common-components/tests/__snapshots__/Zendesk.test.jsx.snap @@ -0,0 +1,54 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Zendesk Help should match login page third party auth alert message snapshot 1`] = ` + +`; diff --git a/src/config/index.js b/src/config/index.js index a3c8b3f9..bdfdf0ff 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -22,6 +22,8 @@ const configuration = { // Miscellaneous GENERAL_RECOMMENDATIONS: process.env.GENERAL_RECOMMENDATIONS || '[]', INFO_EMAIL: process.env.INFO_EMAIL || '', + ZENDESK_KEY: process.env.ZENDESK_KEY, + ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL, }; export default configuration;