Merge pull request #694 from AppQuality/insights-empty-state

🌍 feat(translation.json): add translations for empty insights section…

Author: marcbon

src/locales/en/translation.json

@@ -284,6 +284,9 @@
   "__CAMPAIGN_PAGE_INSIGHTS_SECTION_COMMENT_CARD_PLACEHOLDER": "This is a space to take notes. Choose “Edit” and start writing.",
   "__CAMPAIGN_PAGE_INSIGHTS_SECTION_COMMENT_CARD_PLACEHOLDER_EMPTY_TEXTAREA": "Click on edit button to edit",
   "__CAMPAIGN_PAGE_INSIGHTS_SECTION_COMMENT_CARD_TITLE": "Notes",
+  "__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_BUTTON": "Try a different search",
+  "__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_DESCRIPTION": "Try expanding your research by selecting fewer filters.",
+  "__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_TITLE": "There are no findings matching these filters.",
   "__CAMPAIGN_PAGE_INSIGHTS_SECTION_SUBTITLE": "The major results and findings on user experience",
   "__CAMPAIGN_PAGE_INSIGHTS_SECTION_TITLE": "Key points",
   "__CAMPAIGN_PAGE_INSIGHTS_SHOW_LESS_LABEL": "Show less",

src/locales/it/translation.json

@@ -303,6 +303,9 @@
   "__CAMPAIGN_PAGE_INSIGHTS_SECTION_COMMENT_CARD_PLACEHOLDER": "Questo è uno spazio per prendere appunti. Vai su “Modifica” per cominciare a scrivere",
   "__CAMPAIGN_PAGE_INSIGHTS_SECTION_COMMENT_CARD_PLACEHOLDER_EMPTY_TEXTAREA": "Inizia a scrivere...",
   "__CAMPAIGN_PAGE_INSIGHTS_SECTION_COMMENT_CARD_TITLE": "Note",
+  "__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_BUTTON": "Fai un’altra ricerca",
+  "__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_DESCRIPTION": "Prova ad ampliare la ricerca e a selezionare meno filtri.",
+  "__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_TITLE": "Non ci sono scoperte con questi filtri.",
   "__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",

src/pages/Campaign/useWidgets/Experience/widgets/Insights/Empty.tsx

@@ -0,0 +1,42 @@
+import { Button, LG, MD } from '@appquality/unguess-design-system';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import { appTheme } from 'src/app/theme';
+import { ReactComponent as EmptyImg } from './assets/no-findings.svg';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin: ${({ theme }) => `${theme.space.xxl} 0`};
+`;
+
+export const Empty = ({ onClick }: { onClick: () => void }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Container>
+      <EmptyImg />
+      <LG
+        style={{
+          color: appTheme.palette.blue[600],
+          marginTop: appTheme.space.md,
+        }}
+      >
+        {t('__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_TITLE')}
+      </LG>
+      <MD
+        style={{
+          color: appTheme.palette.grey[500],
+          margin: `${appTheme.space.md} auto`,
+        }}
+      >
+        {t('__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_DESCRIPTION')}
+      </MD>
+      <Button isAccent isPrimary size="medium" onClick={onClick}>
+        {t('__CAMPAIGN_PAGE_INSIGHTS_SECTION_EMPTY_BUTTON')}
+      </Button>
+    </Container>
+  );
+};