@stack-spot/portal-layout 2.19.3 → 2.19.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.19.4](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.19.3...portal-layout@v2.19.4) (2024-12-20)
+
+
+### Bug Fixes
+
+* Improve nps flow ([#599](https://github.com/stack-spot/portal-commons/issues/599)) ([5af32a3](https://github.com/stack-spot/portal-commons/commit/5af32a3a714dff206180c63c4fad74d731902d87))
+
 ## [2.19.3](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.19.2...portal-layout@v2.19.3) (2024-12-20)
 
 

package/dist/components/Rate/FeedbackModal.d.ts

@@ -1,5 +1,5 @@
 export declare const FeedbackModal: ({ onClick, portal }: {
     onClick: () => void;
     portal: 'EDP' | 'AI';
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=FeedbackModal.d.ts.map

package/dist/components/Rate/FeedbackModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackModal.d.ts","sourceRoot":"","sources":["../../../src/components/Rate/FeedbackModal.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,aAAa,wBAAyB;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,4CAyC/F,CAAA"}
+{"version":3,"file":"FeedbackModal.d.ts","sourceRoot":"","sources":["../../../src/components/Rate/FeedbackModal.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,aAAa,wBAAyB;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,mDA0C/F,CAAA"}

package/dist/components/Rate/FeedbackModal.js

@@ -4,7 +4,8 @@ import { ArrowRight, TimesMini } from '@citric/icons';
 import { IconButton } from '@citric/ui';
 import { theme } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { shouldShowNpsModal } from './hook.js';
 import { checkVisibility } from './utils.js';
 const style = {
     box: {
@@ -21,19 +22,20 @@ const style = {
 };
 export const FeedbackModal = ({ onClick, portal }) => {
     const t = useTranslate(dictionary);
+    const [isNpsVisible, setIsNpsVisible] = useState(shouldShowNpsModal());
     const handleClose = () => {
         localStorage.setItem('RATED_US_IN', Date.now().toString());
-        checkVisibility({ key: 'RATED_US_IN' });
+        setIsNpsVisible(false);
     };
+    const visibilityCheck = useCallback((event) => checkVisibility(event, setIsNpsVisible), []);
     useEffect(() => {
-        checkVisibility({ key: 'RATED_US_IN' });
-        const visibilityCheck = (event) => checkVisibility(event);
+        checkVisibility({ key: 'RATED_US_IN' }, setIsNpsVisible);
         window.addEventListener('storage', visibilityCheck);
         return () => {
             window.removeEventListener('storage', visibilityCheck);
         };
     }, []);
-    return (_jsxs(Box, { sx: style.box, id: "feedback-modal", children: [_jsxs(Flex, { justifyContent: "space-between", flexWrap: "nowrap", children: [_jsxs(Text, { appearance: "h5", mb: 6, children: [t.title, portal, "?"] }), _jsx(IconButton, { onClick: handleClose, children: _jsx(TimesMini, {}) })] }), _jsx(Text, { sx: { lineHeight: '24px' }, children: t.description }), _jsx(Flex, { flexDirection: "row-reverse", mt: 7, mb: 4, children: _jsxs(Button, { onClick: onClick, size: "md", children: [t.buttonText, _jsx(IconBox, { colorIcon: "inverse.contrastText", ml: 2, children: _jsx(ArrowRight, {}) })] }) })] }));
+    return isNpsVisible ? (_jsxs(Box, { sx: style.box, id: "feedback-modal", children: [_jsxs(Flex, { justifyContent: "space-between", flexWrap: "nowrap", children: [_jsxs(Text, { appearance: "h5", mb: 6, children: [t.title, portal, "?"] }), _jsx(IconButton, { onClick: handleClose, id: "feedback-modal-close-icon", children: _jsx(TimesMini, {}) })] }), _jsx(Text, { sx: { lineHeight: '24px' }, children: t.description }), _jsx(Flex, { flexDirection: "row-reverse", mt: 7, mb: 4, children: _jsxs(Button, { onClick: onClick, size: "md", children: [t.buttonText, _jsx(IconBox, { colorIcon: "inverse.contrastText", ml: 2, children: _jsx(ArrowRight, {}) })] }) })] })) : null;
 };
 const dictionary = {
     en: {

package/dist/components/Rate/FeedbackModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackModal.js","sourceRoot":"","sources":["../../../src/components/Rate/FeedbackModal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FeedbackModal.js","sourceRoot":"","sources":["../../../src/components/Rate/FeedbackModal.tsx"],"names":[],"mappings":"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"}

package/dist/components/Rate/on-nps-submit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"on-nps-submit.d.ts","sourceRoot":"","sources":["../../../src/components/Rate/on-nps-submit.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,CAAA;AAGT,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,WAAW,EAAE,MAAM,IAAI,CAAC;KACzB;CACF"}
+{"version":3,"file":"on-nps-submit.d.ts","sourceRoot":"","sources":["../../../src/components/Rate/on-nps-submit.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,CAAA;AAGT,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,WAAW,EAAE,MAAM,IAAI,CAAC;KACzB;CACF"}

package/dist/components/Rate/on-nps-submit.js

@@ -1,7 +1,8 @@
-import { checkVisibility } from './utils.js';
+import { overlay } from '../../LayoutOverlayManager.js';
 function onNpsSubmit() {
     localStorage.setItem('RATED_US_IN', Date.now().toString());
-    checkVisibility({ key: 'RATED_US_IN' });
+    overlay.closeModal();
+    document.getElementById('feedback-modal-close-icon')?.click();
 }
 window.onNpsSubmit = onNpsSubmit;
 //# sourceMappingURL=on-nps-submit.js.map

package/dist/components/Rate/on-nps-submit.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-nps-submit.js","sourceRoot":"","sources":["../../../src/components/Rate/on-nps-submit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,SAAS,WAAW;IAClB,YAAY,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC1D,eAAe,CAAC,EAAE,GAAG,EAAE,aAAa,EAAkB,CAAC,CAAA;AACzD,CAAC;AAWD,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA"}
+{"version":3,"file":"on-nps-submit.js","sourceRoot":"","sources":["../../../src/components/Rate/on-nps-submit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,SAAS,WAAW;IAClB,YAAY,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC1D,OAAO,CAAC,UAAU,EAAE,CAAA;IACpB,QAAQ,CAAC,cAAc,CAAC,2BAA2B,CAAC,EAAE,KAAK,EAAE,CAAA;AAC/D,CAAC;AAWD,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA"}

package/dist/components/Rate/show-rate-us-modals.d.ts

@@ -1,4 +1,4 @@
-export declare const showFeedbackModal: ({ onClick, portal }: {
+export declare const ShowFeedbackModal: ({ onClick, portal }: {
     onClick: () => void;
     portal: 'EDP' | 'AI';
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Rate/show-rate-us-modals.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { overlay } from '../../LayoutOverlayManager.js';
 import { FeedbackModal } from './FeedbackModal.js';
 import { RateComponent } from './index.js';
-export const showFeedbackModal = ({ onClick, portal }) => (_jsx(FeedbackModal, { onClick: onClick, portal: portal }));
+export const ShowFeedbackModal = ({ onClick, portal }) => (_jsx(FeedbackModal, { onClick: onClick, portal: portal }));
 export const showRateUsModal = ({ title, ...props }) => {
     const { formIdentifier, sub, tenant, portal } = props;
     overlay.showModal({

package/dist/components/Rate/utils.d.ts

@@ -1,2 +1,2 @@
-export declare const checkVisibility: (event: StorageEvent) => void;
+export declare const checkVisibility: (event: StorageEvent, fnUpdateState: React.Dispatch<React.SetStateAction<boolean>>) => void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/Rate/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Rate/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,UAAW,YAAY,SAYlD,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Rate/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,UAAW,YAAY,iBAAiB,MAAM,QAAQ,CAAC,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC,SAOhH,CAAA"}

package/dist/components/Rate/utils.js

@@ -1,15 +1,9 @@
 import { shouldShowNpsModal } from './hook.js';
-export const checkVisibility = (event) => {
+export const checkVisibility = (event, fnUpdateState) => {
     if (event.key === 'RATED_US_IN') {
         const shouldShow = shouldShowNpsModal();
         if (!shouldShow) {
-            try {
-                document.getElementById('feedback-modal')?.remove();
-            }
-            catch {
-                // eslint-disable-next-line no-console
-                console.warn('Error removing');
-            }
+            fnUpdateState(false);
         }
     }
 };

package/dist/components/Rate/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Rate/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAmB,EAAE,EAAE;IACrD,IAAI,KAAK,CAAC,GAAG,KAAK,aAAa,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,kBAAkB,EAAE,CAAA;QACvC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,IAAI,CAAC;gBACH,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;YACrD,CAAC;YAAC,MAAM,CAAC;gBACP,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC,CAAA"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Rate/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAmB,EAAE,aAA4D,EAAE,EAAE;IACnH,IAAI,KAAK,CAAC,GAAG,KAAK,aAAa,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,kBAAkB,EAAE,CAAA;QACvC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,aAAa,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC;AACH,CAAC,CAAA"}

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { usePrivacyPolicyEffect } from './components/PrivacyPolicyMessage/hooks.js';
 export { RateComponent } from './components/Rate/index.js';
 export { shouldShowNpsModal, useRatingEffect } from './components/Rate/hook.js';
-export { showFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals.js';
+export { ShowFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals.js';
 export * from './components/tour/index.js';
 export * from './elements.js';
 export * from './errors.js';

package/dist/index.js

@@ -10,7 +10,7 @@ export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { usePrivacyPolicyEffect } from './components/PrivacyPolicyMessage/hooks.js';
 export { RateComponent } from './components/Rate/index.js';
 export { shouldShowNpsModal, useRatingEffect } from './components/Rate/hook.js';
-export { showFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals.js';
+export { ShowFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals.js';
 export * from './components/tour/index.js';
 export * from './elements.js';
 export * from './errors.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "2.19.3",
+  "version": "2.19.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Rate/FeedbackModal.tsx

@@ -3,7 +3,8 @@ 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 { useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { shouldShowNpsModal } from './hook'
 import { checkVisibility } from './utils'
 
 const style: Styles = {
@@ -22,16 +23,17 @@ const style: Styles = {
 
 export const FeedbackModal = ({ onClick, portal }: { onClick: () => void, portal: 'EDP' | 'AI' }) => {
   const t = useTranslate(dictionary)
+  const [isNpsVisible, setIsNpsVisible] = useState(shouldShowNpsModal())
 
   const handleClose = () => {
     localStorage.setItem('RATED_US_IN', Date.now().toString())
-    checkVisibility({ key: 'RATED_US_IN' } as StorageEvent)
+    setIsNpsVisible(false)
   }
+  
+  const visibilityCheck = useCallback((event: StorageEvent) => checkVisibility(event, setIsNpsVisible), [])
 
   useEffect(() => {
-    checkVisibility({ key: 'RATED_US_IN' } as StorageEvent)
-
-    const visibilityCheck = (event: StorageEvent) => checkVisibility(event)
+    checkVisibility({ key: 'RATED_US_IN' } as StorageEvent, setIsNpsVisible)
     
     window.addEventListener('storage', visibilityCheck)
 
@@ -40,11 +42,11 @@ export const FeedbackModal = ({ onClick, portal }: { onClick: () => void, portal
     }
   }, [])
 
-  return (
+  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}>
+        <IconButton onClick={handleClose} id="feedback-modal-close-icon">
           <TimesMini />
         </IconButton>
       </Flex>
@@ -60,7 +62,7 @@ export const FeedbackModal = ({ onClick, portal }: { onClick: () => void, portal
         </Button>
       </Flex>
     </Box>
-  )
+  ) : null
 }
 
 const dictionary = {

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

@@ -1,8 +1,9 @@
-import { checkVisibility } from './utils'
+import { overlay } from '../../LayoutOverlayManager'
 
 function onNpsSubmit(): void {
   localStorage.setItem('RATED_US_IN', Date.now().toString())
-  checkVisibility({ key: 'RATED_US_IN' } as StorageEvent)
+  overlay.closeModal()
+  document.getElementById('feedback-modal-close-icon')?.click()
 }
 
 export {}

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

@@ -2,7 +2,7 @@ import { overlay } from '../../LayoutOverlayManager'
 import { FeedbackModal } from './FeedbackModal'
 import { RateComponent } from '.'
 
-export const showFeedbackModal = ({ onClick, portal }: { onClick: () => void, portal: 'EDP' | 'AI'  }) => (
+export const ShowFeedbackModal = ({ onClick, portal }: { onClick: () => void, portal: 'EDP' | 'AI'  }) => (
   <FeedbackModal onClick={onClick} portal={portal} />
 )
 

package/src/components/Rate/utils.ts

@@ -1,15 +1,10 @@
 import { shouldShowNpsModal } from './hook'
 
-export const checkVisibility = (event: StorageEvent) => {
+export const checkVisibility = (event: StorageEvent, fnUpdateState: React.Dispatch<React.SetStateAction<boolean>>) => {
   if (event.key === 'RATED_US_IN') {
     const shouldShow = shouldShowNpsModal()
     if (!shouldShow) {
-      try {
-        document.getElementById('feedback-modal')?.remove()
-      } catch {
-        // eslint-disable-next-line no-console
-        console.warn('Error removing')
-      }
+      fnUpdateState(false)
     }
   }
 }

package/src/index.ts

@@ -10,7 +10,7 @@ export { PortalSwitcher } from './components/PortalSwitcher'
 export { usePrivacyPolicyEffect } from './components/PrivacyPolicyMessage/hooks'
 export { RateComponent } from './components/Rate'
 export { shouldShowNpsModal, useRatingEffect } from './components/Rate/hook'
-export { showFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals'
+export { ShowFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals'
 export * from './components/tour'
 export * from './elements'
 export * from './errors'