@campxdev/shared 1.8.20 → 1.8.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.8.20",
+  "version": "1.8.22",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Layout/Header/HeaderActions/FreshChatButton.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+import { useState } from 'react'
+import { UserStore } from '../../../../shared-state'
+import { chatWithUs } from '../assets'
+import { Box, styled } from '@mui/material'
+
+export default function FreshChatButton() {
+  const _window = window as any
+  const { user } = UserStore.useState()
+
+  var openWidget = function () {
+    const el = document.getElementById('fc_frame')
+    if (el) {
+      el.style.visibility = 'visible'
+    }
+    _window.fcWidget.open()
+    initEvents()
+  }
+  var initEvents = function () {
+    const el = document.getElementById('custom_fc_button')
+    _window.fcWidget.on('widget:opened', function (resp) {
+      if (el) {
+        el.style.visibility = 'hidden'
+      }
+    })
+    _window.fcWidget.on('widget:closed', function (resp) {
+      if (el) {
+        el.style.visibility = 'visible'
+      }
+    })
+  }
+
+  if (!user) return null
+  return (
+    <Box
+      id="custom_fc_button"
+      sx={{
+        position: 'fixed',
+        right: 0,
+        bottom: '18px',
+        cursor: 'pointer',
+        '@media print': {
+          display: 'none',
+        },
+      }}
+    >
+      <a id="open_fc_widget" onClick={openWidget} style={{ cursor: 'pointer' }}>
+        <StyledImg src={chatWithUs} />
+      </a>
+    </Box>
+  )
+}
+
+const StyledImg = styled('img')(({ theme }) => ({
+  width: '35px',
+  height: 'auto',
+  '&:hover': {
+    width: '50px',
+  },
+  transition: 'width 0.3s',
+}))

package/src/components/Layout/Header/HeaderActions/FreshDeskHelpButton.tsx

@@ -1,6 +1,5 @@
 import { HelpOutline } from '@mui/icons-material'
 import { Button } from '@mui/material'
-import DropDownButton from '../../../DropDownButton/DropDownButton'
 import { UserStore } from '../../../../shared-state'
 
 export default function FreshDeskHelpButton() {
@@ -15,52 +14,15 @@ export default function FreshDeskHelpButton() {
     }
   }
 
-  const handleFreshChat = () => {
-    const _window = window as any
-    try {
-      _window?.fcWidget?.open()
-
-      _window.fcWidget.on('widget:opened', function (resp) {
-        // eslint-disable-next-line no-console
-        console.log('Widget Opened', resp)
-      })
-
-      _window.fcWidget.on('widget:closed', function () {
-        // eslint-disable-next-line no-console
-        console.log('Message Dialog Closed by the User')
-      })
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error)
-      // eslint-disable-next-line no-console
-      console.error('Error launching Freshdesk Chat')
-    }
-  }
   return (
-    <>
-      <DropDownButton
-        anchor={({ open }) => (
-          <Button
-            variant="text"
-            color="secondary"
-            onClick={open}
-            startIcon={<HelpOutline />}
-            sx={{ padding: '20px' }}
-          >
-            Help
-          </Button>
-        )}
-        menu={[
-          {
-            label: 'Raise a Ticket',
-            onClick: handleOpenFreshDeskWidget,
-          },
-          {
-            label: 'Chat with us',
-            onClick: handleFreshChat,
-          },
-        ]}
-      />
-    </>
+    <Button
+      variant="text"
+      color="secondary"
+      onClick={handleOpenFreshDeskWidget}
+      startIcon={<HelpOutline />}
+      sx={{ padding: '20px' }}
+    >
+      Help
+    </Button>
   )
 }

package/src/components/Layout/Header/assets/index.ts

@@ -14,6 +14,7 @@ import commuteSmall from './commutexSmall.svg'
 import commutex from './commutex.png'
 import hostelx from './hostelx.png'
 import enrollSmall from './enroll_logo.svg'
+import chatWithUs from './chat_with_us.png'
 
 export {
   collegex,
@@ -32,4 +33,5 @@ export {
   commutex,
   commuteSmall,
   enrollSmall,
+  chatWithUs,
 }

package/src/components/Layout/Helmet.tsx

@@ -1,7 +1,8 @@
+import { ReactNode } from 'react'
 import { Helmet as ReactHelmet } from 'react-helmet'
 
-type MetaProps = JSX.IntrinsicElements['meta']
-type LinkProps = JSX.IntrinsicElements['link']
+// type MetaProps = JSX.IntrinsicElements['meta']
+// type LinkProps = JSX.IntrinsicElements['link']
 
 const getInnerHtml = (user: any) => {
   const fcWidgetMessengerConfig = {
@@ -18,12 +19,8 @@ const getInnerHtml = (user: any) => {
     window.fcWidgetMessengerConfig = ${JSON.stringify(fcWidgetMessengerConfig)}
     window.fcSettings = {
         onInit: function() {
-          window.fcWidget.user.clear().then(function() {
-            console.log('User cleared');
-          }, function() {
-            console.log("User Not cleared");
-          });
-          window.fcWidget.setExternalId('${phone}')
+          console.log('Fresh Chat Init')
+          window.fcWidget.setExternalId('${user?.email}')
           window.fcWidget.user.setFirstName('${user?.fullName}')
           window.fcWidget.user.setEmail('${user?.email}')
           window.fcWidget.user.setPhone('${phone}')
@@ -34,61 +31,75 @@ const getInnerHtml = (user: any) => {
 }
 // window.fcWidget.user.setPhone('${user?.mobile}')
 
+// window.fcWidget.user.clear().then(function() {
+//   console.log('User cleared');
+// }, function() {
+//   console.log("User Not cleared");
+// });
+
 interface IHelmetProps {
   appTitle: string
   favicon: string
   description?: string
-  meta?: MetaProps[] | undefined
-  link?: LinkProps[] | undefined
   user: any
+  extraMetaTags?: ReactNode
 }
 
 export default function Helmet({
   appTitle,
   favicon,
   description,
-  meta = [],
-  link = [],
   user,
+  extraMetaTags,
 }: IHelmetProps) {
   return (
-    <ReactHelmet
-      htmlAttributes={{ lang: 'en' }}
-      title={appTitle}
-      meta={[
-        {
-          charSet: 'utf-8',
-        },
-        {
-          name: 'description',
-          content: description,
-        },
-        {
-          name: 'viewport',
-          content: 'width=device-width, initial-scale=1',
-        },
-        ...meta,
-      ]}
-      link={[
-        { rel: 'icon', href: favicon },
-        {
-          rel: 'apple-touch-icon',
-          href: favicon,
-        },
-        ...link,
-      ]}
-      script={[
-        {
-          type: 'text/javascript',
-          innerHTML: getInnerHtml(user),
-          defer: true,
-        },
-        {
-          type: 'text/javascript',
-          src: '//in.fw-cdn.com/30814322/430238.js',
-          defer: true,
-        },
-      ]}
-    />
+    <ReactHelmet htmlAttributes={{ lang: 'en' }}>
+      <title>{appTitle}</title>
+      <meta charSet="utf-8" />
+      <meta name="description" content={description} />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      {extraMetaTags}
+      <link rel="icon" href={favicon} />
+      <link rel="apple-touch-icon" href={favicon} />
+      <script
+        type="text/javascript"
+        src="//in.fw-cdn.com/30814322/430238.js"
+        defer
+      />
+      <script defer>{getInnerHtml(user)}</script>
+
+      <script async defer>
+        {`
+          window.fwSettings = {
+            widget_id: 85000000149,
+         }
+          !(function () {
+            window.openFreshDeskWidget = function openFreshDeskWidget() {
+            FreshworksWidget('open', 'ticketForm')
+          }
+         if ('function' != typeof window.FreshworksWidget) {
+          var n = function () {
+            n.q.push(arguments)
+          }
+          ;(n.q = []), (window.FreshworksWidget = n)
+         }
+          FreshworksWidget('hide', 'launcher')
+        })()
+        `}
+      </script>
+      <script
+        type="text/javascript"
+        src="https://ind-widget.freshworks.com/widgets/85000000149.js"
+        defer
+      ></script>
+      <style type="text/css">
+        {`
+            #fc_frame {
+              bottom: 0 !important;
+              right: 0 !important;
+            }
+          `}
+      </style>
+    </ReactHelmet>
   )
 }

package/src/contexts/LoginFormProvider.tsx

@@ -8,19 +8,14 @@ const LoginContext = createContext<{
   openLoginForm: (loginUrl: string) => {},
 })
 
-export default function LoginFormProvider({ children, showSuperAdminForm }) {
+export default function LoginFormProvider({ children }) {
   const modal = useModal()
 
   const onLogin = (loginUrl: string) => {
     modal({
       title: 'Developer Login',
       content({ close }) {
-        return (
-          <LoginForm
-            loginUrl={loginUrl}
-            showSuperAdminForm={showSuperAdminForm}
-          />
-        )
+        return <LoginForm loginUrl={loginUrl} />
       },
     })
   }

package/src/contexts/Providers.tsx

@@ -9,6 +9,7 @@ import { ToastContainer } from '../components'
 import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
 import GlobalNetworkLoadingIndicator from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import LoginFormProvider from './LoginFormProvider'
+import FreshChatButton from '../components/Layout/Header/HeaderActions/FreshChatButton'
 
 export const campxTenantKey = Cookies.get('campx_tenant')
 export const urlTenantKey = window.location.pathname.split('/')[1]
@@ -36,9 +37,10 @@ export default function Providers({
         <MuiThemeProvider>
           <ConfirmContextProvider>
             <DialogProvider>
-              <LoginFormProvider showSuperAdminForm={showSuperAdminLoginForm}>
+              <LoginFormProvider>
                 {children}
                 <GlobalNetworkLoadingIndicator />
+                <FreshChatButton />
               </LoginFormProvider>
               <ToastContainer />
             </DialogProvider>