@@ -91,7 +99,20 @@ export const ProjectPageHeader = ({ projectId }: { projectId: number }) => {
{!project?.is_archive && (
-
+
+
+ {hasWorksPacePermission && (
+
+ )}
+
)}
diff --git a/src/pages/Plan/Controls.tsx b/src/pages/Plan/Controls.tsx
new file mode 100644
index 000000000..64a4ea05d
--- /dev/null
+++ b/src/pages/Plan/Controls.tsx
@@ -0,0 +1,120 @@
+import { Button } from '@appquality/unguess-design-system';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { appTheme } from 'src/app/theme';
+import { Pipe } from 'src/common/components/Pipe';
+import { usePatchPlansByPidStatusMutation } from 'src/features/api';
+import { useSubmit } from 'src/features/modules/useModuleConfiguration';
+import { useRequestQuotation } from 'src/features/modules/useRequestQuotation';
+import { useValidateForm } from 'src/features/planModules';
+import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
+import styled from 'styled-components';
+import { getPlanStatus } from '../Dashboard/hooks/getPlanStatus';
+import { usePlan } from './hooks/usePlan';
+import { SendRequestModal } from './modals/SendRequestModal';
+
+const StyledPipe = styled(Pipe)`
+ display: inline;
+ margin: 0;
+ height: auto;
+`;
+
+export const Controls = () => {
+ const { t } = useTranslation();
+ const navigate = useNavigate();
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const { planId } = useParams();
+ const { plan } = usePlan(planId);
+ const { handleSubmit: submitModuleConfiguration, isLoading: isSubmitting } =
+ useSubmit(planId || '');
+ const { validateForm } = useValidateForm();
+ const [isSubmitted, setIsSubmitted] = useState(false);
+ const [patchStatus] = usePatchPlansByPidStatusMutation();
+
+ const campaignRoute = useLocalizeRoute(
+ `campaigns/${plan?.campaign?.id ?? 0}`
+ );
+ const { isRequestQuoteCTADisabled } = useRequestQuotation();
+ const handleSaveConfiguration = () => {
+ validateForm();
+ submitModuleConfiguration();
+ };
+
+ const handleSendRequest = () => {
+ setIsModalOpen(true);
+ };
+
+ if (!plan) return null;
+
+ const { status } = getPlanStatus(plan, t);
+
+ if (status === 'approved') {
+ return (
+
+
+
+ );
+ }
+
+ if (status !== 'draft') {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {isModalOpen && setIsModalOpen(false)} />}
+
+ );
+};
diff --git a/src/pages/Plan/ModulesList.tsx b/src/pages/Plan/ModulesList.tsx
new file mode 100644
index 000000000..75618668d
--- /dev/null
+++ b/src/pages/Plan/ModulesList.tsx
@@ -0,0 +1,44 @@
+import { useAppSelector } from 'src/app/hooks';
+import { appTheme } from 'src/app/theme';
+import { ModulesBottomNavigation } from './common/ModulesBottomNavigation';
+import { TabTitle } from './common/TabTitle';
+import { PlanTab } from './context/planContext';
+import { modulesMap, MODULES_BY_TAB } from './modulesMap';
+
+export const ModulesList = ({ tabId }: { tabId: PlanTab }) => {
+ const currentModules = useAppSelector(
+ (state) => state.planModules.currentModules
+ );
+
+ const availableModules =
+ MODULES_BY_TAB[tabId as keyof typeof MODULES_BY_TAB] || [];
+
+ if (!availableModules.length) {
+ return null;
+ }
+
+ return (
+ <>
+
+ {currentModules.map((type) => {
+ const isVisible = availableModules.includes(type);
+
+ const Component = modulesMap[`${type}`];
+ if (!Component) return null;
+ return (
+
+
+
+ );
+ })}
+
+ {tabId !== 'summary' && }
+
+ );
+};
diff --git a/src/pages/Plan/PlanBody.tsx b/src/pages/Plan/PlanBody.tsx
new file mode 100644
index 000000000..1e95bd8f5
--- /dev/null
+++ b/src/pages/Plan/PlanBody.tsx
@@ -0,0 +1,34 @@
+import { Col, Grid, Row } from '@appquality/unguess-design-system';
+import { appTheme } from 'src/app/theme';
+import { StickyCol } from './common/StickyCol';
+import { usePlanTab } from './context/planContext';
+import { ModulesList } from './ModulesList';
+import { Nav } from './navigation/aside';
+import { PlanDetails } from './navigation/header/PlanDetails';
+import SummaryBody from './summary';
+
+export const PlanBody = () => {
+ const { activeTab } = usePlanTab();
+
+ // Debug info
+ const params = new URLSearchParams(window.location.search);
+ const debug = params.get('debug');
+
+ return (
+
+ {activeTab === 'summary' ? (
+
+ ) : (
+
+
+
+
+
+
+
+ {debug && }
+
+ )}
+
+ );
+};
diff --git a/src/pages/Plan/common/ModulesBottomNavigation.tsx b/src/pages/Plan/common/ModulesBottomNavigation.tsx
new file mode 100644
index 000000000..237afab03
--- /dev/null
+++ b/src/pages/Plan/common/ModulesBottomNavigation.tsx
@@ -0,0 +1,86 @@
+import { Button } from '@appquality/unguess-design-system';
+import { ReactComponent as ChevronLeftIcon } from '@zendeskgarden/svg-icons/src/12/chevron-left-stroke.svg';
+import { ReactComponent as ChevronRightIcon } from '@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg';
+import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import { MODULE_TABS_ORDER } from 'src/constants';
+import { useModuleConfiguration } from 'src/features/modules/useModuleConfiguration';
+import { PlanTab, usePlanTab } from '../context/planContext';
+
+export const ModulesBottomNavigation = ({ tabId }: { tabId: PlanTab }) => {
+ const { setActiveTab } = usePlanTab();
+ const { t } = useTranslation();
+ const { getPlanStatus } = useModuleConfiguration();
+ let leftLabel = '';
+ let rightLabel = '';
+ const previousTab = MODULE_TABS_ORDER[MODULE_TABS_ORDER.indexOf(tabId) - 1];
+ const nextTab = MODULE_TABS_ORDER[MODULE_TABS_ORDER.indexOf(tabId) + 1];
+ const isFirstTab = MODULE_TABS_ORDER.indexOf(tabId) === 0;
+ const isInstructionsTabRightButtonDisabled =
+ getPlanStatus() === 'draft' && tabId === ('instructions' as PlanTab);
+ const main = document.getElementById('main');
+
+ switch (tabId) {
+ case 'setup':
+ rightLabel = t('__MODULES_BOTTOM_NAVIGATION_SETUP_TAB_RIGHT_LABEL');
+ break;
+ case 'target':
+ leftLabel = t('__MODULES_BOTTOM_NAVIGATION_TARGET_TAB_LEFT_LABEL');
+ rightLabel = t('__MODULES_BOTTOM_NAVIGATION_TARGET_TAB_RIGHT_LABEL');
+ break;
+ case 'instructions':
+ leftLabel = t('__MODULES_BOTTOM_NAVIGATION_TASKS_TAB_LEFT_LABEL');
+ rightLabel = t('__MODULES_BOTTOM_NAVIGATION_TASKS_TAB_RIGHT_LABEL');
+ break;
+ case 'summary':
+ leftLabel = t('__MODULES_BOTTOM_NAVIGATION_SUMMARY_TAB_LEFT_LABEL');
+ break;
+ default:
+ break;
+ }
+
+ return (
+
+ {!isFirstTab && (
+
+ )}
+
+
+
+ );
+};
diff --git a/src/pages/Plan/common/NavContainer.tsx b/src/pages/Plan/common/NavContainer.tsx
new file mode 100644
index 000000000..bb7600b00
--- /dev/null
+++ b/src/pages/Plan/common/NavContainer.tsx
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const NavContainer = styled.div`
+ position: relative;
+ height: 100%;
+ padding: ${({ theme }) => theme.space.sm};
+ z-index: ${({ theme }) => theme.levels.front};
+ padding-bottom: ${({ theme }) => theme.space.xxl};
+ display: flex;
+ flex-direction: column;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
diff --git a/src/pages/Plan/common/SectionTitle.tsx b/src/pages/Plan/common/SectionTitle.tsx
new file mode 100644
index 000000000..80de34cdc
--- /dev/null
+++ b/src/pages/Plan/common/SectionTitle.tsx
@@ -0,0 +1,7 @@
+import { XL } from '@appquality/unguess-design-system';
+import styled from 'styled-components';
+
+export const SectionTitle = styled(XL)`
+ margin-top: ${({ theme }) => theme.space.sm};
+ margin-bottom: ${({ theme }) => theme.space.md};
+`;
diff --git a/src/pages/Plan/common/StickyCol.tsx b/src/pages/Plan/common/StickyCol.tsx
new file mode 100644
index 000000000..693c612e9
--- /dev/null
+++ b/src/pages/Plan/common/StickyCol.tsx
@@ -0,0 +1,32 @@
+import { Col } from '@appquality/unguess-design-system';
+import { ReactNode, useMemo } from 'react';
+import styled from 'styled-components';
+
+const StyledCol = styled(Col)<{ $stickyHeight: number }>`
+ position: sticky;
+ top: ${({ $stickyHeight }) => $stickyHeight}px;
+ max-height: calc(
+ 90vh - ${({ theme }) => theme.components.chrome.header.height}
+ );
+ min-height: calc(
+ 90vh - ${({ theme }) => theme.components.chrome.header.height}
+ );
+ margin: 0;
+ z-index: ${({ theme }) => theme.levels.front};
+`;
+
+interface StickyColProps extends React.ComponentProps {
+ children: ReactNode;
+}
+
+export const StickyCol = ({ children, ...props }: StickyColProps) => {
+ const stickyHeight =
+ document.getElementById('sticky-plan-page-header')?.offsetHeight || 0;
+ const stickyHeightMemo = useMemo(() => stickyHeight, [stickyHeight]);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/pages/Plan/common/TabTitle.tsx b/src/pages/Plan/common/TabTitle.tsx
new file mode 100644
index 000000000..a1442dbe8
--- /dev/null
+++ b/src/pages/Plan/common/TabTitle.tsx
@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next';
+import { PlanTab } from '../context/planContext';
+import { SectionTitle } from './SectionTitle';
+
+export const TabTitle = ({ tabId }: { tabId: PlanTab }) => {
+ const { t } = useTranslation();
+
+ if (tabId === 'setup') {
+ return (
+ {t('__PLAN_PAGE_TAB_SETUP_TAB_TITLE')}
+ );
+ }
+
+ if (tabId === 'target') {
+ return (
+
+ {t('__PLAN_PAGE_TAB_TARGET_TAB_TITLE')}
+
+ );
+ }
+
+ if (tabId === 'instructions') {
+ return (
+
+ {t('__PLAN_PAGE_TAB_INSTRUCTIONS_TAB_TITLE')}
+
+ );
+ }
+
+ if (tabId === 'summary') {
+ return (
+
+ {t('__PLAN_PAGE_TAB_SUMMARY_TAB_TITLE')}
+
+ );
+ }
+
+ return null;
+};
diff --git a/src/pages/Plan/context/planContext.tsx b/src/pages/Plan/context/planContext.tsx
new file mode 100644
index 000000000..ec756dd05
--- /dev/null
+++ b/src/pages/Plan/context/planContext.tsx
@@ -0,0 +1,36 @@
+import { createContext, useContext, useState, ReactNode, useMemo } from 'react';
+
+export type PlanTab = 'setup' | 'target' | 'instructions' | 'summary';
+
+interface TabContextProps {
+ activeTab: PlanTab;
+ setActiveTab: (tab: PlanTab) => void;
+}
+
+const PlanContext = createContext(null);
+
+export const PlanProvider = ({ children }: { children: ReactNode }) => {
+ const [activeTab, setActiveTab] = useState('setup');
+
+ const planContextValue = useMemo(
+ () => ({
+ activeTab,
+ setActiveTab,
+ }),
+ [activeTab, setActiveTab]
+ );
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const usePlanTab = () => {
+ const context = useContext(PlanContext);
+ if (!context) {
+ throw new Error('useTab must be used within a PlanProvider');
+ }
+ return context;
+};
diff --git a/src/pages/Plan/hooks/usePlan.ts b/src/pages/Plan/hooks/usePlan.ts
new file mode 100644
index 000000000..9395df47a
--- /dev/null
+++ b/src/pages/Plan/hooks/usePlan.ts
@@ -0,0 +1,27 @@
+import { useGetPlansByPidQuery } from 'src/features/api';
+import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
+
+const usePlan = (planId?: string) => {
+ const { activeWorkspace } = useActiveWorkspace();
+ const {
+ isLoading,
+ isFetching,
+ data: plan,
+ } = useGetPlansByPidQuery(
+ {
+ pid: planId ?? '',
+ },
+ {
+ skip: !activeWorkspace || !planId,
+ }
+ );
+
+ return {
+ isLoading,
+ isFetching,
+ activeWorkspace,
+ plan,
+ };
+};
+
+export { usePlan };
diff --git a/src/pages/Plan/index.tsx b/src/pages/Plan/index.tsx
new file mode 100644
index 000000000..02a9c0a05
--- /dev/null
+++ b/src/pages/Plan/index.tsx
@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useAppDispatch } from 'src/app/hooks';
+import { PLAN_MINIMUM_DATE } from 'src/constants';
+import {
+ GetPlansByPidApiResponse,
+ useGetPlansByPidQuery,
+ useGetWorkspacesByWidQuery,
+} from 'src/features/api';
+import { FormProvider } from 'src/features/modules/FormProvider';
+import { FormBody } from 'src/features/modules/types';
+import { setWorkspace } from 'src/features/navigation/navigationSlice';
+import { Page } from 'src/features/templates/Page';
+import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
+import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
+import { PlanProvider, usePlanTab } from './context/planContext';
+import PlanPageHeader from './navigation/header/Header';
+import { PlanBody } from './PlanBody';
+import { formatModuleDate } from './utils/formatModuleDate';
+
+const PlanPage = ({ plan }: { plan: GetPlansByPidApiResponse | undefined }) => {
+ const { t } = useTranslation();
+ const { activeTab, setActiveTab } = usePlanTab();
+
+ useEffect(() => {
+ if (!plan) return;
+
+ if (activeTab !== 'summary' && plan.status !== 'draft') {
+ setActiveTab('summary');
+ }
+ }, [plan]);
+
+ return (
+
+
+
+
+ );
+};
+
+const useSetActiveWorkspace = (workspaceId?: number) => {
+ const dispatch = useAppDispatch();
+ const { data: workspace } = useGetWorkspacesByWidQuery(
+ {
+ wid: (workspaceId || 0).toString(),
+ },
+ {
+ skip: !workspaceId,
+ }
+ );
+
+ useEffect(() => {
+ if (workspace) {
+ dispatch(setWorkspace(workspace));
+ }
+ }, [workspace, dispatch]);
+};
+
+const Plan = () => {
+ const { activeWorkspace } = useActiveWorkspace();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { planId } = useParams();
+ const { isError, data: plan } = useGetPlansByPidQuery(
+ {
+ pid: Number(planId).toString(),
+ },
+ {
+ skip: !activeWorkspace || !planId,
+ }
+ );
+ const notFoundRoute = useLocalizeRoute('oops');
+
+ const [initialValues, setInitialValues] = useState({
+ status: 'draft',
+ modules: [],
+ });
+
+ useSetActiveWorkspace(plan?.workspace_id);
+ useEffect(() => {
+ if (!plan) return;
+ const initialDatesModule = plan.config.modules.find(
+ (mod) => mod.type === 'dates'
+ );
+ const modules = [...plan.config.modules];
+
+ if (!initialDatesModule) {
+ modules.push({
+ variant: 'default',
+ type: 'dates',
+ output: { start: formatModuleDate(PLAN_MINIMUM_DATE).output },
+ });
+ }
+
+ setInitialValues({
+ status: plan.status,
+ modules,
+ });
+ }, [plan]);
+
+ if (!planId || Number.isNaN(Number(planId))) {
+ navigate(notFoundRoute, {
+ state: { from: location.pathname },
+ });
+ }
+
+ if (isError) {
+ navigate(notFoundRoute, {
+ state: { from: location.pathname },
+ });
+ }
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default Plan;
diff --git a/src/pages/Plan/modals/SendRequestModal.tsx b/src/pages/Plan/modals/SendRequestModal.tsx
new file mode 100644
index 000000000..c751e1b4c
--- /dev/null
+++ b/src/pages/Plan/modals/SendRequestModal.tsx
@@ -0,0 +1,147 @@
+import {
+ Button,
+ FooterItem,
+ Label,
+ LG,
+ Message,
+ Modal,
+ ModalClose,
+ Notification,
+ OrderedList,
+ Skeleton,
+ SM,
+ useToast,
+ XL,
+} from '@appquality/unguess-design-system';
+import { Trans, useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import { useRequestQuotation } from 'src/features/modules/useRequestQuotation';
+import { useValidateForm } from 'src/features/planModules';
+import { Dates } from '../modules/Dates';
+import { Title } from '../modules/Title';
+
+const SendRequestModal = ({ onQuit }: { onQuit: () => void }) => {
+ const { t } = useTranslation();
+ const { isRequestingQuote, handleQuoteRequest } = useRequestQuotation();
+ const { addToast } = useToast();
+
+ const { validateForm } = useValidateForm();
+
+ const handleConfirm = async () => {
+ try {
+ await validateForm();
+ await handleQuoteRequest();
+ } catch (e) {
+ addToast(
+ ({ close }) => (
+
+ ),
+ { placement: 'top' }
+ );
+ return;
+ }
+ onQuit();
+ };
+
+ if (isRequestingQuote()) {
+ return (
+
+ ,
+ XL: (
+
+ ),
+ }}
+ />
+
+
+ );
+ }
+
+ return (
+
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_TITLE')}
+
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_BODY_TITLE')}
+
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_BODY_DESCRIPTION')}
+
+
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_BODY_DESCRIPTION_1')}
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_BODY_DESCRIPTION_2')}
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_BODY_DESCRIPTION_3')}
+
+
+
+
+
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_TITLE_HINT')}
+
+
+
+
+
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_DATES_DESCRIPTION')}
+
+
+
+ {t('__PLAN_PAGE_MODAL_SEND_REQUEST_DATES_HINT')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export { SendRequestModal };
diff --git a/src/pages/Plan/modules/AdditionalTarget.tsx b/src/pages/Plan/modules/AdditionalTarget.tsx
new file mode 100644
index 000000000..c53594cbd
--- /dev/null
+++ b/src/pages/Plan/modules/AdditionalTarget.tsx
@@ -0,0 +1,142 @@
+import {
+ Button,
+ Card,
+ Hint,
+ Label,
+ Message,
+ Paragraph,
+ Span,
+ Textarea,
+} from '@appquality/unguess-design-system';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg';
+import { components } from 'src/common/schema';
+import { FEATURE_FLAG_CHANGE_MODULES_VARIANTS } from 'src/constants';
+import { useModule } from 'src/features/modules/useModule';
+import { useModuleConfiguration } from 'src/features/modules/useModuleConfiguration';
+import { useValidation } from 'src/features/modules/useModuleValidation';
+import { useFeatureFlag } from 'src/hooks/useFeatureFlag';
+import styled from 'styled-components';
+import { getIconFromModuleType } from '../utils';
+import { DeleteModuleConfirmationModal } from './modal/DeleteModuleConfirmationModal';
+
+const StyledCard = styled(Card)`
+ display: flex;
+ flex-direction: column;
+ padding-top: ${({ theme }) => theme.space.md};
+ padding-left: ${({ theme }) => theme.space.md};
+ padding-right: ${({ theme }) => theme.space.md};
+ padding-bottom: ${({ theme }) => theme.space.lg};
+ box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
+`;
+
+const StyledCardHeader = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ padding-bottom: ${({ theme }) => theme.space.md};
+`;
+
+const AdditionalTarget = () => {
+ const { hasFeatureFlag } = useFeatureFlag();
+ const { value, setOutput, remove } = useModule('additional_target');
+ const { getPlanStatus } = useModuleConfiguration();
+ const { t } = useTranslation();
+ const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);
+
+ const validation = (
+ module: components['schemas']['ModuleAdditionalTarget']
+ ) => {
+ let error;
+ if (module.output.length > 512) {
+ error = t('__PLAN_ADDITIONAL_TARGET_ERROR_TOO_LONG');
+ }
+
+ return error || true;
+ };
+
+ const { error, validate } = useValidation({
+ type: 'additional_target',
+ validate: validation,
+ });
+ const handleBlur = () => {
+ validate();
+ };
+
+ const handleDelete = () => {
+ setIsOpenDeleteModal(true);
+ };
+
+ return (
+ <>
+
+
+
+ {getIconFromModuleType('additional_target', true)}
+
+
+ {hasFeatureFlag(FEATURE_FLAG_CHANGE_MODULES_VARIANTS) &&
+ getPlanStatus() === 'draft' && (
+
+ )}
+
+ <>
+
+
+ {t('__FORM_OPTIONAL_LABEL')}
+
+
+ {t('__PLAN_PAGE_MODULE_ADDITIONAL_TARGET_TEXTAREA_DESCRIPTION')}
+
+