From baeade1bd97a430b3afb37ff2c3a031b19ef1f21 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Thu, 10 Apr 2025 11:34:54 +0200 Subject: [PATCH 01/92] fix: update border color for error states to red[900] in TaskItemNav, TouchpointItemNav, and NavItem components --- src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx | 2 +- .../Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx | 2 +- src/pages/Plan/navigation/aside/NavItem.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx b/src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx index e438207ad..fc1569570 100644 --- a/src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx +++ b/src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx @@ -75,7 +75,7 @@ const TaskItemNav = ({ data-qa="task-item-nav" {...(hasErrors && { style: { - borderColor: appTheme.palette.red[600], + borderColor: appTheme.palette.red[900], }, })} > diff --git a/src/pages/Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx b/src/pages/Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx index bc43f546c..44b57eb3d 100644 --- a/src/pages/Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx +++ b/src/pages/Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx @@ -67,7 +67,7 @@ const TouchpointItemNav = ({ data-qa="touchpoint-item-nav" {...(hasErrors && { style: { - borderColor: appTheme.palette.red[600], + borderColor: appTheme.palette.red[900], }, })} > diff --git a/src/pages/Plan/navigation/aside/NavItem.tsx b/src/pages/Plan/navigation/aside/NavItem.tsx index 7f5934c7c..aff3d0e03 100644 --- a/src/pages/Plan/navigation/aside/NavItem.tsx +++ b/src/pages/Plan/navigation/aside/NavItem.tsx @@ -67,7 +67,7 @@ const NavItem = ({ data-qa="task-item-nav" {...(hasErrors && { style: { - borderColor: appTheme.palette.red[600], + borderColor: appTheme.palette.red[900], }, })} {...(!children && { From 2ac5c953dad6baf1f912b91c75528b08664d4c21 Mon Sep 17 00:00:00 2001 From: iacopolea Date: Thu, 10 Apr 2025 12:13:21 +0200 Subject: [PATCH 02/92] fix: grid blowout problem, min col is now explicitly set to 0 instead of auto --- src/pages/Templates/TemplateCardsGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Templates/TemplateCardsGrid.tsx b/src/pages/Templates/TemplateCardsGrid.tsx index 81ae5ea26..6b7ff6ca9 100644 --- a/src/pages/Templates/TemplateCardsGrid.tsx +++ b/src/pages/Templates/TemplateCardsGrid.tsx @@ -13,10 +13,10 @@ const CardsGrid = styled.div` row-gap: ${appTheme.space.lg}; column-gap: ${appTheme.space.md}; @container cardsWrapper (min-width: 450px) { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, minmax(0, 1fr)); } @container cardsWrapper (min-width: 900px) { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: repeat(3, minmax(0, 1fr)); } `; From 056e4c171ec7c5bba342ac9cf1824af286c64bd8 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Thu, 10 Apr 2025 13:01:57 +0200 Subject: [PATCH 03/92] fix: increase height of scroll spacer to 300px in ModulesList component --- src/pages/Plan/ModulesList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Plan/ModulesList.tsx b/src/pages/Plan/ModulesList.tsx index 75618668d..6f824f811 100644 --- a/src/pages/Plan/ModulesList.tsx +++ b/src/pages/Plan/ModulesList.tsx @@ -37,7 +37,7 @@ export const ModulesList = ({ tabId }: { tabId: PlanTab }) => { ); })} -
+
{tabId !== 'summary' && } ); From 08f814ec3736482f6bfa4ac728c78c4e1a9616f6 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Fri, 11 Apr 2025 16:06:38 +0200 Subject: [PATCH 04/92] feat: add subtitles for aside navigation modules and implement getSubtitleFromModuleType utility --- src/locales/en/translation.json | 16 +++++++ src/locales/it/translation.json | 16 +++++++ src/pages/Plan/navigation/aside/NavItem.tsx | 5 ++ .../Plan/utils/getSubtitleFromModuleType.tsx | 47 +++++++++++++++++++ 4 files changed, 84 insertions(+) create mode 100644 src/pages/Plan/utils/getSubtitleFromModuleType.tsx diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index ead3e2e90..1d8eabe58 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -23,6 +23,22 @@ "__APP_SIDEBAR_SHARED_WORKSPACE_HOME_ITEM_LABEL": "Activities", "__APP_SIDEBAR_SHARED_WORKSPACE_LABEL": "Shared with me", "__APP_SIDEBAR_TEMPLATES_ITEM_LABEL": "Templates", + "__ASIDE_NAVIGATION_MODULE_ADDITIONAL_TARGET_SUBTITLE": " ", + "__ASIDE_NAVIGATION_MODULE_AGE_SUBTITLE": "Participant age groups", + "__ASIDE_NAVIGATION_MODULE_BROWSER_SUBTITLE": "Compatible browsers", + "__ASIDE_NAVIGATION_MODULE_DATES_BLOCK_SUBTITLE": " ", + "__ASIDE_NAVIGATION_MODULE_DIGITAL_LITERACY_ACCORDION_SUBTITLE": "Participant technical proficiency", + "__ASIDE_NAVIGATION_MODULE_GENDER_ACCORDION_SUBTITLE": "Participant gender criteria", + "__ASIDE_NAVIGATION_MODULE_GOAL_SUBTITLE": "Activity objective", + "__ASIDE_NAVIGATION_MODULE_INSTRUCTIONS_NOTE_BLOCK_SUBTITLE": " ", + "__ASIDE_NAVIGATION_MODULE_LANGUAGE_SUBTITLE": "Feedback language", + "__ASIDE_NAVIGATION_MODULE_OUT_OF_SCOPE_SUBTITLE": " ", + "__ASIDE_NAVIGATION_MODULE_SETUP_NOTE_BLOCK_SUBTITLE": " ", + "__ASIDE_NAVIGATION_MODULE_SUBTITLE_BLOCK_SUBTITLE": " ", + "__ASIDE_NAVIGATION_MODULE_TARGET_NOTE_BLOCK_SUBTITLE": " ", + "__ASIDE_NAVIGATION_MODULE_TARGET_SUBTITLE": "Participant number", + "__ASIDE_NAVIGATION_MODULE_TASKS_SUBTITLE": " ", + "__ASIDE_NAVIGATION_MODULE_TOUCHPOINTS_SUBTITLE": "Interaction points", "__BANNER_CROSS_FUNCTIONAL_CTA_AUTOMATION": "Get in touch", "__BANNER_CROSS_FUNCTIONAL_CTA_EXPERIENCE": "Get in touch", "__BANNER_CROSS_FUNCTIONAL_CTA_LOADING": "sending...", diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 3f60a44fd..270e5e7b4 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -23,6 +23,22 @@ "__APP_SIDEBAR_SHARED_WORKSPACE_HOME_ITEM_LABEL": "Campagne", "__APP_SIDEBAR_SHARED_WORKSPACE_LABEL": "Condivisi con me", "__APP_SIDEBAR_TEMPLATES_ITEM_LABEL": "", + "__ASIDE_NAVIGATION_MODULE_ADDITIONAL_TARGET_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_AGE_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_BROWSER_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_DATES_BLOCK_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_DIGITAL_LITERACY_ACCORDION_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_GENDER_ACCORDION_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_GOAL_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_INSTRUCTIONS_NOTE_BLOCK_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_LANGUAGE_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_OUT_OF_SCOPE_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_SETUP_NOTE_BLOCK_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_SUBTITLE_BLOCK_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_TARGET_NOTE_BLOCK_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_TARGET_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_TASKS_SUBTITLE": "", + "__ASIDE_NAVIGATION_MODULE_TOUCHPOINTS_SUBTITLE": "", "__BANNER_CROSS_FUNCTIONAL_CTA_AUTOMATION": "Contattaci", "__BANNER_CROSS_FUNCTIONAL_CTA_EXPERIENCE": "Contattaci", "__BANNER_CROSS_FUNCTIONAL_CTA_LOADING": "invio in corso...", diff --git a/src/pages/Plan/navigation/aside/NavItem.tsx b/src/pages/Plan/navigation/aside/NavItem.tsx index aff3d0e03..8e250d7e4 100644 --- a/src/pages/Plan/navigation/aside/NavItem.tsx +++ b/src/pages/Plan/navigation/aside/NavItem.tsx @@ -3,6 +3,7 @@ import { Ellipsis, MD, Message, + SM, Span, } from '@appquality/unguess-design-system'; import { useTranslation } from 'react-i18next'; @@ -12,6 +13,7 @@ import { appTheme } from 'src/app/theme'; import { components } from 'src/common/schema'; import styled from 'styled-components'; import { getIconFromModuleType, getTitleFromModuleType } from '../../utils'; +import { getSubtitleFromModuleType } from '../../utils/getSubtitleFromModuleType'; const StyledCard = styled(Card)` padding: ${({ theme }) => theme.space.md}; @@ -80,6 +82,9 @@ const NavItem = ({ {getTitleFromModuleType(type)} + + {getSubtitleFromModuleType(type)} + {children && children} diff --git a/src/pages/Plan/utils/getSubtitleFromModuleType.tsx b/src/pages/Plan/utils/getSubtitleFromModuleType.tsx new file mode 100644 index 000000000..db04419f1 --- /dev/null +++ b/src/pages/Plan/utils/getSubtitleFromModuleType.tsx @@ -0,0 +1,47 @@ +import { useTranslation } from 'react-i18next'; +import { components } from 'src/common/schema'; + +const getSubtitleFromModuleType = ( + type: components['schemas']['Module']['type'] +) => { + const { t } = useTranslation(); + + switch (type) { + case 'dates': + return t('__ASIDE_NAVIGATION_MODULE_DATES_BLOCK_SUBTITLE'); + case 'age': + return t('__ASIDE_NAVIGATION_MODULE_AGE_SUBTITLE'); + case 'gender': + return t('__ASIDE_NAVIGATION_MODULE_GENDER_ACCORDION_SUBTITLE'); + case 'goal': + return t('__ASIDE_NAVIGATION_MODULE_GOAL_SUBTITLE'); + case 'language': + return t('__ASIDE_NAVIGATION_MODULE_LANGUAGE_SUBTITLE'); + case 'literacy': + return t('__ASIDE_NAVIGATION_MODULE_DIGITAL_LITERACY_ACCORDION_SUBTITLE'); + case 'out_of_scope': + return t('__ASIDE_NAVIGATION_MODULE_OUT_OF_SCOPE_SUBTITLE'); + case 'target': + return t('__ASIDE_NAVIGATION_MODULE_TARGET_SUBTITLE'); + case 'target_note': + return t('__ASIDE_NAVIGATION_MODULE_TARGET_NOTE_BLOCK_SUBTITLE'); + case 'tasks': + return t('__ASIDE_NAVIGATION_MODULE_TASKS_SUBTITLE'); + case 'title': + return t('__ASIDE_NAVIGATION_MODULE_SUBTITLE_BLOCK_SUBTITLE'); + case 'setup_note': + return t('__ASIDE_NAVIGATION_MODULE_SETUP_NOTE_BLOCK_SUBTITLE'); + case 'instruction_note': + return t('__ASIDE_NAVIGATION_MODULE_INSTRUCTIONS_NOTE_BLOCK_SUBTITLE'); + case 'browser': + return t('__ASIDE_NAVIGATION_MODULE_BROWSER_SUBTITLE'); + case 'touchpoints': + return t('__ASIDE_NAVIGATION_MODULE_TOUCHPOINTS_SUBTITLE'); + case 'additional_target': + return t('__ASIDE_NAVIGATION_MODULE_ADDITIONAL_TARGET_SUBTITLE'); + default: + return ''; + } +}; + +export { getSubtitleFromModuleType }; From 6fe83ef489931d4dfb9af9df51a9b97575365baf Mon Sep 17 00:00:00 2001 From: Kariamos Date: Mon, 14 Apr 2025 12:01:40 +0200 Subject: [PATCH 05/92] fix: update scroll spacer height calculation in ModulesList component --- src/pages/Plan/ModulesList.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/Plan/ModulesList.tsx b/src/pages/Plan/ModulesList.tsx index 6f824f811..89a333fbe 100644 --- a/src/pages/Plan/ModulesList.tsx +++ b/src/pages/Plan/ModulesList.tsx @@ -37,8 +37,11 @@ export const ModulesList = ({ tabId }: { tabId: PlanTab }) => {
); })} -
{tabId !== 'summary' && } +
); }; From 1f3890d39d98d52cbdbbe9fda0284fc05cc7c96c Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Mon, 14 Apr 2025 12:54:15 +0200 Subject: [PATCH 06/92] fix: replace Card with ContainerCard in InstructionsNote, SetupNote, and TargetNote components --- src/pages/Plan/modules/InstructionsNote.tsx | 11 +++++------ src/pages/Plan/modules/SetupNote.tsx | 11 +++++------ src/pages/Plan/modules/TargetNote.tsx | 11 +++++------ 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/pages/Plan/modules/InstructionsNote.tsx b/src/pages/Plan/modules/InstructionsNote.tsx index 89331adde..17893bd9e 100644 --- a/src/pages/Plan/modules/InstructionsNote.tsx +++ b/src/pages/Plan/modules/InstructionsNote.tsx @@ -1,6 +1,6 @@ import { Button, - Card, + ContainerCard, Editor, Label, Message, @@ -8,25 +8,24 @@ import { import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { appTheme } from 'src/app/theme'; +import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg'; import { components } from 'src/common/schema'; +import { FEATURE_FLAG_CHANGE_MODULES_VARIANTS } from 'src/constants'; import { useModule } from 'src/features/modules/useModule'; import { useModuleConfiguration } from 'src/features/modules/useModuleConfiguration'; import { useValidation } from 'src/features/modules/useModuleValidation'; import { useFeatureFlag } from 'src/hooks/useFeatureFlag'; import styled from 'styled-components'; -import { FEATURE_FLAG_CHANGE_MODULES_VARIANTS } from 'src/constants'; -import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg'; -import { DeleteModuleConfirmationModal } from './modal/DeleteModuleConfirmationModal'; import { getIconFromModuleType } from '../utils'; +import { DeleteModuleConfirmationModal } from './modal/DeleteModuleConfirmationModal'; -const StyledCard = styled(Card)` +const StyledCard = styled(ContainerCard)` display: flex; flex-direction: column; padding-top: ${({ theme }) => theme.space.md}; padding-left: ${({ theme }) => theme.space.md}; padding-right: ${({ theme }) => theme.space.md}; padding-bottom: ${({ theme }) => theme.space.lg}; - box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)}; `; const StyledCardHeader = styled.div` diff --git a/src/pages/Plan/modules/SetupNote.tsx b/src/pages/Plan/modules/SetupNote.tsx index 19e681bbe..48ec0769d 100644 --- a/src/pages/Plan/modules/SetupNote.tsx +++ b/src/pages/Plan/modules/SetupNote.tsx @@ -1,6 +1,6 @@ import { Button, - Card, + ContainerCard, Editor, Label, Message, @@ -8,25 +8,24 @@ import { import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { appTheme } from 'src/app/theme'; +import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg'; import { components } from 'src/common/schema'; +import { FEATURE_FLAG_CHANGE_MODULES_VARIANTS } from 'src/constants'; import { useModule } from 'src/features/modules/useModule'; import { useModuleConfiguration } from 'src/features/modules/useModuleConfiguration'; import { useValidation } from 'src/features/modules/useModuleValidation'; import { useFeatureFlag } from 'src/hooks/useFeatureFlag'; import styled from 'styled-components'; -import { FEATURE_FLAG_CHANGE_MODULES_VARIANTS } from 'src/constants'; -import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg'; -import { DeleteModuleConfirmationModal } from './modal/DeleteModuleConfirmationModal'; import { getIconFromModuleType } from '../utils'; +import { DeleteModuleConfirmationModal } from './modal/DeleteModuleConfirmationModal'; -const StyledCard = styled(Card)` +const StyledCard = styled(ContainerCard)` display: flex; flex-direction: column; padding-top: ${({ theme }) => theme.space.md}; padding-left: ${({ theme }) => theme.space.md}; padding-right: ${({ theme }) => theme.space.md}; padding-bottom: ${({ theme }) => theme.space.lg}; - box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)}; `; const StyledCardHeader = styled.div` diff --git a/src/pages/Plan/modules/TargetNote.tsx b/src/pages/Plan/modules/TargetNote.tsx index 8aed47346..278b1e752 100644 --- a/src/pages/Plan/modules/TargetNote.tsx +++ b/src/pages/Plan/modules/TargetNote.tsx @@ -1,6 +1,6 @@ import { Button, - Card, + ContainerCard, Editor, Label, Message, @@ -8,25 +8,24 @@ import { import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { appTheme } from 'src/app/theme'; +import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg'; import { components } from 'src/common/schema'; +import { FEATURE_FLAG_CHANGE_MODULES_VARIANTS } from 'src/constants'; import { useModule } from 'src/features/modules/useModule'; import { useModuleConfiguration } from 'src/features/modules/useModuleConfiguration'; import { useValidation } from 'src/features/modules/useModuleValidation'; import { useFeatureFlag } from 'src/hooks/useFeatureFlag'; import styled from 'styled-components'; -import { FEATURE_FLAG_CHANGE_MODULES_VARIANTS } from 'src/constants'; -import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg'; -import { DeleteModuleConfirmationModal } from './modal/DeleteModuleConfirmationModal'; import { getIconFromModuleType } from '../utils'; +import { DeleteModuleConfirmationModal } from './modal/DeleteModuleConfirmationModal'; -const StyledCard = styled(Card)` +const StyledCard = styled(ContainerCard)` display: flex; flex-direction: column; padding-top: ${({ theme }) => theme.space.md}; padding-left: ${({ theme }) => theme.space.md}; padding-right: ${({ theme }) => theme.space.md}; padding-bottom: ${({ theme }) => theme.space.lg}; - box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)}; `; const StyledCardHeader = styled.div` From 03c4b0c29e39b986428a27c60fa511dc8b75fe38 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Mon, 14 Apr 2025 14:44:16 +0200 Subject: [PATCH 07/92] fix: update scroll spacer height calculation in ModulesList component --- src/pages/Plan/ModulesList.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/Plan/ModulesList.tsx b/src/pages/Plan/ModulesList.tsx index 89a333fbe..d996b5171 100644 --- a/src/pages/Plan/ModulesList.tsx +++ b/src/pages/Plan/ModulesList.tsx @@ -40,7 +40,9 @@ export const ModulesList = ({ tabId }: { tabId: PlanTab }) => { {tabId !== 'summary' && }
); From 4b00f94f941b9996c87e9e615e2fd89a0ece445f Mon Sep 17 00:00:00 2001 From: Kariamos Date: Mon, 14 Apr 2025 15:51:21 +0200 Subject: [PATCH 08/92] fix: adjust scroll spacer height in ModulesList component and add isDynamic prop to navigation links in TaskItemNav and TouchpointItemNav components --- src/pages/Plan/ModulesList.tsx | 2 +- src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx | 1 + .../Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/Plan/ModulesList.tsx b/src/pages/Plan/ModulesList.tsx index d996b5171..1a98bf0d1 100644 --- a/src/pages/Plan/ModulesList.tsx +++ b/src/pages/Plan/ModulesList.tsx @@ -41,7 +41,7 @@ export const ModulesList = ({ tabId }: { tabId: PlanTab }) => {
diff --git a/src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx b/src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx index fc1569570..35f560689 100644 --- a/src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx +++ b/src/pages/Plan/modules/Tasks/parts/nav/TaskItemNav.tsx @@ -67,6 +67,7 @@ const TaskItemNav = ({ offset={-200} smooth spy + isDynamic style={{ textDecoration: 'none' }} activeClass="isCurrent" > diff --git a/src/pages/Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx b/src/pages/Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx index 44b57eb3d..86688cb2e 100644 --- a/src/pages/Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx +++ b/src/pages/Plan/modules/Touchpoints/parts/nav/TouchpointItemNav.tsx @@ -59,6 +59,7 @@ const TouchpointItemNav = ({ offset={-200} smooth spy + isDynamic style={{ textDecoration: 'none' }} activeClass="isCurrent" > From 329a49699240b7deb2e92b2a7bd59c5a81b7324c Mon Sep 17 00:00:00 2001 From: Kariamos Date: Mon, 14 Apr 2025 16:08:36 +0200 Subject: [PATCH 09/92] fix: remove redundant dispatch of setSidebarOpen for 'templates' case in Navigation component --- src/features/navigation/Navigation.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/features/navigation/Navigation.tsx b/src/features/navigation/Navigation.tsx index 674343745..dcbee0168 100644 --- a/src/features/navigation/Navigation.tsx +++ b/src/features/navigation/Navigation.tsx @@ -105,8 +105,6 @@ export const Navigation = ({ dispatch(setSidebarOpen(false)); break; case 'templates': - dispatch(setSidebarOpen(false)); - break; case 'template': dispatch(setSidebarOpen(false)); break; From 510f5c167f9d701c12bab9c22c845e3c0110dba0 Mon Sep 17 00:00:00 2001 From: iacopolea Date: Mon, 14 Apr 2025 16:09:41 +0200 Subject: [PATCH 10/92] feat: wrap PlanBody component in LayoutWrapper for improved layout structure --- src/pages/Plan/PlanBody.tsx | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/pages/Plan/PlanBody.tsx b/src/pages/Plan/PlanBody.tsx index 1e95bd8f5..66efd08d8 100644 --- a/src/pages/Plan/PlanBody.tsx +++ b/src/pages/Plan/PlanBody.tsx @@ -6,6 +6,7 @@ import { ModulesList } from './ModulesList'; import { Nav } from './navigation/aside'; import { PlanDetails } from './navigation/header/PlanDetails'; import SummaryBody from './summary'; +import { LayoutWrapper } from 'src/common/components/LayoutWrapper'; export const PlanBody = () => { const { activeTab } = usePlanTab(); @@ -15,20 +16,22 @@ export const PlanBody = () => { const debug = params.get('debug'); return ( - - {activeTab === 'summary' ? ( - - ) : ( - - -
{hasFeatureFlag(FEATURE_FLAG_CHANGE_MODULES_VARIANTS) && getPlanStatus() === 'draft' && ( -
{hasFeatureFlag(FEATURE_FLAG_CHANGE_MODULES_VARIANTS) && getPlanStatus() === 'draft' && ( -
{hasFeatureFlag(FEATURE_FLAG_CHANGE_MODULES_VARIANTS) && getPlanStatus() === 'draft' && ( -
{hasFeatureFlag(FEATURE_FLAG_CHANGE_MODULES_VARIANTS) && getPlanStatus() === 'draft' && ( - +
+ + + + ); +}; + +export default Component; diff --git a/src/pages/Video/components/Transcript/TranscriptTheme/index.tsx b/src/pages/Video/components/Transcript/TranscriptTheme/index.tsx index 95d30b0f2..5ff57a748 100644 --- a/src/pages/Video/components/Transcript/TranscriptTheme/index.tsx +++ b/src/pages/Video/components/Transcript/TranscriptTheme/index.tsx @@ -3,8 +3,9 @@ import { styled } from 'styled-components'; import ActiveWrapper from './ActiveWrapper'; import ObservationWrapper from './ObservationWrapper'; import ParagraphWrapper from './ParagraphWrapper'; -import SentenceWrapper from './SentenceWrapper'; import SentencesWrapper from './SentencesWrapper'; +import SentenceWrapper from './SentenceWrapper'; +import SentimentWrapper from './SentimentWrapper'; import SpeakerWrapper from './SpeakerWrapper'; import TranslationWrapper from './TranslationsWrapper'; @@ -12,6 +13,7 @@ export const TranscriptTheme = Theme.configure({ speakerWrapper: SpeakerWrapper, activeWrapper: ActiveWrapper, observationWrapper: ObservationWrapper, + sentimentWrapper: SentimentWrapper, searchStyleWrapper: styled.div` .search-result { background-color: ${({ theme }) => theme.palette.product.talk}; From cd297ff0af1c84cc7b9c5dd9df298a2f077dfa28 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Fri, 18 Apr 2025 12:48:42 +0200 Subject: [PATCH 46/92] feat: add sentiment translation keys for toast messages and transcript values in English and Italian --- src/locales/en/translation.json | 6 ++++++ src/locales/it/translation.json | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 1d8eabe58..9e9691ec9 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -1285,6 +1285,7 @@ "__PUBLIC_MANUAL_HELP_MODAL_TITLE": "Got questions?", "__PUBLIC_MANUAL_NOT_FOUND_TEXT": "This page does not exist yet. Ask your CSM or explore our Support Center.", "__PUBLIC_MANUAL_NOT_FOUND_TITLE": "There is no manual here", + "__SENTIMENT_TOAST_COPY_MESSAGE": "Sentiment copied to clipboard", "__SERVICE_DETAIL_PAGE_TAG_RESULTS_DAYS_LABEL": "First results in <0>{{hours}}h", "__SERVICE_TILES_HEADER": "Explore new ways of testing", "__SERVICE_TILES_SUBTITLE": "Launch lean tests autonomosly, get expert-verified results", @@ -1326,6 +1327,11 @@ "__TOOLS_TRANSLATE_TOAST_LANGUAGE_ERROR_MESSAGE": "Something went wrong during the preferred language update, try again", "__TOOLS_TRANSLATE_TOAST_LANGUAGE_SUCCESS_MESSAGE": "Preferred language updated", "__TOOLS_TRANSLATE_TOGGLE_TEXT": "Set as preferred language", + "__TRANSCRIPT_SENTIMENT_VALUE_NEGATIVE": "Negative", + "__TRANSCRIPT_SENTIMENT_VALUE_NEUTRAL": "Neutral", + "__TRANSCRIPT_SENTIMENT_VALUE_POSITIVE": "Positive", + "__TRANSCRIPT_SENTIMENT_VALUE_VERY_NEGATIVE": "Very Negative", + "__TRANSCRIPT_SENTIMENT_VALUE_VERY_POSITIVE": "Very Positive", "__UX_CAMPAIGN_PAGE_NAVIGATION_DASHBOARD_TOOLTIP": "Dashboard", "__UX_CAMPAIGN_PAGE_NAVIGATION_INSIGHTS_TOOLTIP": "Topics & insights", "__UX_CAMPAIGN_PAGE_NAVIGATION_VIDEO_LIST_TOOLTIP": "Playlist", diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 270e5e7b4..2130d7d77 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -1314,6 +1314,7 @@ "__PUBLIC_MANUAL_HELP_MODAL_TITLE": "I nostri Articoli", "__PUBLIC_MANUAL_NOT_FOUND_TEXT": "A quanto pare la pagina che stai cercando non esiste ancora.", "__PUBLIC_MANUAL_NOT_FOUND_TITLE": "Manuale non trovato", + "__SENTIMENT_TOAST_COPY_MESSAGE": "", "__SERVICE_DETAIL_PAGE_TAG_RESULTS_DAYS_LABEL": "Primi risultati in <0>{{hours}}h", "__SERVICE_TILES_HEADER": "", "__SERVICE_TILES_SUBTITLE": "", @@ -1356,6 +1357,11 @@ "__TOOLS_TRANSLATE_TOAST_LANGUAGE_ERROR_MESSAGE": "Qualcosa è andato storto durante l'aggiornamento della lingua preferita, riprova", "__TOOLS_TRANSLATE_TOAST_LANGUAGE_SUCCESS_MESSAGE": "Lingua preferita aggiornata", "__TOOLS_TRANSLATE_TOGGLE_TEXT": "Imposta come lingua preferita", + "__TRANSCRIPT_SENTIMENT_VALUE_NEGATIVE": "", + "__TRANSCRIPT_SENTIMENT_VALUE_NEUTRAL": "", + "__TRANSCRIPT_SENTIMENT_VALUE_POSITIVE": "", + "__TRANSCRIPT_SENTIMENT_VALUE_VERY_NEGATIVE": "", + "__TRANSCRIPT_SENTIMENT_VALUE_VERY_POSITIVE": "", "__UX_CAMPAIGN_PAGE_NAVIGATION_DASHBOARD_TOOLTIP": "Dashboard", "__UX_CAMPAIGN_PAGE_NAVIGATION_INSIGHTS_TOOLTIP": "Temi e scoperte", "__UX_CAMPAIGN_PAGE_NAVIGATION_VIDEO_LIST_TOOLTIP": "Lista Video", From 688733b16e77d6eb8b43ae1657acdfaf59159f5d Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Fri, 18 Apr 2025 12:49:49 +0200 Subject: [PATCH 47/92] fix: initialize state for referenceElement in SentimentWrapper component --- .../components/Transcript/TranscriptTheme/SentimentWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx index f382164bb..9bb110b91 100644 --- a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx +++ b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx @@ -96,7 +96,7 @@ const Component = ({ value, text }: { value: number; text: string }) => { const { Icon } = tagData; const ref = useRef(null); const [referenceElement, setReferenceElement] = - useState(); + useState(null); return ( <> From 0ced096c8e9df0e0f510832341c9c5e3e1873aa2 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Fri, 18 Apr 2025 12:53:22 +0200 Subject: [PATCH 48/92] fix: update Button component to use isBasic prop in SentimentWrapper --- .../components/Transcript/TranscriptTheme/SentimentWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx index 9bb110b91..719b6fb71 100644 --- a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx +++ b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx @@ -127,7 +127,7 @@ const Component = ({ value, text }: { value: number; text: string }) => {
- + { + handleMenuClick(value ?? ''); + }} + label={(props) => ( + + + + )} + > + + {t('__PLAN_DELETE_PLAN_CTA')} + + + + {isDeleteModalOpen && planId && ( + m.type === 'title')[0] + ?.output.toString() ?? '' + } + onQuit={() => setIsDeleteModalOpen(false)} + /> + )} + {isModalOpen && setIsModalOpen(false)} />}
); diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx new file mode 100644 index 000000000..3f8474f4c --- /dev/null +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -0,0 +1,122 @@ +import { + Button, + FooterItem, + Label, + LG, + MD, + Message, + Modal, + ModalClose, + Notification, + OrderedList, + Skeleton, + SM, + Span, + useToast, + XL, +} from '@appquality/unguess-design-system'; +import { Trans, useTranslation } from 'react-i18next'; +import { useNavigate, useParams } from 'react-router-dom'; +import { appTheme } from 'src/app/theme'; +import { Dots } from '@zendeskgarden/react-loaders'; +import { useDeletePlansByPidMutation } from 'src/features/api'; +import { usePlan } from '../hooks/usePlan'; + +const DeletePlanModal = ({ + onQuit, + planId, + planTitle, +}: { + planId: string; + planTitle: string; + onQuit: () => void; +}) => { + const { t } = useTranslation(); + const { addToast } = useToast(); + const navigate = useNavigate(); + + const [deletePlan, { isLoading }] = useDeletePlansByPidMutation(); + + const deletePlanId = async (plan: string) => { + if (!plan) return; + await deletePlan({ pid: plan }) + .unwrap() + .then(() => { + navigate(`/`); + }); + }; + + const handleConfirm = async () => { + try { + await deletePlanId(planId); + } catch (e) { + addToast( + ({ close }) => ( + + ), + { placement: 'top' } + ); + + return; + } + onQuit(); + }; + + return ( + + + + {t('__PLAN_PAGE_DELETE_PLAN_MODAL_TITLE')} + + + + , + boldSpan: , + }} + values={{ + planTitle, + }} + defaults="" + /> + + + + + + + + + + + + ); +}; + +export { DeletePlanModal }; From ca9f731ff9faab998583cc1b7adb0bebcff70fd5 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Fri, 18 Apr 2025 17:53:14 +0200 Subject: [PATCH 56/92] feat(translation): add delete plan confirmation modal texts --- src/locales/en/translation.json | 6 ++++++ src/locales/it/translation.json | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index e9f2d0e70..377fd739c 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -996,6 +996,7 @@ "__PLAN_CREATION_PROJECT_DROPDOWN_PLACEHOLDER": "Select a project", "__PLAN_DATE_ERROR_REQUIRED": "Required field: enter a date to continue", "__PLAN_DATE_IN_FUTURE_ERROR": "Date must be at least one business day in the future", + "__PLAN_DELETE_PLAN_CTA": "Delete draft", "__PLAN_GOAL_SIZE_ERROR_REQUIRED": "Required field: enter a goal to continue", "__PLAN_GOAL_SIZE_ERROR_TOO_LONG": "Character limit exceeded: Please reduce your text to 256 characters", "__PLAN_INSTRUCTION_NOTE_SIZE_ERROR_EMPTY": "Required field: enter a text to continue", @@ -1005,6 +1006,11 @@ "__PLAN_PAGE_ADD_MODULE_BLOCK_BUTTON": "Add item", "__PLAN_PAGE_ADD_MODULE_BLOCK_MODAL_SUBTITLE": "Provide the necessary details to describe this activity", "__PLAN_PAGE_ADD_MODULE_BLOCK_MODAL_TITLE": "Available informations", + "__PLAN_PAGE_DELETE_PLAN_MODAL_BODY": "You're about to delete \"{{planTitle}}\".

This action will permanently remove all information you've entered.
After deletion, you'll be redirected to your Activities dashboard.", + "__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CANCEL": "Keep editing", + "__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CONFIRM": "Delete permanently", + "__PLAN_PAGE_DELETE_PLAN_MODAL_ERROR": "We couldn't delete your draft: please try again later.", + "__PLAN_PAGE_DELETE_PLAN_MODAL_TITLE": "Delete this draft?", "__PLAN_PAGE_HEADER_BREADCRUMBS_INSTRUCTIONS_TAB": "Assign Tasks", "__PLAN_PAGE_HEADER_BREADCRUMBS_SETUP_TAB": "Set up", "__PLAN_PAGE_HEADER_BREADCRUMBS_SUMMARY_TAB": "Get expert feedback", diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 96f0d0826..23cc94779 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -1025,6 +1025,7 @@ "__PLAN_CREATION_PROJECT_DROPDOWN_PLACEHOLDER": "", "__PLAN_DATE_ERROR_REQUIRED": "", "__PLAN_DATE_IN_FUTURE_ERROR": "", + "__PLAN_DELETE_PLAN_CTA": "", "__PLAN_GOAL_SIZE_ERROR_REQUIRED": "", "__PLAN_GOAL_SIZE_ERROR_TOO_LONG": "", "__PLAN_INSTRUCTION_NOTE_SIZE_ERROR_EMPTY": "", @@ -1034,6 +1035,11 @@ "__PLAN_PAGE_ADD_MODULE_BLOCK_BUTTON": "", "__PLAN_PAGE_ADD_MODULE_BLOCK_MODAL_SUBTITLE": "", "__PLAN_PAGE_ADD_MODULE_BLOCK_MODAL_TITLE": "", + "__PLAN_PAGE_DELETE_PLAN_MODAL_BODY": "", + "__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CANCEL": "", + "__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CONFIRM": "", + "__PLAN_PAGE_DELETE_PLAN_MODAL_ERROR": "", + "__PLAN_PAGE_DELETE_PLAN_MODAL_TITLE": "", "__PLAN_PAGE_HEADER_BREADCRUMBS_INSTRUCTIONS_TAB": "", "__PLAN_PAGE_HEADER_BREADCRUMBS_SETUP_TAB": "", "__PLAN_PAGE_HEADER_BREADCRUMBS_SUMMARY_TAB": "", From aac90612712317a89f1d4bfa1965e43bb473b5f0 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Fri, 18 Apr 2025 17:57:14 +0200 Subject: [PATCH 57/92] chore(dependencies): update unguess-design-system and add new dependencies for the animated loader --- package.json | 4 +++- yarn.lock | 39 +++++++++++++++++++++++++++++++++++---- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index f5700e080..5ecffb4a4 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,12 @@ "private": true, "dependencies": { "@appquality/languages": "1.4.3", - "@appquality/unguess-design-system": "4.0.35", + "@appquality/unguess-design-system": "4.0.36", "@headwayapp/react-widget": "^0.0.4", "@reduxjs/toolkit": "^1.8.0", "@sentry/react": "^8.32.0", + "@zendeskgarden/react-loaders": "^9.5.4", + "@zendeskgarden/react-theming": "^9.5.4", "@zendeskgarden/svg-icons": "^7.2.0", "date-fns": "^2.28.0", "formik": "^2.2.9", diff --git a/yarn.lock b/yarn.lock index 0d6d284e6..ccb787f0f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -59,10 +59,10 @@ dependencies: hls.js "^1.4.8" -"@appquality/unguess-design-system@4.0.35": - version "4.0.35" - resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-4.0.35.tgz#d4cad0a997bad011367b136b137f477f0beb713e" - integrity sha512-epNYyNjpWTktYZ/TQsgHC6px8Ip1PpFpxk1lD4gux8A/F+Z2yyKoXcHEFhMo6pR8TAyc7igW1TPaDjnlVKuP6Q== +"@appquality/unguess-design-system@4.0.36": + version "4.0.36" + resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-4.0.36.tgz#c773cf1777e04850b2ba5209106e7c10ae7cc686" + integrity sha512-BEBK4eO2s2KzEmq6ZaiiF0CWLhNuyA6X0q3Zz6ZzuSc+Q0kTw0DWDHQPlngFE66vBnG26U3unUH9UiagVW1l9Q== dependencies: "@appquality/stream-player" "1.0.6" "@nivo/bar" "^0.87.0" @@ -2494,6 +2494,15 @@ polished "^4.3.1" prop-types "^15.5.7" +"@zendeskgarden/react-loaders@^9.5.4": + version "9.5.4" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-loaders/-/react-loaders-9.5.4.tgz#ed13db49012ce83f10cdce4e3ea5a07715c47d2b" + integrity sha512-qC7gtL/723OhYxxGFvZy8NjaF9pYFA5JJoXE2fTSU0o7lBelm5WaAM4LThaj8CgTATiXJkSLnFJovYkhVTPncA== + dependencies: + "@zendeskgarden/container-schedule" "^2.0.9" + polished "^4.3.1" + prop-types "^15.5.7" + "@zendeskgarden/react-modals@8.76.8", "@zendeskgarden/react-modals@^8.76.8": version "8.76.8" resolved "https://registry.yarnpkg.com/@zendeskgarden/react-modals/-/react-modals-8.76.8.tgz#b21ceff1cfce4595675ef602b6c1934ca8b2d3c5" @@ -2571,6 +2580,18 @@ polished "^4.3.1" prop-types "^15.5.7" +"@zendeskgarden/react-theming@^9.5.4": + version "9.5.4" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-9.5.4.tgz#98e07fdce4d277685f1a15327de8a515e0713159" + integrity sha512-quBx2LfHjuPrOSTEK3oC3FG7UY4rYjAYoSw3D4+kpQOxBJI7AsQiZyh+0N69nXoyEhtz8U7twsfnCpvlHXz2tw== + dependencies: + "@floating-ui/react-dom" "^2.0.0" + color2k "^2.0.3" + lodash.get "^4.4.2" + lodash.memoize "^4.1.2" + polished "^4.3.1" + prop-types "^15.5.7" + "@zendeskgarden/react-tooltips@8.76.8", "@zendeskgarden/react-tooltips@^8.76.8": version "8.76.8" resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.76.8.tgz#4bcf8d788141ee598d56bce4901b5a159a589fa5" @@ -3270,6 +3291,11 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color2k@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.3.tgz#a771244f6b6285541c82aa65ff0a0c624046e533" + integrity sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog== + colorette@^2.0.20: version "2.0.20" resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a" @@ -5812,6 +5838,11 @@ lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== +lodash.get@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" + integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ== + lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" From 95e1300adba9a6e1156c2119cc68f10a2eb58e23 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Fri, 18 Apr 2025 18:02:45 +0200 Subject: [PATCH 58/92] refactor(modal): remove unused imports in DeletePlanModal component --- src/pages/Plan/modals/DeletePlanModal.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index 3f8474f4c..e9b89877a 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -1,26 +1,19 @@ import { Button, FooterItem, - Label, - LG, MD, Message, Modal, ModalClose, Notification, - OrderedList, - Skeleton, - SM, Span, useToast, - XL, } from '@appquality/unguess-design-system'; import { Trans, useTranslation } from 'react-i18next'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { appTheme } from 'src/app/theme'; import { Dots } from '@zendeskgarden/react-loaders'; import { useDeletePlansByPidMutation } from 'src/features/api'; -import { usePlan } from '../hooks/usePlan'; const DeletePlanModal = ({ onQuit, From 116fdb1103a29eb44ff4f94b1ec3458aeb74b69f Mon Sep 17 00:00:00 2001 From: Kariamos Date: Fri, 18 Apr 2025 18:03:30 +0200 Subject: [PATCH 59/92] fix(modal): ensure onQuit is called after error handling in DeletePlanModal --- src/pages/Plan/modals/DeletePlanModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index e9b89877a..935a70ad3 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -59,7 +59,7 @@ const DeletePlanModal = ({ ), { placement: 'top' } ); - + onQuit(); return; } onQuit(); From 1c73b802c1f30d58619d66f306f1ed9b386d6520 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Fri, 18 Apr 2025 18:12:07 +0200 Subject: [PATCH 60/92] refactor(modal): streamline delete plan error handling and navigation --- src/pages/Plan/modals/DeletePlanModal.tsx | 72 +++++++++++------------ 1 file changed, 34 insertions(+), 38 deletions(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index 935a70ad3..da53b2a85 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -1,24 +1,24 @@ +import { useNavigate } from 'react-router-dom'; +import { useTranslation, Trans } from 'react-i18next'; import { + Modal, + ModalClose, Button, FooterItem, - MD, Message, - Modal, - ModalClose, Notification, + MD, Span, useToast, } from '@appquality/unguess-design-system'; -import { Trans, useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; -import { appTheme } from 'src/app/theme'; import { Dots } from '@zendeskgarden/react-loaders'; +import { appTheme } from 'src/app/theme'; import { useDeletePlansByPidMutation } from 'src/features/api'; const DeletePlanModal = ({ - onQuit, planId, planTitle, + onQuit, }: { planId: string; planTitle: string; @@ -30,35 +30,36 @@ const DeletePlanModal = ({ const [deletePlan, { isLoading }] = useDeletePlansByPidMutation(); - const deletePlanId = async (plan: string) => { - if (!plan) return; - await deletePlan({ pid: plan }) - .unwrap() - .then(() => { - navigate(`/`); - }); + const deletePlanById = async (id: string) => { + if (!id) return; + await deletePlan({ pid: id }).unwrap(); + navigate(`/`); + }; + + const showDeleteErrorToast = (error: Error) => { + addToast( + ({ close }) => ( + + ), + { placement: 'top' } + ); }; const handleConfirm = async () => { try { - await deletePlanId(planId); + await deletePlanById(planId); } catch (e) { - addToast( - ({ close }) => ( - - ), - { placement: 'top' } - ); + showDeleteErrorToast(e as unknown as Error); onQuit(); return; } @@ -75,13 +76,8 @@ const DeletePlanModal = ({ , - boldSpan: , - }} - values={{ - planTitle, - }} + components={{ md: , boldSpan: }} + values={{ planTitle }} defaults="" /> From 2725a1dc5e55f556c323277f8cc77d63b6cedf9c Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Tue, 22 Apr 2025 09:34:53 +0200 Subject: [PATCH 61/92] ci: Update tests for ci --- tests/e2e/video/sentiment.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/e2e/video/sentiment.spec.ts b/tests/e2e/video/sentiment.spec.ts index e717f5d09..97d2d9fb6 100644 --- a/tests/e2e/video/sentiment.spec.ts +++ b/tests/e2e/video/sentiment.spec.ts @@ -24,6 +24,7 @@ test.describe('Video page', () => { }); test('Should print the content of the paragraphs', async () => { const paragraphs = await videopage.elements().paragraphContent().all(); + await expect(videopage.elements().paragraphContent().first()).toBeVisible(); const contents = await Promise.all( paragraphs.map(async (paragraph) => paragraph.innerText()) From 43e717533670c682a1eb606b68ced8db286ee1a5 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Tue, 22 Apr 2025 10:09:44 +0200 Subject: [PATCH 62/92] test: Fix order of paragraph content retrieval in video tests --- tests/e2e/video/sentiment.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/video/sentiment.spec.ts b/tests/e2e/video/sentiment.spec.ts index 97d2d9fb6..a4ab0c1c0 100644 --- a/tests/e2e/video/sentiment.spec.ts +++ b/tests/e2e/video/sentiment.spec.ts @@ -23,8 +23,8 @@ test.describe('Video page', () => { expect(paragraphCount).toBe(5); }); test('Should print the content of the paragraphs', async () => { - const paragraphs = await videopage.elements().paragraphContent().all(); await expect(videopage.elements().paragraphContent().first()).toBeVisible(); + const paragraphs = await videopage.elements().paragraphContent().all(); const contents = await Promise.all( paragraphs.map(async (paragraph) => paragraph.innerText()) From 773010818aa6b49d822ed22dbdad7eadc7d2189f Mon Sep 17 00:00:00 2001 From: Kariamos Date: Tue, 22 Apr 2025 10:13:28 +0200 Subject: [PATCH 63/92] refactor(controls): enhanced delete plan modal title retrieval using the useModule('title') current value instead of the saved value --- src/pages/Plan/Controls.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/pages/Plan/Controls.tsx b/src/pages/Plan/Controls.tsx index 94c095d5d..4c3a78a06 100644 --- a/src/pages/Plan/Controls.tsx +++ b/src/pages/Plan/Controls.tsx @@ -3,21 +3,19 @@ import { ButtonMenu, IconButton, } from '@appquality/unguess-design-system'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate, useParams } from 'react-router-dom'; import { appTheme } from 'src/app/theme'; import { Pipe } from 'src/common/components/Pipe'; import { ReactComponent as DotsIcon } from '@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg'; -import { - useDeletePlansByPidMutation, - usePatchPlansByPidStatusMutation, -} from 'src/features/api'; +import { usePatchPlansByPidStatusMutation } from 'src/features/api'; import { useSubmit } from 'src/features/modules/useModuleConfiguration'; import { useRequestQuotation } from 'src/features/modules/useRequestQuotation'; import { useValidateForm } from 'src/features/planModules'; import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute'; import styled from 'styled-components'; +import { useModule } from 'src/features/modules/useModule'; import { getPlanStatus } from '../Dashboard/hooks/getPlanStatus'; import { usePlan } from './hooks/usePlan'; import { SendRequestModal } from './modals/SendRequestModal'; @@ -41,6 +39,7 @@ export const Controls = () => { const { validateForm } = useValidateForm(); const [isSubmitted, setIsSubmitted] = useState(false); const [patchStatus] = usePatchPlansByPidStatusMutation(); + const { value: titleValue } = useModule('title'); // to use the current changed title value (also if plan is not saved) in delete modal const campaignRoute = useLocalizeRoute( `campaigns/${plan?.campaign?.id ?? 0}` @@ -150,11 +149,7 @@ export const Controls = () => { {isDeleteModalOpen && planId && ( m.type === 'title')[0] - ?.output.toString() ?? '' - } + planTitle={titleValue?.output ?? ''} onQuit={() => setIsDeleteModalOpen(false)} /> )} From 2accfb11469536c919cda5330e4488129a41830d Mon Sep 17 00:00:00 2001 From: Kariamos Date: Tue, 22 Apr 2025 10:18:55 +0200 Subject: [PATCH 64/92] refactor(modal): update delete plan button click handling logic Ensure the delete plan button only triggers the confirm action when not loading. --- src/pages/Plan/modals/DeletePlanModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index da53b2a85..6ca86ab25 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -86,8 +86,7 @@ const DeletePlanModal = ({ + ); +}; + +const OpenModalButton = () => { + const { t } = useTranslation(); + const { isError, isProcessing, data } = useTranslationTools(); + const { isOpen, setIsOpen } = useToolsContext(); - addToast( - ({ close }) => ( - - ), - { placement: 'top' } - ); - }); - }} - > - - - - - {t('__TOOLS_MENU_ITEM_TRANSLATE_PREFERENCE_TITLE')}{' '} - {getLanguageNameByFullTag(data.preferredLanguage)} - - - {isOpen && ( - - )} - { - e.stopPropagation(); - }} - > - { - setIsOpen(!isOpen); - }} - > - - - - - ); - } + if (isError || !data.hasQuickTranslate || !data.preferredLanguage) + return null; - // 1 button return ( -
- - {isOpen && ( - - )} + + + + ); +}; + +export const Tools = () => { + const { isError } = useTranslationTools(); + + if (isError) return null; + + return ( +
+ + +
); }; From e0f251c934b93868a639253a9e162fcb3cc7ca12 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Tue, 22 Apr 2025 12:30:21 +0200 Subject: [PATCH 68/92] feat: Add show/hide sentiment functionality in tools menu --- src/locales/en/translation.json | 2 + src/locales/it/translation.json | 2 + .../TranscriptTheme/SentimentWrapper.tsx | 5 +++ .../tools/assets/showSentimentIcon.svg | 14 +++++++ .../components/tools/context/ToolsContext.tsx | 7 +++- src/pages/Video/components/tools/index.tsx | 41 +++++++++++++++---- 6 files changed, 63 insertions(+), 8 deletions(-) create mode 100644 src/pages/Video/components/tools/assets/showSentimentIcon.svg diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 8c49b31cd..028437a48 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -1314,7 +1314,9 @@ "__TOAST_CLOSE_TEXT": "Dismiss", "__TOAST_GENERIC_ERROR_MESSAGE": "Something went wrong. Please try again later.", "__TOOLS_MENU_ITEM_BUTTON_LABEL": "Translate", + "__TOOLS_MENU_ITEM_HIDE_SENTIMENT_LABEL": "Hide Sentiment", "__TOOLS_MENU_ITEM_LANGUAGE_SETTINGS_TOOLTIP": "Language settings", + "__TOOLS_MENU_ITEM_SHOW_SENTIMENT_LABEL": "Show Sentiment", "__TOOLS_MENU_ITEM_TRANSLATE_PREFERENCE_TITLE": "Translate in", "__TOOLS_TRANSLATE_BUTTON_CANCEL": "Cancel", "__TOOLS_TRANSLATE_BUTTON_SEND": "Translate", diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 95bb528b4..bca36ef2f 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -1344,7 +1344,9 @@ "__TOAST_CLOSE_TEXT": "Chiudi", "__TOAST_GENERIC_ERROR_MESSAGE": "Qualcosa è andato storto, riprova più tardi.", "__TOOLS_MENU_ITEM_BUTTON_LABEL": "Traduci", + "__TOOLS_MENU_ITEM_HIDE_SENTIMENT_LABEL": "", "__TOOLS_MENU_ITEM_LANGUAGE_SETTINGS_TOOLTIP": "Impostazioni lingua", + "__TOOLS_MENU_ITEM_SHOW_SENTIMENT_LABEL": "", "__TOOLS_MENU_ITEM_TRANSLATE_PREFERENCE_TITLE": "Traduci in", "__TOOLS_TRANSLATE_BUTTON_CANCEL": "Annulla", "__TOOLS_TRANSLATE_BUTTON_SEND": "Traduci", diff --git a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx index 6c22150ac..1a0d635ee 100644 --- a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx +++ b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx @@ -14,6 +14,7 @@ import { ReactComponent as CopyIcon } from 'src/assets/icons/copy-icon.svg'; import { ReactComponent as InfoIcon } from 'src/assets/icons/info.svg'; import { useCopy } from 'src/hooks/useCopy'; import { styled, useTheme } from 'styled-components'; +import { useToolsContext } from '../../tools/context/ToolsContext'; import { ReactComponent as NegativeIcon } from '../assets/negative.svg'; import { ReactComponent as NeutralIcon } from '../assets/neutral.svg'; import { ReactComponent as PositiveIcon } from '../assets/positive.svg'; @@ -89,6 +90,8 @@ const TagWrapper = styled.div` const Component = ({ value, text }: { value: number; text: string }) => { const tagData = useTagData(value); const { t } = useTranslation(); + const { showSentiment } = useToolsContext(); + const copy = useCopy({ text, notification: t('__SENTIMENT_TOAST_COPY_MESSAGE'), @@ -99,6 +102,8 @@ const Component = ({ value, text }: { value: number; text: string }) => { const [referenceElement, setReferenceElement] = useState(null); + if (!showSentiment) return null; + return ( <> diff --git a/src/pages/Video/components/tools/assets/showSentimentIcon.svg b/src/pages/Video/components/tools/assets/showSentimentIcon.svg new file mode 100644 index 000000000..807e9e869 --- /dev/null +++ b/src/pages/Video/components/tools/assets/showSentimentIcon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/pages/Video/components/tools/context/ToolsContext.tsx b/src/pages/Video/components/tools/context/ToolsContext.tsx index c8f0bd73e..3713ea70b 100644 --- a/src/pages/Video/components/tools/context/ToolsContext.tsx +++ b/src/pages/Video/components/tools/context/ToolsContext.tsx @@ -5,6 +5,8 @@ interface ToolsContextType { setIsOpen: (isOpen: boolean) => void; language: string; setLanguage: (lang: string) => void; + showSentiment: boolean; + setShowSentiment: (showSentiment: boolean) => void; } const ToolsContext = createContext(null); @@ -16,6 +18,7 @@ export const ToolsContextProvider = ({ }) => { const [isOpen, setIsOpen] = useState(false); const [language, setLanguage] = useState(''); + const [showSentiment, setShowSentiment] = useState(true); const toolsContextValue = useMemo( () => ({ @@ -23,8 +26,10 @@ export const ToolsContextProvider = ({ setLanguage, isOpen, setIsOpen, + showSentiment, + setShowSentiment, }), - [language, setLanguage, isOpen, setIsOpen] + [language, setLanguage, isOpen, setIsOpen, showSentiment, setShowSentiment] ); return ( diff --git a/src/pages/Video/components/tools/index.tsx b/src/pages/Video/components/tools/index.tsx index 58ea296c4..40851ecbc 100644 --- a/src/pages/Video/components/tools/index.tsx +++ b/src/pages/Video/components/tools/index.tsx @@ -10,6 +10,9 @@ import { ReactComponent as TranslateIcon } from '@zendeskgarden/svg-icons/src/16 import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; import { appTheme } from 'src/app/theme'; +import { styled } from 'styled-components'; +import { useContent } from '../Transcript/useContent'; +import { ReactComponent as ShowSentimentIcon } from './assets/showSentimentIcon.svg'; import { useToolsContext } from './context/ToolsContext'; import { useRequestTranslation } from './hooks/useRequestTranslation'; import { useTranslationTools } from './hooks/useTranslationTools'; @@ -83,27 +86,51 @@ const OpenModalButton = () => { size="medium" onClick={(e) => e.stopPropagation()} > - setIsOpen(!isOpen)} - > + setIsOpen(!isOpen)}> ); }; +const ShowHideSentiment = () => { + const { videoId } = useParams(); + const { t } = useTranslation(); + const { sentiments } = useContent(videoId || ''); + const { showSentiment, setShowSentiment } = useToolsContext(); + + if (!sentiments) return null; + + return ( + + ); +}; + +const ToolsWrapper = styled.div` + display: flex; + gap: ${({ theme }) => theme.space.xs}; +`; + export const Tools = () => { const { isError } = useTranslationTools(); if (isError) return null; return ( -
+ -
+ + ); }; From 0bef76d07967e1c3344e02f2c60ab2ac66aeee19 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Tue, 22 Apr 2025 13:33:28 +0200 Subject: [PATCH 69/92] feat: Implement sentiment overview component and copy functionality --- src/hooks/useCopy.tsx | 4 +- src/locales/en/translation.json | 7 ++ src/locales/it/translation.json | 7 ++ src/pages/Video/Actions.tsx | 16 ++-- .../components/SentimentOverview/index.tsx | 90 +++++++++++++++++++ .../TranscriptTheme/SentimentWrapper.tsx | 2 +- .../components/Transcript/useContent.tsx | 1 + 7 files changed, 117 insertions(+), 10 deletions(-) create mode 100644 src/pages/Video/components/SentimentOverview/index.tsx diff --git a/src/hooks/useCopy.tsx b/src/hooks/useCopy.tsx index 1b13d6017..38c1f0040 100644 --- a/src/hooks/useCopy.tsx +++ b/src/hooks/useCopy.tsx @@ -6,7 +6,7 @@ export const useCopy = ({ notification, }: { text: string; - notification: string; + notification?: string; }) => { const { t } = useTranslation(); const { addToast } = useToast(); @@ -19,7 +19,7 @@ export const useCopy = ({ diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 028437a48..d93957dd6 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -567,6 +567,7 @@ "__CATALOG_STICKY_CONTAINER_NAV_CATEGORIES_LABEL": "BY CATEGORY", "__CATALOG_STICKY_CONTAINER_NAV_EXTERNAL_LINK_LABEL": "Discover services", "__COPY_ERROR": "Failed to copy text to clipboard", + "__COPY_SUCCESS": "Text copied to clipboard", "__DASHABOARD_CAMPAIGN_CAMPAIGN_TYPE_FILTER_LABEL Max:10": "Type", "__DASHABOARD_CAMPAIGN_STATUS_FILTER_ALL": "All", "__DASHABOARD_CAMPAIGN_STATUS_FILTER_COMPLETED": "Completed", @@ -1286,6 +1287,12 @@ "__PUBLIC_MANUAL_HELP_MODAL_TITLE": "Got questions?", "__PUBLIC_MANUAL_NOT_FOUND_TEXT": "This page does not exist yet. Ask your CSM or explore our Support Center.", "__PUBLIC_MANUAL_NOT_FOUND_TITLE": "There is no manual here", + "__SENTIMENT_COPY_BUTTON_LABEL": "Copy", + "__SENTIMENT_OVERVIEW_ALERT_DISCLAIMER": "AI helps you explore. Just remember to verify what you find.", + "__SENTIMENT_OVERVIEW_ALERT_SUBTITLE": "See how your user felt paragraph by paragraph", + "__SENTIMENT_OVERVIEW_ALERT_TITLE": "Explore sentiment journey", + "__SENTIMENT_OVERVIEW_SUBTITLE": "Generated from transcript", + "__SENTIMENT_OVERVIEW_TITLE": "Experience Summary", "__SENTIMENT_TOAST_COPY_MESSAGE": "Sentiment copied to clipboard", "__SERVICE_DETAIL_PAGE_TAG_RESULTS_DAYS_LABEL": "First results in <0>{{hours}}h", "__SERVICE_TILES_HEADER": "Explore new ways of testing", diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index bca36ef2f..0c0407f6c 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -593,6 +593,7 @@ "__CATALOG_STICKY_CONTAINER_NAV_CATEGORIES_LABEL": "PER TIPOLOGIA", "__CATALOG_STICKY_CONTAINER_NAV_EXTERNAL_LINK_LABEL": "Scopri tutti i servizi", "__COPY_ERROR": "", + "__COPY_SUCCESS": "", "__DASHABOARD_CAMPAIGN_CAMPAIGN_TYPE_FILTER_LABEL Max:10": "Tipo", "__DASHABOARD_CAMPAIGN_STATUS_FILTER_ALL": "Tutte", "__DASHABOARD_CAMPAIGN_STATUS_FILTER_COMPLETED": "Completate", @@ -1315,6 +1316,12 @@ "__PUBLIC_MANUAL_HELP_MODAL_TITLE": "I nostri Articoli", "__PUBLIC_MANUAL_NOT_FOUND_TEXT": "A quanto pare la pagina che stai cercando non esiste ancora.", "__PUBLIC_MANUAL_NOT_FOUND_TITLE": "Manuale non trovato", + "__SENTIMENT_COPY_BUTTON_LABEL": "", + "__SENTIMENT_OVERVIEW_ALERT_DISCLAIMER": "", + "__SENTIMENT_OVERVIEW_ALERT_SUBTITLE": "", + "__SENTIMENT_OVERVIEW_ALERT_TITLE": "", + "__SENTIMENT_OVERVIEW_SUBTITLE": "", + "__SENTIMENT_OVERVIEW_TITLE": "", "__SENTIMENT_TOAST_COPY_MESSAGE": "", "__SERVICE_DETAIL_PAGE_TAG_RESULTS_DAYS_LABEL": "Primi risultati in <0>{{hours}}h", "__SERVICE_TILES_HEADER": "", diff --git a/src/pages/Video/Actions.tsx b/src/pages/Video/Actions.tsx index 2dc07ff0a..9381b14ec 100644 --- a/src/pages/Video/Actions.tsx +++ b/src/pages/Video/Actions.tsx @@ -1,23 +1,24 @@ import { LG, Skeleton, Tag, XL } from '@appquality/unguess-design-system'; +import { useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; import { appTheme } from 'src/app/theme'; -import { Meta } from 'src/common/components/Meta'; -import { Pipe } from 'src/common/components/Pipe'; -import { getDeviceIcon } from 'src/common/components/BugDetail/Meta'; import { ReactComponent as ClockIcon } from 'src/assets/icons/time-icon.svg'; -import { Divider } from 'src/common/components/divider'; -import { useTranslation } from 'react-i18next'; import { capitalizeFirstLetter } from 'src/common/capitalizeFirstLetter'; +import { getDeviceIcon } from 'src/common/components/BugDetail/Meta'; +import { Divider } from 'src/common/components/divider'; +import { Meta } from 'src/common/components/Meta'; +import { Pipe } from 'src/common/components/Pipe'; import { useGetVideosByVidObservationsQuery, useGetVideosByVidQuery, } from 'src/features/api'; import styled from 'styled-components'; -import { useRef } from 'react'; -import { getSeverityTagsByVideoCount } from '../Videos/utils/getSeverityTagsWithCount'; import { formatDuration } from '../Videos/utils/formatDuration'; +import { getSeverityTagsByVideoCount } from '../Videos/utils/getSeverityTagsWithCount'; import { NoObservations } from './components/NoObservations'; import { Observation } from './components/Observation'; +import { SentimentOverview } from './components/SentimentOverview'; const Container = styled.div` display: flex; @@ -103,6 +104,7 @@ const Actions = () => { )} +
{t('__OBSERVATIONS_DRAWER_TOTAL')}: {observations.length} diff --git a/src/pages/Video/components/SentimentOverview/index.tsx b/src/pages/Video/components/SentimentOverview/index.tsx new file mode 100644 index 000000000..d50f67c10 --- /dev/null +++ b/src/pages/Video/components/SentimentOverview/index.tsx @@ -0,0 +1,90 @@ +import { + AccordionNew, + Button, + ContainerCard, + GlobalAlert, + MD, + SM, + Tag, +} from '@appquality/unguess-design-system'; +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; +import { ReactComponent as AiIcon } from 'src/assets/icons/ai-icon.svg'; +import { ReactComponent as CopyIcon } from 'src/assets/icons/copy-icon.svg'; +import { useCopy } from 'src/hooks/useCopy'; +import styled, { useTheme } from 'styled-components'; +import { useContent } from '../Transcript/useContent'; + +const SentimentOverviewWrapper = styled.div` + margin-top: ${({ theme }) => theme.space.md}; +`; + +const CopyButton = styled(Button)` + margin-top: ${({ theme }) => theme.space.lg}; +`; + +export const SentimentOverview = () => { + const { videoId } = useParams(); + const theme = useTheme(); + const [showHelp, setShowHelp] = useState(true); + const [isOpen, setIsOpen] = useState(true); + const { t } = useTranslation(); + const { generalSentiment } = useContent(videoId || ''); + const copy = useCopy({ text: generalSentiment || '' }); + + if (!generalSentiment) return null; + const handleAccordionChange = () => { + setIsOpen((prev) => !prev); + }; + + return ( + + + + }> + + + Beta + + + + +
{generalSentiment}
+ + + + + {t('__SENTIMENT_COPY_BUTTON_LABEL')} + + + {showHelp && ( + setShowHelp(false)} + message={ + <> + {t('__SENTIMENT_OVERVIEW_ALERT_TITLE')} + {t('__SENTIMENT_OVERVIEW_ALERT_SUBTITLE')} + + } + /> + )} + + {t('__SENTIMENT_OVERVIEW_ALERT_DISCLAIMER')} + + + + + + ); +}; diff --git a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx index 1a0d635ee..4c3c787d6 100644 --- a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx +++ b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx @@ -137,7 +137,7 @@ const Component = ({ value, text }: { value: number; text: string }) => { - Copy + {t('__SENTIMENT_COPY_BUTTON_LABEL')}
diff --git a/src/pages/Video/components/Transcript/useContent.tsx b/src/pages/Video/components/Transcript/useContent.tsx index bb609891d..099ca0975 100644 --- a/src/pages/Video/components/Transcript/useContent.tsx +++ b/src/pages/Video/components/Transcript/useContent.tsx @@ -38,6 +38,7 @@ export const useContent = (videoId: string) => { return { data: content, sentiments, + generalSentiment: video?.sentiment?.reason, speakers, isError: isErrorVideo, isFetching: isFetchingVideo, From 88338a722bb554721ea0cbd1535de84cc5c6c170 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Tue, 22 Apr 2025 15:56:19 +0200 Subject: [PATCH 70/92] fix: Update sentiment overview title format and improve layout in components --- src/locales/en/translation.json | 2 +- .../components/SentimentOverview/index.tsx | 44 +++++++++---------- .../TranscriptTheme/SentimentWrapper.tsx | 2 +- 3 files changed, 23 insertions(+), 25 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index d93957dd6..6b7c4db1f 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -1290,7 +1290,7 @@ "__SENTIMENT_COPY_BUTTON_LABEL": "Copy", "__SENTIMENT_OVERVIEW_ALERT_DISCLAIMER": "AI helps you explore. Just remember to verify what you find.", "__SENTIMENT_OVERVIEW_ALERT_SUBTITLE": "See how your user felt paragraph by paragraph", - "__SENTIMENT_OVERVIEW_ALERT_TITLE": "Explore sentiment journey", + "__SENTIMENT_OVERVIEW_ALERT_TITLE": "Explore sentiment journey:", "__SENTIMENT_OVERVIEW_SUBTITLE": "Generated from transcript", "__SENTIMENT_OVERVIEW_TITLE": "Experience Summary", "__SENTIMENT_TOAST_COPY_MESSAGE": "Sentiment copied to clipboard", diff --git a/src/pages/Video/components/SentimentOverview/index.tsx b/src/pages/Video/components/SentimentOverview/index.tsx index d50f67c10..eb7043670 100644 --- a/src/pages/Video/components/SentimentOverview/index.tsx +++ b/src/pages/Video/components/SentimentOverview/index.tsx @@ -1,9 +1,7 @@ import { AccordionNew, Button, - ContainerCard, GlobalAlert, - MD, SM, Tag, } from '@appquality/unguess-design-system'; @@ -24,10 +22,18 @@ const CopyButton = styled(Button)` margin-top: ${({ theme }) => theme.space.lg}; `; +const StyledHeader = styled(AccordionNew.Header)` + .accordion-header-inner-wrapper { + grid-template-areas: + 'supertitle supertitle' + 'label label' + 'meta meta'; + } +`; + export const SentimentOverview = () => { const { videoId } = useParams(); const theme = useTheme(); - const [showHelp, setShowHelp] = useState(true); const [isOpen, setIsOpen] = useState(true); const { t } = useTranslation(); const { generalSentiment } = useContent(videoId || ''); @@ -46,39 +52,31 @@ export const SentimentOverview = () => { onChange={handleAccordionChange} > - }> + }> - Beta + Beta - + - +
{generalSentiment}
- + {t('__SENTIMENT_COPY_BUTTON_LABEL')} - - {showHelp && ( - setShowHelp(false)} - message={ - <> - {t('__SENTIMENT_OVERVIEW_ALERT_TITLE')} - {t('__SENTIMENT_OVERVIEW_ALERT_SUBTITLE')} - - } - /> - )} +
+ {t('__SENTIMENT_OVERVIEW_ALERT_DISCLAIMER')} diff --git a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx index 4c3c787d6..f7398d5a0 100644 --- a/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx +++ b/src/pages/Video/components/Transcript/TranscriptTheme/SentimentWrapper.tsx @@ -102,7 +102,7 @@ const Component = ({ value, text }: { value: number; text: string }) => { const [referenceElement, setReferenceElement] = useState(null); - if (!showSentiment) return null; + if (!showSentiment) return ; return ( <> From d12a0329b974b1197d8a15ee846587e8357cf967 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Tue, 22 Apr 2025 16:01:02 +0200 Subject: [PATCH 71/92] refactor(controls): add data attributes to IconButton and delete action item --- src/pages/Plan/Controls.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/Plan/Controls.tsx b/src/pages/Plan/Controls.tsx index 4c3a78a06..5dcc52bc7 100644 --- a/src/pages/Plan/Controls.tsx +++ b/src/pages/Plan/Controls.tsx @@ -136,12 +136,16 @@ export const Controls = () => { handleMenuClick(value ?? ''); }} label={(props) => ( - + )} > - + {t('__PLAN_DELETE_PLAN_CTA')} From 23bbd5fc711b050a7ca55c6192b2f26bd5ea6328 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Tue, 22 Apr 2025 16:01:24 +0200 Subject: [PATCH 72/92] test(plan): add tests for extra actions menu and delete plan functionality --- tests/e2e/plan/draft.spec.ts | 54 ++++++++++++++++++++++++++++++++++-- tests/fixtures/pages/Plan.ts | 20 +++++++++++++ 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/tests/e2e/plan/draft.spec.ts b/tests/e2e/plan/draft.spec.ts index 4ee6b856a..d684e9ee8 100644 --- a/tests/e2e/plan/draft.spec.ts +++ b/tests/e2e/plan/draft.spec.ts @@ -14,10 +14,11 @@ test.describe('The module builder', () => { await planPage.mockWorkspacesList(); await planPage.mockGetDraftWithOnlyMandatoryModulesPlan(); await planPage.mockPatchStatus(); + await planPage.open(); }); - test('has a list of saved modules and not the others, a save button and a request quote cta', async () => { + test('has a list of saved modules and not the others, a save button, a request quote cta and a dots menu cta', async () => { // Click the "Setup" tab await planPage.elements().setupTab().click(); @@ -28,11 +29,13 @@ test.describe('The module builder', () => { // Check if other modules are not visible await expect(planPage.elements().tasksModule()).not.toBeVisible(); - // Check if the save button and request quote CTA are visible and enabled + // Check if the save button, request quote CTA and dots menu are visible and enabled await expect(planPage.elements().saveConfigurationCTA()).toBeVisible(); await expect(planPage.elements().saveConfigurationCTA()).not.toBeDisabled(); await expect(planPage.elements().requestQuotationCTA()).toBeVisible(); await expect(planPage.elements().requestQuotationCTA()).not.toBeDisabled(); + await expect(planPage.elements().extraActionsMenu()).toBeVisible(); + await expect(planPage.elements().extraActionsMenu()).not.toBeDisabled(); }); test('The task module is visible if instructionTab is clicked', async () => { @@ -120,6 +123,7 @@ test.describe('When there is an error in the module configuration (e.g. a date i await planPage.mockWorkspace(); await planPage.mockWorkspacesList(); await planPage.mockGetDraftPlanWithDateError(); + await planPage.open(); }); @@ -130,3 +134,49 @@ test.describe('When there is an error in the module configuration (e.g. a date i }); test('when a user click Request Quotation we trigger all fields validation, display error messages and trigger PATCH plan but not the PATCH status', async () => {}); }); + +test.describe('When the user clicks on the dots menu', () => { + let planPage: PlanPage; + + test.beforeEach(async ({ page }, testinfo) => { + testinfo.setTimeout(60000); + planPage = new PlanPage(page); + await planPage.loggedIn(); + await planPage.mockPreferences(); + await planPage.mockWorkspace(); + await planPage.mockWorkspacesList(); + await planPage.mockGetDraftWithOnlyMandatoryModulesPlan(); + + await planPage.open(); + }); + + test("The menu opens and the user can see the 'Delete' option", async () => { + await planPage.elements().extraActionsMenu().click(); + await expect(planPage.elements().deletePlanActionItem()).toBeVisible(); + await expect(planPage.elements().deletePlanActionItem()).toBeEnabled(); + }); + + test("When the user clicks on the 'Delete' option, the delete modal opens with its title, confirm and abort deletion CTA", async () => { + await planPage.elements().extraActionsMenu().click(); + await planPage.elements().deletePlanActionItem().click(); + await expect(planPage.elements().deletePlanModal()).toBeVisible({ + timeout: 3000, + }); + await expect(planPage.elements().deletePlanModalTitle()).toBeVisible(); + await expect(planPage.elements().deletePlanModalConfirmCTA()).toBeVisible(); + await expect(planPage.elements().deletePlanModalConfirmCTA()).toBeEnabled(); + await expect(planPage.elements().deletePlanModalCancelCTA()).toBeVisible(); + await expect(planPage.elements().deletePlanModalCancelCTA()).toBeEnabled(); + }); + + test("When the user clicks on the 'Delete permanently' CTA, he is redirected to the home page", async ({ + page, + }) => { + await planPage.elements().extraActionsMenu().click(); + await planPage.elements().deletePlanActionItem().click(); + await planPage.elements().deletePlanModalConfirmCTA().click(); + + await expect(planPage.elements().deletePlanModal()).not.toBeVisible(); + await expect(page).toHaveURL('/'); + }); +}); diff --git a/tests/fixtures/pages/Plan.ts b/tests/fixtures/pages/Plan.ts index 719505f0d..22720b88e 100644 --- a/tests/fixtures/pages/Plan.ts +++ b/tests/fixtures/pages/Plan.ts @@ -69,6 +69,26 @@ export class PlanPage extends UnguessPage { this.page.getByTestId('digital-literacy-module'), digitalLiteracyModuleErrorMessage: () => this.page.getByTestId('literacy-error'), + extraActionsMenu: () => this.page.getByTestId('extra-actions-menu'), + deletePlanActionItem: () => this.page.getByTestId('delete-action-item'), + deletePlanModal: () => this.page.getByTestId('delete-plan-modal'), + deletePlanModalTitle: () => + this.elements() + .deletePlanModal() + .getByText(this.i18n.t('__PLAN_PAGE_DELETE_PLAN_MODAL_TITLE')), + deletePlanModalConfirmCTA: () => + this.elements() + .deletePlanModal() + .getByTestId('delete-plan-modal-cta') + .getByText( + this.i18n.t('__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CONFIRM') + ), + deletePlanModalCancelCTA: () => + this.elements() + .deletePlanModal() + .getByText( + this.i18n.t('__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CANCEL') + ), }; } From 42f9b3fa5c716edabcc386d13cf4c7d0cbee0cf7 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Wed, 23 Apr 2025 11:43:35 +0200 Subject: [PATCH 73/92] chore(dependencies): remove unused @zendeskgarden packages and used Dots from internal design system --- package.json | 2 -- src/pages/Plan/modals/DeletePlanModal.tsx | 2 +- yarn.lock | 31 ----------------------- 3 files changed, 1 insertion(+), 34 deletions(-) diff --git a/package.json b/package.json index 5ecffb4a4..35f998665 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,6 @@ "@headwayapp/react-widget": "^0.0.4", "@reduxjs/toolkit": "^1.8.0", "@sentry/react": "^8.32.0", - "@zendeskgarden/react-loaders": "^9.5.4", - "@zendeskgarden/react-theming": "^9.5.4", "@zendeskgarden/svg-icons": "^7.2.0", "date-fns": "^2.28.0", "formik": "^2.2.9", diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index 6ca86ab25..e656a6b4c 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -10,8 +10,8 @@ import { MD, Span, useToast, + Dots, } from '@appquality/unguess-design-system'; -import { Dots } from '@zendeskgarden/react-loaders'; import { appTheme } from 'src/app/theme'; import { useDeletePlansByPidMutation } from 'src/features/api'; diff --git a/yarn.lock b/yarn.lock index ccb787f0f..6bd9a21eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2494,15 +2494,6 @@ polished "^4.3.1" prop-types "^15.5.7" -"@zendeskgarden/react-loaders@^9.5.4": - version "9.5.4" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-loaders/-/react-loaders-9.5.4.tgz#ed13db49012ce83f10cdce4e3ea5a07715c47d2b" - integrity sha512-qC7gtL/723OhYxxGFvZy8NjaF9pYFA5JJoXE2fTSU0o7lBelm5WaAM4LThaj8CgTATiXJkSLnFJovYkhVTPncA== - dependencies: - "@zendeskgarden/container-schedule" "^2.0.9" - polished "^4.3.1" - prop-types "^15.5.7" - "@zendeskgarden/react-modals@8.76.8", "@zendeskgarden/react-modals@^8.76.8": version "8.76.8" resolved "https://registry.yarnpkg.com/@zendeskgarden/react-modals/-/react-modals-8.76.8.tgz#b21ceff1cfce4595675ef602b6c1934ca8b2d3c5" @@ -2580,18 +2571,6 @@ polished "^4.3.1" prop-types "^15.5.7" -"@zendeskgarden/react-theming@^9.5.4": - version "9.5.4" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-9.5.4.tgz#98e07fdce4d277685f1a15327de8a515e0713159" - integrity sha512-quBx2LfHjuPrOSTEK3oC3FG7UY4rYjAYoSw3D4+kpQOxBJI7AsQiZyh+0N69nXoyEhtz8U7twsfnCpvlHXz2tw== - dependencies: - "@floating-ui/react-dom" "^2.0.0" - color2k "^2.0.3" - lodash.get "^4.4.2" - lodash.memoize "^4.1.2" - polished "^4.3.1" - prop-types "^15.5.7" - "@zendeskgarden/react-tooltips@8.76.8", "@zendeskgarden/react-tooltips@^8.76.8": version "8.76.8" resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.76.8.tgz#4bcf8d788141ee598d56bce4901b5a159a589fa5" @@ -3291,11 +3270,6 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color2k@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.3.tgz#a771244f6b6285541c82aa65ff0a0c624046e533" - integrity sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog== - colorette@^2.0.20: version "2.0.20" resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a" @@ -5838,11 +5812,6 @@ lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== -lodash.get@^4.4.2: - version "4.4.2" - resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" - integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ== - lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" From f5bf372ee1b3f8fbcef5aca0f8e9f019a9c95408 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Wed, 23 Apr 2025 11:46:00 +0200 Subject: [PATCH 74/92] refactor(modal): simplify delete plan logic by removing redundant function --- src/pages/Plan/modals/DeletePlanModal.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index e656a6b4c..bc5a37d07 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -30,12 +30,6 @@ const DeletePlanModal = ({ const [deletePlan, { isLoading }] = useDeletePlansByPidMutation(); - const deletePlanById = async (id: string) => { - if (!id) return; - await deletePlan({ pid: id }).unwrap(); - navigate(`/`); - }; - const showDeleteErrorToast = (error: Error) => { addToast( ({ close }) => ( @@ -57,7 +51,8 @@ const DeletePlanModal = ({ const handleConfirm = async () => { try { - await deletePlanById(planId); + await deletePlan({ pid: planId }).unwrap(); + navigate(`/`); } catch (e) { showDeleteErrorToast(e as unknown as Error); onQuit(); From e90477512d08c1cba8d2285adcdc0e1e8b3738fc Mon Sep 17 00:00:00 2001 From: Kariamos Date: Wed, 23 Apr 2025 11:48:19 +0200 Subject: [PATCH 75/92] refactor(modal): simplify loading state handling in delete button --- src/pages/Plan/modals/DeletePlanModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index bc5a37d07..47ebfd457 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -84,10 +84,10 @@ const DeletePlanModal = ({ onClick={!isLoading ? handleConfirm : undefined} data-qa="delete-plan-modal-cta" > - {!isLoading ? ( - t('__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CONFIRM') - ) : ( + {isLoading ? ( + ) : ( + t('__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CONFIRM') )} From 0d2690fabe89cc47264710727252c080a5e6f46f Mon Sep 17 00:00:00 2001 From: Kariamos Date: Wed, 23 Apr 2025 11:56:38 +0200 Subject: [PATCH 76/92] refactor(modal): remove unused data attribute from delete button --- src/pages/Plan/modals/DeletePlanModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index 47ebfd457..65519d028 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -82,7 +82,6 @@ const DeletePlanModal = ({ isBasic isDanger onClick={!isLoading ? handleConfirm : undefined} - data-qa="delete-plan-modal-cta" > {isLoading ? ( From a71d8af20ccf4c05a608efc6af0d7110236d1d28 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Wed, 23 Apr 2025 11:57:01 +0200 Subject: [PATCH 77/92] refactor(plan): update delete plan modal element selectors --- tests/e2e/plan/draft.spec.ts | 4 +--- tests/fixtures/pages/Plan.ts | 12 +++++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/e2e/plan/draft.spec.ts b/tests/e2e/plan/draft.spec.ts index d684e9ee8..96790580e 100644 --- a/tests/e2e/plan/draft.spec.ts +++ b/tests/e2e/plan/draft.spec.ts @@ -159,9 +159,7 @@ test.describe('When the user clicks on the dots menu', () => { test("When the user clicks on the 'Delete' option, the delete modal opens with its title, confirm and abort deletion CTA", async () => { await planPage.elements().extraActionsMenu().click(); await planPage.elements().deletePlanActionItem().click(); - await expect(planPage.elements().deletePlanModal()).toBeVisible({ - timeout: 3000, - }); + await expect(planPage.elements().deletePlanModal()).toBeVisible(); await expect(planPage.elements().deletePlanModalTitle()).toBeVisible(); await expect(planPage.elements().deletePlanModalConfirmCTA()).toBeVisible(); await expect(planPage.elements().deletePlanModalConfirmCTA()).toBeEnabled(); diff --git a/tests/fixtures/pages/Plan.ts b/tests/fixtures/pages/Plan.ts index 22720b88e..51c26ece5 100644 --- a/tests/fixtures/pages/Plan.ts +++ b/tests/fixtures/pages/Plan.ts @@ -71,7 +71,10 @@ export class PlanPage extends UnguessPage { this.page.getByTestId('literacy-error'), extraActionsMenu: () => this.page.getByTestId('extra-actions-menu'), deletePlanActionItem: () => this.page.getByTestId('delete-action-item'), - deletePlanModal: () => this.page.getByTestId('delete-plan-modal'), + deletePlanModal: () => + this.page.getByRole('dialog', { + name: this.i18n.t('__PLAN_PAGE_DELETE_PLAN_MODAL_TITLE'), + }), deletePlanModalTitle: () => this.elements() .deletePlanModal() @@ -79,10 +82,9 @@ export class PlanPage extends UnguessPage { deletePlanModalConfirmCTA: () => this.elements() .deletePlanModal() - .getByTestId('delete-plan-modal-cta') - .getByText( - this.i18n.t('__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CONFIRM') - ), + .getByRole('button', { + name: this.i18n.t('__PLAN_PAGE_DELETE_PLAN_MODAL_BUTTON_CONFIRM'), + }), deletePlanModalCancelCTA: () => this.elements() .deletePlanModal() From a68be24baace5d8db0e83c3dac55ecc740fa9c04 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Wed, 23 Apr 2025 15:35:03 +0200 Subject: [PATCH 78/92] refactor(modal): remove inline style from DeletePlanModal body --- src/pages/Plan/modals/DeletePlanModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index 65519d028..53150ea39 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -68,7 +68,7 @@ const DeletePlanModal = ({ {t('__PLAN_PAGE_DELETE_PLAN_MODAL_TITLE')} - + , boldSpan: }} From 56f06ee840c7e118023c076ea3577a3365c69e05 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Wed, 23 Apr 2025 15:48:11 +0200 Subject: [PATCH 79/92] refactor(controls): replace inline function with named handler for modal quit --- src/pages/Plan/Controls.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/Plan/Controls.tsx b/src/pages/Plan/Controls.tsx index 5dcc52bc7..9e4f815f8 100644 --- a/src/pages/Plan/Controls.tsx +++ b/src/pages/Plan/Controls.tsx @@ -54,6 +54,10 @@ export const Controls = () => { setIsModalOpen(true); }; + const handleQuitDeletePlanModal = () => { + setIsDeleteModalOpen(false); + }; + const handleMenuClick = (value?: string) => { if (value === 'delete') { setIsDeleteModalOpen(true); @@ -154,7 +158,7 @@ export const Controls = () => { setIsDeleteModalOpen(false)} + onQuit={handleQuitDeletePlanModal} /> )} From de499dfd372d48f17b89d3a07a0d3b924b8a48dc Mon Sep 17 00:00:00 2001 From: Kariamos Date: Wed, 23 Apr 2025 15:51:24 +0200 Subject: [PATCH 80/92] refactor(modal): simplify button click handling in DeletePlanModal --- src/pages/Plan/modals/DeletePlanModal.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/Plan/modals/DeletePlanModal.tsx b/src/pages/Plan/modals/DeletePlanModal.tsx index 53150ea39..dd38f9a20 100644 --- a/src/pages/Plan/modals/DeletePlanModal.tsx +++ b/src/pages/Plan/modals/DeletePlanModal.tsx @@ -78,11 +78,7 @@ const DeletePlanModal = ({ -