Merge pull request #839 from openedx/aansari/INF-990

feat: remove other channels then web preferences
2023-08-08 13:02:49 +05:00
parent eb6d0125c6 7f8086545c
commit 2e87f0bd9f
8 changed files with 228 additions and 81 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,148 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-us">
  <head>
-      <title>Account | <%= process.env.SITE_NAME %></title>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
-      <% if (process.env.OPTIMIZELY_PROJECT_ID) { %>
-        <script
-          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
-        ></script>
-      <% } %>
+    <title>Account | <%= process.env.SITE_NAME %></title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="shortcut icon"
+      href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
+      type="image/x-icon"
+    />
+    <% if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+    <script src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"></script>
+    <% } %>
  </head>
  <body>
+    <!-- begin usabilla live embed code -->
+    <script defer type="text/javascript">
+      window.lightningjs ||
+        (function (n) {
+          var e = "lightningjs";
+          function t(e, t) {
+            var r, i, a, o, d, c;
+            return (
+              t && (t += (/\?/.test(t) ? "&" : "?") + "lv=1"),
+              n[e] ||
+                ((r = window),
+                (i = document),
+                (a = e),
+                (o = i.location.protocol),
+                (d = "load"),
+                (c = 0),
+                (function () {
+                  n[a] = function () {
+                    var t = arguments,
+                      i = this,
+                      o = ++c,
+                      d = (i && i != r && i.id) || 0;
+                    function s() {
+                      return (s.id = o), n[a].apply(s, arguments);
+                    }
+                    return (
+                      (e.s = e.s || []).push([o, d, t]),
+                      (s.then = function (n, t, r) {
+                        var i = (e.fh[o] = e.fh[o] || []),
+                          a = (e.eh[o] = e.eh[o] || []),
+                          d = (e.ph[o] = e.ph[o] || []);
+                        return (
+                          n && i.push(n), t && a.push(t), r && d.push(r), s
+                        );
+                      }),
+                      s
+                    );
+                  };
+                  var e = (n[a]._ = {});
+                  function s() {
+                    e.P(d), (e.w = 1), n[a]("_load");
+                  }
+                  (e.fh = {}),
+                    (e.eh = {}),
+                    (e.ph = {}),
+                    (e.l = t
+                      ? t.replace(/^\/\//, ("https:" == o ? o : "http:") + "//")
+                      : t),
+                    (e.p = { 0: +new Date() }),
+                    (e.P = function (n) {
+                      e.p[n] = new Date() - e.p[0];
+                    }),
+                    e.w && s(),
+                    r.addEventListener
+                      ? r.addEventListener(d, s, !1)
+                      : r.attachEvent("onload", s);
+                  var l = function () {
+                    function n() {
+                      return [
+                        "<!DOCTYPE ",
+                        o,
+                        "><",
+                        o,
+                        "><head></head><",
+                        t,
+                        "><",
+                        r,
+                        ' src="',
+                        e.l,
+                        '"></',
+                        r,
+                        "></",
+                        t,
+                        "></",
+                        o,
+                        ">",
+                      ].join("");
+                    }
+                    var t = "body",
+                      r = "script",
+                      o = "html",
+                      d = i[t];
+                    if (!d) return setTimeout(l, 100);
+                    e.P(1);
+                    var c,
+                      s = i.createElement("div"),
+                      h = s.appendChild(i.createElement("div")),
+                      u = i.createElement("iframe");
+                    (s.style.display = "none"),
+                      (d.insertBefore(s, d.firstChild).id = "lightningjs-" + a),
+                      (u.frameBorder = "0"),
+                      (u.id = "lightningjs-frame-" + a),
+                      /MSIE[ ]+6/.test(navigator.userAgent) &&
+                        (u.src = "javascript:false"),
+                      (u.allowTransparency = "true"),
+                      h.appendChild(u);
+                    try {
+                      u.contentWindow.document.open();
+                    } catch (n) {
+                      (e.domain = i.domain),
+                        (c =
+                          "javascript:var d=document.open();d.domain='" +
+                          i.domain +
+                          "';"),
+                        (u.src = c + "void(0);");
+                    }
+                    try {
+                      var p = u.contentWindow.document;
+                      p.write(n()), p.close();
+                    } catch (e) {
+                      u.src =
+                        c +
+                        'd.write("' +
+                        n().replace(/"/g, String.fromCharCode(92) + '"') +
+                        '");d.close();';
+                    }
+                    e.P(2);
+                  };
+                  e.l && l();
+                })()),
+              (n[e].lv = "1"),
+              n[e]
+            );
+          }
+          var r = (window.lightningjs = t(e));
+          (r.require = t), (r.modules = n);
+        })({});
+    </script>
+    <!-- end usabilla live embed code -->
    <div id="root"></div>
  </body>
 </html>
--- a/src/hooks.js
+++ b/src/hooks.js
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { logError } from '@edx/frontend-platform/logging';

 import {
  IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS, FAILURE_STATUS,
@@ -53,3 +54,14 @@ export function useRedirect() {

  return redirect;
 }
+
+export function useFeedbackWrapper() {
+  useEffect(() => {
+    try {
+    // eslint-disable-next-line no-undef
+      window.usabilla_live = lightningjs?.require('usabilla_live', '//w.usabilla.com/2655de034958.js');
+    } catch (error) {
+      logError('Error loading usabilla_live', error);
+    }
+  }, []);
+}
--- a/src/index.scss
+++ b/src/index.scss
@@ -69,20 +69,26 @@ $fa-font-path: "~font-awesome/fonts";
  font-size: 32px;
 }

-.notification-course-title {
-  line-height: 28px;
-  font-weight: 700;
-  font-size: 18px;
-}
-
 .px-2\.25 {
  padding-left: 0.625rem;
 }

-.notification-help-text {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 28px;
-  height: 28px;
-  color: #707070;
+.notification-preferences {
+  input[type="checkbox"] {
+    margin-right: 0;
+  }
+
+  .header-label {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 28px;
+    height: 28px;
+    color: #707070;
+  }
+
+  .notification-course-title {
+    line-height: 28px;
+    font-weight: 700;
+    font-size: 18px;
+  }
 }
--- a/src/notification-preferences/NotificationPreferenceApp.jsx
+++ b/src/notification-preferences/NotificationPreferenceApp.jsx
@@ -40,11 +40,11 @@ const NotificationPreferenceApp = ({ appId }) => {
  return (
    <Collapsible.Advanced open={appToggle} data-testid="notification-app">
      <Collapsible.Trigger>
-        <div className="d-flex">
-          <span className="ml-0 mr-auto">
+        <div className="d-flex align-items-center">
+          <span className="mr-auto">
            {intl.formatMessage(messages.notificationAppTitle, { key: appId })}
          </span>
-          <span id={`${appId}-app-toggle`} className="ml-auto mr-0">
+          <span className="d-flex" id={`${appId}-app-toggle`}>
            <ToggleSwitch
              name={appId}
              value={appToggle}
@@ -52,18 +52,16 @@ const NotificationPreferenceApp = ({ appId }) => {
            />
          </span>
        </div>
-        <hr />
+        <hr className="border-light-400 my-3" />
      </Collapsible.Trigger>
      <Collapsible.Body>
-        <div className="d-flex flex-row notification-help-text">
-          <span className="col-8 px-0">{intl.formatMessage(messages.notificationHelpType)}</span>
+        <div className="d-flex flex-row header-label">
+          <span className="col-8 px-0">{intl.formatMessage(messages.typeLabel)}</span>
          <span className="d-flex col-4 px-0">
-            <span className="ml-0 mr-auto">{intl.formatMessage(messages.notificationHelpWeb)}</span>
-            <span className="mx-auto">{intl.formatMessage(messages.notificationHelpEmail)}</span>
-            <span className="ml-auto mr-0 pr-2.5">{intl.formatMessage(messages.notificationHelpPush)}</span>
+            <span className="ml-auto">{intl.formatMessage(messages.webLabel)}</span>
          </span>
        </div>
-        <div className="mt-3 pb-5">
+        <div className="my-3">
          { preferences }
        </div>
      </Collapsible.Body>
--- a/src/notification-preferences/NotificationPreferenceRow.jsx
+++ b/src/notification-preferences/NotificationPreferenceRow.jsx
@@ -38,49 +38,46 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {

  const tooltipId = `${preferenceName}-tooltip`;
  return (
-    <div className="d-flex flex-row mb-3" data-testid="notification-preference">
-      <span className="d-flex align-items-center col-8 px-0">
+    <div className="d-flex mb-3" data-testid="notification-preference">
+      <div className="d-flex align-items-center mr-auto">
        {intl.formatMessage(messages.notificationTitle, { text: preferenceName })}
-        {
-          preference.info !== '' && (
-            <OverlayTrigger
-              id={tooltipId}
-              className="d-inline"
-              placement="top"
-              overlay={(
-                <Tooltip id={tooltipId}>
-                  {preference.info}
-                </Tooltip>
-              )}
-            >
-              <span className="ml-2">
-                <Icon src={InfoOutline} />
-              </span>
-            </OverlayTrigger>
-          )
-        }
-      </span>
-      <span className="d-flex col-4 px-0">
-        {
-          ['web', 'email', 'push'].map((channel) => (
-            <span
-              id={`${preferenceName}-${channel}`}
-              className={classNames(
-                { 'ml-0 mr-auto': channel === 'web' },
-                { 'mx-auto': channel === 'email' },
-                { 'ml-auto mr-0': channel === 'push' },
-              )}
-            >
-              <ToggleSwitch
-                name={channel}
-                value={preference[channel]}
-                onChange={onToggle}
-                disabled={nonEditable.includes(channel)}
-              />
+        {preference.info !== '' && (
+          <OverlayTrigger
+            id={tooltipId}
+            className="d-inline"
+            placement="top"
+            overlay={(
+              <Tooltip id={tooltipId}>
+                {preference.info}
+              </Tooltip>
+                )}
+          >
+            <span className="ml-2">
+              <Icon src={InfoOutline} />
            </span>
-          ))
-        }
-      </span>
+          </OverlayTrigger>
+        )}
+      </div>
+      <div className="d-flex align-items-center">
+        {['web'].map((channel) => (
+          <div
+            id={`${preferenceName}-${channel}`}
+            className={classNames(
+              'd-flex',
+              { 'ml-auto': channel === 'web' },
+              { 'mx-auto': channel === 'email' },
+              { 'ml-auto mr-0': channel === 'push' },
+            )}
+          >
+            <ToggleSwitch
+              name={channel}
+              value={preference[channel]}
+              onChange={onToggle}
+              disabled={nonEditable.includes(channel)}
+            />
+          </div>
+        ))}
+      </div>
    </div>
  );
 };
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/src/notification-preferences/NotificationPreferences.jsx
@@ -22,8 +22,10 @@ import {
  SUCCESS_STATUS,
 } from '../constants';
 import { NotFoundPage } from '../account-settings';
+import { useFeedbackWrapper } from '../hooks';

 const NotificationPreferences = () => {
+  useFeedbackWrapper();
  const { courseId } = useParams();
  const dispatch = useDispatch();
  const intl = useIntl();
@@ -56,16 +58,16 @@ const NotificationPreferences = () => {
  }

  return (
-    <Container size="md">
+    <Container size="md" className="notification-preferences">
      <h2 className="notification-heading mt-6 mb-5.5">
        {intl.formatMessage(messages.notificationHeading)}
      </h2>
      <div className="h-100">
-        <div className="d-flex mb-4">
+        <div className="d-flex mb-5">
          <Link to="/notifications">
-            <Icon className="d-inline-block align-bottom ml-1" src={ArrowBack} />
+            <Icon className="text-primary-500" src={ArrowBack} />
          </Link>
-          <span className="notification-course-title ml-auto mr-auto">
+          <span className="notification-course-title ml-auto mr-auto text-primary-500">
            {course?.name}
          </span>
        </div>
--- a/src/notification-preferences/NotificationPreferences.test.jsx
+++ b/src/notification-preferences/NotificationPreferences.test.jsx
@@ -109,6 +109,7 @@ describe('Notification Preferences', () => {
      }),
    }));
    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 }));
+    window.lightningjs = null;
  });

  afterEach(() => jest.clearAllMocks());
--- a/src/notification-preferences/messages.js
+++ b/src/notification-preferences/messages.js
@@ -33,13 +33,13 @@ export const messages = defineMessages({
    }`,
    description: 'Display text for Notification Types',
  },
-  notificationHelpType: {
-    id: 'notification.preference.help.type',
+  typeLabel: {
+    id: 'notification.preference.type.label',
    defaultMessage: 'Type',
    description: 'Display text for type',
  },
-  notificationHelpWeb: {
-    id: 'notification.preference.help.web',
+  webLabel: {
+    id: 'notification.preference.web,label',
    defaultMessage: 'Web',
    description: 'Display text for web',
  },