@stack-spot/portal-components 2.27.0 → 2.27.2

package/src/hooks/service-now.tsx

@@ -1,233 +1,233 @@
-
-import { Dictionary, getLanguage, ptEn, translate } from '@stack-spot/portal-translate'
-import { pull } from 'lodash'
-import { useState } from 'react'
-import { useEffectOnce } from './use-effect-once'
-
-const CHAT_IFRAME_ID = 'sn_va_web_client'
-export const CHAT_BUTTON_ID = 'service-now-button'
-export const CHAT_BUTTON_WRAPPER_ID = 'service-now-content'
-
-const closeButtonStyle = `
-  position: absolute;
-  bottom: -64px;
-  right: 60px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #BCBCCF;
-  border: none;
-  outline: none;
-  border-radius: 50%;
-  font: 400 20px Roboto, sans-serif;
-  color: #0B0B0E;
-  cursor: pointer;
-  transform: scale(0);
-  transition: transform 0.2s;
-  z-index: 999999;
-`
-
-const iframeStyle = `
-  position: fixed;
-  display: none;
-  right: 15px;
-  bottom: 88px;
-  max-height: calc(100vh - 152px);
-  border-radius: 12px;
-  width: 380px;
-  height: 600px;
-`
-
-type ChatVisibilityListener = (visible: boolean) => void
-
-interface Options {
-  /**
-   * Function to run when the chat button is hidden, i.e. when the user clicks the close button that appears when the chat button is
-   * hovered.
-   */
-  onClose?: () => void,
-}
-
-const HOVER_AREA_PX = 100
-const LOCAL_STORAGE_SERVICE_NOW_VALUE = 'serviceNowChatButtonVisible'
-const chatVisibilityListeners: ChatVisibilityListener[] = []
-
-const serviceNowReference = 'https://zup.service-now.com/sn_va_web_client_app_embed.do?sysparm_branding_key=stackspotvirtualagent&sysparm_topic=f2b636c11bb50e50fe670dcbe54bcb1d'
-
-function loadScript(src: string): Promise<void> {
-  return new Promise<void>((resolve, reject) => {
-    const iframe = document.createElement('iframe')
-    const serviceNowContent = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
-    iframe.setAttribute('id', CHAT_IFRAME_ID)
-    iframe.setAttribute('src', src)
-    iframe.style.cssText = iframeStyle
-
-    iframe.onload = () => resolve()
-    iframe.onerror = (error) => reject(error)
-
-    serviceNowContent && serviceNowContent.appendChild(iframe)
-  })
-}
-
-/**
- * @returns the iframe loaded by service now, i.e. the chat window; or null if the chat window doesn't exist.
- */
-export function getServiceNowLauncher() {
-  return document.getElementById(CHAT_IFRAME_ID)
-}
-
-/**
- * Opens the chat window and makes the chat button visible.
- */
-export function openServiceNowChat() {
-  hideOrShowServiceNowContent('visible')
-  showChatWindow()
-  showServiceNowChatButton()
-}
-
-function getServiceNowButton() {
-  return document.getElementById(CHAT_BUTTON_ID)
-}
-
-function hideOrShowServiceNowContent(action: 'visible' | 'hidden') {
-  const content = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
-  if (content) {
-    content.style.visibility = action
-  }
-}
-
-function toggleChatWindow(show: boolean) {
-  const launcher = getServiceNowLauncher()
-  const content = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
-  if (!launcher || !content) return
-  const [action, display] = show ? ['add', 'block'] as const : ['remove', 'none'] as const
-  launcher.classList[action]('show')
-  content.classList[action]('opened')
-  launcher.style.display = display
-}
-
-/**
- * Shows the chat window, i.e. shows the service now iframe and switch the icon in the chat button to "close".
- */
-export function showChatWindow() {
-  toggleChatWindow(true)
-}
-
-/**
- * Hides the chat window, i.e. hides the service now iframe and switch the icon in the chat button to "chat".
- */
-export function hideChatWindow() {
-  toggleChatWindow(false)
-}
-
-/**
- * Adds a listener that is called whenever the visibility of the chat button changes.
- * 
- * The listener is called with a single parameter which indicates if the button is visible or not.
- * @param listener the listener to register.
- * @returns a function that, when called, removes the listener.
- */
-function addChatVisibilityListener(listener: ChatVisibilityListener) {
-  chatVisibilityListeners.push(listener)
-  return () => pull(chatVisibilityListeners, listener)
-}
-
-function renderCloseButton(onClose?: () => void) {
-  const serviceNowButton = getServiceNowButton()
-  const anchor = serviceNowButton?.parentElement
-  if (!anchor) return
-  const close = document.createElement('button')
-  close.setAttribute('id', 'close-service-now')
-  close.style.cssText = closeButtonStyle
-  close.textContent = '-'
-
-  close.addEventListener('click', () => hideServiceNowChatButton(onClose))
-  anchor.appendChild(close)
-
-  serviceNowButton.addEventListener('mouseenter', () => {
-    const t = translate(dictionary, getLanguage(ptEn))
-    close.setAttribute('title', t.hide)
-    close.style.transform = 'scale(1)'
-
-    const onMouseMove = (ev: MouseEvent) => {
-      if (ev.clientX < window.innerWidth - HOVER_AREA_PX || ev.clientY < window.innerHeight - HOVER_AREA_PX) {
-        close.style.transform = 'scale(0)'
-        window.removeEventListener('mousemove', onMouseMove)
-      }
-    }
-    window.addEventListener('mousemove', onMouseMove)
-  })
-}
-
-function showServiceNowChatButton() {
-  getServiceNowButton()?.classList?.add('show')
-  localStorage.setItem(LOCAL_STORAGE_SERVICE_NOW_VALUE, 'true')
-  chatVisibilityListeners.forEach(l => l(true))
-}
-
-function hideServiceNowChatButton(onClose?: () => void) {
-  hideOrShowServiceNowContent('hidden')
-  hideChatWindow()
-  getServiceNowButton()?.classList?.remove('show')
-  localStorage.setItem(LOCAL_STORAGE_SERVICE_NOW_VALUE, 'false')
-  onClose?.()
-  chatVisibilityListeners.forEach(l => l(false))
-}
-
-function isServiceNowChatButtonVisible() {
-  return localStorage.getItem(LOCAL_STORAGE_SERVICE_NOW_VALUE) !== 'false'
-}
-
-async function initializeChat({ onClose }: Options = {}) {
-  try {
-    await loadScript(serviceNowReference)
-    if (isServiceNowChatButtonVisible()) showServiceNowChatButton()
-    else hideServiceNowChatButton()
-    renderCloseButton(onClose)
-  } catch {
-    const t = translate(dictionary, getLanguage(ptEn))
-    // eslint-disable-next-line no-console
-    console.warn(t.errorLoadScript)
-  }
-}
-
-/**
- * A react hook that indicates whether the chat button is visible or not. This is updated whenever the value changes.
- * @returns true if the chat button is visible and false otherwise.
- */
-export function useServiceNowChatButtonVisibility() {
-  const [visible, setVisible] = useState(isServiceNowChatButtonVisible())
-  useEffectOnce(() => addChatVisibilityListener(setVisible))
-  return visible
-}
-
-/**
- * Starts Service Now:
- * 
- * - Creates the chat window feature by loading the required script.
- * - Adds a "minimize" button on top of the chat button (left bottom corner). This button appears whenever the user hovers the chat button.
- * If clicked, the chat button is hidden. 
- * @param options 
- */
-export function useServiceNowEffect(options?: Options) {
-  useEffectOnce(() => {
-    initializeChat(options)
-  })
-}
-
-export const dictionary = {
-  en: {
-    errorLoadScript: 'An error occurred while loading the script:',
-    hide: 'Hide chat button',
-    hiddenTitle: 'The chat button is now hidden',
-    hiddenMessage: 'To see it again, please select the option "Chat with us" in the menu just under this message.',
-  },
-  pt: {
-    errorLoadScript: 'Ocorreu um erro ao carregar o script:',
-    hide: 'Esconder o botão de chat',
-    hiddenTitle: 'O botão de chat foi escondido',
-    hiddenMessage: 'Para vê-lo novamente, por favor escolha a opção "Converse conosco" no menu logo em baixo desta mensagem.',
-  },
-} satisfies Dictionary
+
+import { Dictionary, getLanguage, ptEn, translate } from '@stack-spot/portal-translate'
+import { pull } from 'lodash'
+import { useState } from 'react'
+import { useEffectOnce } from './use-effect-once'
+
+const CHAT_IFRAME_ID = 'sn_va_web_client'
+export const CHAT_BUTTON_ID = 'service-now-button'
+export const CHAT_BUTTON_WRAPPER_ID = 'service-now-content'
+
+const closeButtonStyle = `
+  position: absolute;
+  bottom: -64px;
+  right: 60px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #BCBCCF;
+  border: none;
+  outline: none;
+  border-radius: 50%;
+  font: 400 20px Roboto, sans-serif;
+  color: #0B0B0E;
+  cursor: pointer;
+  transform: scale(0);
+  transition: transform 0.2s;
+  z-index: 999999;
+`
+
+const iframeStyle = `
+  position: fixed;
+  display: none;
+  right: 15px;
+  bottom: 88px;
+  max-height: calc(100vh - 152px);
+  border-radius: 12px;
+  width: 380px;
+  height: 600px;
+`
+
+type ChatVisibilityListener = (visible: boolean) => void
+
+interface Options {
+  /**
+   * Function to run when the chat button is hidden, i.e. when the user clicks the close button that appears when the chat button is
+   * hovered.
+   */
+  onClose?: () => void,
+}
+
+const HOVER_AREA_PX = 100
+const LOCAL_STORAGE_SERVICE_NOW_VALUE = 'serviceNowChatButtonVisible'
+const chatVisibilityListeners: ChatVisibilityListener[] = []
+
+const serviceNowReference = 'https://zup.service-now.com/sn_va_web_client_app_embed.do?sysparm_branding_key=stackspotvirtualagent&sysparm_topic=f2b636c11bb50e50fe670dcbe54bcb1d'
+
+function loadScript(src: string): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    const iframe = document.createElement('iframe')
+    const serviceNowContent = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
+    iframe.setAttribute('id', CHAT_IFRAME_ID)
+    iframe.setAttribute('src', src)
+    iframe.style.cssText = iframeStyle
+
+    iframe.onload = () => resolve()
+    iframe.onerror = (error) => reject(error)
+
+    serviceNowContent && serviceNowContent.appendChild(iframe)
+  })
+}
+
+/**
+ * @returns the iframe loaded by service now, i.e. the chat window; or null if the chat window doesn't exist.
+ */
+export function getServiceNowLauncher() {
+  return document.getElementById(CHAT_IFRAME_ID)
+}
+
+/**
+ * Opens the chat window and makes the chat button visible.
+ */
+export function openServiceNowChat() {
+  hideOrShowServiceNowContent('visible')
+  showChatWindow()
+  showServiceNowChatButton()
+}
+
+function getServiceNowButton() {
+  return document.getElementById(CHAT_BUTTON_ID)
+}
+
+function hideOrShowServiceNowContent(action: 'visible' | 'hidden') {
+  const content = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
+  if (content) {
+    content.style.visibility = action
+  }
+}
+
+function toggleChatWindow(show: boolean) {
+  const launcher = getServiceNowLauncher()
+  const content = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
+  if (!launcher || !content) return
+  const [action, display] = show ? ['add', 'block'] as const : ['remove', 'none'] as const
+  launcher.classList[action]('show')
+  content.classList[action]('opened')
+  launcher.style.display = display
+}
+
+/**
+ * Shows the chat window, i.e. shows the service now iframe and switch the icon in the chat button to "close".
+ */
+export function showChatWindow() {
+  toggleChatWindow(true)
+}
+
+/**
+ * Hides the chat window, i.e. hides the service now iframe and switch the icon in the chat button to "chat".
+ */
+export function hideChatWindow() {
+  toggleChatWindow(false)
+}
+
+/**
+ * Adds a listener that is called whenever the visibility of the chat button changes.
+ * 
+ * The listener is called with a single parameter which indicates if the button is visible or not.
+ * @param listener the listener to register.
+ * @returns a function that, when called, removes the listener.
+ */
+function addChatVisibilityListener(listener: ChatVisibilityListener) {
+  chatVisibilityListeners.push(listener)
+  return () => pull(chatVisibilityListeners, listener)
+}
+
+function renderCloseButton(onClose?: () => void) {
+  const serviceNowButton = getServiceNowButton()
+  const anchor = serviceNowButton?.parentElement
+  if (!anchor) return
+  const close = document.createElement('button')
+  close.setAttribute('id', 'close-service-now')
+  close.style.cssText = closeButtonStyle
+  close.textContent = '-'
+
+  close.addEventListener('click', () => hideServiceNowChatButton(onClose))
+  anchor.appendChild(close)
+
+  serviceNowButton.addEventListener('mouseenter', () => {
+    const t = translate(dictionary, getLanguage(ptEn))
+    close.setAttribute('title', t.hide)
+    close.style.transform = 'scale(1)'
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (ev.clientX < window.innerWidth - HOVER_AREA_PX || ev.clientY < window.innerHeight - HOVER_AREA_PX) {
+        close.style.transform = 'scale(0)'
+        window.removeEventListener('mousemove', onMouseMove)
+      }
+    }
+    window.addEventListener('mousemove', onMouseMove)
+  })
+}
+
+function showServiceNowChatButton() {
+  getServiceNowButton()?.classList?.add('show')
+  localStorage.setItem(LOCAL_STORAGE_SERVICE_NOW_VALUE, 'true')
+  chatVisibilityListeners.forEach(l => l(true))
+}
+
+function hideServiceNowChatButton(onClose?: () => void) {
+  hideOrShowServiceNowContent('hidden')
+  hideChatWindow()
+  getServiceNowButton()?.classList?.remove('show')
+  localStorage.setItem(LOCAL_STORAGE_SERVICE_NOW_VALUE, 'false')
+  onClose?.()
+  chatVisibilityListeners.forEach(l => l(false))
+}
+
+function isServiceNowChatButtonVisible() {
+  return localStorage.getItem(LOCAL_STORAGE_SERVICE_NOW_VALUE) !== 'false'
+}
+
+async function initializeChat({ onClose }: Options = {}) {
+  try {
+    await loadScript(serviceNowReference)
+    if (isServiceNowChatButtonVisible()) showServiceNowChatButton()
+    else hideServiceNowChatButton()
+    renderCloseButton(onClose)
+  } catch {
+    const t = translate(dictionary, getLanguage(ptEn))
+    // eslint-disable-next-line no-console
+    console.warn(t.errorLoadScript)
+  }
+}
+
+/**
+ * A react hook that indicates whether the chat button is visible or not. This is updated whenever the value changes.
+ * @returns true if the chat button is visible and false otherwise.
+ */
+export function useServiceNowChatButtonVisibility() {
+  const [visible, setVisible] = useState(isServiceNowChatButtonVisible())
+  useEffectOnce(() => addChatVisibilityListener(setVisible))
+  return visible
+}
+
+/**
+ * Starts Service Now:
+ * 
+ * - Creates the chat window feature by loading the required script.
+ * - Adds a "minimize" button on top of the chat button (left bottom corner). This button appears whenever the user hovers the chat button.
+ * If clicked, the chat button is hidden. 
+ * @param options 
+ */
+export function useServiceNowEffect(options?: Options) {
+  useEffectOnce(() => {
+    initializeChat(options)
+  })
+}
+
+export const dictionary = {
+  en: {
+    errorLoadScript: 'An error occurred while loading the script:',
+    hide: 'Hide chat button',
+    hiddenTitle: 'The chat button is now hidden',
+    hiddenMessage: 'To see it again, please select the option "Chat with us" in the menu just under this message.',
+  },
+  pt: {
+    errorLoadScript: 'Ocorreu um erro ao carregar o script:',
+    hide: 'Esconder o botão de chat',
+    hiddenTitle: 'O botão de chat foi escondido',
+    hiddenMessage: 'Para vê-lo novamente, por favor escolha a opção "Converse conosco" no menu logo em baixo desta mensagem.',
+  },
+} satisfies Dictionary

package/src/hooks/text.tsx

@@ -1,30 +1,30 @@
-import { useEffect, useRef, useState } from 'react'
-
-/**
- * Checks if the text fits completely in the space available.
- * @returns true if it fits, false otherwise.
- */
-export function useCheckTextOverflow() {
-  const [overflow, setOverflow] = useState<boolean>(false)
-  const ref = useRef<HTMLParagraphElement>(null) 
-
-  const checkOverflow = () => {
-    if (!ref.current) {
-      return
-    }
-
-    const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth
-    
-    if (hasOverflow === overflow) {
-      return
-    }
-
-    setOverflow(hasOverflow)  
-  }
-
-  useEffect(() => {    
-    checkOverflow()
-  }, [ref.current])
-
-  return { overflow, ref }
-}
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Checks if the text fits completely in the space available.
+ * @returns true if it fits, false otherwise.
+ */
+export function useCheckTextOverflow() {
+  const [overflow, setOverflow] = useState<boolean>(false)
+  const ref = useRef<HTMLParagraphElement>(null) 
+
+  const checkOverflow = () => {
+    if (!ref.current) {
+      return
+    }
+
+    const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth
+    
+    if (hasOverflow === overflow) {
+      return
+    }
+
+    setOverflow(hasOverflow)  
+  }
+
+  useEffect(() => {    
+    checkOverflow()
+  }, [ref.current])
+
+  return { overflow, ref }
+}

package/src/hooks/title.tsx

@@ -1,28 +1,28 @@
-import { useEffect } from 'react'
-
-let originalTitle: string | undefined
-
-/**
- * A React effect for prefixing the page title with the string passed as parameter followed by " - ".
- * 
- * This returns a dispose function that changes the title back to its original value.
- * @param title the prefix to add to the page title.
- * @returns a dispose function.
- */
-export function titleEffect(title: string | undefined | null) {
-  originalTitle ??= document.title
-  document.title = title ? `${title} - ${originalTitle}` : originalTitle
-  return () => {
-    document.title = originalTitle ?? ''
-  }
-}
-
-/**
- * Changes the page title to have the string passed as parameter as a prefix followed by " - " and the original title.
- * 
- * Once disposed, this hook changes the title back to its original value.
- * @param title the prefix to add to the page title.
- */
-export function useTitleEffect(title: string | undefined | null) {
-  useEffect(() => titleEffect(title), [title])
-}
+import { useEffect } from 'react'
+
+let originalTitle: string | undefined
+
+/**
+ * A React effect for prefixing the page title with the string passed as parameter followed by " - ".
+ * 
+ * This returns a dispose function that changes the title back to its original value.
+ * @param title the prefix to add to the page title.
+ * @returns a dispose function.
+ */
+export function titleEffect(title: string | undefined | null) {
+  originalTitle ??= document.title
+  document.title = title ? `${title} - ${originalTitle}` : originalTitle
+  return () => {
+    document.title = originalTitle ?? ''
+  }
+}
+
+/**
+ * Changes the page title to have the string passed as parameter as a prefix followed by " - " and the original title.
+ * 
+ * Once disposed, this hook changes the title back to its original value.
+ * @param title the prefix to add to the page title.
+ */
+export function useTitleEffect(title: string | undefined | null) {
+  useEffect(() => titleEffect(title), [title])
+}

package/src/hooks/use-effect-once.tsx

@@ -1,43 +1,43 @@
-import { useEffect, useRef, useState } from 'react'
-
-/**
- * Code taken from https://blog.ag-grid.com/avoiding-react-18-double-mount/
- * 
- * Attention: don't use this hook unless you really have to!
- * 
- * This hook fixes the React 18 behavior of calling useEffect hooks twice in strict/development mode, which ruins some mounting/unmounting
- * behaviors.
- * 
- * @param effect refer to React's useEffect.
- */
-export const useEffectOnce = (effect: () => void | (() => void)) => {
-  const effectFn = useRef<() => void | (() => void)>(effect)
-  const destroyFn = useRef<void | (() => void)>()
-  const effectCalled = useRef(false)
-  const rendered = useRef(false)
-  const [, setVal] = useState<number>(0)
-
-  if (effectCalled.current) {
-    rendered.current = true
-  }
-
-  useEffect(() => {
-    // only execute the effect first time around
-    if (!effectCalled.current) {
-      destroyFn.current = effectFn.current()
-      effectCalled.current = true
-    }
-
-    // this forces one render after the effect is run
-    setVal((val) => val + 1)
-
-    return () => {
-      // if the comp didn't render since the useEffect was called,
-      // we know it's the dummy React cycle
-      if (!rendered.current) return
-
-      // otherwise this is not a dummy destroy, so call the destroy func
-      if (destroyFn.current) destroyFn.current()
-    }
-  }, [])
-}
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Code taken from https://blog.ag-grid.com/avoiding-react-18-double-mount/
+ * 
+ * Attention: don't use this hook unless you really have to!
+ * 
+ * This hook fixes the React 18 behavior of calling useEffect hooks twice in strict/development mode, which ruins some mounting/unmounting
+ * behaviors.
+ * 
+ * @param effect refer to React's useEffect.
+ */
+export const useEffectOnce = (effect: () => void | (() => void)) => {
+  const effectFn = useRef<() => void | (() => void)>(effect)
+  const destroyFn = useRef<void | (() => void)>()
+  const effectCalled = useRef(false)
+  const rendered = useRef(false)
+  const [, setVal] = useState<number>(0)
+
+  if (effectCalled.current) {
+    rendered.current = true
+  }
+
+  useEffect(() => {
+    // only execute the effect first time around
+    if (!effectCalled.current) {
+      destroyFn.current = effectFn.current()
+      effectCalled.current = true
+    }
+
+    // this forces one render after the effect is run
+    setVal((val) => val + 1)
+
+    return () => {
+      // if the comp didn't render since the useEffect was called,
+      // we know it's the dummy React cycle
+      if (!rendered.current) return
+
+      // otherwise this is not a dummy destroy, so call the destroy func
+      if (destroyFn.current) destroyFn.current()
+    }
+  }, [])
+}