Merge pull request #1462 from AppQuality/UN-1999

Un 1999

Author: d-beezee

src/features/api/apiTags.ts

@@ -336,6 +336,9 @@ unguessApi.enhanceEndpoints({
     postPlansByPidWatchers: {
       invalidatesTags: ['PlanWatchers'],
     },
+    putPlansByPidWatchers: {
+      invalidatesTags: ['PlanWatchers'],
+    },
     deletePlansByPidWatchersAndProfileId: {
       invalidatesTags: ['PlanWatchers'],
     },

src/features/api/index.ts

@@ -802,6 +802,16 @@ const injectedRtkApi = api.injectEndpoints({
         body: queryArg.body,
       }),
     }),
+    putPlansByPidWatchers: build.mutation<
+      PutPlansByPidWatchersApiResponse,
+      PutPlansByPidWatchersApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/plans/${queryArg.pid}/watchers`,
+        method: 'PUT',
+        body: queryArg.body,
+      }),
+    }),
     getWorkspacesByWidTemplates: build.query<
       GetWorkspacesByWidTemplatesApiResponse,
       GetWorkspacesByWidTemplatesApiArg
@@ -2055,6 +2065,15 @@ export type PostPlansByPidWatchersApiArg = {
     }[];
   };
 };
+export type PutPlansByPidWatchersApiResponse = /** status 200 OK */ void;
+export type PutPlansByPidWatchersApiArg = {
+  pid: string;
+  body: {
+    users: {
+      id: number;
+    }[];
+  };
+};
 export type GetWorkspacesByWidTemplatesApiResponse = /** status 200 OK */ {
   items: CpReqTemplate[];
 } & PaginationData;
@@ -3110,6 +3129,7 @@ export const {
   useGetWorkspacesByWidProjectsAndPidCampaignsQuery,
   useGetPlansByPidWatchersQuery,
   usePostPlansByPidWatchersMutation,
+  usePutPlansByPidWatchersMutation,
   useGetWorkspacesByWidTemplatesQuery,
   usePostWorkspacesByWidTemplatesMutation,
   useDeleteWorkspacesByWidTemplatesAndTidMutation,

src/locales/en/translation.json

@@ -849,6 +849,11 @@
   "__PLAN_PAGE_MODAL_SEND_REQUEST_TITLE_LABEL": "Activity title",
   "__PLAN_PAGE_MODAL_SEND_REQUEST_TOAST_ERROR": "Something went wrong while requesting the activity",
   "__PLAN_PAGE_MODAL_SEND_REQUEST_WAIT": "<XL>Setting up your request</XL><LG>We're preparing everything for our experts to review. This will take just a few seconds.</LG>",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_DESCRIPTION": "They’ll receive email updates at every stage",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_ERROR": "Please add at least one team member to continue",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_HINT": "You can add only workspace members in this phase",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_LABEL": "Involve your team in this activity",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_PLACEHOLDER": "Search for team members...",
   "__PLAN_PAGE_MODUL_GENERAL_REMOVE_MODAL_CANCEL": "Cancel",
   "__PLAN_PAGE_MODUL_GENERAL_REMOVE_MODAL_CONFIRM": "Confirm",
   "__PLAN_PAGE_MODUL_GENERAL_REMOVE_MODAL_DESCRIPTION": "If you delete the item, the entered information will no longer be recoverable.",

src/locales/it/translation.json

@@ -882,6 +882,11 @@
   "__PLAN_PAGE_MODAL_SEND_REQUEST_TITLE_LABEL": "",
   "__PLAN_PAGE_MODAL_SEND_REQUEST_TOAST_ERROR": "",
   "__PLAN_PAGE_MODAL_SEND_REQUEST_WAIT": "",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_DESCRIPTION": "",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_ERROR": "",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_HINT": "",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_LABEL": "",
+  "__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_PLACEHOLDER": "",
   "__PLAN_PAGE_MODUL_GENERAL_REMOVE_MODAL_CANCEL": "",
   "__PLAN_PAGE_MODUL_GENERAL_REMOVE_MODAL_CONFIRM": "",
   "__PLAN_PAGE_MODUL_GENERAL_REMOVE_MODAL_DESCRIPTION": "",

src/pages/Plan/modals/SendRequestModal.tsx

@@ -13,14 +13,19 @@ import {
   useToast,
   XL,
 } from '@appquality/unguess-design-system';
+import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { appTheme } from 'src/app/theme';
-import { useGetPlansByPidRulesEvaluationQuery } from 'src/features/api';
+import {
+  useGetPlansByPidRulesEvaluationQuery,
+  usePutPlansByPidWatchersMutation,
+} from 'src/features/api';
 import { useRequestQuotation } from 'src/features/modules/useRequestQuotation';
 import { useValidateForm } from 'src/features/planModules';
 import { getModuleBySlug } from '../modules/Factory';
 import { PurchasablePlanRulesGuide } from './PurchasablePlanRules';
+import { Watchers } from './Watchers';
 
 const SendRequestModal = ({
   onQuit,
@@ -31,10 +36,12 @@ const SendRequestModal = ({
 }) => {
   const { planId } = useParams();
   const { t } = useTranslation();
+  const [updateWatchers] = usePutPlansByPidWatchersMutation();
   const { isRequestingQuote, handleQuoteRequest } = useRequestQuotation();
   const { data, isLoading } = useGetPlansByPidRulesEvaluationQuery({
     pid: planId || '',
   });
+  const [watchers, setWatchers] = useState<number[]>([]);
 
   const isFailed = isPurchasable && data && data.failed.length > 0;
   const { addToast } = useToast();
@@ -43,8 +50,14 @@ const SendRequestModal = ({
 
   const { validateForm } = useValidateForm();
 
+  if (!planId) return null;
+
   const handleConfirm = async () => {
     try {
+      await updateWatchers({
+        pid: planId,
+        body: { users: watchers.map((id) => ({ id })) },
+      }).unwrap();
       await validateForm();
       await handleQuoteRequest();
     } catch (e) {
@@ -154,6 +167,18 @@ const SendRequestModal = ({
                 {t('__PLAN_PAGE_MODAL_SEND_REQUEST_DATES_HINT')}
               </Message>
             </div>
+            <div style={{ padding: `${appTheme.space.md} 0` }}>
+              <Label style={{ marginBottom: appTheme.space.xxs }}>
+                {t('__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_LABEL')}
+              </Label>
+              <SM style={{ marginBottom: appTheme.space.sm }}>
+                {t('__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_DESCRIPTION')}
+              </SM>
+              <Watchers onChange={setWatchers} planId={planId} />
+              <Message style={{ marginTop: appTheme.space.sm }}>
+                {t('__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_HINT')}
+              </Message>
+            </div>
           </>
         )}
       </Modal.Body>
@@ -171,6 +196,7 @@ const SendRequestModal = ({
             </FooterItem>
             <FooterItem>
               <Button
+                disabled={watchers.length === 0}
                 isAccent
                 isPrimary
                 onClick={handleConfirm}

src/pages/Plan/modals/Watchers.tsx

@@ -0,0 +1,103 @@
+import {
+  Message,
+  MultiSelect,
+  Skeleton,
+} from '@appquality/unguess-design-system';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  useGetPlansByPidWatchersQuery,
+  useGetWorkspacesByWidUsersQuery,
+} from 'src/features/api';
+import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
+import { useTheme } from 'styled-components';
+
+const useOptions = (planId: string) => {
+  const [watchers, setWatchers] = useState<
+    {
+      id: number;
+      label: string;
+      selected: boolean;
+    }[]
+  >([]);
+  const { activeWorkspace, isLoading: isActiveWorkspaceLoading } =
+    useActiveWorkspace();
+  const { data: users, isLoading: isLoadingUsers } =
+    useGetWorkspacesByWidUsersQuery(
+      {
+        wid: (activeWorkspace?.id || '0').toString(),
+      },
+      {
+        skip: !activeWorkspace?.id,
+      }
+    );
+  const { data, isLoading } = useGetPlansByPidWatchersQuery({ pid: planId });
+  useEffect(() => {
+    if (users) {
+      const watchersIds = (data?.items || []).map((watcher) => watcher.id);
+      const options = (users?.items || []).map((user) => ({
+        id: user.profile_id,
+        label: `${user.name}`,
+        selected: watchersIds.includes(user.profile_id),
+      }));
+      setWatchers(options);
+    }
+  }, [data, users]);
+
+  if (isLoading || isLoadingUsers || isActiveWorkspaceLoading)
+    return { options: [], select: () => {}, isLoading: true };
+
+  return {
+    options: watchers,
+    select: (selected: number[]) =>
+      setWatchers(
+        watchers.map((w) => ({ ...w, selected: selected.includes(w.id) }))
+      ),
+    isLoading: false,
+  };
+};
+
+const Watchers = ({
+  onChange,
+  planId,
+}: {
+  onChange: (selectedIds: number[]) => void;
+  planId: string;
+}) => {
+  const { t } = useTranslation();
+  const appTheme = useTheme();
+  const { options, select, isLoading } = useOptions(planId);
+
+  useEffect(() => {
+    const selected = options.filter((item) => item.selected);
+    onChange(selected.map((item) => Number(item.id)));
+  }, [options]);
+
+  if (isLoading) return <Skeleton width="100%" height="40px" />;
+
+  return (
+    <div>
+      <MultiSelect
+        listboxAppendToNode={document.body}
+        options={options}
+        size="small"
+        maxItems={10}
+        i18n={{
+          placeholder: t('__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_PLACEHOLDER'),
+        }}
+        onChange={async (selectedItems) => {
+          const selected = selectedItems.filter((item) => item.selected);
+          select(selected.map((item) => Number(item.id)));
+          onChange(selected.map((item) => Number(item.id)));
+        }}
+      />
+      {options.filter((item) => item.selected).length === 0 && (
+        <Message style={{ marginTop: appTheme.space.xs }} validation="error">
+          {t('__PLAN_PAGE_MODAL_SEND_REQUEST_WATCHERS_ERROR')}
+        </Message>
+      )}
+    </div>
+  );
+};
+
+export { Watchers };