fix: add Zendesk SDK

Get rid of Zendesk which is being loaded by network call and integrate Zendesk SDK VAN-1343
2023-03-27 19:06:38 +05:00
parent 7d58a124ab
commit 94fafe661d
11 changed files with 167 additions and 64 deletions
--- 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=''
--- 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"
      }
--- 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",
--- 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"
        ></script>
      <% } %>
-      <% if (process.env.ZENDESK_KEY) { %>
-        <script
-          id="ze-snippet"
-          src="https://static.zdassets.com/ekr/snippet.js?key=<%= process.env.ZENDESK_KEY %>"
-        >
-        </script>
-        <script type="text/javascript">
-          window.zESettings = {
-            cookies: true,
-            webWidget: {
-              contactOptions: {
-                enabled: false,
-              },
-              chat: {
-                suppress: false,
-                departments: {
-                  enabled: ['account settings', 'billing and payments', 'certificates', 'deadlines', 'errors and technical issues', 'other', 'proctoring']
-                }
-              },
-              contactForm: {
-                ticketForms: [
-                  {
-                    id: 360003368814,
-                    subject: false,
-                    fields: [
-                      {
-                        id: 'description',
-                        prefill: {
-                          '*': '',
-                        },
-                      },
-                    ],
-                  },
-                ],
-                selectTicketForm: {
-                  '*': 'Please choose your request type:',
-                },
-                attachments: true,
-              },
-              helpCenter: {
-                originalArticleButton: true,
-              },
-              answerBot: {
-                suppress: false,
-                contactOnlyAfterQuery: true,
-                title: { '*': 'edX Support' },
-                avatar: {
-                  url: '<%= process.env.ZENDESK_LOGO_URL %>',
-                  name: { '*': 'edX Support' },
-                },
-              },
-            },
-          };
-        </script>
-      <% } %>
  </head>
  <body>
    <div id="root"></div>
--- 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 = () => (
    <Helmet>
      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
    </Helmet>
+    {getConfig().ZENDESK_KEY && <Zendesk />}
    <Switch>
      <Route exact path="/">
        <Redirect to={updatePathWithQueryParams(REGISTER_PAGE)} />
--- a/src/common-components/Zendesk.jsx
+++ 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 (
+    <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
+  );
+};
+
+export default ZendeskHelp;
--- 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';
--- 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;
--- a/src/common-components/tests/Zendesk.test.jsx
+++ 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(
+      <IntlProvider locale="en">
+        <Zendesk />
+      </IntlProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
--- a/src/common-components/tests/snapshots/Zendesk.test.jsx.snap
+++ 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`] = `
+<Zendesk
+  cookies={true}
+  defer={true}
+  webWidget={
+    Object {
+      "answerBot": Object {
+        "avatar": Object {
+          "name": Object {
+            "*": "edX Support",
+          },
+          "url": undefined,
+        },
+        "contactOnlyAfterQuery": true,
+        "suppress": false,
+        "title": Object {
+          "*": "edX Support",
+        },
+      },
+      "chat": Object {
+        "suppress": false,
+      },
+      "contactForm": Object {
+        "attachments": true,
+        "selectTicketForm": Object {
+          "*": "Please choose your request type:",
+        },
+        "ticketForms": Array [
+          Object {
+            "fields": Array [
+              Object {
+                "id": "description",
+                "prefill": Object {
+                  "*": "",
+                },
+              },
+            ],
+            "id": 360003368814,
+            "subject": false,
+          },
+        ],
+      },
+      "contactOptions": Object {
+        "enabled": false,
+      },
+      "helpCenter": Object {
+        "originalArticleButton": true,
+      },
+    }
+  }
+/>
+`;
--- 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;