release-20251211

package.json

@@ -5,7 +5,7 @@
   "homepage": "backoffice/",
   "dependencies": {
     "@analytics/google-tag-manager": "^0.5.3",
-    "@appquality/appquality-design-system": "2.0.5",
+    "@appquality/appquality-design-system": "2.0.10",
     "@appquality/craft-blocks": "^0.1.27",
     "@appquality/languages": "^1.4.5",
     "@appquality/stream-player": "^1.0.6",

src/pages/BugsList/index.tsx

@@ -20,10 +20,6 @@ const FluidContainer = styled.div`
   }
 `;
 
-const HeaderButton = (props: Parameters<typeof Button>[0]) => {
-  return <Button {...props} size="sm" kind="link-hover" />;
-};
-
 const BugsList = () => {
   const { id } = useParams<{ id: string }>();
   const [isStatsModalOpen, setIsStatsModalOpen] = useState(false);
@@ -37,20 +33,25 @@ const BugsList = () => {
           isOpen={isStatsModalOpen}
           setIsOpen={setIsStatsModalOpen}
         />
-        <HeaderButton
+        <Button
           as="a"
           href={`/wp-admin/admin.php?page=mvc_campaigns`}
-          kind="secondary"
           className="aq-mr-2"
+          size="sm"
+          kind="link-hover"
         >
           {"<"} To Campaign List
-        </HeaderButton>
-        <HeaderButton as="a" href={`/campaigns/${id}`} className="aq-mr-2">
+        </Button>
+        <Button
+          as="a"
+          href={`/campaigns/${id}`}
+          className="aq-mr-2"
+          size="sm"
+          kind="link-hover"
+        >
           {"<"} To Dashboard
-        </HeaderButton>
-        <HeaderButton onClick={() => setIsStatsModalOpen(true)}>
-          Stats
-        </HeaderButton>
+        </Button>
+        <Button onClick={() => setIsStatsModalOpen(true)}>Stats</Button>
         <FilterContext>
           <div className="aq-my-3">
             <Filters id={id} />

src/pages/Prospect/index.tsx

@@ -1,21 +1,17 @@
 import { Button, Title } from "@appquality/appquality-design-system";
 import { useRef } from "react";
 import { useParams } from "react-router-dom";
+import { PageTemplate } from "src/features/PageTemplate";
 import { useContainerDimensions } from "src/hooks/useContainerDimensions";
 import { useGetCampaignsByCampaignQuery } from "src/services/tryberApi";
 import styled from "styled-components";
 import Table from "./Table";
-import { PageTemplate } from "src/features/PageTemplate";
 
 const FluidContainer = styled.div`
   max-width: 90%;
   margin: 0 auto;
 `;
 
-const HeaderButton = (props: Parameters<typeof Button>[0]) => {
-  return <Button {...props} size="sm" type="link-hover" />;
-};
-
 const Prospect = () => {
   const { id } = useParams<{ id: string }>();
   const tablewrapper = useRef<HTMLDivElement>(null);
@@ -27,28 +23,33 @@ const Prospect = () => {
     <PageTemplate>
       <FluidContainer ref={tablewrapper}>
         <Title size="xl">Prospect</Title>
-        <HeaderButton
+        <Button
           as="a"
           href={`/wp-admin/admin.php?page=cp-prospect&id=${id}`}
-          kind="secondary"
           className="aq-mr-2"
+          size="sm"
+          type="link-hover"
         >
           {"<"} Go to old Prospect
-        </HeaderButton>
-        <HeaderButton
+        </Button>
+        <Button
           as="a"
           href={`/wp-admin/admin.php?page=cp-prospect-crowd&id=${id}`}
           className="aq-mr-2"
+          size="sm"
+          type="link-hover"
         >
           Pay Assistants
-        </HeaderButton>
-        <HeaderButton
+        </Button>
+        <Button
           as="a"
           href={`/wp-admin/admin.php?page=add-booty&cid=${id}`}
           className="aq-mr-2"
+          size="sm"
+          type="link-hover"
         >
           Go to Add Booty
-        </HeaderButton>
+        </Button>
         <Title size="mt" className="aq-mb-3" style={{ display: "flex" }}>
           CP{id} {data?.title ? `- ${data.title}` : ""}
         </Title>

src/pages/agreements/components/AgreementForm.tsx

@@ -94,7 +94,7 @@ const AgreementForm = ({ agreement, onSubmit }: AgreementFormProps) => {
                       id={field.name}
                       name={field.name}
                       defaultChecked={field.value}
-                      onChange={(e) => {
+                      onChange={(e: any) => {
                         field.onChange(e);
                         // if agreement change to not token based, calculate number of tokens based on amount
                         if (e.target.checked === false) {

src/pages/agreements/list/index.tsx

@@ -3,17 +3,17 @@ import {
   BSGrid,
   Button,
   Card,
+  Container,
   Title,
 } from "@appquality/appquality-design-system";
-import FilterContext from "src/pages/agreements/list/FilterContext";
-import styled from "styled-components";
-import CustomersFilter from "src/pages/agreements/list/Filters/CustomersFilter";
-import { Container } from "@appquality/appquality-design-system";
-import { Agreements } from "./Agreements";
 import { ReactNode } from "react";
-import { useGetAgreementsQuery } from "src/services/tryberApi";
 import ErrorUnauthorized from "src/features/ErrorUnauthorized/ErrorUnauthorized";
 import { PageTemplate } from "src/features/PageTemplate";
+import FilterContext from "src/pages/agreements/list/FilterContext";
+import CustomersFilter from "src/pages/agreements/list/Filters/CustomersFilter";
+import { useGetAgreementsQuery } from "src/services/tryberApi";
+import styled from "styled-components";
+import { Agreements } from "./Agreements";
 
 const FluidContainer = styled.div`
     padding: 2rem;
@@ -26,10 +26,6 @@ const FlexContainer = styled.div`
   align-items: center;
 `;
 
-const HeaderButton = (props: Parameters<typeof Button>[0]) => {
-  return <Button {...props} size="md" kind="secondary" />;
-};
-
 const AgreementsListPageContent = ({ children }: { children: ReactNode }) => {
   const { isLoading, isFetching, error } = useGetAgreementsQuery({});
 
@@ -60,14 +56,16 @@ const AgreementsListPage = () => (
       <FluidContainer>
         <FlexContainer>
           <Title size="m">Agreements List</Title>
-          <HeaderButton
+          <Button
+            size="md"
+            kind="secondary"
             as="a"
             href={`/backoffice/agreements/new`}
             className="aq-mr-2"
             id="add-new-agreement-btn"
           >
             + Add New
-          </HeaderButton>
+          </Button>
         </FlexContainer>
         <Card className="aq-pb-4">
           <FilterContext>

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

@@ -65,6 +65,7 @@ export interface NewCampaignValues {
   cuf?: { id: string; value: string[] }[];
   provinces?: string[];
   autoApply?: boolean;
+  autoApprove?: boolean;
 }
 
 const useGetInitialCufCriteria = ({
@@ -188,6 +189,7 @@ const FormProvider = ({
     cuf: initialCufCriteria,
     provinces: dossier?.visibilityCriteria?.province || [],
     autoApply: dossier?.autoApply === 1,
+    autoApprove: dossier?.autoApprove === 1,
   };
 
   const validationSchema = yup.object({
@@ -356,6 +358,7 @@ const FormProvider = ({
               : undefined,
             notes: values.notes,
             autoApply: values.autoApply ? 1 : 0,
+            autoApprove: values.autoApprove ? 1 : 0,
             visibilityCriteria: {
               gender: values.genderRequirements?.options || [],
               cuf: values.cuf

src/pages/campaigns/components/campaignForm/fields/AutoApply.tsx

@@ -21,7 +21,7 @@ const AutoApply = () => {
             id="autoApply"
             label="Should auto-select candidates once the tester applies?"
             checked={field.value}
-            onChange={(e) => {
+            onChange={(e: any) => {
               setFieldValue("autoApply", e.target.checked);
             }}
           />

src/pages/campaigns/components/campaignForm/fields/AutoApprove.tsx

@@ -0,0 +1,34 @@
+import {
+  Checkbox,
+  FieldProps,
+  FormikField,
+  FormLabel,
+} from "@appquality/appquality-design-system";
+import { useFormikContext } from "formik";
+import { NewCampaignValues } from "../FormProvider";
+
+const AutoApprove = () => {
+  const { setFieldValue } = useFormikContext<NewCampaignValues>();
+
+  return (
+    <div>
+      <FormLabel htmlFor="autoApprove" label="AI-Powered Bug Approval" />
+
+      <FormikField name="autoApprove">
+        {({ field }: FieldProps) => (
+          <Checkbox
+            name={field.name}
+            id="autoApprove"
+            label="Enable AI to automatically approve reported bugs"
+            checked={field.value}
+            onChange={(e: any) => {
+              setFieldValue("autoApprove", e.target.checked);
+            }}
+          />
+        )}
+      </FormikField>
+    </div>
+  );
+};
+
+export default AutoApprove;

src/pages/campaigns/components/campaignForm/fields/GenderRequirements.tsx

@@ -41,7 +41,7 @@ const GenderRequirements = () => {
                   name={`${field.name}.options`}
                   label={option.label}
                   checked={value.options.includes(option.value)}
-                  onChange={(e) => {
+                  onChange={(e: any) => {
                     const newOptions = e.target.checked
                       ? [...value.options, option.value]
                       : value.options.filter(

src/pages/campaigns/components/campaignForm/fields/TargetSize.tsx

@@ -1,12 +1,12 @@
 import {
-  Title,
   Checkbox,
-  FormikField,
   FieldProps,
+  FormikField,
+  Title,
 } from "@appquality/appquality-design-system";
-import InputField from "./InputField";
-import { NewCampaignValues } from "../FormProvider";
 import { useFormikContext } from "formik";
+import { NewCampaignValues } from "../FormProvider";
+import InputField from "./InputField";
 
 const TargetSize = () => {
   const {
@@ -40,7 +40,7 @@ const TargetSize = () => {
               id="checkboxCap"
               label="Limit the number of candidates"
               checked={field.value}
-              onChange={(e) => {
+              onChange={(e: any) => {
                 setFieldValue("checkboxCap", e.target.checked);
                 if (!e.target.checked) setFieldValue("targetCap", "");
               }}

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

@@ -22,6 +22,7 @@ import { CampaignFormContext } from "./campaignFormContext";
 import FormOverlay from "./feedbackMessages/FormOverlay";
 import AgeRequirements from "./fields/AgeRequirements";
 import AutoApply from "./fields/AutoApply";
+import AutoApprove from "./fields/AutoApprove";
 import BrowsersMultiselect from "./fields/BrowsersMultiselect";
 import CountrySelect from "./fields/CountrySelect";
 import CufCriteria from "./fields/CufCriteria";
@@ -131,6 +132,7 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
                   />
                   <TestTypeSelect />
                   {isEdit && <AutoApply />}
+                  {isEdit && <AutoApprove />}
                 </FieldWrapper>
                 <Title size="s" className="aq-mb-2 aq-pt-4">
                   Give some context to your co-workers

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

@@ -60,7 +60,7 @@ const CampaignsTable = () => {
               size="sm"
               kind="secondary"
               flat
-              onClick={(e) => openInWordpress(e, "open-new-campaign")}
+              onClick={(e: any) => openInWordpress(e, "open-new-campaign")}
             >
               Add campaign
             </Button>

src/pages/campaigns/components/table/useCampaigns.tsx

@@ -11,8 +11,8 @@ import BugType from "./BugTypeIcon";
 import { useFiltersCardContext } from "./FilterContext";
 import ResultTypeIcon from "./ResultTypeIcon";
 import StatusIcon from "./StatusIcon";
-import VisibilityIcon from "./VisibilityIcon";
 import { Campaign } from "./types";
+import VisibilityIcon from "./VisibilityIcon";
 
 const formatDateTime = (dateTime: string) => {
   const date = new Date(dateTime.split(" ")[0]).toLocaleDateString("it-IT", {
@@ -171,7 +171,7 @@ const useCampaigns = (options?: {
             content: (
               <>
                 <TableButton
-                  onClick={(e) =>
+                  onClick={(e: any) =>
                     openInWordpress(e, "open-edit", { id: campaign.id })
                   }
                   size="sm"
@@ -181,7 +181,7 @@ const useCampaigns = (options?: {
                 </TableButton>
                 {" | "}
                 <TableButton
-                  onClick={(e) =>
+                  onClick={(e: any) =>
                     openInWordpress(e, "open-show", { id: campaign.id })
                   }
                   size="sm"
@@ -191,7 +191,7 @@ const useCampaigns = (options?: {
                 </TableButton>
                 {" | "}
                 <TableButton
-                  onClick={(e) =>
+                  onClick={(e: any) =>
                     openInWordpress(e, "open-bugs", { id: campaign.id })
                   }
                   size="sm"

src/pages/campaigns/quote/QuoteBanner.tsx

@@ -14,18 +14,14 @@ export const QuoteBanner = ({ status }: { status: string }) => {
   return (
     <div className="aq-mb-4">
       <StyledDiv>
-        <Title size="s">The quote is now:</Title>
+        <Title size="s">Current Quote:</Title>
         {getQuoteStatusPill(status)}
       </StyledDiv>
 
       {status === "pending" && (
-        <Text small>
-          We've prepared this quote based on the provided template. Please
-          review it to ensure it is accurate or make any necessary updates.
-          <br />
-          If you save it without making changes,{" "}
-          <strong>it will be automatically confirmed</strong>&nbsp;without
-          requiring further action from the client.
+        <Text color={"info"}>
+          💡 Please <strong>review this template-based quote.</strong>
+          <br /> Saving it without changes will automatically confirm it
         </Text>
       )}