From a72bbf2f583197af22af12e27e461c31501fa245 Mon Sep 17 00:00:00 2001
From: Awais Ansari <awais.ansari63@gmail.com>
Date: Thu, 3 Aug 2023 16:15:47 +0500
Subject: [PATCH 1/4] feat: remove other channels then web preferences

---
 src/index.scss                                | 30 ++++----
 .../NotificationPreferenceApp.jsx             |  8 +--
 .../NotificationPreferenceRow.jsx             | 70 +++++++++----------
 .../NotificationPreferences.jsx               |  4 +-
 src/notification-preferences/messages.js      |  8 +--
 5 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 9e590df..b8b07d1 100755
--- 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;
+  }
 }
diff --git a/src/notification-preferences/NotificationPreferenceApp.jsx b/src/notification-preferences/NotificationPreferenceApp.jsx
index bd106c6..0b5d1e6 100644
--- a/src/notification-preferences/NotificationPreferenceApp.jsx
+++ b/src/notification-preferences/NotificationPreferenceApp.jsx
@@ -55,12 +55,10 @@ const NotificationPreferenceApp = ({ appId }) => {
         <hr />
       </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">
diff --git a/src/notification-preferences/NotificationPreferenceRow.jsx b/src/notification-preferences/NotificationPreferenceRow.jsx
index 4276623..c76192c 100644
--- a/src/notification-preferences/NotificationPreferenceRow.jsx
+++ b/src/notification-preferences/NotificationPreferenceRow.jsx
@@ -41,45 +41,41 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
     <div className="d-flex flex-row mb-3" data-testid="notification-preference">
       <span className="d-flex align-items-center col-8 px-0">
         {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>
-          )
-        }
+        {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)}
-              />
-            </span>
-          ))
-        }
+        {['web'].map((channel) => (
+          <span
+            id={`${preferenceName}-${channel}`}
+            className={classNames(
+              { '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)}
+            />
+          </span>
+        ))}
       </span>
     </div>
   );
diff --git a/src/notification-preferences/NotificationPreferences.jsx b/src/notification-preferences/NotificationPreferences.jsx
index b388de8..28b9f9d 100644
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/src/notification-preferences/NotificationPreferences.jsx
@@ -56,14 +56,14 @@ 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">
           <Link to="/notifications">
-            <Icon className="d-inline-block align-bottom ml-1" src={ArrowBack} />
+            <Icon className="d-inline-block align-bottom" src={ArrowBack} />
           </Link>
           <span className="notification-course-title ml-auto mr-auto">
             {course?.name}
diff --git a/src/notification-preferences/messages.js b/src/notification-preferences/messages.js
index e12ac5a..963a056 100644
--- 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',
   },

From e8f754c10b66fffc99fd505ab031c2edea4156d3 Mon Sep 17 00:00:00 2001
From: Awais Ansari <awais.ansari63@gmail.com>
Date: Thu, 3 Aug 2023 18:01:13 +0500
Subject: [PATCH 2/4] style: update the notification preferences page style
 according to figma

---
 .../NotificationPreferenceApp.jsx                 | 10 +++++-----
 .../NotificationPreferenceRow.jsx                 | 15 ++++++++-------
 .../NotificationPreferences.jsx                   |  6 +++---
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/notification-preferences/NotificationPreferenceApp.jsx b/src/notification-preferences/NotificationPreferenceApp.jsx
index 0b5d1e6..389ccf2 100644
--- 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,7 +52,7 @@ const NotificationPreferenceApp = ({ appId }) => {
             />
           </span>
         </div>
-        <hr />
+        <hr className="border-light-400 my-3" />
       </Collapsible.Trigger>
       <Collapsible.Body>
         <div className="d-flex flex-row header-label">
@@ -61,7 +61,7 @@ const NotificationPreferenceApp = ({ appId }) => {
             <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>
diff --git a/src/notification-preferences/NotificationPreferenceRow.jsx b/src/notification-preferences/NotificationPreferenceRow.jsx
index c76192c..e5f9055 100644
--- a/src/notification-preferences/NotificationPreferenceRow.jsx
+++ b/src/notification-preferences/NotificationPreferenceRow.jsx
@@ -38,8 +38,8 @@ 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
@@ -57,12 +57,13 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
             </span>
           </OverlayTrigger>
         )}
-      </span>
-      <span className="d-flex col-4 px-0">
+      </div>
+      <div className="d-flex align-items-center">
         {['web'].map((channel) => (
-          <span
+          <div
             id={`${preferenceName}-${channel}`}
             className={classNames(
+              'd-flex',
               { 'ml-auto': channel === 'web' },
               { 'mx-auto': channel === 'email' },
               { 'ml-auto mr-0': channel === 'push' },
@@ -74,9 +75,9 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
               onChange={onToggle}
               disabled={nonEditable.includes(channel)}
             />
-          </span>
+          </div>
         ))}
-      </span>
+      </div>
     </div>
   );
 };
diff --git a/src/notification-preferences/NotificationPreferences.jsx b/src/notification-preferences/NotificationPreferences.jsx
index 28b9f9d..c558fdc 100644
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/src/notification-preferences/NotificationPreferences.jsx
@@ -61,11 +61,11 @@ const NotificationPreferences = () => {
         {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" 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>

From de6e3c20106a43bdd3865dba21b83665ef614131 Mon Sep 17 00:00:00 2001
From: Awais Ansari <awais.ansari63@gmail.com>
Date: Fri, 4 Aug 2023 15:54:11 +0500
Subject: [PATCH 3/4] feat: add feedback widget for notification preferences

---
 public/index.html                             | 151 ++++++++++++++++--
 .../FeedbackWrapper.jsx                       |  13 ++
 .../NotificationPreferences.jsx               |   2 +
 3 files changed, 156 insertions(+), 10 deletions(-)
 create mode 100644 src/notification-preferences/FeedbackWrapper.jsx

diff --git a/public/index.html b/public/index.html
index 4b27b1f..9847191 100755
--- 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>
diff --git a/src/notification-preferences/FeedbackWrapper.jsx b/src/notification-preferences/FeedbackWrapper.jsx
new file mode 100644
index 0000000..44e6795
--- /dev/null
+++ b/src/notification-preferences/FeedbackWrapper.jsx
@@ -0,0 +1,13 @@
+/* eslint-disable no-undef */
+import { useEffect } from 'react';
+import { logError } from '@edx/frontend-platform/logging';
+
+export default function useFeedbackWrapper() {
+  useEffect(() => {
+    try {
+      window.usabilla_live = lightningjs.require('usabilla_live', '//w.usabilla.com/2655de034958.js');
+    } catch (err) {
+      logError(err);
+    }
+  }, []);
+}
diff --git a/src/notification-preferences/NotificationPreferences.jsx b/src/notification-preferences/NotificationPreferences.jsx
index c558fdc..869ed67 100644
--- 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 './FeedbackWrapper';
 
 const NotificationPreferences = () => {
+  useFeedbackWrapper();
   const { courseId } = useParams();
   const dispatch = useDispatch();
   const intl = useIntl();

From 7f8086545c59bdcbfc2028636d5b0e8b247f2892 Mon Sep 17 00:00:00 2001
From: Awais Ansari <awais.ansari63@gmail.com>
Date: Mon, 7 Aug 2023 15:00:05 +0500
Subject: [PATCH 4/4] test: define lightningjs in window object

---
 src/hooks.js                                        | 12 ++++++++++++
 src/notification-preferences/FeedbackWrapper.jsx    | 13 -------------
 .../NotificationPreferences.jsx                     |  2 +-
 .../NotificationPreferences.test.jsx                |  1 +
 4 files changed, 14 insertions(+), 14 deletions(-)
 delete mode 100644 src/notification-preferences/FeedbackWrapper.jsx

diff --git a/src/hooks.js b/src/hooks.js
index 69dd638..5731997 100644
--- 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);
+    }
+  }, []);
+}
diff --git a/src/notification-preferences/FeedbackWrapper.jsx b/src/notification-preferences/FeedbackWrapper.jsx
deleted file mode 100644
index 44e6795..0000000
--- a/src/notification-preferences/FeedbackWrapper.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-disable no-undef */
-import { useEffect } from 'react';
-import { logError } from '@edx/frontend-platform/logging';
-
-export default function useFeedbackWrapper() {
-  useEffect(() => {
-    try {
-      window.usabilla_live = lightningjs.require('usabilla_live', '//w.usabilla.com/2655de034958.js');
-    } catch (err) {
-      logError(err);
-    }
-  }, []);
-}
diff --git a/src/notification-preferences/NotificationPreferences.jsx b/src/notification-preferences/NotificationPreferences.jsx
index 869ed67..51b003d 100644
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/src/notification-preferences/NotificationPreferences.jsx
@@ -22,7 +22,7 @@ import {
   SUCCESS_STATUS,
 } from '../constants';
 import { NotFoundPage } from '../account-settings';
-import useFeedbackWrapper from './FeedbackWrapper';
+import { useFeedbackWrapper } from '../hooks';
 
 const NotificationPreferences = () => {
   useFeedbackWrapper();
diff --git a/src/notification-preferences/NotificationPreferences.test.jsx b/src/notification-preferences/NotificationPreferences.test.jsx
index e709c06..c358b66 100644
--- 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());