Merge pull request #328 from AppQuality/develop

Release 20251006

Author: d-beezee

package.json

@@ -3,10 +3,11 @@
   "version": "0.2.1",
   "private": true,
   "dependencies": {
-    "@appquality/appquality-design-system": "2.0.1",
+    "@appquality/appquality-design-system": "2.0.9",
     "@appquality/craft-blocks": "^0.1.27",
     "@appquality/languages": "^1.4.5",
     "@datadog/browser-logs": "^3.4.1",
+    "@mui/material": "^7.3.2",
     "@reduxjs/toolkit": "^1.8.2",
     "@sentry/react": "^7.83.0",
     "date-fns": "^2.30.0",
@@ -30,6 +31,7 @@
     "redux-saga": "^1.1.3",
     "redux-thunk": "^2.3.0",
     "styled-components": "^6",
+    "tippy.js": "^6.3.7",
     "universal-cookie": "^4.0.4",
     "uuid": "^8.3.2",
     "web-vitals": "^1.0.1",

public/index.html

@@ -72,6 +72,13 @@
       href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400&family=IBM+Plex+Serif:ital,wght@0,500;0,700;1,500;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      id="material-icons-css"
+      href="//fonts.googleapis.com/icon?family=Material+Icons&amp;ver=20250519"
+      type="text/css"
+      media="all"
+    />
     <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll%2CIntersectionObserver%2CArray.prototype.map%2CArray.prototype.reduce"></script>
     <script
       type="text/javascript"

src/Page.tsx

@@ -1,5 +1,5 @@
 import { datadogLogs } from "@datadog/browser-logs";
-import { Location, createBrowserHistory } from "history";
+import { createBrowserHistory, Location } from "history";
 import queryString from "query-string";
 import { useEffect } from "react";
 import { Redirect, Route, Router, Switch, useLocation } from "react-router-dom";
@@ -24,6 +24,8 @@ import {
   Wallet,
 } from "./pages";
 import BugForm from "./pages/BugForm";
+import Manual from "./pages/Manual";
+import Preview from "./pages/Preview";
 import SignupSuccess from "./pages/SignupSuccess";
 import ThankYouPage from "./pages/ThankYou";
 import VdpPage from "./pages/VDP";
@@ -192,6 +194,14 @@ function Page() {
               path={`${base}/campaign/:id/preview-selection-form`}
               component={PreviewSelectionForm}
             />
+            <SentryRoute
+              path={`${base}/campaigns/:id/preview`}
+              component={Preview}
+            />
+            <SentryRoute
+              path={`${base}/campaigns/:id/manual`}
+              component={Manual}
+            />
             <SentryRoute
               path={["/goodbye", "/it/goodbye", "/es/goodbye", "/fr/goodbye"]}
               exact

src/locales/en/translation.json

@@ -104,7 +104,6 @@ export const StyledFileCard = styled.div`
           }
         }
         .file-card-right {
-          width: 15%;
           svg {
             width: 18px;
             height: 18px;

src/locales/es/translation.json

@@ -0,0 +1,40 @@
+import { Button, Text, Title } from "@appquality/appquality-design-system";
+import { useTranslation } from "react-i18next";
+import WPAPI from "src/utils/wpapi";
+import { styled } from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+  padding: 2rem;
+`;
+
+const AcceptContract = ({ id }: { id: string }) => {
+  const { t } = useTranslation();
+  return (
+    <Wrapper>
+      <Title size="xl">{t("__MANUAL_ACCEPT_CONTRACT_TITLE")}</Title>
+      <Title>{t("__MANUAL_ACCEPT_CONTRACT_SUBTITLE")}</Title>
+      <Button
+        flat
+        kind="secondary"
+        onClick={async () => {
+          await WPAPI.startCampaign(id);
+          window.location.reload();
+        }}
+      >
+        Clicca per iniziare
+      </Button>
+      <Text>
+        Cliccando su questo pulsante accetti il contratto ed i nostri attuali
+        Termini & Condizioni
+      </Text>
+    </Wrapper>
+  );
+};
+
+export default AcceptContract;

src/locales/fr/translation.json

@@ -0,0 +1,154 @@
+import { Card, Text } from "@appquality/appquality-design-system";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { useLocalizeRoute } from "src/hooks/useLocalizedRoute";
+import {
+  useGetUsersMeBugsQuery,
+  useGetUsersMeCampaignsByCampaignIdQuery,
+} from "src/services/tryberApi";
+import { styled, useTheme } from "styled-components";
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+
+  .bug_container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .type {
+      font-size: 0.75rem;
+    }
+  }
+`;
+
+const useFilteredBugsUrl = () => {
+  const baseUrl = useLocalizeRoute("my-bugs");
+
+  return (campaignId: string, status: string) => {
+    const url = new URL(baseUrl, window.location.origin);
+    url.searchParams.set("cp", campaignId);
+    url.searchParams.set("status", status);
+    return url.pathname + url.search;
+  };
+};
+
+const LinkToBugList = ({
+  count,
+  campaignId,
+  statusId,
+  children,
+}: {
+  count: number;
+  campaignId: string;
+  statusId: string;
+  children: React.ReactNode;
+}) => {
+  const getBugUrl = useFilteredBugsUrl();
+
+  if (count === 0) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Link
+      style={{ textDecoration: "none" }}
+      to={getBugUrl(campaignId, statusId)}
+    >
+      {children}
+    </Link>
+  );
+};
+
+const useGetBugsCountByStatus = ({ id }: { id: string }) => {
+  const { data: bugs } = useGetUsersMeBugsQuery(
+    { filterBy: { campaign: id } },
+    { skip: !id }
+  );
+
+  if (!bugs) {
+    return {
+      approved: 0,
+      refused: 0,
+      needReview: 0,
+      pending: 0,
+    };
+  }
+
+  return {
+    approved: bugs.results.filter((bug) => bug.status?.id === 2).length,
+    refused: bugs.results.filter((bug) => bug.status?.id === 1).length,
+    needReview: bugs.results.filter((bug) => bug.status?.id === 4).length,
+    pending: bugs.results.filter((bug) => bug.status?.id === 3).length,
+  };
+};
+
+const BugCard = ({ id }: { id: string }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { data: campaign } = useGetUsersMeCampaignsByCampaignIdQuery({
+    campaignId: id,
+  });
+  const { approved, refused, needReview, pending } = useGetBugsCountByStatus({
+    id,
+  });
+
+  if (!campaign || !campaign.hasBugForm) {
+    return null;
+  }
+
+  return (
+    <Card
+      title={t("__MANUAL_BUG_CARD_TITLE", "Bugs found")}
+      className="aq-mb-4"
+    >
+      <Wrapper>
+        <LinkToBugList campaignId={id} statusId="2" count={approved}>
+          <Text
+            style={{ color: theme.palette.success }}
+            className="bug_container"
+          >
+            <b>{approved}</b>
+            <span className="type">
+              {t("__MANUAL_BUG_CARD_APPROVED", "APPROVED")}
+            </span>
+          </Text>
+        </LinkToBugList>
+        <LinkToBugList campaignId={id} statusId="1" count={refused}>
+          <Text
+            style={{ color: theme.palette.danger }}
+            className="bug_container"
+          >
+            <b>{refused}</b>
+            <span className="type">
+              {t("__MANUAL_BUG_CARD_REFUSED", "REFUSED")}
+            </span>
+          </Text>
+        </LinkToBugList>
+        <LinkToBugList campaignId={id} statusId="4" count={needReview}>
+          <Text
+            className="bug_container"
+            style={{ color: theme.palette.warning }}
+          >
+            <b>{needReview}</b>
+            <span className="type">
+              {t("__MANUAL_BUG_CARD_NEED_REVIEW", "NEED REVIEW")}
+            </span>
+          </Text>
+        </LinkToBugList>
+        <LinkToBugList campaignId={id} statusId="3" count={pending}>
+          <Text className="bug_container" style={{ color: theme.palette.info }}>
+            <b>{pending}</b>
+            <span className="type">
+              {t("__MANUAL_BUG_CARD_PENDING", "PENDING")}
+            </span>
+          </Text>
+        </LinkToBugList>
+      </Wrapper>
+    </Card>
+  );
+};
+
+export { BugCard };