@stack-spot/portal-layout 2.7.0 → 2.9.0

package/src/components/PortalSwitcher.tsx

@@ -6,8 +6,8 @@ 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 { PortalAcronym } from '../types'
 import { useTour } from './tour'
-import { PortalAcronym } from './types'
 
 const Logos: Record<PortalAcronym, ReactNode> = {
   'AI': <AI />,
@@ -67,7 +67,6 @@ const PortalSwitcherBox = styled(Flex)`
       }
 
       .action {
-        padding: 16px;
         background-color: ${theme.color.light['400']};
         border-width: 1px;
         border-style: solid;
@@ -79,7 +78,8 @@ const PortalSwitcherBox = styled(Flex)`
         }
 
         a {
-          height: auto;
+          padding: 16px;
+          height: 24px;
           transition: unset;
           align-items: flex-start;
         }
@@ -97,7 +97,6 @@ const PORTAL_SWITCHER_ID = 'PortalSwitcher'
  */
 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))
   usePortalSwitcherTourStep()
 
@@ -125,10 +124,7 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
       items={portals?.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,
@@ -142,27 +138,6 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
   </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.',
-    CS: 'Setup your business in the cloud with reliable services from Stackspot.',
-    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, knowledge sources e quick commands, tudo em um hub simplificado.',
-    CS: 'Coloque seu negócio na nuvem com os serviços de cloud confiáveis da Stackspot',
-    portalSwitcher: 'Seletor de portais',
-    selected: 'selecionado',
-  },
-}
-
-
 /**
  * Tutorial: a React hook for retrieving the React Tour step that explains how the portal switcher works. The portal switcher is a component
  * at the top left corner of the layout (header) that allows the user to switch between the different Stackspot portals.

package/src/components/Rate/hook.tsx

@@ -9,8 +9,8 @@ const loadScript = () => new Promise<void>((resolve, reject) => {
   document.body.appendChild(script)   
 })
 
-// Function to check if the difference between two dates is greater than 24 hours
-function isMoreThan24Hours(date1: Date, date2: Date) {
+// 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()
@@ -18,30 +18,17 @@ function isMoreThan24Hours(date1: Date, date2: Date) {
   // Calculate the difference in milliseconds
   const differenceInMilliseconds = Math.abs(timestamp2 - timestamp1)
   
-  // Convert milliseconds to hours
-  const differenceInHours = differenceInMilliseconds / (1000 * 60 * 60)
+  // Convert milliseconds to days
+  const differenceInDays = differenceInMilliseconds / (1000 * 60 * 60 * 24)
   
-  // Check if the difference is equal or greater than 24 hours
-  return differenceInHours >= 24
+  // Check if the difference is fewer than 30 days
+  return differenceInDays < 30
 }
 
-export function useRatingEffect(onOpenModal?: () => void) {
-  const verifyShowModal = () => {
-    const rateNpsItem = localStorage.getItem('rateNps')
-    const viewNpsItem = localStorage.getItem('viewNpsItem')
-    const shouldShow = viewNpsItem ? isMoreThan24Hours(new Date(+viewNpsItem), new Date(Date.now())) : true
-
-    setTimeout(() => {
-      if (!rateNpsItem && shouldShow) { 
-        onOpenModal?.()
-        localStorage.setItem('viewNpsItem', Date.now().toString())
-      }
-    }, 3000)
-  }
+export function useRatingEffect() {
 
   const handleInit = async () => {
     await loadScript()
-    verifyShowModal()
   }
 
   useEffectOnce(() => {

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

@@ -1,5 +1,5 @@
 function onNpsSubmit(): void {
-  localStorage.setItem('rateNps', 'true')
+  localStorage.setItem('RATED_US_IN', Date.now().toString())
 }
 
 export {}

package/src/components/menu/MenuSections.tsx

@@ -3,8 +3,10 @@ import { ChevronRight, Cog, Collapse, Expand, Support } from '@citric/icons'
 import { useKeyboardControls } from '@stack-spot/portal-components'
 import { useAnchorTag } from '@stack-spot/portal-components/anchor'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { elementIds, getLayoutElements } from '../../elements'
+import { StarFillWithGradient } from '../../svg/StarFillWithGradient'
+import { isLessThan30Days } from '../Rate/hook'
 import { MenuContent } from './MenuContent'
 import { MenuProps, MenuSection } from './types'
 
@@ -288,16 +290,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
       <ul role="menu">{sectionItems}</ul>
 
       <Flex mb={7} alignItems="center">
-        {(props.contactUs?.show) &&
-          <button role="menuitem" className="toggle sections-footer" onClick={props.contactUs?.onClick}
-            {...(props.contactUs.active ? { 'aria-current': 'page' } : undefined)}>
-            <IconBox aria-label={t.contactIcon}>
-              <Support />
-            </IconBox>
-            <Text appearance="microtext1" ml={8} sx={{ marginTop: '3px' }} 
-              className="collapse" colorScheme="light.contrastText">{t.contactUs}</Text>
-          </button>
-        }
+        <RateAndContactUsItem {...props} />
         <button role="menuitem" className="toggle sections-footer" onClick={() => toggleMenu(!!props.content || !!props.customContent)}
           title={t.toggle} tabIndex={-1}>
           <IconBox>
@@ -313,7 +306,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
             <IconBox aria-label={t.settingsIcon}>
               <Cog />
             </IconBox>
-            <Text appearance="microtext1"  ml={8} className="collapse">{t.settings}</Text>
+            <Text appearance="microtext1" ml={8} className="collapse">{t.settings}</Text>
           </Link>
         }
       </Flex>
@@ -325,6 +318,44 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   )
 }
 
+const RateAndContactUsItem = ({ ...props }: Omit<MenuProps, 'sections'>) => {
+  const t = useTranslate(dictionary)
+  const alreadyAnswered = localStorage.getItem('RATED_US_IN')
+  const hasAnsweredLess30Days = alreadyAnswered ? isLessThan30Days(new Date(+alreadyAnswered), new Date(Date.now())) : false
+
+  //This effect is only used to remove from local storage unused keys from 
+  //previous rate us and contact us versions. We do not want to fill the users storage
+  //with things that are not used anymore.
+  useEffect(() => {
+    localStorage.removeItem('CONTACT_POPOVER')
+    localStorage.removeItem('RATE_POPOVER')
+    localStorage.removeItem('viewNpsItem')
+  }, [])
+
+  return <>
+    {(props.rateUs?.show && !hasAnsweredLess30Days) &&
+      <button role="menuitem" className="toggle sections-footer" onClick={props.rateUs?.onClick}
+        {...(props.rateUs.active ? { 'aria-current': 'page' } : undefined)}>
+        <IconBox aria-label={t.rateUsIcon} sx={{ paddingTop: '2px' }}>
+          <StarFillWithGradient id="svg-icon" className="gradient-svg rotate-icon" />
+        </IconBox>
+        <Text appearance="microtext1" ml={8} sx={{ marginTop: '3px' }}
+          className="collapse gradient grow-shrink" colorScheme="light.contrastText">{t.rateUs}</Text>
+      </button>
+    }
+    {(props.contactUs?.show) &&
+      <button role="menuitem" className="toggle sections-footer" onClick={props.contactUs?.onClick}
+        {...(props.contactUs.active ? { 'aria-current': 'page' } : undefined)}>
+        <IconBox aria-label={t.contactIcon}>
+          <Support />
+        </IconBox>
+        <Text appearance="microtext1" ml={8} sx={{ marginTop: '3px' }}
+          className="collapse" colorScheme="light.contrastText">{t.contactUs}</Text>
+      </button>
+    }
+  </>
+}
+
 const dictionary = {
   en: {
     toggle: 'Show or hide the menu',
@@ -334,6 +365,8 @@ const dictionary = {
     hide: 'Hide',
     contactUs: 'Contact us',
     contactIcon: 'Contact icon',
+    rateUs: 'Rate us',
+    rateUsIcon: 'Rate us icon',
   },
   pt: {
     toggle: 'Visualizar ou esconder o menu',
@@ -343,5 +376,7 @@ const dictionary = {
     hide: 'Esconder',
     contactUs: 'Fale conosco',
     contactIcon: 'Ícone de contato',
+    rateUs: 'Avalie-nos',
+    rateUsIcon: 'Avalie-nos icon',
   },
 } satisfies Dictionary

package/src/components/menu/types.ts

@@ -182,6 +182,31 @@ interface BaseMenuProps {
   /**
    * Options for the rate button.
    */
+  rateUs?: {
+    /**
+     * Whether or not to show the rate button.
+     */
+    show?: boolean,
+    /**
+     * A function to call when the button is clicked.
+     */
+    onClick?: () => void,
+    /**
+     * A url to go to when the button is clicked.
+     */
+    href?: string,
+    /**
+     * Whether or not this button represents the page currently active.
+     */
+    active?: boolean,
+    /**
+     * A css class to pass to the button.
+     */
+    className?: string,
+  },
+  /**
+   * Options for the contact us button.
+   */
   contactUs?: {
     /**
      * Whether or not to show the rate button.

package/src/index.ts

@@ -1,3 +1,5 @@
+export { Backdrop } from './components/Backdrop'
+export { showContactUsModal, showRateUsModal } from './components/Contact/show-contact-modal'
 export { Dialog } from './components/Dialog'
 export { Header, HeaderProps } from './components/Header'
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent'
@@ -8,13 +10,11 @@ export { PortalSwitcher } from './components/PortalSwitcher'
 export { RateComponent } from './components/Rate'
 export { useRatingEffect } from './components/Rate/hook'
 export { showRatingModal } from './components/Rate/show-rating-modal'
-export { showContactUsModal } from './components/Contact/show-contact-modal'
-export { ContactPopover } from './components/Contact/ContactPopover'
 export * from './components/tour'
-export * from './components/types'
 export * from './elements'
 export * from './errors'
 export { Layout, RawLayout } from './Layout'
 export { overlay } from './LayoutOverlayManager'
+export * from './types'
 export * from './utils'
 

package/src/layout.css

@@ -192,6 +192,54 @@ body {
   z-index: 2;
 }
 
+.gradient-svg {
+  width: 100px;
+  height: 100px;
+}
+
+.gradient-svg path {
+  fill: url(#gradient);
+}
+
+#menuSections .toggle .gradient {
+  background: linear-gradient(to right, #FF9900, #FF6633);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotate-icon {
+  animation: rotate 2s linear forwards;
+  animation-delay: 2s;
+}
+
+@keyframes growShrink {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.grow-shrink {
+  animation: growShrink 2s ease-in-out forwards;
+}
+
 #menuSections > ul li a:before {
   content: '';
   position: absolute;
@@ -301,7 +349,7 @@ body {
   pointer-events: auto;
 }
 
-#modal {
+#modal,  #backdrop .modal-box {
   transform: scale(0);
   display: flex;
   flex-direction: column;
@@ -309,32 +357,32 @@ body {
   width: calc(100% - 60px);
 }
 
-#modal.fit-content {
+#modal.fit-content, #backdrop .modal-box.fit-content {
   width: auto;
 }
 
-#modal.full {
+#modal.full, #backdrop .modal-box.full {
   width: 100%;
   height: 100%;
 }
 
-#modal.large {
+#modal.large, #backdrop .modal-box.large {
   max-width: 1000px;
 }
 
-#modal.medium {
+#modal.medium, #backdrop .modal-box.medium {
   max-width: 800px;
 }
 
-#modal.small {
+#modal.small, #backdrop .modal-box.small {
   max-width: 600px;
 }
 
-#modal.visible {
+#modal.visible, #backdrop.visible .modal-box {
   transform: scale(1);
 }
 
-#rightPanel {
+#rightPanel, #backdrop .right-panel-box {
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -347,22 +395,22 @@ body {
   border-bottom-left-radius: 1rem;
 }
 
-#rightPanel.small {
+#rightPanel.small, #backdrop .right-panel-box.small {
   right: -400px;
   width: 400px;
 }
 
-#rightPanel.medium {
+#rightPanel.medium, #backdrop .right-panel-box.medium {
   right: -600px;
   width: 600px;
 }
 
-#rightPanel.large {
+#rightPanel.large, #backdrop .right-panel-box.large {
   right: -800px;
   width: 800px;
 }
 
-#rightPanel.visible {
+#rightPanel.visible, #backdrop.visible .right-panel-box {
   right: 0;
 }
 

package/src/svg/StarFillWithGradient.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+
+export const StarFillWithGradient = ({ className, id, style }: { className?: string, id?: string, style?: React.CSSProperties }) => (
+  <svg viewBox="0 0 512 512"  className={className} id={id} style={style} width="16" height="16"   xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" style={{ 'stopColor':'#FF9900', 'stopOpacity': 1 }}/>
+        <stop offset="100%" style={{ 'stopColor':'#FF6633', 'stopOpacity': 1 }}/>
+      </linearGradient>
+    </defs>
+    <path d="M226.885 21.9523C231.432 9.88404 242.98 1.91992 255.85 1.91992C268.719 1.91992 280.268 9.88408 284.814 21.9523C284.863 22.0812 284.91 22.2105 284.956 22.3403L335.667 165.876L478.048 165.876H478.049C490.986 165.876 502.581 173.922 507.079 186.08C511.579 198.245 508.006 211.912 498.152 220.324C498.075 220.39 497.997 220.456 497.918 220.521L377.676 320.039L428.087 471.216L428.091 471.226C432.349 484.019 427.824 498.078 416.935 505.998C406.055 513.912 391.305 513.892 380.445 505.949L380.435 505.941L255.825 414.67L131.151 505.944L131.075 506C131.045 506.021 131.016 506.042 130.987 506.063C120.124 513.848 105.488 513.783 94.6943 505.902C83.8927 498.015 79.374 484.073 83.5272 471.34C83.5408 471.299 83.5545 471.257 83.5683 471.216L133.979 320.041L13.7166 220.522C13.6378 220.457 13.5595 220.391 13.4817 220.324C3.62771 211.912 0.054518 198.245 4.55486 186.08C9.05287 173.922 20.6475 165.876 33.5842 165.876H33.5857L175.992 165.876L226.745 22.3356C226.791 22.2074 226.837 22.0796 226.885 21.9523Z" />
+  </svg>
+)
+  

package/src/types.ts

@@ -0,0 +1,4 @@
+export type PortalAcronym = 'EDP' | 'AI' | 'HUB' | 'CS'
+export type RightPanelSize = 'small' | 'medium' | 'large'
+export type ModalSize = RightPanelSize | 'fit-content'
+export type CustomModalSize = ModalSize | 'full'

package/dist/components/Contact/ContactPopover.d.ts

@@ -1,2 +0,0 @@
-export declare const ContactPopover: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ContactPopover.d.ts.map

package/dist/components/Contact/ContactPopover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContactPopover.d.ts","sourceRoot":"","sources":["../../../src/components/Contact/ContactPopover.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc,+CA0C1B,CAAA"}

package/dist/components/Contact/ContactPopover.js

@@ -1,44 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text } from '@citric/core';
-import { Popover } from '@citric/ui';
-import { useTranslate } from '@stack-spot/portal-translate';
-import { useEffect, useState } from 'react';
-import { useTour } from '../tour/index.js';
-const CONTACT_POPOVER = 'CONTACT_POPOVER';
-export const ContactPopover = () => {
-    const t = useTranslate(dictionary);
-    const { isOpen } = useTour();
-    const [visible, setVisible] = useState(false);
-    useEffect(() => {
-        if (!isOpen) {
-            const rateInStorage = localStorage.getItem(CONTACT_POPOVER);
-            setVisible(!rateInStorage);
-        }
-        else {
-            localStorage.removeItem(CONTACT_POPOVER);
-            setVisible(false);
-        }
-    }, [isOpen]);
-    return _jsx(Popover, { position: "right", sx: {
-            p: 3,
-            left: 'calc(var(--menu-sections-width) + 16px)',
-            bottom: 'calc(var(--menu-item-height) - 64px)',
-            top: 'auto',
-            maxHeight: '130px',
-            zIndex: '3',
-            '* button:disabled ': { pointerEvents: 'all' },
-        }, defaultVisible: visible, content: _jsx(Box, { px: 5, py: 3, children: _jsx(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: t.popoverContent }) }), title: t.contactUs, containerSx: { position: 'unset' }, onClose: () => {
-            visible && localStorage.setItem(CONTACT_POPOVER, '1');
-        }, children: _jsx(_Fragment, {}) });
-};
-const dictionary = {
-    en: {
-        contactUs: 'Contact us',
-        popoverContent: 'Here you can help us improve by rating StackSpot or request assistance from our support team.',
-    },
-    pt: {
-        contactUs: 'Fale conosco',
-        popoverContent: 'Aqui você pode nos ajudar a melhorar avaliando o StackSpot ou solicitando assistência de nossa equipe de suporte.',
-    },
-};
-//# sourceMappingURL=ContactPopover.js.map

package/dist/components/Contact/ContactPopover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContactPopover.js","sourceRoot":"","sources":["../../../src/components/Contact/ContactPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAU,IAAI,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEjC,MAAM,eAAe,GAAG,iBAAiB,CAAA;AAEzC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,CAAA;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,CAAA;YAC3D,UAAU,CAAC,CAAC,aAAa,CAAC,CAAA;QAC5B,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;YACxC,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,KAAC,OAAO,IACb,QAAQ,EAAC,OAAO,EAChB,EAAE,EAAE;YACF,CAAC,EAAE,CAAC;YACJ,IAAI,EAAE,yCAAyC;YAC/C,MAAM,EAAE,sCAAsC;YAC9C,GAAG,EAAE,MAAM;YACX,SAAS,EAAE,OAAO;YAClB,MAAM,EAAE,GAAG;YACX,oBAAoB,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;SACrC,EACX,cAAc,EAAE,OAAO,EACvB,OAAO,EACL,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,YAC7D,CAAC,CAAC,cAAc,GACZ,GACH,EAER,KAAK,EAAE,CAAC,CAAC,SAAS,EAClB,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAClC,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,eAAe,EAAE,GAAG,CAAC,CAAA;QACvD,CAAC,YAED,mBAAK,GACG,CAAA;AACZ,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,SAAS,EAAE,YAAY;QACvB,cAAc,EAAE,+FAA+F;KAChH;IACD,EAAE,EAAE;QACF,SAAS,EAAE,cAAc;QACzB,cAAc,EAAE,mHAAmH;KACpI;CACmB,CAAA"}

package/dist/components/types.d.ts

@@ -1,2 +0,0 @@
-export type PortalAcronym = 'EDP' | 'AI' | 'HUB' | 'CS';
-//# sourceMappingURL=types.d.ts.map

package/dist/components/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAA"}

package/dist/components/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":""}

package/src/components/Contact/ContactPopover.tsx

@@ -1,63 +0,0 @@
-import { Box, Styles, Text } from '@citric/core'
-import { Popover } from '@citric/ui'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useState } from 'react'
-import { useTour } from '../tour'
-
-const CONTACT_POPOVER = 'CONTACT_POPOVER'
-
-export const ContactPopover = () => {
-  const t = useTranslate(dictionary)
-  const { isOpen } = useTour()
-  const [visible, setVisible] = useState(false)
-
-  useEffect(() => {
-    if (!isOpen) {
-      const rateInStorage = localStorage.getItem(CONTACT_POPOVER)
-      setVisible(!rateInStorage)
-    } else {
-      localStorage.removeItem(CONTACT_POPOVER)
-      setVisible(false)
-    }
-  }, [isOpen])
-
-  return <Popover
-    position="right"
-    sx={{
-      p: 3,
-      left: 'calc(var(--menu-sections-width) + 16px)',
-      bottom: 'calc(var(--menu-item-height) - 64px)',
-      top: 'auto',
-      maxHeight: '130px',
-      zIndex: '3',
-      '* button:disabled ': { pointerEvents: 'all' },
-    } as Styles}
-    defaultVisible={visible}
-    content={
-      <Box px={5} py={3}>
-        <Text appearance="microtext1" colorScheme="inverse.contrastText">
-          {t.popoverContent}
-        </Text>
-      </Box>
-    }
-    title={t.contactUs}
-    containerSx={{ position: 'unset' }}
-    onClose={() => {
-      visible && localStorage.setItem(CONTACT_POPOVER, '1')
-    }}
-  >
-    <></>
-  </Popover>
-}
-
-const dictionary = {
-  en: {
-    contactUs: 'Contact us',
-    popoverContent: 'Here you can help us improve by rating StackSpot or request assistance from our support team.',
-  },
-  pt: {
-    contactUs: 'Fale conosco',
-    popoverContent: 'Aqui você pode nos ajudar a melhorar avaliando o StackSpot ou solicitando assistência de nossa equipe de suporte.',
-  },
-} satisfies Dictionary
-

package/src/components/types.ts

@@ -1 +0,0 @@
-export type PortalAcronym = 'EDP' | 'AI' | 'HUB' | 'CS'