Merge pull request #120 from AppQuality/tryber-selection-ui

Tryber selection UI

package.json

@@ -5,7 +5,7 @@
   "homepage": "backoffice/",
   "dependencies": {
     "@analytics/google-tag-manager": "^0.5.3",
-    "@appquality/appquality-design-system": "^1.0.67",
+    "@appquality/appquality-design-system": "^1.0.76",
     "@appquality/craft-blocks": "^0.1.27",
     "@appquality/stream-player": "^1.0.6",
     "@craco/craco": "^6.4.3",

src/features/AuthorizedOnlyContainer.tsx

@@ -1,22 +1,23 @@
-import useUserData from "src/pages/Jotform/useUserData";
 import { Container } from "@appquality/appquality-design-system";
-import ErrorUnauthorized from "src/features/ErrorUnauthorized/ErrorUnauthorized";
 import React from "react";
+import ErrorUnauthorized from "src/features/ErrorUnauthorized/ErrorUnauthorized";
+import useUserData from "src/pages/Jotform/useUserData";
 
 export const AuthorizedOnlyContainer: React.FC<{
   excludeRule: boolean;
   children: React.ReactNode;
-}> = ({ children, excludeRule }) => {
+  isFluid?: boolean;
+}> = ({ children, excludeRule, isFluid }) => {
   const { isFetching, isError, isLoading } = useUserData();
   if (isLoading || isFetching) return <Container>loading...</Container>;
   if (isError) return <Container>there was an error</Container>;
   if (excludeRule)
     return (
-      <Container>
+      <Container isFluid={isFluid}>
         <ErrorUnauthorized />
       </Container>
     );
-  return <Container>{children}</Container>;
+  return <Container isFluid={isFluid}>{children}</Container>;
 };
 
 export const OpsUserContainer: React.FC<{ children: React.ReactNode }> = ({

src/pages/campaigns/selection/ImportSurveyModal/FormProvider.tsx

@@ -1,4 +1,4 @@
-import { Form, Formik } from "@appquality/appquality-design-system";
+import { Form, Formik, Text } from "@appquality/appquality-design-system";
 import { addMessage } from "src/redux/siteWideMessages/actionCreators";
 import { usePostJotformsByCampaignMutation } from "src/services/tryberApi";
 import { useAppDispatch } from "src/store";
@@ -41,7 +41,18 @@ const FormProvider = ({ id, children }: FormProviderInterface) => {
           }).unwrap();
           dispatch(closeSurveyModal());
 
-          dispatch(addMessage("Jotform correctly imported.", "success"));
+          dispatch(
+            addMessage(
+              <Text className="aq-text-primary">
+                <strong>Import successful</strong>
+                <div>
+                  The Jotform you selected has been imported. Now you can
+                  proceed with the testers’ selection.
+                </div>
+              </Text>,
+              "success"
+            )
+          );
         } catch (e) {
           dispatch(
             addMessage(

src/pages/campaigns/selection/ImportSurveyModal/QuestionsSelect.tsx

@@ -42,7 +42,7 @@ export const QuestionsSelect = () => {
                 form.setFieldValue(field.name, "");
               }
             }}
-            label="Select the question with the tester id"
+            label="Identify the question related to the Tester ID"
             value={
               options?.find((question) => question.value === field.value) ||
               emptyOption

src/pages/campaigns/selection/ImportSurveyModal/index.tsx

@@ -33,7 +33,7 @@ const ImportSurveyModal = ({ id }: { id: string }) => {
 
   return (
     <Modal
-      title="Import Jotform Dialog"
+      title="Import Jotform"
       size="large"
       isOpen={isSurveyModalOpen}
       onClose={close}
@@ -51,7 +51,7 @@ const ImportSurveyModal = ({ id }: { id: string }) => {
                   }}
                   data-qa="survey-select"
                   name={field.name}
-                  label="Select a jotform"
+                  label="Choose the Jotform to import into the tester selection"
                   onChange={(option) => {
                     if (option?.value) {
                       form.setFieldValue(field.name, option.value);
@@ -71,9 +71,11 @@ const ImportSurveyModal = ({ id }: { id: string }) => {
           }}
         </FormikField>
         <QuestionsSelect />
-        <Button type="submit" data-qa="import-survey-apply-cta">
-          Import
-        </Button>
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <Button type="submit" data-qa="import-survey-apply-cta">
+            Confirm importation
+          </Button>
+        </div>
       </FormProvider>
     </Modal>
   );

src/pages/campaigns/selection/SelectionTable/useColumns.tsx

@@ -7,44 +7,78 @@ export const useColumns: () => TableType.Column[] = () => {
 
   return [
     {
-      dataIndex: "nameId",
-      key: "nameId",
-      title: "Name ID",
+      dataIndex: "id",
+      key: "id",
+      title: "ID",
+      maxWidth: "80px",
+    },
+    {
+      dataIndex: "name",
+      key: "name",
+      title: "Name",
+      maxWidth: "200px",
     },
     {
       dataIndex: "age",
       key: "age",
       title: "Age",
+      maxWidth: "80px",
     },
     {
       dataIndex: "gender",
       key: "gender",
       title: "Gender",
+      maxWidth: "120px",
+    },
+    {
+      dataIndex: "bhlevel",
+      key: "bhlevel",
+      title: "BH Level",
+      maxWidth: "120px",
     },
     {
       dataIndex: "metallevel",
       key: "metallevel",
       title: "Metal Level",
+      maxWidth: "120px",
     },
     {
-      dataIndex: "exppoints",
-      key: "exppoints",
-      title: "Experience Points",
+      dataIndex: "totalCpBusiness",
+      key: "totalCpBusiness",
+      title: (
+        <span title="Total number of business campaigns in which the user has submitted at list a bug">
+          Total CPs
+        </span>
+      ),
+      maxWidth: "80px",
     },
     {
-      dataIndex: "bhlevel",
-      key: "bhlevel",
-      title: "BH Level",
+      dataIndex: "lastCpBusiness",
+      key: "lastCpBusiness",
+      title: (
+        <span title="Business campaigns in which the user has been selected in the last month">
+          Last 30d CPs
+        </span>
+      ),
+      maxWidth: "110px",
+    },
+    {
+      dataIndex: "exppoints",
+      key: "exppoints",
+      title: "Exp Points",
+      maxWidth: "120px",
     },
     {
       dataIndex: "devices",
       key: "devices",
       title: "Devices",
+      maxWidth: "200px",
     },
     {
       dataIndex: "os",
       key: "os",
       title: "OS",
+      maxWidth: "200px",
     },
     {
       dataIndex: "actions",

src/pages/campaigns/selection/SelectionTable/useTableRows.tsx

@@ -69,12 +69,15 @@ const useTableRows = (id: string) => {
             });
             row = {
               ...row,
-              nameId: `T${user.id} ${user.name} ${user.surname}`,
+              id: `T${user.id}`,
+              name: `${user.name} ${user.surname}`,
               age: user.age,
               gender: user.gender,
               bhlevel: user.levels.bugHunting,
               exppoints: user.experience,
               metallevel: user.levels.metal,
+              totalCpBusiness: user.businessCps,
+              lastCpBusiness: user.businessCpsLastMonth,
               ...fields,
             };
           }

src/pages/campaigns/selection/confirmButton/ConfirmButton.tsx

@@ -18,7 +18,7 @@ const ConfirmButton = ({ id }: { id: string }) => {
         onClick={confirmSelection}
         disabled={Object.keys(selectedDevices).length < 1}
       >
-        Conferma selezioni
+        Confirm selected
       </Button>
     </div>
   );

src/pages/campaigns/selection/confirmModals/ConfirmFormModal.tsx

@@ -3,6 +3,7 @@ import {
   BSGrid,
   Button,
   Modal,
+  Text,
 } from "@appquality/appquality-design-system";
 import { useAppDispatch, useAppSelector } from "src/store";
 import { closeFormModal, openSurveyModal } from "../selectionSlice";
@@ -22,7 +23,7 @@ const ConfirmFormModal = ({
       <BSGrid>
         <BSCol>
           <Button onClick={close} kind="primary" flat size="block">
-            Cancella
+            No, cancel
           </Button>
         </BSCol>
         <BSCol>
@@ -32,11 +33,10 @@ const ConfirmFormModal = ({
               dispatch(openSurveyModal());
             }}
             kind="primary"
-            flat
             size="block"
             disabled={false}
           >
-            Ok
+            Yes, proceed with the new import
           </Button>
         </BSCol>
       </BSGrid>
@@ -45,11 +45,18 @@ const ConfirmFormModal = ({
   return (
     <Modal
       footer={<Footer />}
-      size="small"
+      size="large"
       isOpen={isFormModalOpen}
       onClose={close}
     >
-      {`A questa Selection è già collegato il form con id: ${preselectionFormId}. Vuoi sovrascriverlo e collegare un nuovo form?`}
+      <Text>
+        <strong>Are you sure you want to continue?</strong>
+        <div>
+          This tester selection already has a form associated with it (id:{" "}
+          {preselectionFormId}). Proceeding with the import of a new survey will
+          replace the existing form, overwriting it.
+        </div>
+      </Text>
     </Modal>
   );
 };

src/pages/campaigns/selection/confirmModals/ConfirmSelectionModal.tsx

@@ -35,18 +35,18 @@ const ConfirmModal: FC<{ id: string }> = ({ id }) => {
       if ("invalidTesters" in response) {
         add({
           type: "warning",
-          message: `${response.invalidTesters?.length} tryber non sono stati aggiunti per un errore`,
+          message: `${response.invalidTesters?.length} tryber were not added due to an error`,
         });
         console.warn(response.invalidTesters);
       }
       add({
         type: "success",
-        message: `${response.results.length} tryber selezionati con successo`,
+        message: `${response.results.length} tryber successfully selected`,
       });
       dispatch(clearSelectedDevice());
     } catch (e) {
       const error = e as any;
-      let message = "La richiesta non è andata a buon fine";
+      let message = "The request was not successful";
       if ("data" in error) {
         // @ts-ignore
         message += `: ${error.data?.message}`;
@@ -61,7 +61,7 @@ const ConfirmModal: FC<{ id: string }> = ({ id }) => {
       <BSGrid>
         <BSCol>
           <Button onClick={close} kind="primary" flat size="block">
-            Cancella
+            No, cancel
           </Button>
         </BSCol>
         <BSCol>
@@ -72,7 +72,7 @@ const ConfirmModal: FC<{ id: string }> = ({ id }) => {
             size="block"
             disabled={false}
           >
-            Ok
+            Yes, confirm
           </Button>
         </BSCol>
       </BSGrid>
@@ -85,8 +85,8 @@ const ConfirmModal: FC<{ id: string }> = ({ id }) => {
       isOpen={isConfirmModalOpen}
       onClose={close}
     >
-      Sono stati selezionati {Object.keys(selectedDevices).length} tester, vuoi
-      procedere con la selezione?
+      {Object.keys(selectedDevices).length} testers have been selected for the
+      campaign. Do you want to confirm this selection?
     </Modal>
   );
 };

src/pages/campaigns/selection/counter/index.tsx

@@ -2,7 +2,7 @@ import useSelection from "../useSelection";
 
 const Counter = ({ id }: { id: string }) => {
   const { selectedDevices } = useSelection(id);
-  return <div>{Object.keys(selectedDevices).length} Tester selezionati</div>;
+  return <div>{Object.keys(selectedDevices).length} selected Trybers</div>;
 };
 
 export default Counter;

src/pages/campaigns/selection/editPanel/columnsConfigurator/index.tsx

@@ -1,6 +1,6 @@
 import { Button, Select } from "@appquality/appquality-design-system";
 import { Option } from "@appquality/appquality-design-system/dist/stories/select/_types";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useGetCampaignsByCampaignFormsQuery } from "src/services/tryberApi";
 import { useAppDispatch } from "src/store";
 import { setQuestionsId } from "../../selectionSlice";
@@ -12,12 +12,18 @@ interface ColumnsConfiguratorProps {
 
 const ColumnsConfigurator = ({ id }: ColumnsConfiguratorProps) => {
   const dispatch = useAppDispatch();
-  const [value, setValue] = useState<Option[]>([]);
   const [disableApply, setDisableApply] = useState(true);
   const { data } = useGetCampaignsByCampaignFormsQuery(
     { campaign: id },
     { skip: !id }
   );
+  const [value, setValue] = useState<Option[]>([]);
+
+  useEffect(() => {
+    const allColumns = data ? mapCampaingFormData(data) : [];
+    setValue(allColumns);
+    dispatch(setQuestionsId(mapSelectedQuestions(allColumns)));
+  }, [data]);
 
   return (
     <div>

src/pages/campaigns/selection/editPanel/selectionFilters/FilterCardHeader.tsx

@@ -15,7 +15,7 @@ const StyledCardHeader = styled.div`
 const FilterCardHeader = () => {
   return (
     <StyledCardHeader>
-      <Title size="ms">Filters</Title>
+      <Title size="s">Filters</Title>
     </StyledCardHeader>
   );
 };

src/pages/campaigns/selection/editPanel/selectionFilters/FilterItems/AgeFilters.tsx

@@ -30,21 +30,23 @@ const AgeFilters = () => {
 
   return (
     <FilterContainer>
-      <Title size="s">Filter By Age</Title>
+      <Title size="xs">Filter By Age</Title>
       <InputContainer>
         <Input
           placeholder="Min"
           value={min?.toString()}
           onChange={(val) => setMin(parseInt(val))}
           id="minAge"
           type="number"
+          className="aq-mr-2"
         />
         <Input
           placeholder="Max"
           value={max?.toString()}
           onChange={(val) => setMax(parseInt(val))}
           id="maxAge"
           type="number"
+          className="aq-mr-2"
         />
         <Button onClick={() => onApply()}>Apply</Button>
       </InputContainer>