From 722bb8777aac4a9936d4e1c0ba86a52987ed3086 Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Wed, 26 Jun 2024 10:51:01 +0200
Subject: [PATCH] chore: remove unused page (jotform feature)

---
 src/App.tsx                                   |  8 +-
 src/features/AuthorizedOnlyContainer.tsx      | 10 ++-
 .../components/FormProvider.tsx               |  1 +
 .../formConfigurator/CufMultiselect.tsx       | 78 +++++++++++++++++++
 .../formConfigurator/ValuesFieldsCard.tsx     |  2 +-
 .../functions/scrollToFormTitle.tsx           |  2 +-
 src/pages/preselectionForms/singleSlice.ts    |  4 +
 src/store.ts                                  |  2 -
 8 files changed, 95 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/preselectionForms/components/formConfigurator/CufMultiselect.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 523a30de..e34dd1a2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,7 +14,6 @@ import EditPreselectionForm from "src/pages/preselectionForms/edit";
 import { setupStore } from "src/store";
 import { PageTemplate } from "./features/PageTemplate";
 import SentryWrapper from "./features/SentryWrapper";
-import Jotform from "./pages/Jotform";
 import Prospect from "./pages/Prospect";
 import UxDashboard from "./pages/UxDashboard";
 import AgreementsList from "./pages/agreements/list";
@@ -50,17 +49,16 @@ function App() {
                 path="/backoffice/payments"
                 component={AdminPayments}
               />
-              <SentryRoute path="/backoffice/jotform" component={Jotform} />
               <SentryRoute
-                path="/backoffice/campaigns/preselection-forms/new"
+                path="/backoffice/preselection-forms/new"
                 component={NewPreselectionForm}
               />
               <SentryRoute
-                path="/backoffice/campaigns/preselection-forms/:id"
+                path="/backoffice/preselection-forms/:id"
                 component={EditPreselectionForm}
               />
               <SentryRoute
-                path="/backoffice/campaigns/preselection-forms"
+                path="/backoffice/preselection-forms"
                 component={CampaignPreselectionList}
               />
               <SentryRoute
diff --git a/src/features/AuthorizedOnlyContainer.tsx b/src/features/AuthorizedOnlyContainer.tsx
index 78487c21..df0e282e 100644
--- a/src/features/AuthorizedOnlyContainer.tsx
+++ b/src/features/AuthorizedOnlyContainer.tsx
@@ -1,14 +1,16 @@
 import { Container } from "@appquality/appquality-design-system";
 import React from "react";
 import ErrorUnauthorized from "src/features/ErrorUnauthorized/ErrorUnauthorized";
-import useUserData from "src/pages/Jotform/useUserData";
+import { useGetUsersMeQuery } from "src/services/tryberApi";
 
 export const AuthorizedOnlyContainer: React.FC<{
   excludeRule: boolean;
   children: React.ReactNode;
   isFluid?: boolean;
 }> = ({ children, excludeRule, isFluid }) => {
-  const { isFetching, isError, isLoading } = useUserData();
+  const { isError, isFetching, isLoading } = useGetUsersMeQuery({
+    fields: "role",
+  });
   if (isLoading || isFetching) return <Container>loading...</Container>;
   if (isError) return <Container>there was an error</Container>;
   if (excludeRule)
@@ -23,7 +25,9 @@ export const AuthorizedOnlyContainer: React.FC<{
 export const OpsUserContainer: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const { data } = useUserData();
+  const { data } = useGetUsersMeQuery({
+    fields: "role",
+  });
   return (
     <AuthorizedOnlyContainer
       excludeRule={data?.role === "tester" || data?.role === "subscriber"}
diff --git a/src/pages/preselectionForms/components/FormProvider.tsx b/src/pages/preselectionForms/components/FormProvider.tsx
index 6ace24ad..0f98e426 100644
--- a/src/pages/preselectionForms/components/FormProvider.tsx
+++ b/src/pages/preselectionForms/components/FormProvider.tsx
@@ -15,6 +15,7 @@ import { Form, Formik } from "@appquality/appquality-design-system";
 import useCufData from "../hooks/useCufData";
 import { useHistory } from "react-router-dom";
 import siteWideMessageStore from "src/redux/siteWideMessages";
+import { scrollToFormTitle } from "../functions/scrollToFormTitle";
 
 interface FormProviderInterface {
   savedData?: GetCampaignsFormsByFormIdApiResponse;
diff --git a/src/pages/preselectionForms/components/formConfigurator/CufMultiselect.tsx b/src/pages/preselectionForms/components/formConfigurator/CufMultiselect.tsx
new file mode 100644
index 00000000..4fe8b0a4
--- /dev/null
+++ b/src/pages/preselectionForms/components/formConfigurator/CufMultiselect.tsx
@@ -0,0 +1,78 @@
+import {
+  Select,
+  FormGroup,
+  ErrorMessage,
+} from "@appquality/appquality-design-system";
+import { Option } from "@appquality/appquality-design-system/dist/stories/select/_types";
+import { Field, FieldProps } from "formik";
+import { useMemo } from "react";
+
+const optionAll = [{ label: "All options", value: "-1" }];
+
+export const CufMultiselect = ({
+  label,
+  options,
+  name,
+}: {
+  label: string;
+  options: Option[];
+  name: string;
+}) => {
+  const selectOptions = useMemo(
+    () =>
+      options.map((option) => ({
+        label: option.label,
+        value: option.value,
+      })),
+    [options]
+  );
+  return (
+    <div className="aq-mb-3">
+      <Field
+        name={name}
+        validate={(value: string) => {
+          if (!value || !value.length) {
+            return "This is a required field";
+          }
+        }}
+      >
+        {({
+          field, // { name, value, onChange, onBlur }
+          form,
+        }: FieldProps) => {
+          return (
+            <FormGroup>
+              <Select
+                key={name}
+                name={name}
+                value={field.value || []}
+                options={
+                  field.value?.some((v: any) => v.value === "-1")
+                    ? optionAll
+                    : [...optionAll, ...selectOptions]
+                }
+                onBlur={() => {
+                  form.setFieldTouched(name);
+                }}
+                label={label}
+                placeholder={"Select options"}
+                menuTargetQuery="body"
+                noOptionsMessage={() => "No options"}
+                onChange={(v) => {
+                  if (v === null) {
+                    v = { label: "", value: "" };
+                  }
+                  form.setFieldValue(field.name, v, true);
+                  if (v?.some((v: any) => v.value === "-1"))
+                    form.setFieldValue(field.name, optionAll, true);
+                }}
+                isMulti
+              />
+              <ErrorMessage name={name} />
+            </FormGroup>
+          );
+        }}
+      </Field>
+    </div>
+  );
+};
diff --git a/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx b/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx
index 7ba159c6..ab191c71 100644
--- a/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx
+++ b/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx
@@ -1,6 +1,5 @@
 import { FC, useEffect } from "react";
 import { OptionsField } from "src/pages/preselectionForms/components/formConfigurator/OptionsField";
-import { CufMultiselect } from "src/pages/Jotform/CufConfigurator/CufMultiselect";
 import {
   aqBootstrapTheme,
   Card,
@@ -12,6 +11,7 @@ import { DropZone } from "src/pages/preselectionForms/components/formConfigurato
 import { XLg, GripVertical } from "react-bootstrap-icons";
 import { ShortTitleField } from "./ShortTitleField";
 import styled from "styled-components";
+import { CufMultiselect } from "./CufMultiselect";
 
 const StyledInlineField = styled.div`
   display: flex;
diff --git a/src/pages/preselectionForms/functions/scrollToFormTitle.tsx b/src/pages/preselectionForms/functions/scrollToFormTitle.tsx
index 53c32ee0..c730e29e 100644
--- a/src/pages/preselectionForms/functions/scrollToFormTitle.tsx
+++ b/src/pages/preselectionForms/functions/scrollToFormTitle.tsx
@@ -1,4 +1,4 @@
-function scrollToFormTitle() {
+export function scrollToFormTitle() {
   const selector = `[id="formTitle"]`;
   const formTitleElement = document.querySelector(selector) as HTMLElement;
   formTitleElement?.scrollIntoView({
diff --git a/src/pages/preselectionForms/singleSlice.ts b/src/pages/preselectionForms/singleSlice.ts
index 75b590af..4225597c 100644
--- a/src/pages/preselectionForms/singleSlice.ts
+++ b/src/pages/preselectionForms/singleSlice.ts
@@ -2,6 +2,10 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { v4 as uuidv4 } from "uuid";
 import { GetCampaignsFormsByFormIdApiResponse } from "../../services/tryberApi";
 
+interface CufField {
+  fieldData: ApiComponents["schemas"]["CustomUserFieldsData"];
+  checked: boolean;
+}
 interface PreselectionFormState {
   profileFieldsList: ProfileField[];
   cufList: CufField[];
diff --git a/src/store.ts b/src/store.ts
index 137f2467..10501e39 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -2,7 +2,6 @@ import { configureStore, PreloadedState } from "@reduxjs/toolkit";
 import { tryberApiSlice } from "src/services/tryberApi/apiTags";
 import oldReducers from "src/redux/reducer";
 import { combineReducers } from "redux";
-import jotformReducer from "src/pages/Jotform/jotformSlice";
 import campaignPreselectionReducer from "src/pages/preselectionForms/singleSlice";
 import campaignPreselectionListReducer from "src/pages/preselectionForms/listSlice";
 import selectionReducer from "src/pages/campaigns/selection/selectionSlice";
@@ -12,7 +11,6 @@ import type { TypedUseSelectorHook } from "react-redux";
 
 const rootReducer = combineReducers({
   ...oldReducers,
-  jotform: jotformReducer,
   campaignPreselection: campaignPreselectionReducer,
   campaignPreselectionList: campaignPreselectionListReducer,
   selection: selectionReducer,