changed flow, removed steps to align to unguess tagging tool

src/pages/UxDashboard/ResultsPage/index.tsx

@@ -52,7 +52,7 @@ const ResultsPage = () => {
             saveDashboard({
               campaign: id,
               body: {
-                status: "publish",
+                visible: 1,
               },
             })
               .unwrap()

src/pages/UxDashboard/Sidebar.tsx

@@ -1,34 +1,29 @@
-import {
-  Card,
-  Button,
-  Text,
-  Steps,
-} from "@appquality/appquality-design-system";
+import { Button, Card, Steps } from "@appquality/appquality-design-system";
 import { useFormikContext } from "formik";
-import { FormValuesInterface } from "./UxForm/FormProvider";
-import { usePatchCampaignsByCampaignUxMutation } from "src/services/tryberApi";
 import { useParams } from "react-router-dom";
 import siteWideMessageStore from "src/redux/siteWideMessages";
+import { usePatchCampaignsByCampaignUxMutation } from "src/services/tryberApi";
 import { useAppDispatch, useAppSelector } from "src/store";
 import {
   setCurrentFormSection,
-  setCurrentStep,
   setIsProgrammaticallyScrolling,
   setPublishStatus,
 } from "./uxDashboardSlice";
+import { FormValuesInterface } from "./UxForm/FormProvider";
 
 const Sidebar = () => {
   const { id } = useParams<{ id: string }>();
   const { add } = siteWideMessageStore();
   const { submitForm, values, isSubmitting, isValid } =
     useFormikContext<FormValuesInterface>();
   const [saveDashboard] = usePatchCampaignsByCampaignUxMutation();
-  const { currentStep, currentFormSection, publishStatus } = useAppSelector(
+  const { currentFormSection, publishStatus } = useAppSelector(
     (state) => state.uxDashboard
   );
   const dispatch = useAppDispatch();
 
   const handleSaveDraft = () => {
+    values.visible = 0;
     submitForm();
     if (!isValid) {
       add({
@@ -38,102 +33,75 @@ const Sidebar = () => {
     }
   };
 
-  if (currentStep >= 2) return null;
+  const handlePublish = async () => {
+    dispatch(setPublishStatus("publishing"));
+    await saveDashboard({
+      campaign: id,
+      body: {
+        visible: 1,
+      },
+    })
+      .unwrap()
+      .then((res) => {
+        dispatch(setPublishStatus("success"));
+        add({
+          type: "success",
+          message: `Dashboard published`,
+          expire: 8,
+        });
+      })
+      .catch((err) => {
+        dispatch(setPublishStatus("failed"));
+      });
+  };
   return (
     <div className="stick-to-header-lg">
       <Card title="Azioni" className="aq-mb-3">
-        {currentStep === 0 && (
-          <>
-            <Button
-              className="aq-mb-4"
-              kind="primary"
-              flat
-              size="block"
-              type="submit"
-              data-qa="submit-draft"
-              disabled={isSubmitting}
-              onClick={handleSaveDraft}
-            >
-              Save Draft
-            </Button>
-            <Text className="aq-mb-2">
-              Per pubblicare passa prima dalla preview
-            </Text>
-            <Button
-              type="button"
-              size="block"
-              kind="secondary"
-              data-qa="open-dashboard-preview"
-              onClick={() => dispatch(setCurrentStep(1))}
-              disabled={typeof values.status === "undefined" || isSubmitting}
-            >
-              Preview
-            </Button>
-          </>
-        )}
-        {currentStep === 1 && (
-          <>
-            <Button
-              className="aq-mb-4"
-              kind="primary"
-              flat
-              size="block"
-              data-qa="close-dashboard-preview"
-              onClick={() => dispatch(setCurrentStep(0))}
-            >
-              Torna alle modifiche
-            </Button>
-            <Text className="aq-mb-2">
-              Pubblica per rendere disponibile la dashboard anche al cliente
-            </Text>
-            <Button
-              type="button"
-              size="block"
-              kind="secondary"
-              data-qa="publish-dashboard"
-              disabled={publishStatus === "publishing"}
-              onClick={() => {
-                dispatch(setPublishStatus("publishing"));
-                saveDashboard({
-                  campaign: id,
-                  body: {
-                    status: "publish",
-                  },
-                })
-                  .unwrap()
-                  .then((res) => {
-                    dispatch(setPublishStatus("success"));
-                  })
-                  .catch((err) => {
-                    dispatch(setPublishStatus("failed"));
-                  })
-                  .finally(() => {
-                    dispatch(setCurrentStep(2));
-                  });
-              }}
-            >
-              Pubblica
-            </Button>
-          </>
-        )}
-      </Card>
-      {currentStep === 0 && (
-        <Card title="Sezioni del form" className="aq-mb-3">
-          <Steps
-            direction="vertical"
-            current={currentFormSection}
-            clickHandler={(index, current) => {
-              if (index === current) return;
-              dispatch(setCurrentFormSection(index));
-              dispatch(setIsProgrammaticallyScrolling(true));
-            }}
+        <>
+          <Button
+            className="aq-mb-4"
+            kind="primary"
+            flat
+            size="block"
+            type="submit"
+            data-qa="submit-draft"
+            disabled={isSubmitting}
+            onClick={handleSaveDraft}
+          >
+            Salva e nascondi
+          </Button>
+
+          <Button
+            type="button"
+            size="block"
+            kind="secondary"
+            data-qa="publish-dashboard"
+            disabled={
+              publishStatus === "publishing" ||
+              values.visible === undefined ||
+              values.visible === 1
+            }
+            onClick={handlePublish}
           >
-            <Steps.Step title="Sulla Campagna" />
-            <Steps.Step title="Panoramica" />
-            <Steps.Step title="Nel dettaglio" />
-          </Steps>
-        </Card>
-      )}
+            Pubblica
+          </Button>
+        </>
+      </Card>
+      <Card title="Sezioni del form" className="aq-mb-3">
+        <Steps
+          direction="vertical"
+          current={currentFormSection}
+          clickHandler={(index, current) => {
+            if (index === current) return;
+            dispatch(setCurrentFormSection(index));
+            dispatch(setIsProgrammaticallyScrolling(true));
+          }}
+        >
+          <Steps.Step title="Sulla Campagna" />
+          <Steps.Step title="Panoramica" />
+          <Steps.Step title="Nel dettaglio" />
+        </Steps>
+      </Card>
     </div>
   );
 };

src/pages/UxDashboard/UxForm/FormProvider.tsx

@@ -27,7 +27,7 @@ export interface FormSentiment {
   comment: string;
 }
 export interface FormValuesInterface {
-  status?: GetCampaignsByCampaignUxApiResponse["status"];
+  visible?: GetCampaignsByCampaignUxApiResponse["visible"];
   goal: GetCampaignsByCampaignUxApiResponse["goal"];
   methodology: GetCampaignsByCampaignUxApiResponse["methodology"];
   questions: FormQuestion[];
@@ -48,10 +48,9 @@ const FormProvider = ({ children }: { children: ReactNode }) => {
     });
   const { data: campaignData, isLoading: campaignDataLoading } =
     useGetCampaignsByCampaignQuery({ campaign: id });
-
   const initialValues: FormValuesInterface = useMemo(
     () => ({
-      status: currentData?.status,
+      visible: currentData?.visible ?? undefined,
       goal: currentData?.goal || "",
       methodology: currentData?.methodology || {
         name: campaignData?.type || "",
@@ -91,7 +90,7 @@ const FormProvider = ({ children }: { children: ReactNode }) => {
   }
 
   const validationSchema = object({
-    status: string(),
+    visible: number(),
     goal: string().required("Campo obbligatorio"),
     methodology: object().shape({
       name: string(),
@@ -164,13 +163,13 @@ const FormProvider = ({ children }: { children: ReactNode }) => {
       initialValues={initialValues}
       enableReinitialize
       onSubmit={async (values, formikHelpers) => {
-        // todo: better typing for values because validationSchema prevent usersNumber to be undefined
         if (values.usersNumber === undefined) return;
 
         formikHelpers.setSubmitting(true);
         const res = await saveDashboard({
           campaign: id,
           body: {
+            visible: values.visible,
             goal: values.goal,
             questions: values.questions.map((question) => ({
               id: question.id,

src/pages/UxDashboard/index.tsx

@@ -3,27 +3,17 @@ import {
   BSGrid,
   Container,
   PageTitle,
-  Steps,
   Title,
 } from "@appquality/appquality-design-system";
+import { useParams } from "react-router-dom";
 import ErrorUnauthorized from "src/features/ErrorUnauthorized/ErrorUnauthorized";
+import { PageTemplate } from "src/features/PageTemplate";
 import { useGetCampaignsByCampaignQuery } from "src/services/tryberApi";
-import UxDashboardForm from "./UxForm";
-import { useParams } from "react-router-dom";
-import Preview from "./Preview";
-import Sidebar from "./Sidebar";
-import FormProvider from "./UxForm/FormProvider";
-import ResultsPage from "./ResultsPage";
-import { useAppSelector } from "src/store";
 import styled from "styled-components";
-import { PageTemplate } from "src/features/PageTemplate";
+import Sidebar from "./Sidebar";
 import useCanSee from "./useCanSee";
-
-const StyledSteps = styled(Steps)`
-  .step-status-icon {
-    background-color: ${({ theme }) => theme.colors.gray100};
-  }
-`;
+import UxDashboardForm from "./UxForm";
+import FormProvider from "./UxForm/FormProvider";
 
 const ResponsiveCol = styled(BSCol)<{ lgOrder: number }>`
   @media (min-width: ${({ theme }) => theme.grid.breakpoints.lg}) {
@@ -33,7 +23,6 @@ const ResponsiveCol = styled(BSCol)<{ lgOrder: number }>`
 
 const UxDashboard = () => {
   const { id } = useParams<{ id: string }>();
-  const { currentStep } = useAppSelector((state) => state.uxDashboard);
 
   const { isError, isLoading, hasPermission } = useCanSee(id);
 
@@ -53,7 +42,6 @@ const UxDashboard = () => {
   }
 
   if (hasPermission) {
-    // todo: discuss about appq_video_dashboard permission (change tests)
     return (
       <PageTemplate>
         <FormProvider>
@@ -75,24 +63,7 @@ const UxDashboard = () => {
                   <Sidebar />
                 </ResponsiveCol>
                 <ResponsiveCol size="col-lg-9" lgOrder={0}>
-                  <StyledSteps
-                    current={currentStep}
-                    className="aq-my-4"
-                    direction="horizontal"
-                  >
-                    <StyledSteps.Step isCompleted={true} title={"Form"} />
-                    <StyledSteps.Step
-                      isCompleted={currentStep > 0}
-                      title={"Preview"}
-                    />
-                    <StyledSteps.Step
-                      isCompleted={currentStep > 1}
-                      title={"Publish"}
-                    />
-                  </StyledSteps>
-                  {currentStep === 0 && <UxDashboardForm />}
-                  {currentStep === 1 && <Preview />}
-                  {currentStep === 2 && <ResultsPage />}
+                  <UxDashboardForm />
                 </ResponsiveCol>
               </BSGrid>
             </Title>

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

@@ -31,7 +31,7 @@ const Target = styled(icons.PersonVideo2)`
   color: ${({ theme }) => theme.variants.primary}};
 `;
 
-type Visibility = "public" | "smallgroup" | "logged" | "admin";
+type Visibility = "public" | "smallgroup" | "logged" | "admin" | "target";
 
 const VisibilityIcon = ({ visibility }: { visibility: Visibility }) => {
   if (visibility === "public") return <Public />;