Remove zendesk and add monday feedback

Author: barshathakuri

app/Base/index.tsx

@@ -1,13 +1,24 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, {
+    useState,
+    useMemo,
+    useCallback,
+} from 'react';
 import localforage from 'localforage';
+import { IoRemove } from 'react-icons/io5';
 import { Router } from 'react-router-dom';
-import { init, ErrorBoundary, setUser as setUserOnSentry, withProfiler } from '@sentry/react';
 import { unique, _cs } from '@togglecorp/fujs';
+import {
+    init,
+    ErrorBoundary,
+    setUser as setUserOnSentry,
+    withProfiler,
+} from '@sentry/react';
 import {
     AlertContainer,
     AlertContext,
     AlertOptions,
     Button,
+    useModalState,
 } from '@the-deep/deep-ui';
 import { ApolloProvider } from '@apollo/client';
 import { setMapboxToken } from '@togglecorp/re-map';
@@ -20,17 +31,10 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import Init from '#base/components/Init';
 import browserHistory from '#base/configs/history';
 import sentryConfig from '#base/configs/sentry';
-import { UserContext, UserContextInterface } from '#base/context/UserContext';
-import {
-    openZendeskFeedback,
-    setUserOnZendesk,
-} from '#base/utils/zendesk';
 import { NavbarContext, NavbarContextInterface } from '#base/context/NavbarContext';
 import AuthPopup from '#base/components/AuthPopup';
-import { sync } from '#base/hooks/useAuthSync';
 import Navbar from '#base/components/Navbar';
 import Routes from '#base/components/Routes';
-import { User } from '#base/types/user';
 import {
     processDeepUrls,
     processDeepOptions,
@@ -44,7 +48,9 @@ import { apolloClient } from '#base/configs/apollo';
 import localforageInstance from '#base/configs/localforage';
 import { mapboxToken } from '#base/configs/env';
 import { trackingId, gaConfig } from '#base/configs/googleAnalytics';
-
+import { UserContext, UserContextInterface } from '#base/context/UserContext';
+import { sync } from '#base/hooks/useAuthSync';
+import { User } from '#base/types/user';
 import FullPageErrorMessage from '#views/FullPageErrorMessage';
 
 import styles from './styles.css';
@@ -74,14 +80,20 @@ if (trackingId) {
 function Base() {
     const [user, setUser] = useState<User | undefined>();
 
+    const [
+        showMondayForm,
+        setMondayFormVisible,
+        setMondayFormHidden,
+    ] = useModalState(false);
+
     const [navbarState, setNavbarState] = useState<{
         path: string;
         visibility: boolean;
     }[]>([]);
 
     const authenticated = !!user;
 
-    const setUserWithSentryAndZendesk: typeof setUser = useCallback(
+    const setUserWithSentry: typeof setUser = useCallback(
         (u) => {
             if (typeof u === 'function') {
                 setUser((oldUser) => {
@@ -90,15 +102,13 @@ function Base() {
                     const sanitizedUser = newUser;
                     sync(!!sanitizedUser, sanitizedUser?.id);
                     setUserOnSentry(sanitizedUser ?? null);
-                    setUserOnZendesk(sanitizedUser ?? null);
 
                     return newUser;
                 });
             } else {
                 const sanitizedUser = u;
                 sync(!!sanitizedUser, sanitizedUser?.id);
                 setUserOnSentry(sanitizedUser ?? null);
-                setUserOnZendesk(sanitizedUser ?? null);
                 setUser(u);
             }
         },
@@ -109,12 +119,12 @@ function Base() {
         () => ({
             authenticated,
             user,
-            setUser: setUserWithSentryAndZendesk,
+            setUser: setUserWithSentry,
         }),
         [
             authenticated,
             user,
-            setUserWithSentryAndZendesk,
+            setUserWithSentry,
         ],
     );
 
@@ -219,6 +229,14 @@ function Base() {
 
     const navbarShown = currentNavbarState?.visibility;
 
+    const openMondayForm = () => {
+        setMondayFormVisible();
+    };
+
+    const closeMondayForm = () => {
+        setMondayFormHidden();
+    };
+
     return (
         <div className={styles.base}>
             <ErrorBoundary
@@ -261,14 +279,38 @@ function Base() {
                 </RequestContext.Provider>
             </ErrorBoundary>
             <Button
+                className={styles.mondayHelpButton}
                 name={undefined}
-                title="Bug/Feedback?"
+                title="Bug / Feedback?"
                 variant="action"
-                className={styles.zendeskHelpButton}
-                onClick={openZendeskFeedback}
+                onClick={openMondayForm}
+                type="button"
             >
                 Bug / Feedback?
             </Button>
+
+            {showMondayForm && (
+                <div className={styles.formOverlay}>
+                    <div className={styles.formContent}>
+                        <div className={styles.formTopBar}>
+                            <p>Leave us a message</p>
+                            <Button
+                                name={undefined}
+                                icons={<IoRemove />}
+                                iconsContainerClassName={styles.iframeClose}
+                                onClick={closeMondayForm}
+                                type="button"
+                                variant="transparent"
+                            />
+                        </div>
+                        <iframe
+                            className={styles.iframe}
+                            src="https://forms.monday.com/forms/embed/6438474a471702280d54bd27e87f5855?r=apse2"
+                            title="Monday Form"
+                        />
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

app/Base/styles.css

@@ -39,7 +39,7 @@
         width: 24rem;
     }
 
-    .zendesk-help-button {
+    .monday-help-button {
         position: fixed;
         bottom: var(--dui-spacing-extra-large);
         left: 0;
@@ -54,6 +54,47 @@
         font-size: var(--dui-font-size-extra-small);
         font-weight: var(--dui-font-weight-regular);
     }
+
+    .form-overlay {
+        display: flex;
+        position: fixed;
+        bottom: var(--dui-spacing-large);
+        left: var(--dui-spacing-large);
+    }
+
+    .form-content {
+        position: relative;
+        z-index: 1000;
+        border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
+        border-radius: var(--dui-border-radius-card);
+        background-color: var(--dui-color-white);
+    }
+
+    .form-top-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--dui-spacing-extra-large);
+        border-top-left-radius: var(--dui-border-radius-card);
+        border-top-right-radius: var(--dui-border-radius-card);
+        background-color: var(--dui-color-accent);
+        padding: var(--dui-spacing-extra-small) var(--dui-spacing-medium);
+        width: 100%;
+        color: var(--dui-color-white);
+    }
+    
+    .iframe-close {
+        display: flex;
+        justify-content: flex-end;
+        color: var(--dui-color-white);
+    }
+
+    .iframe {
+        flex-grow: 1;
+        border: none;
+        width: 330px;
+        height: 490px;
+    }
 }
 
 h1, h2, h3, h4, h5, h6 {

app/Base/utils/zendesk.d.ts

@@ -63,16 +63,6 @@
             }
         </script>
         <!-- End of anti-click-jacking -->
-        <!-- Start of deephelp Zendesk Widget script -->
-        <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=c203955c-2d20-4d54-814b-4247caf4340f">
-        </script>
-        <script type="text/javascript">
-            window.zESettings = {};
-            zE(function() {
-                zE.hide();
-            });
-        </script>
-        <!-- End of deephelp Zendesk Widget script -->
         <!-- Start of Google tag (gtag.js) -->
         <% if (process.env.REACT_APP_GA_MEASUREMENT_ID) { %>
         <script async src="https://www.googletagmanager.com/gtag/js?id=<%=process.env.REACT_APP_GA_MEASUREMENT_ID%>"></script>