From ecf72b814e5821cc034864d6688ea4d674e50a08 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Fri, 14 Jun 2024 16:40:47 +0200 Subject: [PATCH 01/21] refactor: function to scroll up --- .../campaigns/preselectionForm/index.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/pages/campaigns/preselectionForm/index.tsx b/src/pages/campaigns/preselectionForm/index.tsx index aae23036..19a45412 100644 --- a/src/pages/campaigns/preselectionForm/index.tsx +++ b/src/pages/campaigns/preselectionForm/index.tsx @@ -178,6 +178,7 @@ const PreselectionForm = () => { initialValues={initialValues} validationSchema={validationSchema} onSubmit={async (values) => { + //refactor const fieldsToSend = values.fields.map((field) => { const newField: PreselectionFormQuestion & { id?: number } = { ...(field.questionId ? { id: field.questionId } : {}), @@ -291,15 +292,8 @@ const PreselectionForm = () => { } } } - // scroll to form title - const selector = `[id="formTitle"]`; - const formTitleElement = document.querySelector( - selector - ) as HTMLElement; - formTitleElement?.scrollIntoView({ - behavior: "smooth", - block: "center", - }); + + scrollToFormTitle(); }} >
@@ -324,4 +318,15 @@ const PreselectionForm = () => { ); }; +function scrollToFormTitle() { + function scrollToFormTitle() { + const selector = `[id="formTitle"]`; + const formTitleElement = document.querySelector(selector) as HTMLElement; + formTitleElement?.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + } +} + export default PreselectionForm; From 478acdbaf462dd3d3264014cb3a9fe042f3fa52a Mon Sep 17 00:00:00 2001 From: Kariamos Date: Fri, 14 Jun 2024 16:41:30 +0200 Subject: [PATCH 02/21] fix: deleted duplicated row --- src/pages/campaigns/preselectionForm/index.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/pages/campaigns/preselectionForm/index.tsx b/src/pages/campaigns/preselectionForm/index.tsx index 19a45412..1fe4034e 100644 --- a/src/pages/campaigns/preselectionForm/index.tsx +++ b/src/pages/campaigns/preselectionForm/index.tsx @@ -319,14 +319,12 @@ const PreselectionForm = () => { }; function scrollToFormTitle() { - function scrollToFormTitle() { - const selector = `[id="formTitle"]`; - const formTitleElement = document.querySelector(selector) as HTMLElement; - formTitleElement?.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - } + const selector = `[id="formTitle"]`; + const formTitleElement = document.querySelector(selector) as HTMLElement; + formTitleElement?.scrollIntoView({ + behavior: "smooth", + block: "center", + }); } export default PreselectionForm; From 79a5a53576ffc754e6a92b669dcfd2b60c60a388 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Mon, 17 Jun 2024 14:46:18 +0200 Subject: [PATCH 03/21] feat: added edit/create survey button --- .../components/campaignForm/index.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/pages/campaigns/components/campaignForm/index.tsx b/src/pages/campaigns/components/campaignForm/index.tsx index 04bb258b..d3ee259f 100644 --- a/src/pages/campaigns/components/campaignForm/index.tsx +++ b/src/pages/campaigns/components/campaignForm/index.tsx @@ -14,6 +14,7 @@ import { useFormikContext } from "formik"; import { GetDossiersByCampaignApiResponse, PostDossiersApiArg, + useGetCampaignsFormsQuery, useGetDossiersByCampaignQuery, } from "src/services/tryberApi"; import { styled } from "styled-components"; @@ -53,6 +54,36 @@ const StickyContainer = styled.div` } `; +const SurveyButton = ({ campaign_id }: { campaign_id: string }) => { + const { data } = useGetCampaignsFormsQuery({ + searchBy: "campaign_id", + search: campaign_id, + }); + + if (!data) return null; + return ( + + ); +}; + const Phase = ({ id }: { id: number }) => { const { data, isLoading } = useGetDossiersByCampaignQuery({ campaign: id.toString(), @@ -281,6 +312,9 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => { label="Trybers' additional requirements" placeholder="The target has to..." /> + {dossier && dossier.id && ( + + )} From 666e09b993b5f199a72897ccd921381490efaf70 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Thu, 20 Jun 2024 15:24:04 +0200 Subject: [PATCH 04/21] feat: don't show survey button while creating a new campaign --- src/pages/campaigns/components/campaignForm/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/pages/campaigns/components/campaignForm/index.tsx b/src/pages/campaigns/components/campaignForm/index.tsx index d3ee259f..33478775 100644 --- a/src/pages/campaigns/components/campaignForm/index.tsx +++ b/src/pages/campaigns/components/campaignForm/index.tsx @@ -41,6 +41,7 @@ import CsmSelect from "./fields/roles/CsmSelect"; import PmSelect from "./fields/roles/PMSelect"; import ResearcherSelect from "./fields/roles/ResearcherSelect"; import TlSelect from "./fields/roles/TLSelect"; +import { useLocation } from "react-router-dom"; interface FormProps { dossier?: GetDossiersByCampaignApiResponse; @@ -60,7 +61,11 @@ const SurveyButton = ({ campaign_id }: { campaign_id: string }) => { search: campaign_id, }); + const path = useLocation().pathname; + if (path === "/backoffice/campaigns/new") return null; + if (!data) return null; + return ( + {hasSurvey() ? "Edit survey" : "Create survey"} + ); }; From ab789a9201744e63b37e30d1658f190997a17149 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Mon, 24 Jun 2024 16:10:16 +0200 Subject: [PATCH 06/21] refactor: move surveybutton to a new file --- .../components/campaignForm/SurveyButton.tsx | 23 +++++++++++++++++++ .../components/campaignForm/index.tsx | 23 +------------------ 2 files changed, 24 insertions(+), 22 deletions(-) create mode 100644 src/pages/campaigns/components/campaignForm/SurveyButton.tsx diff --git a/src/pages/campaigns/components/campaignForm/SurveyButton.tsx b/src/pages/campaigns/components/campaignForm/SurveyButton.tsx new file mode 100644 index 00000000..0df6bfc4 --- /dev/null +++ b/src/pages/campaigns/components/campaignForm/SurveyButton.tsx @@ -0,0 +1,23 @@ +import { useGetCampaignsFormsQuery } from "src/services/tryberApi"; + +export const SurveyButton = ({ campaign_id }: { campaign_id: string }) => { + const { data, isError, isLoading } = useGetCampaignsFormsQuery({ + searchBy: "campaign_id", + search: campaign_id, + }); + + if (!data || isError || isLoading) return null; + const hasSurvey = () => data.size > 0; + return ( + + {hasSurvey() ? "Edit survey" : "Create survey"} + + ); +}; diff --git a/src/pages/campaigns/components/campaignForm/index.tsx b/src/pages/campaigns/components/campaignForm/index.tsx index 5495aea6..a784f4e4 100644 --- a/src/pages/campaigns/components/campaignForm/index.tsx +++ b/src/pages/campaigns/components/campaignForm/index.tsx @@ -14,7 +14,6 @@ import { useFormikContext } from "formik"; import { GetDossiersByCampaignApiResponse, PostDossiersApiArg, - useGetCampaignsFormsQuery, useGetDossiersByCampaignQuery, } from "src/services/tryberApi"; import { styled } from "styled-components"; @@ -42,6 +41,7 @@ import PmSelect from "./fields/roles/PMSelect"; import ResearcherSelect from "./fields/roles/ResearcherSelect"; import TlSelect from "./fields/roles/TLSelect"; import { useLocation } from "react-router-dom"; +import { SurveyButton } from "./SurveyButton"; interface FormProps { dossier?: GetDossiersByCampaignApiResponse; @@ -55,27 +55,6 @@ const StickyContainer = styled.div` } `; -const SurveyButton = ({ campaign_id }: { campaign_id: string }) => { - const { data, isError, isLoading } = useGetCampaignsFormsQuery({ - searchBy: "campaign_id", - search: campaign_id, - }); - - if (!data || isError || isLoading) return null; - const hasSurvey = () => data.size > 0; - return ( - - {hasSurvey() ? "Edit survey" : "Create survey"} - - ); -}; - const Phase = ({ id }: { id: number }) => { const { data, isLoading } = useGetDossiersByCampaignQuery({ campaign: id.toString(), From a7a69488483350996acb872315df36b76182540f Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Mon, 24 Jun 2024 16:46:46 +0200 Subject: [PATCH 07/21] remove unused vars --- src/pages/campaigns/components/campaignForm/SurveyButton.tsx | 1 + src/pages/campaigns/components/campaignForm/index.tsx | 1 - .../campaigns/selection/editPanel/selectionFilters/index.tsx | 2 -- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/campaigns/components/campaignForm/SurveyButton.tsx b/src/pages/campaigns/components/campaignForm/SurveyButton.tsx index 0df6bfc4..1561766f 100644 --- a/src/pages/campaigns/components/campaignForm/SurveyButton.tsx +++ b/src/pages/campaigns/components/campaignForm/SurveyButton.tsx @@ -9,6 +9,7 @@ export const SurveyButton = ({ campaign_id }: { campaign_id: string }) => { if (!data || isError || isLoading) return null; const hasSurvey = () => data.size > 0; return ( + // eslint-disable-next-line react/jsx-no-target-blank Date: Mon, 24 Jun 2024 16:54:27 +0200 Subject: [PATCH 08/21] add resize to textarea --- src/pages/campaigns/components/campaignForm/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/campaigns/components/campaignForm/index.tsx b/src/pages/campaigns/components/campaignForm/index.tsx index 04bb258b..dccc3d52 100644 --- a/src/pages/campaigns/components/campaignForm/index.tsx +++ b/src/pages/campaigns/components/campaignForm/index.tsx @@ -129,6 +129,7 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => { @@ -225,11 +226,13 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => { name="goal" label="Test Perimeter" placeholder="The test will cover..." + resize="vertical" /> @@ -248,6 +251,7 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => { @@ -279,6 +283,7 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => { @@ -295,6 +300,7 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => { From e5d7ca7a089206c729950d92414b62e13f2472b9 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Mon, 24 Jun 2024 18:07:05 +0200 Subject: [PATCH 09/21] wip: refactor preselection forms page --- src/App.tsx | 9 +- .../campaigns/preselectionForm/index.tsx | 330 ------------------ .../components}/CopyLinkButton.tsx | 0 .../components/FormProvider.tsx | 261 ++++++++++++++ .../fieldsSelectors/CufSelectorCard.tsx | 0 .../fieldsSelectors/CustomQuestionCard.tsx | 0 .../ProfileFieldsSelectorCard.tsx | 0 .../components}/fieldsSelectors/index.tsx | 0 .../formConfigurator/CampaignSelect.tsx | 0 .../components}/formConfigurator/DropZone.tsx | 0 .../formConfigurator/OptionsField.tsx | 0 .../formConfigurator/QuestionField.tsx | 0 .../formConfigurator/ShortTitleField.tsx | 0 .../formConfigurator/ValuesFieldsCard.tsx | 0 .../components}/formConfigurator/index.tsx | 0 .../components}/formTableCard/columns.ts | 0 .../formTableCard/formSearchCard.tsx | 0 .../components}/formTableCard/index.tsx | 0 src/pages/preselectionForms/edit/index.tsx | 85 +++++ .../functions}/getCustomQuestionTypeLabel.ts | 0 .../functions}/getProfileTypeLabel.ts | 0 .../functions/scrollToFormTitle.tsx | 8 + .../hooks}/useCufData.ts | 0 .../index.tsx | 4 +- .../listSlice.ts} | 0 src/pages/preselectionForms/new/index.tsx | 100 ++++++ .../singleSlice.ts} | 2 +- .../types.d.ts | 0 src/store.ts | 2 +- 29 files changed, 463 insertions(+), 338 deletions(-) delete mode 100644 src/pages/campaigns/preselectionForm/index.tsx rename src/pages/{campaigns/preselectionFormList => preselectionForms/components}/CopyLinkButton.tsx (100%) create mode 100644 src/pages/preselectionForms/components/FormProvider.tsx rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/fieldsSelectors/CufSelectorCard.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/fieldsSelectors/CustomQuestionCard.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/fieldsSelectors/ProfileFieldsSelectorCard.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/fieldsSelectors/index.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/formConfigurator/CampaignSelect.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/formConfigurator/DropZone.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/formConfigurator/OptionsField.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/formConfigurator/QuestionField.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/formConfigurator/ShortTitleField.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/formConfigurator/ValuesFieldsCard.tsx (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/components}/formConfigurator/index.tsx (100%) rename src/pages/{campaigns/preselectionFormList => preselectionForms/components}/formTableCard/columns.ts (100%) rename src/pages/{campaigns/preselectionFormList => preselectionForms/components}/formTableCard/formSearchCard.tsx (100%) rename src/pages/{campaigns/preselectionFormList => preselectionForms/components}/formTableCard/index.tsx (100%) create mode 100644 src/pages/preselectionForms/edit/index.tsx rename src/pages/{campaigns/preselectionForm => preselectionForms/functions}/getCustomQuestionTypeLabel.ts (100%) rename src/pages/{campaigns/preselectionForm => preselectionForms/functions}/getProfileTypeLabel.ts (100%) create mode 100644 src/pages/preselectionForms/functions/scrollToFormTitle.tsx rename src/pages/{campaigns/preselectionForm => preselectionForms/hooks}/useCufData.ts (100%) rename src/pages/{campaigns/preselectionFormList => preselectionForms}/index.tsx (86%) rename src/pages/{campaigns/preselectionFormList/preselectionListSlice.ts => preselectionForms/listSlice.ts} (100%) create mode 100644 src/pages/preselectionForms/new/index.tsx rename src/pages/{campaigns/preselectionForm/preselectionSlice.ts => preselectionForms/singleSlice.ts} (97%) rename src/pages/{campaigns/preselectionForm => preselectionForms}/types.d.ts (100%) diff --git a/src/App.tsx b/src/App.tsx index cd74de3b..523a30de 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,8 @@ import AdminPayments from "src/pages/Payments"; import Create from "src/pages/Popups/Create"; import List from "src/pages/Popups/List"; import Update from "src/pages/Popups/Update"; -import CampaignPreselection from "src/pages/campaigns/preselectionForm"; +import NewPreselectionForm from "src/pages/preselectionForms/new"; +import EditPreselectionForm from "src/pages/preselectionForms/edit"; import { setupStore } from "src/store"; import { PageTemplate } from "./features/PageTemplate"; import SentryWrapper from "./features/SentryWrapper"; @@ -23,7 +24,7 @@ import Campaigns from "./pages/campaigns"; import NewCampaign from "./pages/campaigns/new"; import NewCampaignSuccess from "./pages/campaigns/new/Success"; import EditCampaign from "./pages/campaigns/edit"; -import CampaignPreselectionList from "./pages/campaigns/preselectionFormList"; +import CampaignPreselectionList from "./pages/preselectionForms"; import SelectionPage from "./pages/campaigns/selection"; const SentryRoute = Sentry.withSentryRouting(Route); @@ -52,11 +53,11 @@ function App() { { - const history = useHistory(); - const { add } = siteWideMessageStore(); - - const [createForm] = usePostCampaignsFormsMutation(); - const [editForm] = usePutCampaignsFormsByFormIdMutation(); - const { getAllOptions } = useCufData(); - const { id } = useParams<{ id: string }>(); - const dispatch = useAppDispatch(); - const { data } = useGetCustomUserFieldsQuery(); - const savedData = useGetCampaignsFormsByFormIdQuery( - { formId: id }, - { skip: !id } - ); - const [cufList, setCufList] = useState< - ApiComponents["schemas"]["CustomUserFieldsData"][] - >([]); - const [saveEdit, setSaveEdit] = useState(false); - - const initialFieldValue: (AdditionalField | CustomUserField)[] = []; - savedData.data?.fields.forEach((f) => { - switch (f.type) { - case "gender": - case "phone_number": - case "address": - case "text": - initialFieldValue.push({ - questionId: f.id, - fieldId: f.type, - question: f.question, - shortTitle: f.short_name, - type: f.type, - name: - f.type === "text" - ? `Custom ${getCustomQuestionTypeLabel(f.type)}` - : getProfileTypeLabel(f.type), - }); - break; - case "radio": - case "select": - case "multiselect": - initialFieldValue.push({ - questionId: f.id, - fieldId: uuidv4(), - question: f.question, - shortTitle: f.short_name, - type: f.type, - options: f.options?.map((o) => - typeof o === "string" ? o : o.toString() - ), - name: `Custom ${getCustomQuestionTypeLabel(f.type)}`, - }); - break; - default: - if (f.type.startsWith("cuf_")) { - const cufId = parseInt(f.type.replace("cuf_", "")); - const cufToAdd = cufList.find((cuf) => cuf.id === cufId); - const selectedOptions: { label: string; value: string }[] = []; - // @ts-ignore - if (cufToAdd?.options?.length === f.options?.length) { - selectedOptions.push({ label: "All options", value: "-1" }); - } else { - // @ts-ignore - f.options?.forEach((selected) => { - const opt = cufToAdd?.options?.find((all) => all.id === selected); - opt && - selectedOptions.push({ - label: opt.name, - value: opt.id.toString(), - }); - }); - } - initialFieldValue.push({ - questionId: f.id, - cufId, - cufType: cufToAdd?.type, - fieldId: f.type, - question: f.question, - shortTitle: f.short_name, - type: f.type, - name: `${cufToAdd?.name.it} - ${f.type}`, - availableOptions: cufToAdd?.options, - selectedOptions, - }); - } - } - }); - - const validationSchema = Yup.object({ - formTitle: Yup.string().required(), - fields: Yup.array().of( - Yup.object().shape({ - question: Yup.string().required("This is a required field"), - type: Yup.string().required(), - options: Yup.array().when("type", { - is: (type: string) => - type === "radio" || type === "select" || type === "multiselect", - then: Yup.array() - .of(Yup.string().required("This is a required field")) - .min(2, "This field must have at least 2 items"), - }), - }) - ), - }); - const initialValues: PreselectionFormValues = { - formTitle: savedData.data?.name || "", - fields: initialFieldValue, - campaign: savedData.data?.campaign - ? { - label: savedData.data?.campaign.name, - value: savedData.data?.campaign.id.toString(), - } - : { label: "", value: "" }, - }; - - useEffect(() => { - const list: ApiComponents["schemas"]["CustomUserFieldsData"][] = []; - data?.forEach((d) => { - d.fields?.forEach((f) => list.push(f)); - }); - setCufList(list); - }, [data]); - - useEffect(() => { - if (savedData?.data) { - dispatch(setLoadedForm(savedData.data)); - } - }, [savedData]); - return ( - - - - {id ? "Edit Preselection Form" : "New Preselection Form"} - - - { - //refactor - const fieldsToSend = values.fields.map((field) => { - const newField: PreselectionFormQuestion & { id?: number } = { - ...(field.questionId ? { id: field.questionId } : {}), - question: field.question, - short_name: field.shortTitle, - type: field.type, - }; - if (field.options) { - // @ts-ignore - newField.options = field.options; - } - if ("selectedOptions" in field && field.selectedOptions) { - if (field.selectedOptions[0]?.value === "-1") { - getAllOptions(field.cufId).then((res) => { - newField.options = res; - }); - } else { - newField.options = field.selectedOptions.map((o) => - parseInt(o.value) - ); - } - } - return newField; - }); - if (id) { - setSaveEdit(true); - const args: PutCampaignsFormsByFormIdApiArg = { - formId: id, - body: { - name: values.formTitle, - // @ts-ignore - fields: fieldsToSend, - }, - }; - if (values.campaign?.value) - args.body.campaign = parseInt(values.campaign?.value); - const res = await editForm(args); - if (res && "data" in res) { - history.push( - `/backoffice/campaigns/preselection-forms/${res.data.id}` - ); - add({ type: "success", message: "Form saved" }); - } else { - const errorCode = - "error" in res && "data" in res.error - ? (res.error.data as { code: string }).code - : false; - switch (errorCode) { - case "CAMPAIGN_ID_ALREADY_ASSIGNED": - add({ - type: "danger", - message: "This campaign already has a form assigned", - }); - break; - case "NO_ACCESS_TO_CAMPAIGN": - add({ - type: "danger", - message: - "You can't assign a form to a campaign you don't own", - }); - break; - default: - add({ - type: "danger", - message: "There was an error", - }); - break; - } - } - } else { - const args: PostCampaignsFormsApiArg = { - body: { - name: values.formTitle, - // @ts-ignore - fields: fieldsToSend, - }, - }; - if (values.campaign?.value) - args.body.campaign = parseInt(values.campaign?.value); - const res = await createForm(args); - if (res && "data" in res) { - history.push( - `/backoffice/campaigns/preselection-forms/${res.data.id}` - ); - add({ type: "success", message: "Form saved" }); - } else { - const errorCode = - "error" in res && "data" in res.error - ? (res.error.data as { code: string }).code - : false; - switch (errorCode) { - case "CAMPAIGN_ID_ALREADY_ASSIGNED": - add({ - type: "danger", - message: "This campaign already has a form assigned", - }); - break; - case "NO_ACCESS_TO_CAMPAIGN": - add({ - type: "danger", - message: - "You can't assign a form to a campaign you don't own", - }); - break; - default: - add({ - type: "danger", - message: "There was an error", - }); - break; - } - } - } - - scrollToFormTitle(); - }} - > - - - - - - - {savedData.isLoading || savedData.isFetching ? ( - ...loading - ) : savedData.error || (id && !savedData.data) ? ( - ...error retrieving form - ) : ( - - )} - - - - - - - ); -}; - -function scrollToFormTitle() { - const selector = `[id="formTitle"]`; - const formTitleElement = document.querySelector(selector) as HTMLElement; - formTitleElement?.scrollIntoView({ - behavior: "smooth", - block: "center", - }); -} - -export default PreselectionForm; diff --git a/src/pages/campaigns/preselectionFormList/CopyLinkButton.tsx b/src/pages/preselectionForms/components/CopyLinkButton.tsx similarity index 100% rename from src/pages/campaigns/preselectionFormList/CopyLinkButton.tsx rename to src/pages/preselectionForms/components/CopyLinkButton.tsx diff --git a/src/pages/preselectionForms/components/FormProvider.tsx b/src/pages/preselectionForms/components/FormProvider.tsx new file mode 100644 index 00000000..8f51ed98 --- /dev/null +++ b/src/pages/preselectionForms/components/FormProvider.tsx @@ -0,0 +1,261 @@ +import { + GetCampaignsFormsByFormIdApiResponse, + PostCampaignsFormsApiArg, + PreselectionFormQuestion, + PutCampaignsFormsByFormIdApiArg, + usePostCampaignsFormsMutation, + usePutCampaignsFormsByFormIdMutation, +} from "src/services/tryberApi"; +import { getCustomQuestionTypeLabel } from "../functions/getCustomQuestionTypeLabel"; +import { getProfileTypeLabel } from "../functions/getProfileTypeLabel"; +import { v4 as uuidv4 } from "uuid"; +import * as Yup from "yup"; +import { ReactNode, useState } from "react"; +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"; + +interface FormProviderInterface { + savedData: GetCampaignsFormsByFormIdApiResponse; + isEdit: boolean; + cufList: ApiComponents["schemas"]["CustomUserFieldsData"][]; + children: ReactNode; +} + +const FormProvider = ({ + savedData, + isEdit, + cufList, + children, +}: FormProviderInterface) => { + const history = useHistory(); + const { add } = siteWideMessageStore(); + + const [createForm] = usePostCampaignsFormsMutation(); + const [saveEdit, setSaveEdit] = useState(false); + const { getAllOptions } = useCufData(); + const [editForm] = usePutCampaignsFormsByFormIdMutation(); + const initialFieldValue: (AdditionalField | CustomUserField)[] = []; + savedData?.fields.forEach((f) => { + switch (f.type) { + case "gender": + case "phone_number": + case "address": + case "text": + initialFieldValue.push({ + questionId: f.id, + fieldId: f.type, + question: f.question, + shortTitle: f.short_name, + type: f.type, + name: + f.type === "text" + ? `Custom ${getCustomQuestionTypeLabel(f.type)}` + : getProfileTypeLabel(f.type), + }); + break; + case "radio": + case "select": + case "multiselect": + initialFieldValue.push({ + questionId: f.id, + fieldId: uuidv4(), + question: f.question, + shortTitle: f.short_name, + type: f.type, + options: f.options?.map((o) => + typeof o === "string" ? o : o.toString() + ), + name: `Custom ${getCustomQuestionTypeLabel(f.type)}`, + }); + break; + default: + if (f.type.startsWith("cuf_")) { + const cufId = parseInt(f.type.replace("cuf_", "")); + const cufToAdd = cufList.find((cuf) => cuf.id === cufId); + const selectedOptions: { label: string; value: string }[] = []; + // @ts-ignore + if (cufToAdd?.options?.length === f.options?.length) { + selectedOptions.push({ label: "All options", value: "-1" }); + } else { + // @ts-ignore + f.options?.forEach((selected) => { + const opt = cufToAdd?.options?.find((all) => all.id === selected); + opt && + selectedOptions.push({ + label: opt.name, + value: opt.id.toString(), + }); + }); + } + initialFieldValue.push({ + questionId: f.id, + cufId, + cufType: cufToAdd?.type, + fieldId: f.type, + question: f.question, + shortTitle: f.short_name, + type: f.type, + name: `${cufToAdd?.name.it} - ${f.type}`, + availableOptions: cufToAdd?.options, + selectedOptions, + }); + } + } + }); + + const validationSchema = Yup.object({ + formTitle: Yup.string().required(), + fields: Yup.array().of( + Yup.object().shape({ + question: Yup.string().required("This is a required field"), + type: Yup.string().required(), + options: Yup.array().when("type", { + is: (type: string) => + type === "radio" || type === "select" || type === "multiselect", + then: Yup.array() + .of(Yup.string().required("This is a required field")) + .min(2, "This field must have at least 2 items"), + }), + }) + ), + }); + const initialValues: PreselectionFormValues = { + formTitle: savedData?.name || "", + fields: initialFieldValue, + campaign: savedData?.campaign + ? { + label: savedData?.campaign.name, + value: savedData?.campaign.id.toString(), + } + : { label: "", value: "" }, + }; + return ( + { + //refactor + const fieldsToSend = values.fields.map((field) => { + const newField: PreselectionFormQuestion & { id?: number } = { + ...(field.questionId ? { id: field.questionId } : {}), + question: field.question, + short_name: field.shortTitle, + type: field.type, + }; + if (field.options) { + // @ts-ignore + newField.options = field.options; + } + if ("selectedOptions" in field && field.selectedOptions) { + if (field.selectedOptions[0]?.value === "-1") { + getAllOptions(field.cufId).then((res) => { + newField.options = res; + }); + } else { + newField.options = field.selectedOptions.map((o) => + parseInt(o.value) + ); + } + } + return newField; + }); + if (isEdit) { + setSaveEdit(true); + const args: PutCampaignsFormsByFormIdApiArg = { + formId: savedData.id.toString(), + body: { + name: values.formTitle, + // @ts-ignore + fields: fieldsToSend, + }, + }; + if (values.campaign?.value) + args.body.campaign = parseInt(values.campaign?.value); + const res = await editForm(args); + if (res && "data" in res) { + history.push(`/backoffice/preselection-forms/${res.data.id}`); + add({ type: "success", message: "Form saved" }); + } else { + const errorCode = + "error" in res && "data" in res.error + ? (res.error.data as { code: string }).code + : false; + switch (errorCode) { + case "CAMPAIGN_ID_ALREADY_ASSIGNED": + add({ + type: "danger", + message: "This campaign already has a form assigned", + }); + break; + case "NO_ACCESS_TO_CAMPAIGN": + add({ + type: "danger", + message: + "You can't assign a form to a campaign you don't own", + }); + break; + default: + add({ + type: "danger", + message: "There was an error", + }); + break; + } + } + } else { + const args: PostCampaignsFormsApiArg = { + body: { + name: values.formTitle, + // @ts-ignore + fields: fieldsToSend, + }, + }; + if (values.campaign?.value) + args.body.campaign = parseInt(values.campaign?.value); + const res = await createForm(args); + if (res && "data" in res) { + history.push( + `/backoffice/campaigns/preselection-forms/${res.data.id}` + ); + add({ type: "success", message: "Form saved" }); + } else { + const errorCode = + "error" in res && "data" in res.error + ? (res.error.data as { code: string }).code + : false; + switch (errorCode) { + case "CAMPAIGN_ID_ALREADY_ASSIGNED": + add({ + type: "danger", + message: "This campaign already has a form assigned", + }); + break; + case "NO_ACCESS_TO_CAMPAIGN": + add({ + type: "danger", + message: + "You can't assign a form to a campaign you don't own", + }); + break; + default: + add({ + type: "danger", + message: "There was an error", + }); + break; + } + } + } + + scrollToFormTitle(); + }} + > +
{children}
+ + ); +}; + +export default FormProvider; diff --git a/src/pages/campaigns/preselectionForm/fieldsSelectors/CufSelectorCard.tsx b/src/pages/preselectionForms/components/fieldsSelectors/CufSelectorCard.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/fieldsSelectors/CufSelectorCard.tsx rename to src/pages/preselectionForms/components/fieldsSelectors/CufSelectorCard.tsx diff --git a/src/pages/campaigns/preselectionForm/fieldsSelectors/CustomQuestionCard.tsx b/src/pages/preselectionForms/components/fieldsSelectors/CustomQuestionCard.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/fieldsSelectors/CustomQuestionCard.tsx rename to src/pages/preselectionForms/components/fieldsSelectors/CustomQuestionCard.tsx diff --git a/src/pages/campaigns/preselectionForm/fieldsSelectors/ProfileFieldsSelectorCard.tsx b/src/pages/preselectionForms/components/fieldsSelectors/ProfileFieldsSelectorCard.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/fieldsSelectors/ProfileFieldsSelectorCard.tsx rename to src/pages/preselectionForms/components/fieldsSelectors/ProfileFieldsSelectorCard.tsx diff --git a/src/pages/campaigns/preselectionForm/fieldsSelectors/index.tsx b/src/pages/preselectionForms/components/fieldsSelectors/index.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/fieldsSelectors/index.tsx rename to src/pages/preselectionForms/components/fieldsSelectors/index.tsx diff --git a/src/pages/campaigns/preselectionForm/formConfigurator/CampaignSelect.tsx b/src/pages/preselectionForms/components/formConfigurator/CampaignSelect.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/formConfigurator/CampaignSelect.tsx rename to src/pages/preselectionForms/components/formConfigurator/CampaignSelect.tsx diff --git a/src/pages/campaigns/preselectionForm/formConfigurator/DropZone.tsx b/src/pages/preselectionForms/components/formConfigurator/DropZone.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/formConfigurator/DropZone.tsx rename to src/pages/preselectionForms/components/formConfigurator/DropZone.tsx diff --git a/src/pages/campaigns/preselectionForm/formConfigurator/OptionsField.tsx b/src/pages/preselectionForms/components/formConfigurator/OptionsField.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/formConfigurator/OptionsField.tsx rename to src/pages/preselectionForms/components/formConfigurator/OptionsField.tsx diff --git a/src/pages/campaigns/preselectionForm/formConfigurator/QuestionField.tsx b/src/pages/preselectionForms/components/formConfigurator/QuestionField.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/formConfigurator/QuestionField.tsx rename to src/pages/preselectionForms/components/formConfigurator/QuestionField.tsx diff --git a/src/pages/campaigns/preselectionForm/formConfigurator/ShortTitleField.tsx b/src/pages/preselectionForms/components/formConfigurator/ShortTitleField.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/formConfigurator/ShortTitleField.tsx rename to src/pages/preselectionForms/components/formConfigurator/ShortTitleField.tsx diff --git a/src/pages/campaigns/preselectionForm/formConfigurator/ValuesFieldsCard.tsx b/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/formConfigurator/ValuesFieldsCard.tsx rename to src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx diff --git a/src/pages/campaigns/preselectionForm/formConfigurator/index.tsx b/src/pages/preselectionForms/components/formConfigurator/index.tsx similarity index 100% rename from src/pages/campaigns/preselectionForm/formConfigurator/index.tsx rename to src/pages/preselectionForms/components/formConfigurator/index.tsx diff --git a/src/pages/campaigns/preselectionFormList/formTableCard/columns.ts b/src/pages/preselectionForms/components/formTableCard/columns.ts similarity index 100% rename from src/pages/campaigns/preselectionFormList/formTableCard/columns.ts rename to src/pages/preselectionForms/components/formTableCard/columns.ts diff --git a/src/pages/campaigns/preselectionFormList/formTableCard/formSearchCard.tsx b/src/pages/preselectionForms/components/formTableCard/formSearchCard.tsx similarity index 100% rename from src/pages/campaigns/preselectionFormList/formTableCard/formSearchCard.tsx rename to src/pages/preselectionForms/components/formTableCard/formSearchCard.tsx diff --git a/src/pages/campaigns/preselectionFormList/formTableCard/index.tsx b/src/pages/preselectionForms/components/formTableCard/index.tsx similarity index 100% rename from src/pages/campaigns/preselectionFormList/formTableCard/index.tsx rename to src/pages/preselectionForms/components/formTableCard/index.tsx diff --git a/src/pages/preselectionForms/edit/index.tsx b/src/pages/preselectionForms/edit/index.tsx new file mode 100644 index 00000000..cbe0671d --- /dev/null +++ b/src/pages/preselectionForms/edit/index.tsx @@ -0,0 +1,85 @@ +import { + BSCol, + BSGrid, + Card, + PageTitle, +} from "@appquality/appquality-design-system"; +import { useParams } from "react-router-dom"; +import { useEffect, useState } from "react"; +import { OpsUserContainer } from "src/features/AuthorizedOnlyContainer"; +import { FieldsSelectors } from "src/pages/preselectionForms/components/fieldsSelectors"; +import { FormConfigurator } from "src/pages/preselectionForms/components/formConfigurator"; + +import { + useGetCampaignsFormsByFormIdQuery, + useGetCustomUserFieldsQuery, +} from "src/services/tryberApi"; +import { useAppDispatch } from "src/store"; + +import { setLoadedForm } from "src/pages/preselectionForms/singleSlice"; +import { CopyLinkButton } from "src/pages/preselectionForms/components/CopyLinkButton"; +import { PageTemplate } from "src/features/PageTemplate"; +import FormProvider from "src/pages/preselectionForms/components/FormProvider"; + +const PreselectionForm = () => { + const dispatch = useAppDispatch(); + const [cufList, setCufList] = useState< + ApiComponents["schemas"]["CustomUserFieldsData"][] + >([]); + const { data: cufData } = useGetCustomUserFieldsQuery(); + const { id } = useParams<{ id: string }>(); + const { + data: formData, + isLoading, + isError, + isFetching, + } = useGetCampaignsFormsByFormIdQuery({ formId: id }, { skip: !id }); + + useEffect(() => { + const list: ApiComponents["schemas"]["CustomUserFieldsData"][] = []; + cufData?.forEach((d) => { + d.fields?.forEach((f) => list.push(f)); + }); + setCufList(list); + }, [cufData]); + + useEffect(() => { + if (formData) { + dispatch(setLoadedForm(formData)); + } + }, [dispatch, formData]); + return ( + + + + {id ? "Edit Preselection Form" : "New Preselection Form"} + + + {isLoading || isFetching || typeof formData === "undefined" ? ( + ...loading + ) : isError ? ( + ...error retrieving form + ) : ( + + + + + + + + + + + )} + + + ); +}; + +export default PreselectionForm; diff --git a/src/pages/campaigns/preselectionForm/getCustomQuestionTypeLabel.ts b/src/pages/preselectionForms/functions/getCustomQuestionTypeLabel.ts similarity index 100% rename from src/pages/campaigns/preselectionForm/getCustomQuestionTypeLabel.ts rename to src/pages/preselectionForms/functions/getCustomQuestionTypeLabel.ts diff --git a/src/pages/campaigns/preselectionForm/getProfileTypeLabel.ts b/src/pages/preselectionForms/functions/getProfileTypeLabel.ts similarity index 100% rename from src/pages/campaigns/preselectionForm/getProfileTypeLabel.ts rename to src/pages/preselectionForms/functions/getProfileTypeLabel.ts diff --git a/src/pages/preselectionForms/functions/scrollToFormTitle.tsx b/src/pages/preselectionForms/functions/scrollToFormTitle.tsx new file mode 100644 index 00000000..53c32ee0 --- /dev/null +++ b/src/pages/preselectionForms/functions/scrollToFormTitle.tsx @@ -0,0 +1,8 @@ +function scrollToFormTitle() { + const selector = `[id="formTitle"]`; + const formTitleElement = document.querySelector(selector) as HTMLElement; + formTitleElement?.scrollIntoView({ + behavior: "smooth", + block: "center", + }); +} diff --git a/src/pages/campaigns/preselectionForm/useCufData.ts b/src/pages/preselectionForms/hooks/useCufData.ts similarity index 100% rename from src/pages/campaigns/preselectionForm/useCufData.ts rename to src/pages/preselectionForms/hooks/useCufData.ts diff --git a/src/pages/campaigns/preselectionFormList/index.tsx b/src/pages/preselectionForms/index.tsx similarity index 86% rename from src/pages/campaigns/preselectionFormList/index.tsx rename to src/pages/preselectionForms/index.tsx index 0e95de9d..3c92d00f 100644 --- a/src/pages/campaigns/preselectionFormList/index.tsx +++ b/src/pages/preselectionForms/index.tsx @@ -1,6 +1,6 @@ import { BSCol, BSGrid, Button } from "@appquality/appquality-design-system"; -import { OpsUserContainer } from "../../../features/AuthorizedOnlyContainer"; -import { FormTableCard } from "./formTableCard"; +import { OpsUserContainer } from "../../features/AuthorizedOnlyContainer"; +import { FormTableCard } from "./components/formTableCard"; import { PageTitle } from "@appquality/appquality-design-system"; import { PageTemplate } from "src/features/PageTemplate"; diff --git a/src/pages/campaigns/preselectionFormList/preselectionListSlice.ts b/src/pages/preselectionForms/listSlice.ts similarity index 100% rename from src/pages/campaigns/preselectionFormList/preselectionListSlice.ts rename to src/pages/preselectionForms/listSlice.ts diff --git a/src/pages/preselectionForms/new/index.tsx b/src/pages/preselectionForms/new/index.tsx new file mode 100644 index 00000000..f9b95193 --- /dev/null +++ b/src/pages/preselectionForms/new/index.tsx @@ -0,0 +1,100 @@ +import { + BSCol, + BSGrid, + Card, + PageTitle, +} from "@appquality/appquality-design-system"; +import { useParams, useHistory } from "react-router-dom"; +import { useEffect, useState } from "react"; +import { OpsUserContainer } from "src/features/AuthorizedOnlyContainer"; +import { FieldsSelectors } from "src/pages/campaigns/preselectionForm/fieldsSelectors"; +import { FormConfigurator } from "src/pages/campaigns/preselectionForm/formConfigurator"; +import * as Yup from "yup"; +import { + PostCampaignsFormsApiArg, + PreselectionFormQuestion, + PutCampaignsFormsByFormIdApiArg, + useGetCampaignsFormsByFormIdQuery, + useGetCustomUserFieldsQuery, + usePostCampaignsFormsMutation, + usePutCampaignsFormsByFormIdMutation, +} from "src/services/tryberApi"; +import useCufData from "src/pages/campaigns/preselectionForm/useCufData"; +import { useAppDispatch } from "src/store"; +import siteWideMessageStore from "src/redux/siteWideMessages"; + +import { setLoadedForm } from "./preselectionSlice"; +import { v4 as uuidv4 } from "uuid"; +import { getCustomQuestionTypeLabel } from "./getCustomQuestionTypeLabel"; +import { CopyLinkButton } from "src/pages/preselectionForms/CopyLinkButton"; +import { getProfileTypeLabel } from "./getProfileTypeLabel"; +import { PageTemplate } from "src/features/PageTemplate"; +import FormProvider from "src/pages/preselectionForms/components/FormProvider"; + +const PreselectionForm = () => { + const history = useHistory(); + const { add } = siteWideMessageStore(); + + const [createForm] = usePostCampaignsFormsMutation(); + const [editForm] = usePutCampaignsFormsByFormIdMutation(); + const { getAllOptions } = useCufData(); + const { id } = useParams<{ id: string }>(); + const dispatch = useAppDispatch(); + const { data } = useGetCustomUserFieldsQuery(); + const savedData = useGetCampaignsFormsByFormIdQuery( + { formId: id }, + { skip: !id } + ); + const [cufList, setCufList] = useState< + ApiComponents["schemas"]["CustomUserFieldsData"][] + >([]); + const [saveEdit, setSaveEdit] = useState(false); + + useEffect(() => { + const list: ApiComponents["schemas"]["CustomUserFieldsData"][] = []; + data?.forEach((d) => { + d.fields?.forEach((f) => list.push(f)); + }); + setCufList(list); + }, [data]); + + useEffect(() => { + if (savedData?.data) { + dispatch(setLoadedForm(savedData.data)); + } + }, [savedData]); + return ( + + + + {id ? "Edit Preselection Form" : "New Preselection Form"} + + + + + + + + + {savedData.isLoading || savedData.isFetching ? ( + ...loading + ) : savedData.error || (id && !savedData.data) ? ( + ...error retrieving form + ) : ( + + )} + + + + + + ); +}; + +export default PreselectionForm; diff --git a/src/pages/campaigns/preselectionForm/preselectionSlice.ts b/src/pages/preselectionForms/singleSlice.ts similarity index 97% rename from src/pages/campaigns/preselectionForm/preselectionSlice.ts rename to src/pages/preselectionForms/singleSlice.ts index d036eff3..75b590af 100644 --- a/src/pages/campaigns/preselectionForm/preselectionSlice.ts +++ b/src/pages/preselectionForms/singleSlice.ts @@ -1,6 +1,6 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { v4 as uuidv4 } from "uuid"; -import { GetCampaignsFormsByFormIdApiResponse } from "../../../services/tryberApi"; +import { GetCampaignsFormsByFormIdApiResponse } from "../../services/tryberApi"; interface PreselectionFormState { profileFieldsList: ProfileField[]; diff --git a/src/pages/campaigns/preselectionForm/types.d.ts b/src/pages/preselectionForms/types.d.ts similarity index 100% rename from src/pages/campaigns/preselectionForm/types.d.ts rename to src/pages/preselectionForms/types.d.ts diff --git a/src/store.ts b/src/store.ts index fd406bdd..9f5541ac 100644 --- a/src/store.ts +++ b/src/store.ts @@ -4,7 +4,7 @@ import oldReducers from "src/redux/reducer"; import { combineReducers } from "redux"; import jotformReducer from "src/pages/Jotform/jotformSlice"; import campaignPreselectionReducer from "src/pages/campaigns/preselectionForm/preselectionSlice"; -import campaignPreselectionListReducer from "src/pages/campaigns/preselectionFormList/preselectionListSlice"; +import campaignPreselectionListReducer from "src/pages/preselectionForms/preselectionListSlice"; import selectionReducer from "src/pages/campaigns/selection/selectionSlice"; import uxDashboardReducer from "src/pages/UxDashboard/uxDashboardSlice"; import { useDispatch, useSelector } from "react-redux"; From 7c10db1ed53b17bc7a5ca7c0f2c7d1bce5d664af Mon Sep 17 00:00:00 2001 From: Kariamos Date: Tue, 25 Jun 2024 10:02:05 +0200 Subject: [PATCH 10/21] wip: refactor preselection form page --- .../components/FormProvider.tsx | 4 +- .../fieldsSelectors/CustomQuestionCard.tsx | 2 +- .../components/fieldsSelectors/index.tsx | 6 +- .../formConfigurator/ValuesFieldsCard.tsx | 4 +- .../components/formConfigurator/index.tsx | 2 +- .../formTableCard/formSearchCard.tsx | 2 +- .../components/formTableCard/index.tsx | 2 +- src/pages/preselectionForms/new/index.tsx | 60 +++---------------- src/store.ts | 4 +- 9 files changed, 21 insertions(+), 65 deletions(-) diff --git a/src/pages/preselectionForms/components/FormProvider.tsx b/src/pages/preselectionForms/components/FormProvider.tsx index 8f51ed98..6ace24ad 100644 --- a/src/pages/preselectionForms/components/FormProvider.tsx +++ b/src/pages/preselectionForms/components/FormProvider.tsx @@ -17,7 +17,7 @@ import { useHistory } from "react-router-dom"; import siteWideMessageStore from "src/redux/siteWideMessages"; interface FormProviderInterface { - savedData: GetCampaignsFormsByFormIdApiResponse; + savedData?: GetCampaignsFormsByFormIdApiResponse; isEdit: boolean; cufList: ApiComponents["schemas"]["CustomUserFieldsData"][]; children: ReactNode; @@ -165,7 +165,7 @@ const FormProvider = ({ if (isEdit) { setSaveEdit(true); const args: PutCampaignsFormsByFormIdApiArg = { - formId: savedData.id.toString(), + formId: savedData ? savedData?.id.toString() : "", body: { name: values.formTitle, // @ts-ignore diff --git a/src/pages/preselectionForms/components/fieldsSelectors/CustomQuestionCard.tsx b/src/pages/preselectionForms/components/fieldsSelectors/CustomQuestionCard.tsx index 6c0b1ab9..c2e55291 100644 --- a/src/pages/preselectionForms/components/fieldsSelectors/CustomQuestionCard.tsx +++ b/src/pages/preselectionForms/components/fieldsSelectors/CustomQuestionCard.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { Button, Card, Radio } from "@appquality/appquality-design-system"; import { v4 as uuidv4 } from "uuid"; -import { getCustomQuestionTypeLabel } from "../getCustomQuestionTypeLabel"; +import { getCustomQuestionTypeLabel } from "src/pages/preselectionForms/functions/getCustomQuestionTypeLabel"; export const CustomQuestionCard: React.FC<{ add: (field: AdditionalField) => void; diff --git a/src/pages/preselectionForms/components/fieldsSelectors/index.tsx b/src/pages/preselectionForms/components/fieldsSelectors/index.tsx index 449b0663..511a1bc6 100644 --- a/src/pages/preselectionForms/components/fieldsSelectors/index.tsx +++ b/src/pages/preselectionForms/components/fieldsSelectors/index.tsx @@ -1,6 +1,6 @@ -import { ProfileFieldsSelectorCard } from "src/pages/campaigns/preselectionForm/fieldsSelectors/ProfileFieldsSelectorCard"; -import { CufSelectorCard } from "src/pages/campaigns/preselectionForm/fieldsSelectors/CufSelectorCard"; -import { CustomQuestionCard } from "src/pages/campaigns/preselectionForm/fieldsSelectors/CustomQuestionCard"; +import { ProfileFieldsSelectorCard } from "src/pages/preselectionForms/components/fieldsSelectors/ProfileFieldsSelectorCard"; +import { CufSelectorCard } from "src/pages/preselectionForms/components/fieldsSelectors/CufSelectorCard"; +import { CustomQuestionCard } from "src/pages/preselectionForms/components/fieldsSelectors/CustomQuestionCard"; import { FieldArray } from "formik"; export const FieldsSelectors = () => { diff --git a/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx b/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx index 174259d2..7ba159c6 100644 --- a/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx +++ b/src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard.tsx @@ -1,5 +1,5 @@ import { FC, useEffect } from "react"; -import { OptionsField } from "src/pages/campaigns/preselectionForm/formConfigurator/OptionsField"; +import { OptionsField } from "src/pages/preselectionForms/components/formConfigurator/OptionsField"; import { CufMultiselect } from "src/pages/Jotform/CufConfigurator/CufMultiselect"; import { aqBootstrapTheme, @@ -8,7 +8,7 @@ import { TextareaField, } from "@appquality/appquality-design-system"; import { useDrag } from "react-dnd"; -import { DropZone } from "src/pages/campaigns/preselectionForm/formConfigurator/DropZone"; +import { DropZone } from "src/pages/preselectionForms/components/formConfigurator/DropZone"; import { XLg, GripVertical } from "react-bootstrap-icons"; import { ShortTitleField } from "./ShortTitleField"; import styled from "styled-components"; diff --git a/src/pages/preselectionForms/components/formConfigurator/index.tsx b/src/pages/preselectionForms/components/formConfigurator/index.tsx index 423a9e5b..34d794ce 100644 --- a/src/pages/preselectionForms/components/formConfigurator/index.tsx +++ b/src/pages/preselectionForms/components/formConfigurator/index.tsx @@ -2,7 +2,7 @@ import { Field, Button } from "@appquality/appquality-design-system"; import { FieldArray, useFormikContext } from "formik"; import { DndProvider, useDragLayer } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; -import { ValuesFieldsCard } from "src/pages/campaigns/preselectionForm/formConfigurator/ValuesFieldsCard"; +import { ValuesFieldsCard } from "src/pages/preselectionForms/components/formConfigurator/ValuesFieldsCard"; import { CampaignSelect } from "./CampaignSelect"; export const FormConfigurator = () => { diff --git a/src/pages/preselectionForms/components/formTableCard/formSearchCard.tsx b/src/pages/preselectionForms/components/formTableCard/formSearchCard.tsx index 4912241d..4939710a 100644 --- a/src/pages/preselectionForms/components/formTableCard/formSearchCard.tsx +++ b/src/pages/preselectionForms/components/formTableCard/formSearchCard.tsx @@ -2,7 +2,7 @@ import { Input } from "@appquality/appquality-design-system"; import { useEffect, useState } from "react"; import useDebounce from "src/hooks/useDebounce"; import { useAppDispatch } from "src/store"; -import { setSearch } from "../preselectionListSlice"; +import { setSearch } from "src/pages/preselectionForms/listSlice"; export const FormSearchCard = () => { const dispatch = useAppDispatch(); diff --git a/src/pages/preselectionForms/components/formTableCard/index.tsx b/src/pages/preselectionForms/components/formTableCard/index.tsx index 095212ee..cb81e986 100644 --- a/src/pages/preselectionForms/components/formTableCard/index.tsx +++ b/src/pages/preselectionForms/components/formTableCard/index.tsx @@ -9,7 +9,7 @@ import { PencilSquare } from "react-bootstrap-icons"; import { useHistory } from "react-router-dom"; import { useGetCampaignsFormsQuery } from "src/services/tryberApi"; import { useAppDispatch, useAppSelector } from "src/store"; -import { resetList } from "../preselectionListSlice"; +import { resetList } from "src/pages/preselectionForms/listSlice"; import Columns from "./columns"; import { FormSearchCard } from "./formSearchCard"; import { addMessage } from "src/redux/siteWideMessages/actionCreators"; diff --git a/src/pages/preselectionForms/new/index.tsx b/src/pages/preselectionForms/new/index.tsx index f9b95193..951c8fe6 100644 --- a/src/pages/preselectionForms/new/index.tsx +++ b/src/pages/preselectionForms/new/index.tsx @@ -1,54 +1,21 @@ -import { - BSCol, - BSGrid, - Card, - PageTitle, -} from "@appquality/appquality-design-system"; -import { useParams, useHistory } from "react-router-dom"; +import { BSCol, BSGrid, PageTitle } from "@appquality/appquality-design-system"; +import { useParams } from "react-router-dom"; import { useEffect, useState } from "react"; import { OpsUserContainer } from "src/features/AuthorizedOnlyContainer"; -import { FieldsSelectors } from "src/pages/campaigns/preselectionForm/fieldsSelectors"; -import { FormConfigurator } from "src/pages/campaigns/preselectionForm/formConfigurator"; -import * as Yup from "yup"; -import { - PostCampaignsFormsApiArg, - PreselectionFormQuestion, - PutCampaignsFormsByFormIdApiArg, - useGetCampaignsFormsByFormIdQuery, - useGetCustomUserFieldsQuery, - usePostCampaignsFormsMutation, - usePutCampaignsFormsByFormIdMutation, -} from "src/services/tryberApi"; -import useCufData from "src/pages/campaigns/preselectionForm/useCufData"; -import { useAppDispatch } from "src/store"; -import siteWideMessageStore from "src/redux/siteWideMessages"; +import { FieldsSelectors } from "src/pages/preselectionForms/components/fieldsSelectors"; +import { FormConfigurator } from "src/pages/preselectionForms/components/formConfigurator"; +import { useGetCustomUserFieldsQuery } from "src/services/tryberApi"; -import { setLoadedForm } from "./preselectionSlice"; -import { v4 as uuidv4 } from "uuid"; -import { getCustomQuestionTypeLabel } from "./getCustomQuestionTypeLabel"; -import { CopyLinkButton } from "src/pages/preselectionForms/CopyLinkButton"; -import { getProfileTypeLabel } from "./getProfileTypeLabel"; +import { CopyLinkButton } from "src/pages/preselectionForms/components/CopyLinkButton"; import { PageTemplate } from "src/features/PageTemplate"; import FormProvider from "src/pages/preselectionForms/components/FormProvider"; const PreselectionForm = () => { - const history = useHistory(); - const { add } = siteWideMessageStore(); - - const [createForm] = usePostCampaignsFormsMutation(); - const [editForm] = usePutCampaignsFormsByFormIdMutation(); - const { getAllOptions } = useCufData(); const { id } = useParams<{ id: string }>(); - const dispatch = useAppDispatch(); const { data } = useGetCustomUserFieldsQuery(); - const savedData = useGetCampaignsFormsByFormIdQuery( - { formId: id }, - { skip: !id } - ); const [cufList, setCufList] = useState< ApiComponents["schemas"]["CustomUserFieldsData"][] >([]); - const [saveEdit, setSaveEdit] = useState(false); useEffect(() => { const list: ApiComponents["schemas"]["CustomUserFieldsData"][] = []; @@ -58,11 +25,6 @@ const PreselectionForm = () => { setCufList(list); }, [data]); - useEffect(() => { - if (savedData?.data) { - dispatch(setLoadedForm(savedData.data)); - } - }, [savedData]); return ( @@ -76,19 +38,13 @@ const PreselectionForm = () => { {id ? "Edit Preselection Form" : "New Preselection Form"} - + - {savedData.isLoading || savedData.isFetching ? ( - ...loading - ) : savedData.error || (id && !savedData.data) ? ( - ...error retrieving form - ) : ( - - )} + diff --git a/src/store.ts b/src/store.ts index 9f5541ac..137f2467 100644 --- a/src/store.ts +++ b/src/store.ts @@ -3,8 +3,8 @@ 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/campaigns/preselectionForm/preselectionSlice"; -import campaignPreselectionListReducer from "src/pages/preselectionForms/preselectionListSlice"; +import campaignPreselectionReducer from "src/pages/preselectionForms/singleSlice"; +import campaignPreselectionListReducer from "src/pages/preselectionForms/listSlice"; import selectionReducer from "src/pages/campaigns/selection/selectionSlice"; import uxDashboardReducer from "src/pages/UxDashboard/uxDashboardSlice"; import { useDispatch, useSelector } from "react-redux"; From 5b5f7450ada241074332a81829f33cfa97a17570 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Tue, 25 Jun 2024 11:30:46 +0200 Subject: [PATCH 11/21] refactor: remove unused code --- .../CufConfigurator/CufConfigurator.tsx | 61 --------------- .../CufConfigurator/CufConfiguratorCard.tsx | 51 ------------ .../CufConfigurator/CufMultiselect.tsx | 78 ------------------- .../Jotform/CufConfigurator/CufTextField.tsx | 43 ---------- .../Jotform/CufConfigurator/FocusError.tsx | 43 ---------- .../Jotform/CufConfigurator/FormTitleCard.tsx | 10 --- .../sortArrayOfObjectsByField.ts | 6 -- .../CufConfigurator/useSubmitValues.ts | 75 ------------------ src/pages/Jotform/CufListCard.tsx | 42 ---------- src/pages/Jotform/JotformSuccessCard.tsx | 63 --------------- src/pages/Jotform/index.tsx | 46 ----------- src/pages/Jotform/jotformSlice.ts | 36 --------- src/pages/Jotform/types.d.ts | 15 ---- src/pages/Jotform/useCufData.ts | 12 --- src/pages/Jotform/useUserData.ts | 15 ---- 15 files changed, 596 deletions(-) delete mode 100644 src/pages/Jotform/CufConfigurator/CufConfigurator.tsx delete mode 100644 src/pages/Jotform/CufConfigurator/CufConfiguratorCard.tsx delete mode 100644 src/pages/Jotform/CufConfigurator/CufMultiselect.tsx delete mode 100644 src/pages/Jotform/CufConfigurator/CufTextField.tsx delete mode 100644 src/pages/Jotform/CufConfigurator/FocusError.tsx delete mode 100644 src/pages/Jotform/CufConfigurator/FormTitleCard.tsx delete mode 100644 src/pages/Jotform/CufConfigurator/sortArrayOfObjectsByField.ts delete mode 100644 src/pages/Jotform/CufConfigurator/useSubmitValues.ts delete mode 100644 src/pages/Jotform/CufListCard.tsx delete mode 100644 src/pages/Jotform/JotformSuccessCard.tsx delete mode 100644 src/pages/Jotform/index.tsx delete mode 100644 src/pages/Jotform/jotformSlice.ts delete mode 100644 src/pages/Jotform/types.d.ts delete mode 100644 src/pages/Jotform/useCufData.ts delete mode 100644 src/pages/Jotform/useUserData.ts diff --git a/src/pages/Jotform/CufConfigurator/CufConfigurator.tsx b/src/pages/Jotform/CufConfigurator/CufConfigurator.tsx deleted file mode 100644 index de9cbfb1..00000000 --- a/src/pages/Jotform/CufConfigurator/CufConfigurator.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Button, Form, Formik } from "@appquality/appquality-design-system"; -import { useAppSelector } from "src/store"; -import { CufConfiguratorCard } from "./CufConfiguratorCard"; -import { FormikProps } from "formik"; -import * as yup from "yup"; -import FocusError from "./FocusError"; -import { FormTitleCard } from "./FormTitleCard"; -import { useSubmitValues } from "./useSubmitValues"; - -const initialJotformValues: JotformValues = { - formTitle: "", - additional: {}, -}; - -export const CufConfigurator = () => { - const { list, fields } = useAppSelector((state) => state.jotform); - - fields.forEach( - (f) => - (initialJotformValues.additional[f.fieldData.id] = { - cufId: f.fieldData.id, - title: "", - type: f.fieldData.type, - ...(f.fieldData.options ? { options: [] } : undefined), - }) - ); - - const validationSchema = { - additional: yup.object(), - }; - - const { submitValues } = useSubmitValues(); - - return ( - - {(formikProps: FormikProps) => { - return ( -
- - - - - - ); - }} -
- ); -}; diff --git a/src/pages/Jotform/CufConfigurator/CufConfiguratorCard.tsx b/src/pages/Jotform/CufConfigurator/CufConfiguratorCard.tsx deleted file mode 100644 index 13e18811..00000000 --- a/src/pages/Jotform/CufConfigurator/CufConfiguratorCard.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Card, Text } from "@appquality/appquality-design-system"; -import { useEffect } from "react"; -import { useAppDispatch, useAppSelector } from "src/store"; -import { setList } from "../jotformSlice"; -import { CufMultiselect } from "./CufMultiselect"; -import { CufTextField } from "./CufTextField"; - -export const CufConfiguratorCard = () => { - const dispatch = useAppDispatch(); - const { fields, list } = useAppSelector((state) => state.jotform); - - useEffect(() => { - fields?.some((f) => { - const index = list.findIndex((element) => element.id === f.fieldData.id); - if (f.checked && index === -1) { - dispatch(setList([...list, f.fieldData])); - return true; - } else { - if (!f.checked && index !== -1) { - const newElements = [...list]; - newElements.splice(index, 1); - dispatch(setList(newElements)); - return true; - } - } - return undefined; - }); - }, [fields]); - - return ( - - {list?.map((e, i) => ( -
- - {e.name.it} - - - {e.options && ( - { - return { value: o.id.toString(), label: o.name }; - })} - /> - )} -
- ))} - - ); -}; diff --git a/src/pages/Jotform/CufConfigurator/CufMultiselect.tsx b/src/pages/Jotform/CufConfigurator/CufMultiselect.tsx deleted file mode 100644 index 4fe8b0a4..00000000 --- a/src/pages/Jotform/CufConfigurator/CufMultiselect.tsx +++ /dev/null @@ -1,78 +0,0 @@ -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 ( -
- { - if (!value || !value.length) { - return "This is a required field"; - } - }} - > - {({ - field, // { name, value, onChange, onBlur } - form, - }: FieldProps) => { - return ( - - -
- - - ); - }} - - ); -}; diff --git a/src/pages/Jotform/CufConfigurator/FocusError.tsx b/src/pages/Jotform/CufConfigurator/FocusError.tsx deleted file mode 100644 index 0d371c0e..00000000 --- a/src/pages/Jotform/CufConfigurator/FocusError.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { useEffect } from "react"; -import { useFormikContext } from "formik"; -import { useAppSelector } from "src/store"; - -const FocusError = () => { - const { errors, isSubmitting, isValidating } = useFormikContext(); - const { list } = useAppSelector((state) => state.jotform); - - useEffect(() => { - if (isSubmitting && !isValidating) { - let keys = Object.keys(errors); - if (keys.length > 0) { - keys = keys.filter((k) => k !== "additional"); - const e = errors as any; - if (e.additional) { - const additionalKeys = Object.keys(e.additional); - let subKeys: string[] = []; - list.forEach((l) => { - additionalKeys.forEach((a) => { - if (a === l.id.toString()) { - if (!!e.additional[a]?.title) - subKeys.push(`additional.${a}.title`); - else if (!!e.additional[a]?.options) - subKeys.push(`additional.${a}.options`); - } - }); - }); - keys = keys.concat(subKeys); - } - const selector = `[id="${keys[0]}"]`; - const errorElement = document.querySelector(selector) as HTMLElement; - if (errorElement) { - errorElement.scrollIntoView({ behavior: "smooth", block: "center" }); - errorElement.focus({ preventScroll: true }); - } - } - } - }, [errors, isSubmitting, isValidating]); - - return null; -}; - -export default FocusError; diff --git a/src/pages/Jotform/CufConfigurator/FormTitleCard.tsx b/src/pages/Jotform/CufConfigurator/FormTitleCard.tsx deleted file mode 100644 index 4b2863ca..00000000 --- a/src/pages/Jotform/CufConfigurator/FormTitleCard.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Card } from "@appquality/appquality-design-system"; -import { CufTextField } from "./CufTextField"; - -export const FormTitleCard = () => { - return ( - - - - ); -}; diff --git a/src/pages/Jotform/CufConfigurator/sortArrayOfObjectsByField.ts b/src/pages/Jotform/CufConfigurator/sortArrayOfObjectsByField.ts deleted file mode 100644 index ef301728..00000000 --- a/src/pages/Jotform/CufConfigurator/sortArrayOfObjectsByField.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const sortArrayOfObjectsByField = (field: string, array?: any[]) => { - const newArray = array && [...array]; - return newArray?.sort((a, b) => - a[field] > b[field] ? 1 : b[field] > a[field] ? -1 : 0 - ); -}; diff --git a/src/pages/Jotform/CufConfigurator/useSubmitValues.ts b/src/pages/Jotform/CufConfigurator/useSubmitValues.ts deleted file mode 100644 index 270e03a7..00000000 --- a/src/pages/Jotform/CufConfigurator/useSubmitValues.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { FormikHelpers } from "formik"; -import { useAppDispatch, useAppSelector } from "src/store"; -import { setUrl } from "src/pages/Jotform/jotformSlice"; -import { addMessage } from "src/redux/siteWideMessages/actionCreators"; -import { sortArrayOfObjectsByField } from "./sortArrayOfObjectsByField"; - -export const useSubmitValues = () => { - const dispatch = useAppDispatch(); - const { list } = useAppSelector((state) => state.jotform); - const submitValues = async ( - values: JotformValues, - helpers: FormikHelpers - ) => { - helpers.setSubmitting(true); - let toBeSendValues: FormElement[] = []; - const keys = Object.keys(values.additional); - list.forEach((l) => { - keys.forEach((k) => { - if (values.additional[k].cufId === l.id) { - const selectedOptions = values.additional[k].options?.some( - (o: any) => o.value === "-1" - ) - ? l.options - : values.additional[k].options?.map((o: any) => ({ - id: o.value, - name: o.label, - })); - const sortedOptions = sortArrayOfObjectsByField( - "name", - selectedOptions - ); - toBeSendValues.push({ - ...values.additional[k], - ...(sortedOptions ? { options: sortedOptions } : undefined), - }); - } - }); - }); - try { - const response = await fetch(`${process.env.REACT_APP_POST_JOTFORM}`, { - body: JSON.stringify({ - title: values.formTitle, - questions: toBeSendValues, - }), - method: "POST", - }); - const body = await response.json(); - if (body.error) throw new Error(body.message); - dispatch(setUrl(body.url)); - } catch (err) { - if (err instanceof Error) { - if (err.message === "TOO_LONG_REQUEST: Failed to create form.") { - dispatch( - addMessage( - "You have selected too many questions or options. Remove some and try again.", - "danger", - false - ) - ); - } else dispatch(addMessage(err.message, "danger", false)); - } else { - dispatch( - addMessage( - "Unexpected error: see console for more info", - "danger", - false - ) - ); - console.error(err); - } - } - helpers.setSubmitting(false); - }; - return { submitValues }; -}; diff --git a/src/pages/Jotform/CufListCard.tsx b/src/pages/Jotform/CufListCard.tsx deleted file mode 100644 index 13ded034..00000000 --- a/src/pages/Jotform/CufListCard.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Card, Checkbox } from "@appquality/appquality-design-system"; -import { useEffect } from "react"; -import { useAppDispatch, useAppSelector } from "src/store"; -import { setFields } from "./jotformSlice"; -import useCufData from "./useCufData"; - -export const CufListCard = () => { - const dispatch = useAppDispatch(); - const { data } = useCufData(); - - const { fields } = useAppSelector((state) => state.jotform); - - useEffect(() => { - const list: CufField[] = []; - data?.forEach((d) => { - d.fields?.forEach((f) => list.push({ checked: false, fieldData: f })); - }); - dispatch(setFields(list)); - }, [data]); - - return ( - - {fields.map((f, i) => ( - { - const newFields = [...fields]; - newFields[i] = { - checked: !f.checked, - fieldData: f.fieldData, - }; - dispatch(setFields(newFields)); - }} - className="aq-mb-2" - /> - ))} - - ); -}; diff --git a/src/pages/Jotform/JotformSuccessCard.tsx b/src/pages/Jotform/JotformSuccessCard.tsx deleted file mode 100644 index 78c0c80e..00000000 --- a/src/pages/Jotform/JotformSuccessCard.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { - aqBootstrapTheme, - Button, - Card, - CSSGrid, - Text, -} from "@appquality/appquality-design-system"; -import { useAppDispatch } from "src/store"; -import { resetJotform } from "src/pages/Jotform/jotformSlice"; - -export const JotformSuccessCard = ({ url }: { url: string }) => { - const dispatch = useAppDispatch(); - const getFormBuilderUrl = () => { - const editUrl = url.split("/"); - editUrl.splice(3, 0, "build"); - return editUrl.join("/"); - }; - const onCreateNewForm = () => { - dispatch(resetJotform()); - }; - return ( - -
- - Copy and paste the following link to share the form with trybers, -
- NEVER forget - {` the last part (testerId={Extra.crypted_id}) or - you won't be able to associate the submission to the user`} - - - {url} - -
- - - - - - - ); -}; diff --git a/src/pages/Jotform/index.tsx b/src/pages/Jotform/index.tsx deleted file mode 100644 index 1f0aea4b..00000000 --- a/src/pages/Jotform/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { BSCol, BSGrid } from "@appquality/appquality-design-system"; -import styled from "styled-components"; -import { CufConfigurator } from "./CufConfigurator/CufConfigurator"; -import { CufListCard } from "./CufListCard"; -import { useAppSelector } from "src/store"; -import { JotformSuccessCard } from "src/pages/Jotform/JotformSuccessCard"; -import { OpsUserContainer } from "src/features/AuthorizedOnlyContainer"; -import { PageTemplate } from "src/features/PageTemplate"; - -const StickyContainer = styled.div` - @media (min-width: ${(p) => p.theme.grid.breakpoints.lg}) { - position: sticky; - top: 16px; - } -`; - -export default function Jotform() { - const { url } = useAppSelector((state) => state.jotform); - return ( - - - - {url ? ( - <> - - - - - - ) : ( - <> - - - - - - - - - - )} - - - - ); -} diff --git a/src/pages/Jotform/jotformSlice.ts b/src/pages/Jotform/jotformSlice.ts deleted file mode 100644 index 2be4116b..00000000 --- a/src/pages/Jotform/jotformSlice.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { createSlice, PayloadAction } from "@reduxjs/toolkit"; -import { CustomUserFieldsData } from "src/services/tryberApi"; - -interface JotformState { - fields: CufField[]; - list: CustomUserFieldsData[]; - url?: string; -} - -const initialState: JotformState = { - fields: [], - list: [], -}; - -const jotformSlice = createSlice({ - name: "jotform", - initialState: initialState, - reducers: { - setFields(state, action: PayloadAction) { - state.fields = action.payload; - }, - setList(state, action: PayloadAction) { - state.list = action.payload; - }, - setUrl(state, action: PayloadAction) { - state.url = action.payload; - }, - resetJotform() { - return initialState; - }, - }, -}); - -const { actions, reducer } = jotformSlice; -export const { setFields, setList, setUrl, resetJotform } = actions; -export default reducer; diff --git a/src/pages/Jotform/types.d.ts b/src/pages/Jotform/types.d.ts deleted file mode 100644 index a9197a91..00000000 --- a/src/pages/Jotform/types.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -type JotformValues = { - formTitle: string; - additional: { [key: string]: any }; -}; -interface CufField { - fieldData: ApiComponents["schemas"]["CustomUserFieldsData"]; - checked: boolean; -} - -interface FormElement { - cufId: number; - title: string; - type: "select" | "multiselect" | "text"; - options?: ApiComponents["schemas"]["CustomUserFieldsDataOption"][]; -} diff --git a/src/pages/Jotform/useCufData.ts b/src/pages/Jotform/useCufData.ts deleted file mode 100644 index 2c22d41d..00000000 --- a/src/pages/Jotform/useCufData.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useGetCustomUserFieldsQuery } from "src/services/tryberApi"; - -const useCufData = () => { - const { data, error, isFetching } = useGetCustomUserFieldsQuery(); - return { - data, - isError: error || !data, - isFetching: isFetching, - }; -}; - -export default useCufData; diff --git a/src/pages/Jotform/useUserData.ts b/src/pages/Jotform/useUserData.ts deleted file mode 100644 index 50528396..00000000 --- a/src/pages/Jotform/useUserData.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { useGetUsersMeQuery } from "src/services/tryberApi"; - -const useUserData = () => { - const { data, error, isFetching, isLoading } = useGetUsersMeQuery({ - fields: "role", - }); - return { - data, - isLoading, - isError: error || !data, - isFetching, - }; -}; - -export default useUserData; From 722bb8777aac4a9936d4e1c0ba86a52987ed3086 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Wed, 26 Jun 2024 10:51:01 +0200 Subject: [PATCH 12/21] 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} /> - = ({ children, excludeRule, isFluid }) => { - const { isFetching, isError, isLoading } = useUserData(); + const { isError, isFetching, isLoading } = useGetUsersMeQuery({ + fields: "role", + }); if (isLoading || isFetching) return loading...; if (isError) return there was an error; 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 ( { + const selectOptions = useMemo( + () => + options.map((option) => ({ + label: option.label, + value: option.value, + })), + [options] + ); + return ( +
+ { + if (!value || !value.length) { + return "This is a required field"; + } + }} + > + {({ + field, // { name, value, onChange, onBlur } + form, + }: FieldProps) => { + return ( + +