Add TargetReachInfo component with visual feedback

src/pages/campaigns/components/campaignForm/Section.tsx

@@ -8,11 +8,13 @@ const Section = ({
   subtitle,
   id,
   children,
+  style,
 }: {
   title: string;
   subtitle: string;
   id: string;
   children: React.ReactNode;
+  style?: React.CSSProperties;
 }) => {
   const { setCurrentSection, pushSection } = useCampaignFormContext();
 
@@ -27,7 +29,7 @@ const Section = ({
     if (inView) setCurrentSection(id);
   }, [inView, id, setCurrentSection]);
   return (
-    <section ref={ref} id={id} className="aq-mb-4 aq-pt-4">
+    <section ref={ref} id={id} className="aq-mb-4 aq-pt-4" style={style}>
       <Title size="ms" className="aq-mb-2">
         {title}
       </Title>

src/pages/campaigns/components/campaignForm/index.tsx

@@ -47,6 +47,7 @@ import ImportPages from "./ImportPages";
 import { Section } from "./Section";
 import { Stepper } from "./Stepper";
 import { SurveyButton } from "./SurveyButton";
+import { TargetReachInfo } from "./targetReach";
 
 export interface FormProps {
   dossier?: GetDossiersByCampaignApiResponse;
@@ -268,7 +269,12 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
               title="Target Details"
               subtitle="Define the target details here."
               id="who"
+              style={{ position: "relative" }}
             >
+              <TargetReachInfo
+                campaignId={dossier?.id}
+                cap={dossier?.target?.cap}
+              />
               <Card className="aq-mb-4" title="Who are we testing with?">
                 <div className="aq-mb-3">
                   <TextareaField

src/pages/campaigns/components/campaignForm/targetReach/Stoplight.tsx

@@ -0,0 +1,27 @@
+import { styled } from "styled-components";
+
+const Light = styled.div`
+  width: 2em;
+  height: 2em;
+  border-radius: 50%;
+  background-color: #999;
+  transition: background-color 0.6s ease, box-shadow 0.6s ease;
+
+  &.red {
+    background-color: #e53935;
+  }
+  &.yellow {
+    background-color: #fdd835;
+  }
+  &.green {
+    background-color: #43a047;
+  }
+`;
+
+export const Stoplight = ({
+  activeColor,
+}: {
+  activeColor: "green" | "yellow" | "red" | "grey";
+}) => {
+  return <Light className={`${activeColor}`} />;
+};

src/pages/campaigns/components/campaignForm/targetReach/index.tsx

@@ -0,0 +1,95 @@
+import { Button, Text, Title } from "@appquality/appquality-design-system";
+import { useMemo, useState } from "react";
+import { ArrowClockwise } from "react-bootstrap-icons";
+import { useGetDossiersByCampaignAvailableTestersQuery } from "src/services/tryberApi";
+import { styled } from "styled-components";
+import { formatDate, formatTime } from "../formatDate";
+import { Stoplight } from "./Stoplight";
+
+const StyledContainer = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  align-items: center;
+  align-content: center;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+function prettyPrintNumber(num: number): string {
+  if (num >= 1_000_000_000)
+    return (num / 1_000_000_000).toFixed(1).replace(/\.0$/, "") + "B";
+  if (num >= 1_000_000)
+    return (num / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
+  if (num >= 1_000) return (num / 1_000).toFixed(1).replace(/\.0$/, "") + "k";
+  return num.toString();
+}
+
+export const TargetReachInfo = ({
+  campaignId,
+  cap,
+}: {
+  campaignId?: number;
+  cap?: number;
+}) => {
+  const [disableCache, setDisableCache] = useState<"0" | "1" | undefined>();
+  const { data, isLoading, isFetching, isError, refetch } =
+    useGetDossiersByCampaignAvailableTestersQuery({
+      campaign: campaignId?.toString() || "",
+      refresh: disableCache,
+    });
+
+  const stoplightColor = useMemo(() => {
+    if (!cap || !data?.count) return "grey";
+
+    if (data.count > cap * 8) return "green";
+    if (data.count > cap * 4) return "yellow";
+    return "red";
+  }, [data?.count, cap]);
+
+  const prettyCount = useMemo(() => {
+    if (!data?.count) return "0";
+    return prettyPrintNumber(data.count);
+  }, [data?.count]);
+
+  if (isLoading || isFetching)
+    return (
+      <StyledContainer className="aq-mb-4 aq-pt-4">Loading...</StyledContainer>
+    );
+
+  if (isError || !data) return null;
+
+  return (
+    <StyledContainer className="aq-mb-4 aq-pt-4">
+      <div>
+        <Stoplight activeColor={stoplightColor} />
+      </div>
+      <div>
+        <TitleContainer>
+          <Title size="s">Potential reach: {prettyCount} testers</Title>
+        </TitleContainer>
+
+        <Text small>
+          Updated on: {formatDate(data.lastUpdate)} at{" "}
+          {formatTime(data.lastUpdate)}.{" "}
+        </Text>
+        <Button
+          kind="link"
+          size="sm"
+          onClick={() => {
+            setDisableCache("1");
+            refetch();
+          }}
+        >
+          <ArrowClockwise style={{ marginTop: "auto" }} />
+          Refresh
+        </Button>
+      </div>
+    </StyledContainer>
+  );
+};

src/services/tryberApi/index.ts

@@ -462,6 +462,15 @@ const injectedRtkApi = api.injectEndpoints({
         body: queryArg.dossierCreationData,
       }),
     }),
+    getDossiersByCampaignAvailableTesters: build.query<
+      GetDossiersByCampaignAvailableTestersApiResponse,
+      GetDossiersByCampaignAvailableTestersApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/dossiers/${queryArg.campaign}/availableTesters`,
+        params: { refresh: queryArg.refresh },
+      }),
+    }),
     postDossiersByCampaignManual: build.mutation<
       PostDossiersByCampaignManualApiResponse,
       PostDossiersByCampaignManualApiArg
@@ -1390,10 +1399,10 @@ export type GetCampaignsByCampaignBugsAndBugIdApiArg = {
 };
 export type GetCampaignsByCampaignBugsAndBugIdAiReviewApiResponse =
   /** status 200 OK */ {
-    ai_status: string;
+    ai_notes?: string;
     ai_reason: string;
+    ai_status: string;
     score_percentage: number;
-    ai_notes?: string;
   };
 export type GetCampaignsByCampaignBugsAndBugIdAiReviewApiArg = {
   /** A campaign id */
@@ -1958,6 +1967,15 @@ export type PutDossiersByCampaignApiArg = {
   campaign: string;
   dossierCreationData: DossierCreationData;
 };
+export type GetDossiersByCampaignAvailableTestersApiResponse =
+  /** status 200 OK */ {
+    count: number;
+    lastUpdate: string;
+  };
+export type GetDossiersByCampaignAvailableTestersApiArg = {
+  campaign: string;
+  refresh?: "1" | "0";
+};
 export type PostDossiersByCampaignManualApiResponse = /** status 200 OK */ {};
 export type PostDossiersByCampaignManualApiArg = {
   /** A campaign id */
@@ -3293,6 +3311,7 @@ export const {
   usePostDossiersMutation,
   useGetDossiersByCampaignQuery,
   usePutDossiersByCampaignMutation,
+  useGetDossiersByCampaignAvailableTestersQuery,
   usePostDossiersByCampaignManualMutation,
   usePutDossiersByCampaignPhasesMutation,
   usePostDossiersByCampaignPreviewMutation,