Merge pull request #644 from AppQuality/develop

Sentiments and fixes
AppQuality · Sep 5, 2023 · 0686e27 · 0686e27
2 parents c82febf + 823e77a
commit 0686e27
Show file tree

Hide file tree

Showing 52 changed files with 859 additions and 187 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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}})</2>",
-  "__CAMPAIGN_PAGE_INSIGHTS_SHOW_MORE_LABEL_many": "Show more highlights <2>({{video_count}})</2>",
-  "__CAMPAIGN_PAGE_INSIGHTS_SHOW_MORE_LABEL_other": "Mostra altri highlight <2>({{video_count}})</2>",
-  "__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}})</2>",
+  "__CAMPAIGN_PAGE_INSIGHTS_SHOW_MORE_LABEL_other": "Vedi altre evidenze <2>({{video_count}})</2>",
+  "__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/...dgets/Functional/widgets/List/Columns.tsx → src/pages/Campaign/List/Columns.tsx b/...dgets/Functional/widgets/List/Columns.tsx → src/pages/Campaign/List/Columns.tsx
diff --git a/...gets/Functional/widgets/List/ListItem.tsx → src/pages/Campaign/List/ListItem.tsx b/...gets/Functional/widgets/List/ListItem.tsx → src/pages/Campaign/List/ListItem.tsx
diff --git a/...ts/Functional/widgets/List/Pagination.tsx → src/pages/Campaign/List/Pagination.tsx b/...ts/Functional/widgets/List/Pagination.tsx → src/pages/Campaign/List/Pagination.tsx
diff --git a/...Widgets/Functional/widgets/List/index.tsx → src/pages/Campaign/List/index.tsx b/...Widgets/Functional/widgets/List/index.tsx → src/pages/Campaign/List/index.tsx
@@ -77,10 +77,12 @@ const ExampleList = () => {
  */
 export const List = ({ header, title, children }: ListProps) => (
   <ListWrapper>
-    <ListHeader>
-      {header ? <Columns.Label isBold>{header}</Columns.Label> : null}
-      <ListHeaderTitle isBold>{title}</ListHeaderTitle>
-    </ListHeader>
+    {(header || title) && (
+      <ListHeader>
+        {header ? <Columns.Label isBold>{header}</Columns.Label> : null}
+        {title ? <ListHeaderTitle isBold>{title}</ListHeaderTitle> : null}
+      </ListHeader>
+    )}
 
     {children}
   </ListWrapper>

diff --git a/...seWidgets/Functional/widgets/List/type.ts → src/pages/Campaign/List/type.ts b/...seWidgets/Functional/widgets/List/type.ts → 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
@@ -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: (
+        <CampaignInfo
+          id="campaign-methodology"
+          campaign={campaign}
+          isPreview={isPreview}
+        />
+      ),
+      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: (
-          <CampaignInfo
-            id="campaign-methodology"
-            campaign={campaign}
-            isPreview={isPreview}
-          />
-        ),
-        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: (
-          <Insights
-            id="campaign-insights"
-            campaign={campaign}
-            isPreview={isPreview}
-          />
-        ),
-        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: (
+        <Overview
+          id="campaign-overview"
+          campaign={campaign}
+          isPreview={isPreview}
+        />
+      ),
+      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: (
+        <Insights
+          id="campaign-insights"
+          campaign={campaign}
+          isPreview={isPreview}
+        />
+      ),
+      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
@@ -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 <div>loading...</div>;
 
   return (
-    <WidgetCard>
-      <WidgetCard.Meta justifyContent="space-between">
+    <WidgetSpecialCard style={{ height: 'auto' }}>
+      <WidgetSpecialCard.Meta justifyContent="space-between">
         <MD isBold style={{ color: getColor(appTheme.palette.grey, 800) }}>
           {t('__CAMPAIGN_PAGE_GOAL_CARD_TITLE')}
         </MD>
-      </WidgetCard.Meta>
+      </WidgetSpecialCard.Meta>
       <Divider />
       <CardContent>
         <Goal>
-          <Row alignItems="center">
-            <Col xs={12} sm="auto" alignSelf="start" style={{ margin: 0 }}>
-              <TargetIcon />
-            </Col>
-            <Col xs={12} sm={10} alignSelf="start" style={{ margin: 0 }}>
-              <WidgetCard.Header style={{ marginTop: appTheme.space.xxs }}>
-                <WidgetCard.Header.Label>
-                  {t('__CAMPAIGN_PAGE_GOAL_CARD_PRE_LABEL')}
-                </WidgetCard.Header.Label>
-                <WidgetCard.Header.Title>{data.goal}</WidgetCard.Header.Title>
-              </WidgetCard.Header>
-            </Col>
-          </Row>
+          <Grid>
+            <Row alignItems="center">
+              <Col xs={12} sm="auto" alignSelf="start" style={{ margin: 0 }}>
+                <TargetIcon />
+              </Col>
+              <Col xs={12} sm={9} alignSelf="start" style={{ margin: 0 }}>
+                <WidgetSpecialCard.Header
+                  style={{ marginTop: appTheme.space.xxs }}
+                >
+                  <WidgetSpecialCard.Header.Label>
+                    {t('__CAMPAIGN_PAGE_GOAL_CARD_PRE_LABEL')}
+                  </WidgetSpecialCard.Header.Label>
+                  <WidgetSpecialCard.Header.Title>
+                    {data.goal}
+                  </WidgetSpecialCard.Header.Title>
+                </WidgetSpecialCard.Header>
+              </Col>
+            </Row>
+          </Grid>
         </Goal>
       </CardContent>
 
@@ -95,6 +95,6 @@ export const GoalCard = ({
           </Accordion.Panel>
         </Accordion.Section>
       </Accordion>
-    </WidgetCard>
+    </WidgetSpecialCard>
   );
 };