feat: Implement UseCases component and integrate task management in M…

src/locales/en/translation.json

@@ -331,6 +331,7 @@
   "Male": "Male",
   "Manufacturer": "Manufacturer",
   "Manufacturer: <bold>{{manufacturer}}</bold>": "Manufacturer: <bold>{{manufacturer}}</bold>",
+  "Mark as completed": "",
   "Media field must have at least {{num}} items": {
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES": "You must upload at least {{num}} media for this campaign",
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES_plural": "You must upload at least {{num}} media for this campaign"
@@ -500,6 +501,7 @@
   "Tablet": "",
   "Take me to the dashboard": "Let the adventure begin",
   "Take part in the Basic Course and earn 200 experience points, they will be essential to increase the chances to be selected for the campaigns. You'll become an AppQuality world expert and you will receive the Linkedin Certification to show that you are a qualified member of the Community.": "Everything starts from here: only after completing the Basic TRYBER Course you will be eligible for the campaigns. And that is not all, you'll earn 200 experience points, get an overview of the world of TRYBER, be part of qualified members and receive a certification that you can share on LinkedIn. ",
+  "Task completed": "",
   "Tax identification number": {
     "Tax ID": "Tax ID Number"
   },

src/locales/es/translation.json

@@ -331,6 +331,7 @@
   "Male": "Masculino",
   "Manufacturer": "Productor",
   "Manufacturer: <bold>{{manufacturer}}</bold>": "Productor: <bold>{{manufacturer}}</bold>",
+  "Mark as completed": "",
   "Media field must have at least {{num}} items": {
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES": "Debes subir al menos {{num}} archivo para esta campaña",
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES_plural": "Debes subir al menos {{num}} archivos para esta campaña"
@@ -500,6 +501,7 @@
   "Tablet": "Tablet",
   "Take me to the dashboard": "Que empiece la aventura",
   "Take part in the Basic Course and earn 200 experience points, they will be essential to increase the chances to be selected for the campaigns. You'll become an AppQuality world expert and you will receive the Linkedin Certification to show that you are a qualified member of the Community.": "Todo comienza aquí: solo cuando hayas completado el Curso Básico TRYBER te invitaremos a partecipar en las campañas. Además, ganarás 200 puntos de experiencia, conocerás el mundo de TRYBER, te convertirás en un miembro cualificado y recibirás una certificación que podrás compartir en LinkedIn.",
+  "Task completed": "",
   "Tax identification number": {
     "Tax ID": "Número de identificación fiscal"
   },

src/locales/fr/translation.json

@@ -331,6 +331,7 @@
   "Male": "Homme",
   "Manufacturer": "Fabricant",
   "Manufacturer: <bold>{{manufacturer}}</bold>": "Fabricant : <bold>{{manufacturer}}</bold>",
+  "Mark as completed": "",
   "Media field must have at least {{num}} items": {
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES": "Vous devez télécharger au moins {{num}} médias pour cette campagne",
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES_plural": "Vous devez télécharger au moins {{num}} médias pour cette campagne"
@@ -500,6 +501,7 @@
   "Tablet": "Tablette",
   "Take me to the dashboard": "Que l'aventure commence",
   "Take part in the Basic Course and earn 200 experience points, they will be essential to increase the chances to be selected for the campaigns. You'll become an AppQuality world expert and you will receive the Linkedin Certification to show that you are a qualified member of the Community.": "Tout commence ici : ce n'est qu'après avoir complété le cours de base TRYBER que vous serez éligible pour les campagnes. Et ce n'est pas tout, vous gagnerez 200 points d'expérience, obtiendrez une vue d'ensemble du monde de TRYBER, ferez partie des membres qualifiés et recevrez une certification que vous pourrez partager sur LinkedIn.",
+  "Task completed": "",
   "Tax identification number": {
     "Tax ID": "Numéro d'identification fiscale"
   },

src/locales/it/translation.json

@@ -331,6 +331,7 @@
   "Male": "Uomo",
   "Manufacturer": "Produttore",
   "Manufacturer: <bold>{{manufacturer}}</bold>": "Produttore: <bold>{{manufacturer}}</bold>",
+  "Mark as completed": "",
   "Media field must have at least {{num}} items": {
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES": "Per questa campagna è necessario caricare almeno {{num}} file",
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES_plural": "Per questa campagna è necessario caricare almeno {{num}} file"
@@ -500,6 +501,7 @@
   "Tablet": "Tablet",
   "Take me to the dashboard": "Comincia l'avventura",
   "Take part in the Basic Course and earn 200 experience points, they will be essential to increase the chances to be selected for the campaigns. You'll become an AppQuality world expert and you will receive the Linkedin Certification to show that you are a qualified member of the Community.": "Tutto parte da qui: solo quando avrai completato il Corso Base TRYBER ti inviteremo a partecipare alle campagne. In più guadagnerai 200 punti esperienza, avrai una panoramica del mondo di TRYBER, farai parte dei membri qualificati e riceverai una certificazione che potrai condividere su LinkedIn.",
+  "Task completed": "",
   "Tax identification number": {
     "Tax ID": "Codice Fiscale"
   },

src/pages/Manual/UseCases/index.tsx

@@ -0,0 +1,74 @@
+import {
+  Accordion,
+  Button,
+  Editor,
+} from "@appquality/appquality-design-system";
+import { useTranslation } from "react-i18next";
+import {
+  useGetUsersMeCampaignsByCampaignIdTasksQuery,
+  usePostUsersMeCampaignsByCampaignIdTasksAndTaskIdMutation,
+} from "src/services/tryberApi";
+import { styled } from "styled-components";
+
+const Todo = styled.span`
+  font-size: 0.6rem;
+  vertical-align: middle;
+  padding-right: 0.3rem;
+`;
+
+const UseCases = ({ id }: { id: string }) => {
+  const { t } = useTranslation();
+  const { data } = useGetUsersMeCampaignsByCampaignIdTasksQuery(
+    { campaignId: id },
+    { skip: !id }
+  );
+
+  const [updateTask] =
+    usePostUsersMeCampaignsByCampaignIdTasksAndTaskIdMutation();
+
+  if (!data) {
+    return <div>Loading...</div>;
+  }
+  return (
+    <>
+      <div>
+        <Accordion initialActive={""}>
+          {data.map((task) => (
+            <Accordion.Item
+              key={task.id}
+              id={`task.${task.id}`}
+              title={
+                <span>
+                  {task.status === "pending" && <Todo>TODO</Todo>}
+                  {task.status === "completed" && <Todo>✓</Todo>}
+                  <>{task.name}</>
+                </span>
+              }
+            >
+              <div className="aq-mb-3">
+                <Editor editable={false}>{task.content}</Editor>
+              </div>
+              <Button
+                kind="success"
+                onClick={() =>
+                  updateTask({
+                    campaignId: id,
+                    taskId: task.id.toString(),
+                    body: { status: "completed" },
+                  })
+                }
+                disabled={task.status === "completed"}
+              >
+                {task.status === "completed"
+                  ? t("Task completed")
+                  : t("Mark as completed")}
+              </Button>
+            </Accordion.Item>
+          ))}
+        </Accordion>
+      </div>
+    </>
+  );
+};
+
+export { UseCases };

src/pages/Manual/index.tsx

@@ -11,11 +11,13 @@ import { PageTemplate } from "src/features/PageTemplate";
 import {
   useGetUsersMeCampaignsByCampaignIdPreviewQuery,
   useGetUsersMeCampaignsByCampaignIdQuery,
+  useGetUsersMeCampaignsByCampaignIdTasksQuery,
 } from "src/services/tryberApi";
 import { BugCard } from "./BugCard";
 import { CampaignCard } from "./CampaignCard";
 import { PayoutRecap } from "./PayoutRecap";
 import { SupportCard } from "./SupportCard";
+import { UseCases } from "./UseCases";
 
 const Manual = () => {
   const { t } = useTranslation();
@@ -28,6 +30,11 @@ const Manual = () => {
     { campaignId: id },
     { skip: !id }
   );
+
+  const { data: tasks } = useGetUsersMeCampaignsByCampaignIdTasksQuery(
+    { campaignId: id },
+    { skip: !id }
+  );
   if (!data || !campaign) {
     return <div>Loading...</div>;
   }
@@ -40,7 +47,7 @@ const Manual = () => {
     >
       <BSGrid>
         <BSCol size="col-lg-9 aq-order-1 aq-order-0-lg ">
-          <Tabs active="manual-testing-instructions">
+          <Tabs active="usecase">
             <Tab
               id="manual-testing-instructions"
               title={t("__MANUAL_TAB_TITLE_INFO", "Info")}
@@ -50,9 +57,16 @@ const Manual = () => {
                 <PayoutRecap id={id} />
               </div>
             </Tab>
-            <Tab id="usecase" title={t("__MANUAL_TAB_TITLE_USECASE", "Manual")}>
-              <div className="aq-py-4">use case content</div>
-            </Tab>
+            {tasks && tasks.length > 0 && (
+              <Tab
+                id="usecase"
+                title={t("__MANUAL_TAB_TITLE_USECASE", "Manual")}
+              >
+                <div className="aq-py-4">
+                  <UseCases id={id!} />
+                </div>
+              </Tab>
+            )}
           </Tabs>
         </BSCol>
         <BSCol size="col-lg-3 aq-order-0 aq-order-1-lg ">

src/services/tryberApi/api.ts

@@ -49,6 +49,7 @@ export const api = createApi({
     "UserPendingBooty",
     "UserBootyThreshold",
     "UserCertifications",
+    "UserTasks",
     "User",
   ],
   endpoints: () => ({}), // auto generated npm run generate-api

src/services/tryberApi/apiWithTags.ts

@@ -43,6 +43,12 @@ tryberApi.enhanceEndpoints({
     postUsersMeCertifications: {
       invalidatesTags: ["UserCertifications"],
     },
+    postUsersMeCampaignsByCampaignIdTasksAndTaskId: {
+      invalidatesTags: ["UserTasks"],
+    },
+    getUsersMeCampaignsByCampaignIdTasks: {
+      providesTags: ["UserTasks"],
+    },
   },
 });
 

src/services/tryberApi/index.ts

@@ -835,6 +835,16 @@ const injectedRtkApi = api.injectEndpoints({
         url: `/users/me/campaigns/${queryArg.campaignId}/tasks`,
       }),
     }),
+    postUsersMeCampaignsByCampaignIdTasksAndTaskId: build.mutation<
+      PostUsersMeCampaignsByCampaignIdTasksAndTaskIdApiResponse,
+      PostUsersMeCampaignsByCampaignIdTasksAndTaskIdApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/users/me/campaigns/${queryArg.campaignId}/tasks/${queryArg.taskId}`,
+        method: "POST",
+        body: queryArg.body,
+      }),
+    }),
     getUsersMeCampaignsByCampaignCompatibleDevices: build.query<
       GetUsersMeCampaignsByCampaignCompatibleDevicesApiResponse,
       GetUsersMeCampaignsByCampaignCompatibleDevicesApiArg
@@ -1949,9 +1959,9 @@ export type PostDossiersApiArg = {
       useCases?: number;
     };
   } & {
-    skipPagesAndTasks?: number;
     autoApply?: number;
     pageVersion?: "v1" | "v2";
+    skipPagesAndTasks?: number;
   };
 };
 export type GetDossiersByCampaignApiResponse = /** status 200 OK */ {
@@ -2720,6 +2730,16 @@ export type GetUsersMeCampaignsByCampaignIdTasksApiResponse =
 export type GetUsersMeCampaignsByCampaignIdTasksApiArg = {
   campaignId: string;
 };
+export type PostUsersMeCampaignsByCampaignIdTasksAndTaskIdApiResponse =
+  /** status 200 OK */ string;
+export type PostUsersMeCampaignsByCampaignIdTasksAndTaskIdApiArg = {
+  /** the campaign id */
+  campaignId: string;
+  taskId: string;
+  body: {
+    status: "completed";
+  };
+};
 export type GetUsersMeCampaignsByCampaignCompatibleDevicesApiResponse =
   /** status 200 OK */ UserDevice[];
 export type GetUsersMeCampaignsByCampaignCompatibleDevicesApiArg = {
@@ -3507,6 +3527,7 @@ export const {
   useGetUsersMeCampaignsByCampaignIdPayoutDataQuery,
   useGetUsersMeCampaignsByCampaignIdPreviewQuery,
   useGetUsersMeCampaignsByCampaignIdTasksQuery,
+  usePostUsersMeCampaignsByCampaignIdTasksAndTaskIdMutation,
   useGetUsersMeCampaignsByCampaignCompatibleDevicesQuery,
   usePostUsersMeCertificationsMutation,
   useDeleteUsersMeCertificationsByCertificationIdMutation,