diff --git a/package.json b/package.json index d8b6d2f05..9e39e6b6e 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.4.0", "private": true, "dependencies": { - "@appquality/unguess-design-system": "3.1.46", + "@appquality/unguess-design-system": "3.1.47", "@headwayapp/react-widget": "^0.0.4", "@reduxjs/toolkit": "^1.8.0", "@rtk-query/codegen-openapi": "^1.0.0-alpha.1", diff --git a/src/assets/icons/pill-icon-tv.svg b/src/assets/icons/pill-icon-tv.svg index e5cf92f10..8c2ef1fc4 100644 --- a/src/assets/icons/pill-icon-tv.svg +++ b/src/assets/icons/pill-icon-tv.svg @@ -1,8 +1,6 @@ - + - + - - - + diff --git a/src/features/api/index.ts b/src/features/api/index.ts index 709ee107e..05b540a00 100644 --- a/src/features/api/index.ts +++ b/src/features/api/index.ts @@ -528,6 +528,7 @@ export type GetCampaignsByCidUxApiResponse = /** status 200 OK */ { name: string; }; value: number; + comment: string; }[]; methodology: { type: string; diff --git a/src/hooks/useActiveWorkspace.ts b/src/hooks/useActiveWorkspace.ts index 91cde0f40..179a5c1ac 100644 --- a/src/hooks/useActiveWorkspace.ts +++ b/src/hooks/useActiveWorkspace.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-debugger */ import { useEffect, useState } from 'react'; import { useAppSelector } from 'src/app/hooks'; import { Workspace, useGetWorkspacesQuery } from 'src/features/api'; diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 0c6990854..5c489d6fc 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -213,9 +213,24 @@ "__BUGS_UNIQUE_FILTER_ITEM_UNIQUE": "Unique only", "__BUGS_USECASES_FILTER_ITEM_NO_ITEMS": "Use Case", "__CAMPAIGN_CARD_EMPTY_TITLE_LABEL": "Untitled", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_DESCRIPTION": "Here you can find the evolution of user sentiments through the Use Cases, evaluated on this scale:", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_PRE_TITLE": "What this graph shows", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_TITLE": "Identify the most critical Use Cases", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_HEADER": "Users' sentiments during the test", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_DESCRIPTION": "Identify the most critical Use Cases and the most appreciated ones. The list is ordered by the most critical", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_1": "Very negative", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_2": "Negative", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_3": "Neutral", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_4": "Positive", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_5": "Very positive", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_SENTIMENT_LABEL": "Sentiment", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL_one": "Use Case (tot. {{count}})", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL_other": "Use Cases (tot. {{count}})", "__CAMPAIGN_PAGE_BUTTON_DETAIL_BUG": "Go to bug list", "__CAMPAIGN_PAGE_DEVICE_AND_BUG_TYPES_SECTION_SUBTITLE": "Check all the isolated bugs organized for devices and OS plus all the bug typologies", "__CAMPAIGN_PAGE_DEVICE_AND_BUG_TYPES_SECTION_TITLE": "Devices and bug types", + "__CAMPAIGN_PAGE_EXP_OVERVIEW_SECTION_SUBTITLE": "How was the overall user experience with the product", + "__CAMPAIGN_PAGE_EXP_OVERVIEW_SECTION_TITLE": "Overview", "__CAMPAIGN_PAGE_GOAL_CARD_PRE_LABEL": "Campaign's goal", "__CAMPAIGN_PAGE_GOAL_CARD_TITLE": "The beginning of the test", "__CAMPAIGN_PAGE_INFO_HEADER_DESKTOP": "Desktop", @@ -257,8 +272,9 @@ "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OTHER_REPORTS_LABEL": "Reports & attachments", "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OVERVIEW_LABEL": "Overview", "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_GROUP_INSIGHTS_LABEL": "SUMMARY", - "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_INSIGHTS_LABEL": "Overview", + "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_INSIGHTS_LABEL": "Main points", "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_METHODOLOGY_LABEL": "About this campaign", + "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_OVERVIEW_LABEL": "Overview", "__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL": "Download now", "__CAMPAIGN_PAGE_REPORTS_CARDS_OPEN_LINK_LABEL": "Open link", "__CAMPAIGN_PAGE_REPORTS_CARDS_UPDATED_ON_LABEL": "Last edit", diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 4c871f30d..b884dd06d 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -227,9 +227,25 @@ "__BUGS_UNIQUE_FILTER_ITEM_UNIQUE": "Solo unici", "__BUGS_USECASES_FILTER_ITEM_NO_ITEMS": "Use Case", "__CAMPAIGN_CARD_EMPTY_TITLE_LABEL": "Senza Titolo", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_DESCRIPTION": "Qui trovi l'evoluzione degli stati d'animo degli utenti nei vari Use Case, valutati su questa scala:", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_PRE_TITLE": "Cosa mostra questo grafico", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_TITLE": "Individua gli Use Case più critici per gli utenti", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_HEADER": "Gli stati d'animo degli utenti durante il test", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_DESCRIPTION": "Individua gli use case più critici in base allo stato d'animo. La lista è ordinata dal più critico al meno critico.", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_1": "Molto negativo", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_2": "Negativo", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_3": "Neutrale", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_4": "Positivo", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_5": "Molto positivo", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_SENTIMENT_LABEL": "Sentimento", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL_one": "Use Case (tot. {{count}})", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL_other": "Use Case (tot. {{count}})", + "__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL_many": "Use Case (tot. {{count}})", "__CAMPAIGN_PAGE_BUTTON_DETAIL_BUG": "Vai alla lista bug", "__CAMPAIGN_PAGE_DEVICE_AND_BUG_TYPES_SECTION_SUBTITLE": "Visualizza i bug divisi per dispositivi e sistemi operativi e le tipologie di tutti i bug segnalati", "__CAMPAIGN_PAGE_DEVICE_AND_BUG_TYPES_SECTION_TITLE": "Dispositivi e tipologie bug", + "__CAMPAIGN_PAGE_EXP_OVERVIEW_SECTION_SUBTITLE": "Com'è stata l'esperienza complessiva degli utenti con il prodotto", + "__CAMPAIGN_PAGE_EXP_OVERVIEW_SECTION_TITLE": "Panoramica", "__CAMPAIGN_PAGE_GOAL_CARD_PRE_LABEL": "Obiettivo della campagna", "__CAMPAIGN_PAGE_GOAL_CARD_TITLE": "Il punto di partenza del test", "__CAMPAIGN_PAGE_INFO_HEADER_DESKTOP": "Desktop", @@ -239,25 +255,23 @@ "__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_TV": "TV", "__CAMPAIGN_PAGE_INFO_HEADER_TEST_TIMING": "Durata test", "__CAMPAIGN_PAGE_INSIGHTS_ALL_CLUSTERS": "Generale", - "__CAMPAIGN_PAGE_INSIGHTS_LIGHTBOX_DETAILS_LINKED_INSIGHT_LABEL": "Insight collegato", - "__CAMPAIGN_PAGE_INSIGHTS_LIGHTBOX_HEADER_HIGHLIGHTS_LABEL_one": "({{count}} Highlight)", - "__CAMPAIGN_PAGE_INSIGHTS_LIGHTBOX_HEADER_HIGHLIGHTS_LABEL_many": "({{count}} Highlights)", - "__CAMPAIGN_PAGE_INSIGHTS_LIGHTBOX_HEADER_HIGHLIGHTS_LABEL_other": "({{count}} Highlights)", + "__CAMPAIGN_PAGE_INSIGHTS_LIGHTBOX_DETAILS_LINKED_INSIGHT_LABEL": "Scoperta collegata", + "__CAMPAIGN_PAGE_INSIGHTS_LIGHTBOX_HEADER_HIGHLIGHTS_LABEL_one": "({{count}} Evidenze)", + "__CAMPAIGN_PAGE_INSIGHTS_LIGHTBOX_HEADER_HIGHLIGHTS_LABEL_other": "({{count}} Evidenze)", "__CAMPAIGN_PAGE_INSIGHTS_NAVIGATION_TITLE": "Executive summary", - "__CAMPAIGN_PAGE_INSIGHTS_NUMBER_LABEL": "Insight", - "__CAMPAIGN_PAGE_INSIGHTS_SECTION_SUBTITLE": "Cosa abbiamo scoperto e compreso nello specifico dell'esperienza utente", - "__CAMPAIGN_PAGE_INSIGHTS_SECTION_TITLE": "Nel dettaglio", + "__CAMPAIGN_PAGE_INSIGHTS_NUMBER_LABEL": "Scoperta", + "__CAMPAIGN_PAGE_INSIGHTS_SECTION_SUBTITLE": "Cosa abbiamo scoperto dell’esperienza utente", + "__CAMPAIGN_PAGE_INSIGHTS_SECTION_TITLE": "Punti principali", "__CAMPAIGN_PAGE_INSIGHTS_SHOW_LESS_LABEL": "Mostra meno", - "__CAMPAIGN_PAGE_INSIGHTS_SHOW_MORE_LABEL_one": "Mostra altri highlight <2>({{video_count}})", - "__CAMPAIGN_PAGE_INSIGHTS_SHOW_MORE_LABEL_many": "Show more highlights <2>({{video_count}})", - "__CAMPAIGN_PAGE_INSIGHTS_SHOW_MORE_LABEL_other": "Mostra altri highlight <2>({{video_count}})", - "__CAMPAIGN_PAGE_INSIGHTS_VIDEO_PART_NUMBER_LABEL": "Highlight {{index}} di {{video_count}}", + "__CAMPAIGN_PAGE_INSIGHTS_SHOW_MORE_LABEL_one": "Vedi altre evidenze <2>({{video_count}})", + "__CAMPAIGN_PAGE_INSIGHTS_SHOW_MORE_LABEL_other": "Vedi altre evidenze <2>({{video_count}})", + "__CAMPAIGN_PAGE_INSIGHTS_VIDEO_PART_NUMBER_LABEL": "Evidenza {{index}} di {{video_count}}", "__CAMPAIGN_PAGE_METHODOLOGY_CARD_INVOLVED_USERS_LABEL": "UTENTI COINVOLTI", "__CAMPAIGN_PAGE_METHODOLOGY_CARD_TEST_TYPOLOGY_LABEL": "TIPOLOGIA DI TEST", "__CAMPAIGN_PAGE_METHODOLOGY_CARD_TITLE": "La metodologia usata", "__CAMPAIGN_PAGE_METHODOLOGY_SECTION_SUBTITLE": "Cosa volevamo scoprire con questo test e quale metodologia abbiamo usato per farlo", "__CAMPAIGN_PAGE_METHODOLOGY_SECTION_TITLE": "Sulla campagna", - "__CAMPAIGN_PAGE_METHODOLOGY_SERVICES_LINK": "Scopri altri servizi", + "__CAMPAIGN_PAGE_METHODOLOGY_SERVICES_LINK": "Vedi i servizi", "__CAMPAIGN_PAGE_METHODOLOGY_SHOW_LESS": "Mostra meno", "__CAMPAIGN_PAGE_METHODOLOGY_SHOW_MORE": "Leggi di più", "__CAMPAIGN_PAGE_METHODOLOGY_USERS_NUMBER_one": "{{count}} Utente", @@ -268,19 +282,20 @@ "__CAMPAIGN_PAGE_METHODOLOGY_USERS_QUANTITATIVE": "Quantitativa", "__CAMPAIGN_PAGE_NAVIGATION_BUG_EXTERNAL_LINK_LABEL": "Vai alla lista bug", "__CAMPAIGN_PAGE_NAVIGATION_BUG_GROUP_DETAILS_LABEL": "APPROFONDISCI", - "__CAMPAIGN_PAGE_NAVIGATION_BUG_GROUP_OTHER_LABEL": "DOWNLOAD", + "__CAMPAIGN_PAGE_NAVIGATION_BUG_GROUP_OTHER_LABEL": "NEL DETTAGLIO", "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_DETAILS_DEVICES_LABEL": "Dispositivi e tipologie bug", "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_DETAILS_UNIQUE_BUGS_LABEL": "Distribuzione bug unici", "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OTHER_REPORTS_LABEL": "Report e documenti", "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OVERVIEW_LABEL": "Panoramica", - "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_GROUP_INSIGHTS_LABEL": "COSA ABBIAMO IMPARATO", - "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_INSIGHTS_LABEL": "Nel dettaglio", - "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_METHODOLOGY_LABEL": "About this campaign", + "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_GROUP_INSIGHTS_LABEL": "IN SINTESI", + "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_INSIGHTS_LABEL": "Punti principali", + "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_METHODOLOGY_LABEL": "Sulla campagna", + "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_OVERVIEW_LABEL": "Panoramica", "__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL": "Scarica ora", "__CAMPAIGN_PAGE_REPORTS_CARDS_OPEN_LINK_LABEL": "Apri link", "__CAMPAIGN_PAGE_REPORTS_CARDS_UPDATED_ON_LABEL": "Ultima modifica", "__CAMPAIGN_PAGE_REPORTS_CARDS_UPLOADED_ON_LABEL": "Caricato il", - "__CAMPAIGN_PAGE_REPORTS_DESCRIPTION": "Qui puoi trovare report e allegati relativi alla tua campagna.", + "__CAMPAIGN_PAGE_REPORTS_DESCRIPTION": "Qui puoi trovare la documentazione completa collegata al test", "__CAMPAIGN_PAGE_REPORTS_EMPTY_REPORTS_TEXT": "Qui troverai informazioni sulla tua campagna, quando sarà finita. \nSei hai dubbi o domande, contatta il tuo CSM.", "__CAMPAIGN_PAGE_REPORTS_EMPTY_REPORTS_TITLE": "Non ci sono ancora contenuti", "__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_ARCHIVE": "Archivio", @@ -763,7 +778,7 @@ "__WORKSPACE_SETTINGS_ADD_MEMBER_INVALID_EMAIL_ERROR": "Email non valida", "__WORKSPACE_SETTINGS_ADD_MEMBER_MESSAGE_PLACEHOLDER": "Messaggio (opzionale)", "__WORKSPACE_SETTINGS_ADD_MEMBER_REQUIRED_EMAIL_ERROR": "Campo obbligatorio", - "__WORKSPACE_SETTINGS_CTA_TEXT": "gestisci utenti", + "__WORKSPACE_SETTINGS_CTA_TEXT": "Gestisci utenti", "__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL": "(tu)", "__WORKSPACE_SETTINGS_MEMBER_ACTIONS_LABEL": "membro", "__WORKSPACE_SETTINGS_MEMBER_INVITATION_PENDING_LABEL": "In sospeso", diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/List/Columns.tsx b/src/pages/Campaign/List/Columns.tsx similarity index 100% rename from src/pages/Campaign/useWidgets/Functional/widgets/List/Columns.tsx rename to src/pages/Campaign/List/Columns.tsx diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/List/ListItem.tsx b/src/pages/Campaign/List/ListItem.tsx similarity index 100% rename from src/pages/Campaign/useWidgets/Functional/widgets/List/ListItem.tsx rename to src/pages/Campaign/List/ListItem.tsx diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/List/Pagination.tsx b/src/pages/Campaign/List/Pagination.tsx similarity index 100% rename from src/pages/Campaign/useWidgets/Functional/widgets/List/Pagination.tsx rename to src/pages/Campaign/List/Pagination.tsx diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/List/index.tsx b/src/pages/Campaign/List/index.tsx similarity index 90% rename from src/pages/Campaign/useWidgets/Functional/widgets/List/index.tsx rename to src/pages/Campaign/List/index.tsx index a05d093f3..7ece05087 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/List/index.tsx +++ b/src/pages/Campaign/List/index.tsx @@ -77,10 +77,12 @@ const ExampleList = () => { */ export const List = ({ header, title, children }: ListProps) => ( - - {header ? {header} : null} - {title} - + {(header || title) && ( + + {header ? {header} : null} + {title ? {title} : null} + + )} {children} diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/List/type.ts b/src/pages/Campaign/List/type.ts similarity index 91% rename from src/pages/Campaign/useWidgets/Functional/widgets/List/type.ts rename to src/pages/Campaign/List/type.ts index c8c770e7d..82637334c 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/List/type.ts +++ b/src/pages/Campaign/List/type.ts @@ -9,6 +9,6 @@ export interface ListItemProps { export interface ListProps { header?: ReactNode; - title: ReactNode; + title?: ReactNode; children: ReactNode; } diff --git a/src/pages/Campaign/useWidgets/Experience/widgets.tsx b/src/pages/Campaign/useWidgets/Experience/widgets.tsx index 539738ba9..d41e2c8b0 100644 --- a/src/pages/Campaign/useWidgets/Experience/widgets.tsx +++ b/src/pages/Campaign/useWidgets/Experience/widgets.tsx @@ -6,6 +6,7 @@ import { import { Insights } from './widgets/Insights'; import { CampaignInfo } from './widgets/General'; +import { Overview } from './widgets/Overview'; export const widgets = ({ campaignId, @@ -26,41 +27,56 @@ export const widgets = ({ const showExperience = !!campaign?.outputs?.includes('insights') || isPreview; - if (!showExperience || !campaign) return []; + if (!showExperience || !campaign || !uxData) return []; - const widgetsToShow = []; + const widgetsToShow = [ + { + id: 'campaign-methodology', + title: t('__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_METHODOLOGY_LABEL'), + content: ( + + ), + type: 'item' as const, + }, + { + title: t('__CAMPAIGN_PAGE_NAVIGATION_MEDIA_GROUP_INSIGHTS_LABEL'), + type: 'title' as const, + }, + ]; - if (uxData && uxData.findings && uxData.findings.length > 0) - widgetsToShow.push( - { - id: 'campaign-methodology', - title: t('__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_METHODOLOGY_LABEL'), - content: ( - - ), - type: 'item' as const, - }, - { - title: t('__CAMPAIGN_PAGE_NAVIGATION_MEDIA_GROUP_INSIGHTS_LABEL'), - type: 'title' as const, - }, - { - id: 'campaign-insights', - title: t('__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_INSIGHTS_LABEL'), - content: ( - - ), - type: 'item' as const, - } - ); + if (uxData?.sentiment && uxData.sentiment.length > 0) { + widgetsToShow.push({ + id: 'campaign-overview', + title: t('__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_OVERVIEW_LABEL'), + content: ( + + ), + type: 'item' as const, + }); + } + + if (uxData.findings && uxData.findings.length > 0) { + widgetsToShow.push({ + id: 'campaign-insights', + title: t('__CAMPAIGN_PAGE_NAVIGATION_MEDIA_ITEM_INSIGHTS_LABEL'), + content: ( + + ), + type: 'item' as const, + }); + } return widgetsToShow; }; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/General/GoalCard.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/General/GoalCard.tsx index fcd7df02e..016280b9c 100644 --- a/src/pages/Campaign/useWidgets/Experience/widgets/General/GoalCard.tsx +++ b/src/pages/Campaign/useWidgets/Experience/widgets/General/GoalCard.tsx @@ -3,25 +3,19 @@ import { MD, Row, Col, - SpecialCard, getColor, Accordion, + Grid, } from '@appquality/unguess-design-system'; import styled from 'styled-components'; import { useTranslation } from 'react-i18next'; import { appTheme } from 'src/app/theme'; import { useGetCampaignsByCidUxQuery } from 'src/features/api'; import { Divider } from 'src/common/components/divider'; +import { WidgetSpecialCard } from 'src/pages/Campaign/widgetCards/common/StyledSpecialCard'; import { ReactComponent as TargetIcon } from './assets/target.svg'; import { CircleList } from './List'; -const WidgetCard = styled(SpecialCard)` - cursor: default; - &:hover { - box-shadow: none; - } -`; - const CardContent = styled.div` padding: ${({ theme }) => theme.space.base * 2}px 0; `; @@ -49,28 +43,34 @@ export const GoalCard = ({ if (isLoading || isFetching || isError || !data) return
loading...
; return ( - - + + {t('__CAMPAIGN_PAGE_GOAL_CARD_TITLE')} - + - - - - - - - - {t('__CAMPAIGN_PAGE_GOAL_CARD_PRE_LABEL')} - - {data.goal} - - - + + + + + + + + + {t('__CAMPAIGN_PAGE_GOAL_CARD_PRE_LABEL')} + + + {data.goal} + + + + + @@ -95,6 +95,6 @@ export const GoalCard = ({ - + ); }; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx index 1f4156a35..060cc300b 100644 --- a/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx +++ b/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx @@ -2,7 +2,6 @@ import { MD, Row, Col, - SpecialCard, SM, getColor, Grid, @@ -19,17 +18,11 @@ import { import { Divider } from 'src/common/components/divider'; import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute'; import { Link } from 'react-router-dom'; +import { WidgetSpecialCard } from 'src/pages/Campaign/widgetCards/common/StyledSpecialCard'; import { ReactComponent as CampaignInfo } from './assets/campaignInfo.svg'; import { ReactComponent as UserGroup } from './assets/userGroup.svg'; import { MethodologyNote } from './Note'; -const WidgetCard = styled(SpecialCard)` - cursor: default; - &:hover { - box-shadow: none; - } -`; - const Summary = styled.div` margin: ${({ theme }) => theme.space.base * 2}px 0; `; @@ -92,12 +85,12 @@ export const Methodology = ({ }; return ( - - + + {t('__CAMPAIGN_PAGE_METHODOLOGY_CARD_TITLE')} - + @@ -145,13 +138,13 @@ export const Methodology = ({ - + {t('__CAMPAIGN_PAGE_METHODOLOGY_SERVICES_LINK')} - - + + ); }; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/General/index.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/General/index.tsx index 66fc776b7..f7d8cdd9d 100644 --- a/src/pages/Campaign/useWidgets/Experience/widgets/General/index.tsx +++ b/src/pages/Campaign/useWidgets/Experience/widgets/General/index.tsx @@ -11,7 +11,7 @@ import { Methodology } from './Methodology'; const StyledRow = styled.div` display: grid; - grid-template-columns: 8fr 4fr; + grid-template-columns: 7fr 5fr; grid-gap: ${({ theme }) => theme.space.md}; align-items: start; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/InsightCard.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/InsightCard.tsx index 610438334..378298afe 100644 --- a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/InsightCard.tsx +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/InsightCard.tsx @@ -1,8 +1,8 @@ import { SpecialCard } from '@appquality/unguess-design-system'; -import styled from 'styled-components'; import { useTranslation } from 'react-i18next'; import { appTheme } from 'src/app/theme'; import { GetCampaignsByCidUxApiResponse } from 'src/features/api'; +import styled from 'styled-components'; import { getClusterTag, getSeverityIcon, getSeverityTag } from './utils'; export const CardFooter = styled(SpecialCard.Footer)` @@ -35,7 +35,7 @@ const InsightCard = ({ {insight.title} - {insight.description} +
{insight.description}
{getClusterTag(insight.cluster, t)} diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Lightbox.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Lightbox.tsx index c709f0799..3a4f08fa0 100644 --- a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Lightbox.tsx +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Lightbox.tsx @@ -1,25 +1,19 @@ import { - // Button, Lightbox, MD, + Player, Slider, Span, XL, - Player, } from '@appquality/unguess-design-system'; +import { t } from 'i18next'; import { useCallback, useRef } from 'react'; -import styled from 'styled-components'; -import useWindowSize from 'src/hooks/useWindowSize'; +import { Trans } from 'react-i18next'; import { appTheme } from 'src/app/theme'; import { GetCampaignsByCidUxApiResponse } from 'src/features/api'; -import { t } from 'i18next'; -// import { ReactComponent as DownloadIcon } from 'src/assets/icons/download-stroke.svg'; -import { Trans } from 'react-i18next'; -import { - getClusterName, - // getClusterTag, - getSeverityTag, -} from './utils'; +import useWindowSize from 'src/hooks/useWindowSize'; +import styled from 'styled-components'; +import { getClusterName, getSeverityTag } from './utils'; const LightboxHeader = styled(Lightbox.Header)` display: flex; @@ -120,29 +114,11 @@ const InsightLightbox = ({ '__CAMPAIGN_PAGE_INSIGHTS_LIGHTBOX_DETAILS_LINKED_INSIGHT_LABEL' )} - {insight.description} + {insight.description} )} - {/* TODO: check how to download the trimmed video, not the full media url 📦📦📦 */} - - {/* */} - + ); diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/index.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/index.tsx index 99a95d734..4acc23c0e 100644 --- a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/index.tsx +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/index.tsx @@ -3,26 +3,26 @@ import { Col, Grid, IconButton, + Notification, Row, Skeleton, Span, XL, - Notification, useToast, } from '@appquality/unguess-design-system'; +import { useCallback, useEffect, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { Campaign } from 'src/features/api'; -import { SectionTitle } from 'src/pages/Campaign/SectionTitle'; +import { appTheme } from 'src/app/theme'; import { ReactComponent as CopyIcon } from 'src/assets/icons/link-fill.svg'; -import { useCallback, useEffect, useState } from 'react'; import { Divider } from 'src/common/components/divider'; -import { appTheme } from 'src/app/theme'; +import { Campaign } from 'src/features/api'; +import { SectionTitle } from 'src/pages/Campaign/SectionTitle'; import styled, { css } from 'styled-components'; -import { useCampaignInsights } from './useCampaignInsights'; -import { Navigation, navigationOffset } from './Navigation'; -import { InsightCard } from './InsightCard'; import { HighlightCard } from './HighlightCard'; +import { InsightCard } from './InsightCard'; import { InsightLightbox } from './Lightbox'; +import { Navigation, navigationOffset } from './Navigation'; +import { useCampaignInsights } from './useCampaignInsights'; const hideOnMobile = css` @media (max-width: ${appTheme.breakpoints.lg}) { @@ -64,7 +64,8 @@ export const Insights = ({ const copyLink = useCallback( (anchor: string) => { - navigator.clipboard.writeText(`${window.location.href}#${anchor}`); + const url = window.location.href.split('#')[0]; + navigator.clipboard.writeText(`${url}#${anchor}`); addToast( ({ close }) => ( theme.palette.blue[600]}; + font-size: ${({ theme }) => theme.fontSizes.md}; + padding: ${({ theme }) => theme.space.sm}; +`; + +const VerticalLabel = styled(Label)` + transform: rotate(-90deg); + margin-left: -${({ theme }) => theme.space.md}; +`; + +const HorizontalLabel = styled(Label)` + text-align: center; +`; + +const Tooltip = styled.div` + background-color: white; + border: 1px solid ${({ theme }) => theme.palette.grey[300]}; + border-radius: ${({ theme }) => theme.borderRadii.md}; + padding: ${({ theme }) => theme.space.sm}; + box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)}; + max-width: 270px; + white-space: normal; +`; + +const LegendCard = styled(ContainerCard)` + padding: ${({ theme }) => theme.space.base * 4}px; + background-color: ${({ theme }) => theme.palette.grey[100]}; + height: 100%; +`; + +const SentimentItem = styled.div` + display: flex; + align-items: flex-start; + justify-content: flex-start; + margin-bottom: ${({ theme }) => theme.space.sm}; + + svg { + width: ${({ theme }) => theme.space.base * 4}px; + height: ${({ theme }) => theme.space.base * 4}px; + margin-right: ${(p) => p.theme.space.xs}; + flex-shrink: 0; + } +`; + +export const Chart = ({ + campaignId, + isPreview, +}: { + campaignId: number; + isPreview?: boolean; +}) => { + const { t } = useTranslation(); + + const { sentiments, isLoading, isError } = useSentiments({ + cid: campaignId.toString(), + isPreview, + }); + + if (!sentiments.length || isError) return null; + + return ( + + + + + + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_SENTIMENT_LABEL')} + + + + {isLoading ? ( + + ) : ( + ({ + x: s.title, + y: s.sentiment, + custom_data: s.note, + })), + ], + }} + width={`${ + sentiments.length < 4 ? '100%' : sentiments.length * 200 + }px`} + height="400px" + margin={{ top: 50, right: 0, bottom: 50, left: 0 }} + i18n={{ + sentimentsValues: { + veryNegative: t( + '__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_1' + ), + negative: t( + '__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_2' + ), + neutral: t( + '__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_3' + ), + positive: t( + '__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_4' + ), + veryPositive: t( + '__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_5' + ), + }, + }} + tooltip={(node) => { + const { data, label: cluster } = node; + + return ( + +
+ {data?.icon} + + {cluster} + +
+ {data?.customData && ( + + {data?.customData} + + )} + + ); + }} + /> + )} + + + + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_PRE_TITLE')} + + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_TITLE')} + + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_CARD_DESCRIPTION')} + + {getSentiment(1, t).text} + {getSentiment(2, t).text} + {getSentiment(3, t).text} + {getSentiment(4, t).text} + + {getSentiment(5, t).text} + + + + + + + +
+ + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL', { + count: sentiments.length, + })} + +
+ + + + + + + ); +}; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/Sentiment.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/Sentiment.tsx new file mode 100644 index 000000000..9d8b66651 --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/Sentiment.tsx @@ -0,0 +1,34 @@ +import { useTranslation } from 'react-i18next'; +import FlipCard from 'src/pages/Campaign/widgetCards/FlipCard'; +import { Chart } from './Chart'; +import { SentimentList } from './SentimentList'; +import { useSentiments } from './useSentiments'; + +export const Sentiment = ({ + campaignId, + isPreview, +}: { + campaignId: number; + isPreview?: boolean; +}) => { + const { t } = useTranslation(); + + const { sentiments, isLoading, isError } = useSentiments({ + cid: campaignId.toString(), + isPreview, + }); + + if (isLoading || isError || !sentiments) return null; + + return ( + + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_HEADER')} + + } + back={} + /> + + ); +}; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentList/Item.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentList/Item.tsx new file mode 100644 index 000000000..c7d47b10a --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentList/Item.tsx @@ -0,0 +1,64 @@ +import { Ellipsis, MD, Progress, SM } from '@appquality/unguess-design-system'; +import { useTranslation } from 'react-i18next'; +import { appTheme } from 'src/app/theme'; +import styled from 'styled-components'; +import { getPercentage, getSentiment } from '../utils'; + +const ListItemTitle = styled.div` + display: grid; + grid-template-columns: 6fr 1fr; + padding-top: ${({ theme }) => theme.space.xs}; + padding-bottom: ${({ theme }) => theme.space.xxs}; + align-items: bottom; +`; + +const ListItemWrapper = styled.div` + margin-top: ${(p) => p.theme.space.xxs}; + display: block; +`; + +const StyledSM = styled(SM)` + display: flex; + align-items: flex-end; + justify-content: flex-end; + flex-shrink: 0; + + svg { + width: 1rem; + height: 1rem; + margin-right: ${(p) => p.theme.space.xxs}; + } +`; + +export interface Sentiment { + id: number; + title: string; + sentiment: number; + note: string; +} + +export const Item = ({ item }: { item: Sentiment }) => { + const { t } = useTranslation(); + + return ( + + +
+ + {item.title} + + + {item.note} + +
+ {getSentiment(item.sentiment, t).text} + + + + ); +}; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentList/index.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentList/index.tsx new file mode 100644 index 000000000..7685dbb14 --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentList/index.tsx @@ -0,0 +1,86 @@ +import { MD } from '@appquality/unguess-design-system'; +import { useEffect, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { List } from 'src/pages/Campaign/List'; +import styled from 'styled-components'; +import { useSentiments } from '../useSentiments'; +import { Item, Sentiment } from './Item'; + +const Description = styled(MD)` + margin: ${({ theme }) => theme.space.base * 5}px 0; + color: ${({ theme }) => theme.palette.grey[700]}; + align-self: flex-start; + + @media (max-width: ${({ theme }) => theme.breakpoints.md}) { + display: none; + } +`; + +export const SentimentList = ({ + campaignId, + isPreview, +}: { + campaignId: number; + isPreview?: boolean; +}) => { + const PAGE_ITEMS_SIZE = 5; + const { t } = useTranslation(); + + const { sentiments, isLoading, isError } = useSentiments({ + cid: campaignId.toString(), + isPreview, + order: 'DESC', + }); + + const [currentPage, setCurrentPage] = useState(1); + const [paginatedItems, setPaginatedItems] = useState([]); + const maxPages = useMemo( + () => Math.ceil(sentiments.length / PAGE_ITEMS_SIZE), + [sentiments, PAGE_ITEMS_SIZE] + ); + + useEffect(() => { + if (sentiments.length) { + setPaginatedItems( + sentiments + .reverse() + .slice( + (currentPage - 1) * PAGE_ITEMS_SIZE, + currentPage * PAGE_ITEMS_SIZE + ) + ); + } + }, [currentPage, sentiments.length]); + + if (isLoading || isError || !sentiments) return null; + if (!sentiments.length) return null; + + return ( + <> + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_DESCRIPTION')} + + + + + {' '} + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL', { + count: sentiments.length, + })} + + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_SENTIMENT_LABEL')} + + + {paginatedItems.map((item) => ( + + ))} + + + + ); +}; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-1.svg b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-1.svg new file mode 100644 index 000000000..2b552627e --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-2.svg b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-2.svg new file mode 100644 index 000000000..4e04ff770 --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-2.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-3.svg b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-3.svg new file mode 100644 index 000000000..d8b12fe54 --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-3.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-4.svg b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-4.svg new file mode 100644 index 000000000..544a853d9 --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-4.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-5.svg b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-5.svg new file mode 100644 index 000000000..6894ec65e --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/assets/sentiment-5.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/index.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/index.tsx new file mode 100644 index 000000000..e6029e6dc --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/index.tsx @@ -0,0 +1,38 @@ +import { Campaign } from 'src/features/api'; +import { Col, Row } from '@appquality/unguess-design-system'; +import { SectionTitle } from 'src/pages/Campaign/SectionTitle'; +import { Divider } from 'src/common/components/divider'; +import { appTheme } from 'src/app/theme'; +import { useTranslation } from 'react-i18next'; +import { Sentiment } from './Sentiment'; + +export const Overview = ({ + id, + campaign, + isPreview, +}: { + id: string; + campaign: Campaign; + isPreview?: boolean; +}) => { + const { t } = useTranslation(); + + return ( +
+ + + + + + + + + + + +
+ ); +}; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/useSentiments.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/useSentiments.tsx new file mode 100644 index 000000000..02a807712 --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/useSentiments.tsx @@ -0,0 +1,53 @@ +import { useGetCampaignsByCidUxQuery } from 'src/features/api'; + +export const useSentiments = ({ + cid, + isPreview, + order, +}: { + cid: string; + isPreview?: boolean; + order?: string; +}) => { + const { data, isLoading, isFetching, isError } = useGetCampaignsByCidUxQuery({ + cid, + ...(!isPreview && { showAsCustomer: true }), + }); + + if (isLoading || isFetching) { + return { + sentiments: [], + isLoading: true, + isError: false, + }; + } + + if (!data || !data?.sentiment || isError) { + return { + sentiments: [], + isLoading: false, + isError: true, + }; + } + + const sentiments = data.sentiment?.map((s) => ({ + id: s.cluster.id, + title: s.cluster.name, + sentiment: s.value, + note: s.comment, + })); + + if (order) { + sentiments.sort((a, b) => { + if (a.sentiment < b.sentiment) return order === 'DESC' ? 1 : -1; + if (a.sentiment > b.sentiment) return order === 'DESC' ? -1 : 1; + return 0; + }); + } + + return { + sentiments, + isLoading: false, + isError: false, + }; +}; diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/utils.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/utils.tsx new file mode 100644 index 000000000..66579a157 --- /dev/null +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/utils.tsx @@ -0,0 +1,85 @@ +import { TFunction } from 'i18next'; +import { appTheme } from 'src/app/theme'; +import { Span } from '@appquality/unguess-design-system'; +import { ReactComponent as Sentiment1 } from './assets/sentiment-1.svg'; +import { ReactComponent as Sentiment2 } from './assets/sentiment-2.svg'; +import { ReactComponent as Sentiment3 } from './assets/sentiment-3.svg'; +import { ReactComponent as Sentiment4 } from './assets/sentiment-4.svg'; +import { ReactComponent as Sentiment5 } from './assets/sentiment-5.svg'; + +export const getSentiment = (value: number, t: TFunction) => { + switch (value) { + case 1: + return { + color: appTheme.palette.red[500], + text: ( + <> + {' '} + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_1')} + + + ), + }; + case 2: + return { + color: appTheme.palette.red[500], + text: ( + <> + {' '} + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_2')} + + + ), + }; + case 3: + return { + color: appTheme.palette.yellow[500], + text: ( + <> + {' '} + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_3')} + + + ), + }; + case 4: + return { + color: appTheme.palette.green[500], + text: ( + <> + {' '} + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_4')} + + + ), + }; + case 5: + return { + color: appTheme.palette.green[500], + text: ( + <> + {' '} + + {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_5')} + + + ), + }; + + default: + return { + color: appTheme.palette.yellow[500], + text: '', + }; + } +}; + +export const getPercentage = (value: number) => { + if (value === 3) return 50; + + return (value / 5) * 100; +}; diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/BugDistributionCard/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/BugDistributionCard/index.tsx index a7f3f1ffc..b7b104cd2 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/BugDistributionCard/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/BugDistributionCard/index.tsx @@ -9,9 +9,9 @@ import { appTheme } from 'src/app/theme'; import { Trans, useTranslation } from 'react-i18next'; import { TFunction } from 'i18next'; import { getLocalizedFunctionalDashboardUrl } from 'src/hooks/useLocalizeDashboardUrl'; +import { BasicWidget } from 'src/pages/Campaign/widgetCards/BasicWidget'; +import { CapitalizeFirstLetter } from 'src/pages/Campaign/widgetCards/common/CapitalizeFirstLetter'; import { useBugs } from './useBugs'; -import { BasicWidget } from '../widgetCards/BasicWidget'; -import { CapitalizeFirstLetter } from '../widgetCards/common/CapitalizeFirstLetter'; import { WidgetLoader } from '../widgetLoader'; function translateSeverity(severity: Severities, t: TFunction) { diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/BugsByType/ListTotalBugByType.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/BugsByType/ListTotalBugByType.tsx index a411f9234..4a6929b6b 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/BugsByType/ListTotalBugByType.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/BugsByType/ListTotalBugByType.tsx @@ -2,8 +2,8 @@ import { Skeleton, XL } from '@appquality/unguess-design-system'; import { useEffect, useMemo, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { appTheme } from 'src/app/theme'; -import { List } from '../List'; -import { ListItem } from '../List/ListItem'; +import { List } from 'src/pages/Campaign/List'; +import { ListItem } from 'src/pages/Campaign/List/ListItem'; import { BugsByTypeData, useBugsByType } from './useBugsByType'; export const ListTotalBugsByType = ({ campaignId }: { campaignId: number }) => { diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/BugsByType/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/BugsByType/index.tsx index 6d7ff2115..e056a88da 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/BugsByType/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/BugsByType/index.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next'; +import FlipCard from 'src/pages/Campaign/widgetCards/FlipCard'; import { ListTotalBugsByType } from './ListTotalBugByType'; -import FlipCard from '../widgetCards/FlipCard'; import ChartBugsByType from './ChartTotalBugsByType'; const BugsByType = ({ diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/IncomingBugs/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/IncomingBugs/index.tsx index 1d960fac8..fe996c060 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/IncomingBugs/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/IncomingBugs/index.tsx @@ -3,9 +3,9 @@ import { appTheme } from 'src/app/theme'; import { useTranslation } from 'react-i18next'; import i18n from 'src/i18n'; import { getLocalizedFunctionalDashboardUrl } from 'src/hooks/useLocalizeDashboardUrl'; +import { BasicWidget } from 'src/pages/Campaign/widgetCards/BasicWidget'; import { UnreadBugs } from './UnreadBugs'; import { DuplicateBugs } from './DuplicateBugs'; -import { BasicWidget } from '../widgetCards/BasicWidget'; import { useBugsByDuplicates } from './DuplicateBugs/useBugsByDuplicates'; import { UnreadBugsWrapper } from './UnreadBugs/UnreadBugsWrapper'; diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/Progress/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/Progress/index.tsx index 70cbed27f..8512235ae 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/Progress/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/Progress/index.tsx @@ -10,7 +10,7 @@ import styled from 'styled-components'; import { FC } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { Campaign } from 'src/features/api'; -import { BasicWidget } from '../widgetCards/BasicWidget'; +import { BasicWidget } from 'src/pages/Campaign/widgetCards/BasicWidget'; import { useWidgetData } from './useWidgetData'; import { WidgetLoader } from '../widgetLoader'; diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/TotalBugsByOsAndDevices/ListTotalBugsByDevice/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/TotalBugsByOsAndDevices/ListTotalBugsByDevice/index.tsx index 64d777ec5..c68b51074 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/TotalBugsByOsAndDevices/ListTotalBugsByDevice/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/TotalBugsByOsAndDevices/ListTotalBugsByDevice/index.tsx @@ -2,8 +2,8 @@ import { Skeleton, XL } from '@appquality/unguess-design-system'; import { useEffect, useMemo, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { appTheme } from 'src/app/theme'; -import { List } from '../../List'; -import { ListItem } from '../../List/ListItem'; +import { List } from 'src/pages/Campaign/List'; +import { ListItem } from 'src/pages/Campaign/List/ListItem'; import { useListBugsByDevice } from './useListBugsByDevice'; export const ListTotalBugsByDevice = ({ diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/TotalBugsByOsAndDevices/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/TotalBugsByOsAndDevices/index.tsx index 185216ecb..93987e1b3 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/TotalBugsByOsAndDevices/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/TotalBugsByOsAndDevices/index.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next'; -import FlipCard from '../widgetCards/FlipCard'; +import FlipCard from 'src/pages/Campaign/widgetCards/FlipCard'; import { ChartTotalBugsByDevice } from './ChartTotalBugsByDevice'; import { ListTotalBugsByDevice } from './ListTotalBugsByDevice'; diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/WaffleTooltip.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/WaffleTooltip.tsx index 58cb306ef..c8dc19c85 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/WaffleTooltip.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/WaffleTooltip.tsx @@ -14,7 +14,7 @@ const WaffleTooltip = ({ label, percentage, }: { - value: number; + value: string | number; label: string | number; percentage: number; }) => { diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/index.tsx index 5f4780a7f..70c006d68 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/index.tsx @@ -1,9 +1,9 @@ import { WaffleChart, XL, Span } from '@appquality/unguess-design-system'; import { appTheme } from 'src/app/theme'; import { Trans, useTranslation } from 'react-i18next'; +import { BasicWidget } from 'src/pages/Campaign/widgetCards/BasicWidget'; import { useUniqueBugs } from './useUniqueBugs'; import WaffleTooltip from './WaffleTooltip'; -import { BasicWidget } from '../widgetCards/BasicWidget'; import { TrendPill } from './Trend'; import { WidgetLoader } from '../widgetLoader'; diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs4UseCase/List/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs4UseCase/List/index.tsx index de1b17c13..62369c193 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs4UseCase/List/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs4UseCase/List/index.tsx @@ -1,8 +1,8 @@ import { XL } from '@appquality/unguess-design-system'; import { useEffect, useState, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { List } from '../../List'; -import { ListItem } from '../../List/ListItem'; +import { List } from 'src/pages/Campaign/List'; +import { ListItem } from 'src/pages/Campaign/List/ListItem'; import { WidgetLoader } from '../../widgetLoader'; import { BugsByUseCaseVisualizationProps } from '../types'; import { useBugsByUsecase } from '../useBugsByUsecase'; diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs4UseCase/index.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs4UseCase/index.tsx index b1c55a1dd..83a3581a7 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs4UseCase/index.tsx +++ b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs4UseCase/index.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; -import FlipCard from '../widgetCards/FlipCard'; +import FlipCard from 'src/pages/Campaign/widgetCards/FlipCard'; import { ChartUniqueBugs4UseCase } from './Chart'; import { ListUniqueBugs4UseCase } from './List'; diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/BasicWidget.tsx b/src/pages/Campaign/widgetCards/BasicWidget.tsx similarity index 93% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/BasicWidget.tsx rename to src/pages/Campaign/widgetCards/BasicWidget.tsx index ee42a72e7..c07843195 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/BasicWidget.tsx +++ b/src/pages/Campaign/widgetCards/BasicWidget.tsx @@ -8,7 +8,7 @@ import { import { ReactComponent as InfoStrokeIcon } from '@zendeskgarden/svg-icons/src/16/info-stroke.svg'; import React from 'react'; import styled from 'styled-components'; -import { StyledSpecialCard } from './common/StyledSpecialCard'; +import { WidgetSpecialCard } from './common/StyledSpecialCard'; import { WidgetCardFooter } from './common/WidgetCardFooter'; import { WidgetCardHeader } from './common/WidgetCardHeader'; @@ -18,9 +18,9 @@ interface BasicWidgetProps extends React.HTMLAttributes { } const BasicWidget = ({ children, height, ...props }: BasicWidgetProps) => ( - + {children} - + ); const BasicWidgetHeader = ({ diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/FlipCardBody.tsx b/src/pages/Campaign/widgetCards/FlipCard/FlipCardBody.tsx similarity index 100% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/FlipCardBody.tsx rename to src/pages/Campaign/widgetCards/FlipCard/FlipCardBody.tsx diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/FlipCardHeader.tsx b/src/pages/Campaign/widgetCards/FlipCard/FlipCardHeader.tsx similarity index 96% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/FlipCardHeader.tsx rename to src/pages/Campaign/widgetCards/FlipCard/FlipCardHeader.tsx index ffadd555f..cd0fe5a14 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/FlipCardHeader.tsx +++ b/src/pages/Campaign/widgetCards/FlipCard/FlipCardHeader.tsx @@ -17,7 +17,7 @@ export const FlipButtonContainer = styled.div` export const FlipCardHeader = ({ children, hasBack }: FlipCardHeaderProps) => { const { visibleFace, setVisibleFace, width } = useFlipCardContext(); - const breakpointMd = parseInt(appTheme.breakpoints.md, 10); + const breakpointMd = parseInt(appTheme.breakpoints.lg, 10); return ( { const { width } = useWindowSize(); - const breakpointMd = parseInt(appTheme.breakpoints.md, 10); + const breakpointMd = parseInt(appTheme.breakpoints.lg, 10); - const isDesktop = isMinMedia(appTheme.breakpoints.sm); + const isDesktop = isMinMedia(appTheme.breakpoints.lg); const [visibleFace, setVisibleFace] = useState( isDesktop ? 'front' : 'back' ); diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/index.tsx b/src/pages/Campaign/widgetCards/FlipCard/index.tsx similarity index 86% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/index.tsx rename to src/pages/Campaign/widgetCards/FlipCard/index.tsx index 443781a2f..6bb7fde6f 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/index.tsx +++ b/src/pages/Campaign/widgetCards/FlipCard/index.tsx @@ -1,13 +1,14 @@ import styled from 'styled-components'; -import { StyledSpecialCard } from '../common/StyledSpecialCard'; +import { WidgetSpecialCard } from '../common/StyledSpecialCard'; import { WidgetCardFooter } from '../common/WidgetCardFooter'; import { FlipCardBody } from './FlipCardBody'; import { FlipCardHeader } from './FlipCardHeader'; import { FlipCardContextProvider } from './context/FlipCardContext'; -const FlipCardContainer = styled(StyledSpecialCard)<{ height?: string }>` +const FlipCardContainer = styled(WidgetSpecialCard)<{ height?: string }>` height: ${({ height }) => height || 'auto'}; `; + interface FlipCardProps extends React.HTMLAttributes { children?: React.ReactNode; height?: string; diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/types.ts b/src/pages/Campaign/widgetCards/FlipCard/types.ts similarity index 100% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/FlipCard/types.ts rename to src/pages/Campaign/widgetCards/FlipCard/types.ts diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/CapitalizeFirstLetter.tsx b/src/pages/Campaign/widgetCards/common/CapitalizeFirstLetter.tsx similarity index 100% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/CapitalizeFirstLetter.tsx rename to src/pages/Campaign/widgetCards/common/CapitalizeFirstLetter.tsx diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/StyledSpecialCard.tsx b/src/pages/Campaign/widgetCards/common/StyledSpecialCard.tsx similarity index 80% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/StyledSpecialCard.tsx rename to src/pages/Campaign/widgetCards/common/StyledSpecialCard.tsx index be8a2b015..38a209428 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/StyledSpecialCard.tsx +++ b/src/pages/Campaign/widgetCards/common/StyledSpecialCard.tsx @@ -1,7 +1,7 @@ import { SpecialCard } from '@appquality/unguess-design-system'; import styled from 'styled-components'; -export const StyledSpecialCard = styled(SpecialCard)` +export const WidgetSpecialCard = styled(SpecialCard)` border-radius: ${({ theme }) => theme.borderRadii.xl}; cursor: auto; &:hover { diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/WidgetCardFooter.tsx b/src/pages/Campaign/widgetCards/common/WidgetCardFooter.tsx similarity index 100% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/WidgetCardFooter.tsx rename to src/pages/Campaign/widgetCards/common/WidgetCardFooter.tsx diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/WidgetCardHeader.tsx b/src/pages/Campaign/widgetCards/common/WidgetCardHeader.tsx similarity index 83% rename from src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/WidgetCardHeader.tsx rename to src/pages/Campaign/widgetCards/common/WidgetCardHeader.tsx index f11919c0a..7918e69de 100644 --- a/src/pages/Campaign/useWidgets/Functional/widgets/widgetCards/common/WidgetCardHeader.tsx +++ b/src/pages/Campaign/widgetCards/common/WidgetCardHeader.tsx @@ -1,5 +1,6 @@ import { MD, SpecialCard } from '@appquality/unguess-design-system'; import { Divider } from 'src/common/components/divider'; +import { appTheme } from 'src/app/theme'; import { CapitalizeFirstLetter } from './CapitalizeFirstLetter'; export const WidgetCardHeader = ({ @@ -12,7 +13,7 @@ export const WidgetCardHeader = ({ <> {title && ( - + {title} )} diff --git a/yarn.lock b/yarn.lock index 5bc99f6bd..1a059a292 100644 --- a/yarn.lock +++ b/yarn.lock @@ -48,16 +48,16 @@ call-me-maybe "^1.0.1" "@appquality/stream-player@^1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@appquality/stream-player/-/stream-player-1.0.3.tgz#cd8f1599c37de1edb2162cbce332e356d020b5f8" - integrity sha512-kZBmDxb3BokBRKU9k3d9Z04rOCGq0UzK2u/iKilcQxp5wsHyPwweXki+6DaqMcZJMjLxKBfsq3QUCxpOMtZXmw== + version "1.0.4" + resolved "https://registry.yarnpkg.com/@appquality/stream-player/-/stream-player-1.0.4.tgz#d1a87be1e04f25b39a539b9eff2e8aa0b38627df" + integrity sha512-RMhzbf9uDLCWIHwVQf5LSOYbenrM/RNQkCSjtayrRBj4pcVs42gvnIa0TgPflZDEFL/jxTHthu1eL0U2NhKxWg== dependencies: hls.js "^1.4.8" -"@appquality/unguess-design-system@3.1.46": - version "3.1.46" - resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-3.1.46.tgz#fe590cd6f38f18ca77387b090d6508ba74a94e02" - integrity sha512-CKer2BHhTUneKPAuxc+DRYfuquH2Ml0uovKhF1kmHHxp5B60mGyJHiqr1voydgAEeqLQzrwUbi4Iq6Q6MQ5U6w== +"@appquality/unguess-design-system@3.1.47": + version "3.1.47" + resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-3.1.47.tgz#a1cc8f5722b342dc9fef19546544b0988045cbb9" + integrity sha512-Q9EfQ49+E2Czy+Sc6muaDvOqwqDaqfnts+EzSv1FmIhqjKUINF5FacIu/xnsx6Ac5hzLIbp9MqDWolpRfwQUaA== dependencies: "@appquality/stream-player" "^1.0.3" "@nivo/bar" "^0.80.0" @@ -2471,9 +2471,9 @@ integrity sha512-cfS5sW0gu7qf4ihwnLtW/QMTBrBEXaT0sJl3RwkhjIBg/65ywJKE5Nz9ewnQHmDeT18hvMJJ1VIb4j4ze9jj9A== "@tiptap/extension-link@^2.0.4": - version "2.1.3" - resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.1.3.tgz#408842a961a186485b4119d6eaa6e2ff7c7df31b" - integrity sha512-iyCMCKwnQZZTt5LCXSca62ea2uNxWH2/869xkrk92OTl+ybmC/FVzIxKwbn6S8KcXKLG/lXY95P0JUfnkv8HIw== + version "2.1.7" + resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.1.7.tgz#2705c212d105ccf411d505e334ece4a723971ee4" + integrity sha512-NDfoMCkThng1B530pMg5y69+eWoghZXK2uCntrJH7Rs8jNeGMyt9wGIOd7N8ZYz0oJ2ZYKzZjS0RANdBDS17DA== dependencies: linkifyjs "^4.1.0" @@ -7997,9 +7997,9 @@ hex-color-regex@^1.1.0: integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== hls.js@^1.4.8: - version "1.4.10" - resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.4.10.tgz#3feac40f21a558453b243b5b926b7317e70624e1" - integrity sha512-wAVSj4Fm2MqOHy5+BlYnlKxXvJlv5IuZHjlzHu18QmjRzSDFQiUDWdHs5+NsFMQrgKEBwuWDcyvaMC9dUzJ5Uw== + version "1.4.11" + resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.4.11.tgz#6ca2d7ab56f2725f27bb5f2e3c7982c6ec287118" + integrity sha512-rhPSUMACcIBbcUnwWnIcRgGXqJJt0xBRxvhzl99XpGHtnnLKjbczmmBmUuQueAQcbL3SdN7D5peAObR18VrhvQ== hmac-drbg@^1.0.1: version "1.0.1"