@stack-spot/portal-layout 0.0.65 → 1.0.0-dev.1768482785050

package/src/components/NotificationCenter/styled.ts

@@ -0,0 +1,75 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+import { Backdrop } from '../Backdrop'
+
+export const NotificationBox = styled.div`
+  .notification-button {
+    border: none;
+    background: transparent;
+    margin: 0 40px;
+    position: relative;
+
+    &.loading {
+      cursor: progress;
+      opacity: 0.5;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      right: 9px;
+      top: 9px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: ${theme.color.danger['500']};
+      transform: scale(0);
+      transition: transform ease-in 0.3s;
+    }
+
+    &.unread:before {
+      transform: scale(1);
+    }
+  }
+`
+
+export const StyledBackdrop = styled(Backdrop)`
+  position: absolute;
+  top: calc(var(--header-height) + 10px);
+  right: 60px;
+  box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
+
+  .notification-panel {
+    width: 400px;
+    padding: 16px;
+    border-radius: 4px;
+    background-color: ${theme.color.light[300]};
+    border: 1px solid ${theme.color.light[400]};
+  }
+
+  .filter-list {
+    list-style: none;
+    margin: 16px 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .filter-btn {
+      &:focus {
+        border-color: transparent;
+      }
+      &[aria-pressed="true"] {
+        border-color: ${theme.color.primary[500]};
+      }
+    }
+  }
+
+  .see-all {
+    margin-top: 8px;
+    width: 100%;
+  }
+
+  .error-feedback {
+    flex-direction: column;
+  }
+`

package/src/components/NotificationCenter/types.ts

@@ -0,0 +1,24 @@
+import { NotificationListProps } from '@stack-spot/portal-components/Notifications'
+
+export type NotificationFilter = 'ALL' | 'UNREAD' | 'HIGH' | 'MEDIUM' | 'LOW'
+
+export interface NotificationPanelProps extends Omit<NotificationListProps, 'compact' | 'onCommit' | 'onUncommit'> {
+  filter: NotificationFilter,
+  loading: boolean,
+  error: any,
+  onFilter: (filter: NotificationFilter) => Promise<void>,
+  visible: boolean,
+  onClose: () => void,
+}
+
+export interface NotificationPanelHeaderProps {
+  filter: NotificationFilter,
+  onChangeFilter: (value: NotificationFilter) => Promise<void>,
+  onClose: () => void,
+}
+
+export interface FilterButtonProps {
+  value: NotificationFilter,
+  current: NotificationFilter,
+  onChangeFilter: (value: NotificationFilter) => void,
+}

package/src/components/NotificationCenter/utils.ts

@@ -0,0 +1,20 @@
+import { LoadNotificationsFilters } from '@stack-spot/portal-components/Notifications'
+import { NotificationFilter } from './types'
+
+const empty: LoadNotificationsFilters = { committed: undefined, context: undefined, criticality: undefined, search: undefined }
+
+export function getFiltersFromName(filterName: NotificationFilter): LoadNotificationsFilters {
+  switch (filterName) {
+    case 'ALL': return empty
+    case 'HIGH': return { ...empty, criticality: 'HIGH' }
+    case 'LOW': return { ...empty, criticality: 'LOW' }
+    case 'MEDIUM': return { ...empty, criticality: 'MEDIUM' }
+    case 'UNREAD': return { ...empty, committed: false }
+  }
+}
+
+export function getNameFromFilters(filters: LoadNotificationsFilters): NotificationFilter {
+  if (filters.committed === false) return 'UNREAD'
+  if (filters.criticality) return filters.criticality
+  return 'ALL'
+}

package/src/components/OverlayContent.tsx

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@citric/core'
-import { TimesMini } from '@citric/icons'
+import { ArrowLeft, TimesMini } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
 import { ReactNode } from 'react'
@@ -9,14 +9,36 @@ import { useDictionary } from '../dictionary'
 export const CLOSE_OVERLAY_ID = 'close-overlay'
 
 export interface OverlayContentProps extends WithStyle {
+  /**
+   * The title for the modal or right panel.
+   */
   title: string,
+  /**
+   * The subtitle for the modal or right panel.
+   */
   subtitle?: string,
+  /**
+   * Function to call when the "go back" button is pressed. If unset, the button is not shown.
+   */
+  onGoBack?: () => void,
+  /**
+   * The content for the modal or right panel.
+   */
   children: ReactNode,
+  /**
+   * A function to run when the close button is pressed.
+   */
   onClose?: () => void,
 }
 
 interface Props extends OverlayContentProps {
+  /**
+   * A function to run when the close button is pressed.
+   */
   onClose: () => void,
+  /**
+   * Whether this is a modal or a right panel.
+   */
   type: 'modal' | 'panel',
 }
 
@@ -34,23 +56,36 @@ const ContentBox = styled.section`
     flex-direction: column;
     flex: 1;
   }
-  header {
+  > header {
     display: flex;
     flex-direction: row;
     margin-bottom: 1.25rem;
   }
 `
 
-export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => {
+/**
+ * Renders a modal or right panel with title, subtitle, close button and content.
+ * @param props the React props for the component {@link Props}.
+ */
+export const OverlayContent = ({ children, title, subtitle, className, style, onClose, onGoBack, type }: Props) => {
   const t = useDictionary()
   return (
     <ContentBox style={style} className={listToClass([className, type])}>
       <header>
         <Flex flexDirection="column" flex={1}>
-          <Text as="h2" appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
+          <Flex style={{ gap: '6px' }}>
+            {onGoBack && (
+              <IconButton appearance="circle" onClick={onGoBack} title={t.goBack} aria-label={t.goBack}>
+                <ArrowLeft />
+              </IconButton>
+            )}
+            <Text as="h1" appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
+          </Flex>
           {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
         </Flex>
-        <IconButton onClick={onClose} title={t.close} aria-label={t.close} id={CLOSE_OVERLAY_ID}><TimesMini /></IconButton>
+        <IconButton appearance="circle" onClick={onClose} title={t.close} aria-label={t.close} id={CLOSE_OVERLAY_ID}>
+          <TimesMini />
+        </IconButton>
       </header>
       {children}
     </ContentBox>

package/src/components/PortalSwitcher.tsx

@@ -1,26 +1,39 @@
-import { Button, Flex, IconBox, Text } from '@citric/core'
+import { Button, Flex, IconBox } from '@citric/core'
 import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { AI, CS, EDP, HUB, Logo } from '@stack-spot/portal-components/svg'
 import { theme } from '@stack-spot/portal-theme'
-import { useTranslate } from '@stack-spot/portal-translate'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components'
-import { SelectionList, announce } from '..'
-import { AI } from '../svg/AI'
-import { EDP } from '../svg/EDP'
-import { HUB } from '../svg/HUB'
-import { Logo } from '../svg/Logo'
-import { PortalAcronym } from './types'
-
+import { PortalAcronym } from '../types'
 
 const Logos: Record<PortalAcronym, ReactNode> = {
   'AI': <AI />,
   'EDP': <EDP />,
   'HUB': <HUB />,
+  'CS': <CS />,
+  'ACCOUNT': <Logo />,
 }
 
-export interface Portal { acronym: PortalAcronym, url: string }
+export interface Portal {
+  /**
+   * A Stackspot Portal.
+   */
+  acronym: PortalAcronym,
+  /**
+   * The URL to the Stackspot Portal.
+   */
+  url: string,
+  /**
+   * Show portal on List
+   */
+  showOnList?: boolean,
+}
 
 export interface PortalSwitcherProps {
+  /**
+   * The Stackspot portals to show in the selector.
+   */
   portals?: Portal[],
 }
 
@@ -57,7 +70,6 @@ const PortalSwitcherBox = styled(Flex)`
       }
 
       .action {
-        padding: 16px;
         background-color: ${theme.color.light['400']};
         border-width: 1px;
         border-style: solid;
@@ -69,6 +81,7 @@ const PortalSwitcherBox = styled(Flex)`
         }
 
         a {
+          padding: 16px;
           height: auto;
           transition: unset;
           align-items: flex-start;
@@ -80,9 +93,13 @@ const PortalSwitcherBox = styled(Flex)`
 `
 const PORTAL_SWITCHER_ID = 'PortalSwitcher'
 
+/**
+ * A selector with different Stackspot portals.
+ * Each item contains a logo with a link to the portal.
+ * @param props the component Props {@link PortalSwitcherProps}.
+ */
 export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
   const [visible, setVisible] = useState<boolean>(false)
-  const t = useTranslate(translations)
   const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
 
   return <PortalSwitcherBox>
@@ -93,10 +110,8 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
         colorScheme="light"
         aria-controls={PORTAL_SWITCHER_ID}
         aria-expanded={visible}
-        aria-label={`${t.portalSwitcher}: ${currentPortal?.acronym} ${t.selected}`}
         onClick={() => {
-          setVisible(true)
-          announce(`${t.portalSwitcher} ${t.selected}`)
+          setVisible(!visible)
         }}>
         <Flex alignItems="center" className="portal-switcher">
           {Logos[currentPortal.acronym]}
@@ -108,18 +123,15 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
       <Logo />}
     <SelectionList
       id={PORTAL_SWITCHER_ID}
-      items={portals?.map(portal => ({
+      items={portals?.filter((portal) => portal.showOnList !== false).map(portal => ({
         label: {
           id: portal.acronym,
-          element: <Flex flexDirection="column">
-            {Logos[portal.acronym]}
-            <Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
-          </Flex>,
+          element: <Flex w="250px">{Logos[portal.acronym]}</Flex>,
         },
         target: '_self',
         href: portal.url,
         active: currentPortal?.acronym == portal.acronym,
-        iconActive: <CheckCircleFill aria-label={t.selected} />,
+        iconActive: <CheckCircleFill />,
         iconRight: portal.acronym !== currentPortal?.acronym ? <ArrowRight /> : undefined,
       }))}
       visible={visible}
@@ -127,21 +139,3 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
       onHide={() => setVisible(false)} />
   </PortalSwitcherBox >
 }
-
-
-const translations = {
-  en: {
-    EDP: 'Efficient and secure solutions from code to production deployment.',
-    AI: 'Speed up coding with efficient suggestions and high-quality results.',
-    HUB: 'Discover AI Stacks, knowledge sources, and quick commands, all in one streamlined hub.',
-    portalSwitcher: 'Portal switcher',
-    selected: 'selected',
-  },
-  pt: {
-    EDP: 'Soluções eficientes e seguras do código até a implantação em produção.',
-    AI: 'Acelere o desenvolvimento com sugestões eficientes e resultados de alta qualidade.',
-    HUB: 'Descubra AI Stacks, knownledge sources e quick commands, tudo em um hub simplificado.',
-    portalSwitcher: 'Seletor de portais',
-    selected: 'selecionado',
-  },
-}

package/src/components/PrivacyPolicyMessage/hooks.tsx

@@ -0,0 +1,49 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useState } from 'react'
+import { overlay } from '../../LayoutOverlayManager'
+import { PrivacyPolicyMessage, PrivacyPolicyMessageProps } from '.'
+
+interface PrivacyPolicyProps extends PrivacyPolicyMessageProps {
+  policy?: string,
+  policyValue?: string,
+  domain?: string,
+  confirmText?: string,
+}
+
+export function usePrivacyPolicyEffect({
+  policy = 'okCookies',
+  policyValue = 'true',
+  domain = '.stackspot.com',
+  privacyPoliceUrl,
+  message,
+  policyText,
+  confirmText,
+}: PrivacyPolicyProps) {
+  const t = useTranslate(dictionary)
+  const [visible, setVisible] = useState(!document.cookie.match(new RegExp(`${policy}=([^;]+)`))?.[1])
+
+  async function checkPolicy() {
+    if (visible) {
+      await overlay.showBottomDialog({
+        confirm: confirmText || t.ok,
+        children: <PrivacyPolicyMessage privacyPoliceUrl={privacyPoliceUrl} message={message} policyText={policyText} />,
+      })
+      document.cookie = `${policy}=${policyValue};path=/${location.host.endsWith(domain) ? `;domain=${domain}` : ''}`
+      setVisible(false)
+    }
+    else overlay.closeBottomDialog()
+  }
+
+  useEffect(() => {
+    checkPolicy()
+  }, [visible])
+}
+
+const dictionary = {
+  en: {
+    ok: 'Ok',
+  },
+  pt: {
+    ok: 'Ok',
+  },
+} satisfies Dictionary

package/src/components/PrivacyPolicyMessage/index.tsx

@@ -0,0 +1,21 @@
+import { IconBox, Link, Text } from '@citric/core'
+import { Cookie } from '@citric/icons'
+
+export interface PrivacyPolicyMessageProps {
+  message: string,
+  policyText?: string,
+  privacyPoliceUrl?: string,
+}
+
+export const PrivacyPolicyMessage = ({ message, policyText, privacyPoliceUrl }: PrivacyPolicyMessageProps) => <>
+  <IconBox size="md" colorIcon="inverse">
+    <Cookie />
+  </IconBox>
+  <Text>
+    {message}
+    {privacyPoliceUrl && <Link colorScheme="inverse.contrastText" weight="bold" href={privacyPoliceUrl} target="_blank">
+      {policyText}
+    </Link>}
+  </Text>
+</>
+

package/src/components/Rate/FeedbackModal.tsx

@@ -0,0 +1,86 @@
+import { Box, Button, Flex, IconBox, Styles, Text } from '@citric/core'
+import { ArrowRight, TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useCallback, useEffect, useState } from 'react'
+import { shouldShowNpsModal } from './hook'
+import { checkVisibility } from './utils'
+
+const style: Styles = {
+  box: {
+    width: '438px',
+    bg: 'light.500',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    p: 5,
+    zIndex: 1,
+    borderRadius: '16px',
+    boxShadow: `4px 4px 48px 0px ${theme.color.light[300]}`,
+  },
+}
+
+interface Props { 
+  onClick: () => void, 
+  portal: 'EDP' | 'AI', 
+  customShouldShowNpsModal?: () => boolean,
+}
+
+export const FeedbackModal = ({ onClick, portal, customShouldShowNpsModal }: Props) => {
+  const t = useTranslate(dictionary)
+  const [isNpsVisible, setIsNpsVisible] = useState(customShouldShowNpsModal ? customShouldShowNpsModal() : shouldShowNpsModal())
+
+  const handleClose = () => {
+    localStorage.setItem('RATED_US_IN', Date.now().toString())
+    setIsNpsVisible(false)
+  }
+  
+  const visibilityCheck = useCallback((event: StorageEvent) => checkVisibility(event, setIsNpsVisible, customShouldShowNpsModal), [])
+
+  useEffect(() => {
+    checkVisibility({ key: 'RATED_US_IN' } as StorageEvent, setIsNpsVisible, customShouldShowNpsModal)
+    
+    window.addEventListener('storage', visibilityCheck)
+
+    return () => {
+      window.removeEventListener('storage', visibilityCheck)
+    }
+  }, [])
+
+  return isNpsVisible ? (
+    <Box sx={style.box} id="feedback-modal">
+      <Flex justifyContent="space-between" flexWrap="nowrap">
+        <Text appearance="h5" mb={6}>{t.title}{portal}?</Text>
+        <IconButton onClick={handleClose} id="feedback-modal-close-icon">
+          <TimesMini />
+        </IconButton>
+      </Flex>
+      <Text sx={{ lineHeight: '24px' }}>
+        {t.description}
+      </Text>
+      <Flex flexDirection="row-reverse" mt={7} mb={4}>
+        <Button onClick={onClick} size="md">
+          {t.buttonText}
+          <IconBox colorIcon="inverse.contrastText" ml={2}>
+            <ArrowRight />
+          </IconBox>
+        </Button>
+      </Flex>
+    </Box>
+  ) : null
+}
+
+const dictionary = {
+  en: {
+    title: 'How’s your experience with StackSpot ',
+    description: 'Your feedback helps us make the platform more useful and intuitive for you. It only takes a few minutes.',
+    buttonText: 'Share your feedback',
+  },
+  pt: {
+    title: 'Como está sua experiência com StackSpot ',
+    description: 'Seu feedback nos ajuda a tornar a plataforma mais útil e intuitiva para você. Leva apenas alguns minutos.',
+    buttonText: 'Compartilhe seu feedback',
+  },
+} satisfies Dictionary
+

package/src/components/Rate/hook.tsx

@@ -0,0 +1,61 @@
+
+// Function to check if the difference between two dates is greater than 30 days
+export function isLessThan30Days(date1: Date, date2: Date) {
+  // Get the timestamps of the dates
+  const timestamp1 = date1.getTime()
+  const timestamp2 = date2.getTime()
+
+  // Calculate the difference in milliseconds
+  const differenceInMilliseconds = Math.abs(timestamp2 - timestamp1)
+
+  // Convert milliseconds to days
+  const differenceInDays = differenceInMilliseconds / (1000 * 60 * 60 * 24)
+
+  // Check if the difference is fewer than 30 days
+  return differenceInDays < 30
+}
+
+// Function to check if a day is business day
+const isBusinessDay = (date: Date): boolean => {
+  const dayOfWeek = date.getDay()
+  return dayOfWeek !== 0 && dayOfWeek !== 6 // 0 = sunday, 6 = saturday
+}
+
+// Function that returns a boolean to show modal feedback
+export const shouldShowNpsModal = (): boolean => {
+  const today = new Date()
+  const currentDay = today.getDate()
+
+  // Check if the month has already been evaluated
+  const ratedInfo = localStorage.getItem('RATED_US_IN')
+
+  if (ratedInfo) {
+    const savedDate = new Date(parseInt(ratedInfo, 10))
+    const isSameMonth = savedDate.getMonth() === today.getMonth() && savedDate.getFullYear() === today.getFullYear()
+
+    // If it has already been evaluated this month, do not show the modal
+    if (isSameMonth) return false
+  }
+
+  // Variables to control working days shown and extension day
+  let businessDaysShown = 0
+  let day = 25
+
+  // Iterate from the 25th until you can show 3 business days
+  while (businessDaysShown < 3) {
+    const checkDate = new Date(today.getFullYear(), today.getMonth(), day)
+
+    if (isBusinessDay(checkDate)) {
+      businessDaysShown++
+    }
+
+    // If we are on the current day and have not yet completed the working days, show the modal
+    if (currentDay === day) {
+      return true
+    }
+
+    day++
+  }
+
+  return false
+}

package/src/components/Rate/index.tsx

@@ -0,0 +1,36 @@
+import { Box, Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import { useEffect, useState } from 'react'
+import './on-nps-submit'
+
+interface Props {
+  tfLive: string,
+  userId: string,
+  orgId: string,
+  portal: 'AI' | 'EDP',
+}
+
+export const RateComponent = ({ tfLive, userId, orgId, portal }: Props) => {
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    (window as any).tf?.load()
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 2000)
+  }, [])
+
+  return (
+    <Box sx={{ minWidth: '650px', minHeight: '500px' }}>
+      {isLoading && <Flex alignItems="center" justifyContent="center" w="12" sx={{ height: '100%' }}>
+        <LoadingCircular />
+      </Flex>}
+      <Box sx={{ opacity: isLoading ? '0' : 1 }}>
+        <div data-tf-live={tfLive} 
+          data-tf-hidden={`user_id=${userId},org_id=${orgId},portal_name=${portal}`} 
+          data-tf-open="time" data-tf-open-value="100" data-tf-on-submit="onNpsSubmit" />
+      </Box>
+    </Box>
+  )
+}
+

package/src/components/Rate/on-nps-submit.ts

@@ -0,0 +1,18 @@
+import { overlay } from '../../LayoutOverlayManager'
+
+function onNpsSubmit(): void {
+  localStorage.setItem('RATED_US_IN', Date.now().toString())
+  overlay.closeModal()
+  document.getElementById('feedback-modal-close-icon')?.click()
+}
+
+export {}
+
+// Attach the function to the window object
+declare global {
+  interface Window {
+    onNpsSubmit: () => void,
+  }
+}
+
+window.onNpsSubmit = onNpsSubmit

package/src/components/Rate/show-rate-us-modals.tsx

@@ -0,0 +1,29 @@
+import { overlay } from '../../LayoutOverlayManager'
+import { FeedbackModal } from './FeedbackModal'
+import { RateComponent } from '.'
+
+interface PropsShowFeedbackModal  { 
+  onClick: () => void, 
+  portal: 'EDP' | 'AI',
+  customShouldShowNpsModal?: () => boolean,
+}
+
+export const ShowFeedbackModal = ({ onClick, portal, customShouldShowNpsModal }: PropsShowFeedbackModal) => (
+  <FeedbackModal onClick={onClick} portal={portal} customShouldShowNpsModal={customShouldShowNpsModal} />
+)
+
+interface Props {
+  sub: string,
+  tenant: string,
+  portal: 'EDP' | 'AI',
+  formIdentifier: string,
+}
+
+export const showRateUsModal = ({ title, ...props }: Props & { title: string }) => {
+  const { formIdentifier, sub, tenant, portal } = props
+  overlay.showModal({
+    title: title,
+    children: <RateComponent tfLive={formIdentifier} userId={sub} orgId={tenant} portal={portal} />,
+    size: 'large',
+  })
+}

package/src/components/Rate/utils.ts

@@ -0,0 +1,11 @@
+import { shouldShowNpsModal } from './hook'
+
+export const checkVisibility = (event: StorageEvent, fnUpdateState: React.Dispatch<React.SetStateAction<boolean>>, 
+  customShouldShow?: () => boolean) => {
+  if (event.key === 'RATED_US_IN') {
+    const shouldShow = customShouldShow ? customShouldShow() : shouldShowNpsModal()
+    if (!shouldShow) {
+      fnUpdateState(false)
+    }
+  }
+}